/*
 * Section/component CSS ported from design/site/site.css - the responsive
 * overrides and hover/focus rules that native block markup + theme.json alone
 * cannot reach. Populated pattern-by-pattern as each section is built
 * (CLAUDE.md section 10 step 9). Placeholder until then: only the
 * header/skip-link rules needed by parts/header.html (step 3) are in yet.
 */

.phc-skip {
	display: none !important;
}

.phc-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(251, 250, 246, .88);
	backdrop-filter: saturate(160%) blur(16px);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	transition: background var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
	            box-shadow var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
	            border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-header.is-scrolled {
	background: rgba(251, 250, 246, .96);
	box-shadow: var(--wp--custom--shadow-sm);
	border-bottom-color: rgba(15, 34, 74, 0.08);
}

.phc-header-inner {
	max-width: var(--wp--custom--layout-max);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--4) var(--wp--custom--layout-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
	transition: padding var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-header.is-scrolled .phc-header-inner {
	padding-top: 10px;
	padding-bottom: 10px;
}

.phc-header-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.phc-header-logo img {
	height: 70px;
	width: auto;
	object-fit: contain;
	display: block;
	transition: height var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-header.is-scrolled .phc-header-logo img {
	height: 75px;
}

@media (max-width: 768px) {
	.phc-header-logo img {
		height: 54px;
	}
}

.phc-nav-links {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 32px);
}

.phc-nav-links a {
	color: var(--wp--preset--color--slate);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-medium);
	white-space: nowrap;
	padding: 10px 0;
	border-bottom: 1px solid transparent;
	transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-nav-links a:hover,
.phc-nav-links a[aria-current="page"] {
	color: var(--wp--preset--color--ink);
}

.phc-nav-links a[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--ink);
}

.phc-header-actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	flex-shrink: 0;
}

.phc-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius-pill);
	border: 1px solid var(--wp--preset--color--hairline-strong);
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
}

/* ==========================================================================
   Services submenu.

   TODO: not specified in design. CLAUDE.md §6 defines the nav as five flat
   items and no dropdown appears in any approved screenshot -- this was added
   on request once the six care-line pages existed. Everything below is built
   from vocabulary the design system already owns (cream card surface, 1px
   hairline, radius-md, the existing 240ms/140ms motion tokens) rather than
   inventing a new look, but it still needs sign-off.

   The care lines are read from the phc_service CPT in patterns/header.php, so
   a service the client adds appears here automatically.

   Shape is a disclosure, not a menubar: "Services" stays a real link to
   /services/ and a separate adjacent button owns the panel. One element
   cannot honestly be both a link and a toggle.
   ========================================================================== */

.phc-nav-item-has-children {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 12px 0;
	margin: -12px 0;
}

.phc-nav-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--slate);
	cursor: pointer;
	border-radius: var(--wp--custom--radius-xs);
}

.phc-nav-submenu-chevron {
	display: inline-flex;
	font-size: 11px;
	line-height: 1;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-nav-item-has-children:hover .phc-nav-submenu-chevron,
.phc-nav-item-has-children:focus-within .phc-nav-submenu-chevron,
.phc-nav-item-has-children.is-open .phc-nav-submenu-chevron,
.phc-nav-submenu-toggle[aria-expanded="true"] .phc-nav-submenu-chevron {
	transform: rotate(180deg);
}

.phc-nav-item-has-children:hover > a,
.phc-nav-item-has-children:focus-within > a,
.phc-nav-submenu-toggle[aria-expanded="true"] {
	color: var(--wp--preset--color--ink);
}

/* Panel. Pure CSS transition with 0ms lag, smooth opacity and slide */
.phc-nav-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	min-width: 260px;
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--2);
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-md);
	box-shadow: var(--wp--custom--shadow-lg);
	margin-top: 4px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
	            transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
	            visibility var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

/* Generous invisible bridge ensuring seamless pointer travel across the gap */
.phc-nav-submenu::before {
	content: "";
	position: absolute;
	top: -24px;
	left: -20px;
	right: -20px;
	height: 28px;
	background: transparent;
	display: block;
	pointer-events: auto;
}

/* Open states: pure CSS :hover, :focus-within, and JS .is-open / aria-expanded */
.phc-nav-item-has-children:hover .phc-nav-submenu,
.phc-nav-item-has-children:focus-within .phc-nav-submenu,
.phc-nav-item-has-children.is-open .phc-nav-submenu,
.phc-nav-submenu-toggle[aria-expanded="true"] ~ .phc-nav-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.phc-nav-submenu a {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--radius-xs);
	border-bottom: 0;
	color: var(--wp--custom--text-primary);
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: var(--wp--custom--weight-regular);
	white-space: nowrap;
	text-decoration: none;
	transition: background var(--wp--custom--duration-fast) var(--wp--custom--ease-out), color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-nav-submenu a:hover {
	background: var(--wp--custom--surface-tint);
	color: var(--wp--custom--text-primary);
}

/* "All services" closes the list -- separated by the same hairline that does
   all the separating elsewhere in this design. */
.phc-nav-submenu-all {
	margin-top: var(--wp--preset--spacing--2);
	padding-top: var(--wp--preset--spacing--2) !important;
	border-top: 1px solid var(--wp--custom--border-subtle);
	border-radius: 0 !important;
	font-weight: var(--wp--custom--weight-medium) !important;
}

/* Drawer: care lines listed inline and indented under Services, with the
   hairline rail marking them as children. */
.phc-nav-drawer-sub {
	display: flex;
	flex-direction: column;
	margin: 0 0 0 var(--wp--preset--spacing--4);
	padding-left: var(--wp--preset--spacing--4);
	border-left: 1px solid var(--wp--custom--border-subtle);
}

.phc-nav-drawer-sub a {
	min-height: 44px;
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: var(--wp--custom--weight-regular);
	color: var(--wp--custom--text-secondary);
}

.phc-nav-drawer-sub a:last-child {
	border-bottom: 0;
}

/* No mobile rule needed here: `.phc-nav-links { display: none !important }` at
   960px already takes the whole desktop bar -- and therefore this submenu --
   out of play. The drawer list below is the mobile equivalent. */

.phc-nav-drawer {
	display: none;
	padding: var(--wp--preset--spacing--5) var(--wp--custom--layout-gutter) var(--wp--preset--spacing--8);
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
	background: var(--wp--preset--color--page-cream);
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.phc-nav-drawer.is-open {
	display: flex;
}

.phc-nav-drawer a {
	display: flex;
	align-items: center;
	min-height: 48px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: var(--wp--custom--weight-medium);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.phc-nav-drawer-cta {
	margin-top: var(--wp--preset--spacing--5);
}

.phc-announcement {
	background: var(--wp--preset--color--navy-dark);
	color: var(--wp--preset--color--page-cream);
	padding: 8px var(--wp--custom--layout-gutter);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--wp--preset--font-size--body-s);
	min-height: 42px;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.phc-announcement-slider {
	position: relative;
	width: 100%;
	max-width: var(--wp--custom--layout-max);
	margin: 0 auto;
	height: 26px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

@media (max-width: 600px) {
	.phc-announcement {
		min-height: 52px;
		padding: 6px var(--wp--custom--layout-gutter);
	}
	.phc-announcement-slider {
		height: 40px;
	}
}

.phc-announcement-item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--3);
	flex-wrap: wrap;
	opacity: 0;
	transform: translateY(100%);
	pointer-events: none;
	visibility: hidden;
	transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms ease, visibility 550ms ease;
}

.phc-announcement-item.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	visibility: visible;
	z-index: 2;
}

.phc-announcement-item.is-exiting {
	opacity: 0;
	transform: translateY(-100%);
	pointer-events: none;
	visibility: hidden;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.phc-announcement-item {
		transition: opacity 200ms ease !important;
		transform: none !important;
	}
	.phc-announcement-item.is-exiting {
		transform: none !important;
	}
}

.phc-announcement-text {
	color: var(--wp--preset--color--page-cream);
	font-size: 13px;
	font-weight: var(--wp--custom--weight-regular);
	line-height: 1.3;
}

.phc-announcement-link {
	color: var(--wp--custom--phc-sky-300, #78B5EC);
	text-decoration: none;
	border-bottom: 1px solid rgba(120, 181, 236, 0.4);
	padding-bottom: 1px;
	font-size: 13px;
	font-weight: var(--wp--custom--weight-medium);
	white-space: nowrap;
	transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-announcement-link:hover {
	color: var(--wp--preset--color--page-cream);
	border-color: var(--wp--preset--color--page-cream);
}

@media (max-width: 960px) {
	.phc-nav-links {
		display: none !important;
	}

	.phc-nav-toggle {
		display: inline-flex !important;
	}

	.phc-header-btn-portal {
		display: none;
	}
}

@media (max-width: 600px) {
	.phc-header-btn-schedule {
		display: none;
	}
}

/* The footer sits on the page ground rather than a navy band so the
   full-colour brand mark reads as drawn. The closing-cta section above it is
   navy, which still gives the page a dark anchor before this strip; the top
   hairline is what separates the two on pages that end on a light section. */
.phc-footer {
	background: var(--wp--preset--color--page-cream);
	color: var(--wp--custom--text-primary);
	padding: var(--wp--custom--section-y-tight) var(--wp--custom--layout-gutter) var(--wp--preset--spacing--10);
	border-top: 1px solid var(--wp--custom--border-subtle);
}

.phc-footer-inner {
	max-width: var(--wp--custom--layout-max);
	margin: 0 auto;
}

.phc-footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--12);
	padding-bottom: var(--wp--preset--spacing--16);
}

.phc-footer-brand {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	min-width: 200px;
}

/* Asset is pre-trimmed to its ink bounds (413x144) and takes no reversing
   filter -- it is full-colour on a light ground, which is what it was drawn
   for. Nothing sits behind it. */
.phc-footer-brand img {
	display: block;
	align-self: flex-start;
	width: 210px;
	height: auto;
}

.phc-footer-brand p {
	margin: 0;
	max-width: 32ch;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
}

.phc-footer-col {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

/* The label reads as quiet through case, tracking and weight rather than a
   lighter colour -- text-muted is the lightest tone that still clears the 4.5:1
   floor at this size. */
.phc-footer-col-title {
	font-size: var(--wp--preset--font-size--overline);
	letter-spacing: var(--wp--custom--type-overline-track);
	text-transform: uppercase;
	font-weight: var(--wp--custom--weight-semibold);
	color: var(--wp--custom--text-muted);
}

.phc-footer-col a {
	color: var(--wp--custom--phc-slate-700);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--body-s);
}

.phc-footer-col a:hover {
	color: var(--wp--custom--text-link);
}

.phc-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--6);
	justify-content: space-between;
	align-items: center;
	padding-top: var(--wp--preset--spacing--8);
	border-top: 1px solid var(--wp--custom--border-subtle);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
}

.phc-footer-social {
	display: flex;
	gap: var(--wp--preset--spacing--5);
}

.phc-footer-social a {
	color: var(--wp--custom--phc-slate-700);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--custom--border-strong);
	padding-bottom: 2px;
}

.phc-footer-social a:hover {
	color: var(--wp--custom--text-link);
	border-bottom-color: var(--wp--custom--text-link);
}

/* ==========================================================================
   Button — ported from _ds_bundle.js components/actions/Button.jsx.
   Used by every pattern that needs a call to action; do not re-invent
   inline per pattern.
   ========================================================================== */

.phc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border-style: solid;
	border-width: 1px;
	transition: var(--wp--custom--transition-control);
}

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

.phc-btn-icon {
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-btn:hover .phc-btn-icon {
	transform: translateX(3px);
}

.phc-btn-lg { height: 54px; padding: 0 30px; font-size: var(--wp--preset--font-size--body-m); }
.phc-btn-md { height: 44px; padding: 0 22px; font-size: var(--wp--preset--font-size--label); }
.phc-btn-sm { height: 36px; padding: 0 16px; font-size: var(--wp--preset--font-size--label); }

.phc-btn-primary { background: var(--wp--custom--action-primary-bg); color: var(--wp--custom--action-primary-fg); border-color: var(--wp--custom--action-primary-bg); }
.phc-btn-primary:hover { background: var(--wp--custom--action-primary-bg-hover); border-color: var(--wp--custom--action-primary-bg-hover); color: var(--wp--custom--action-primary-fg); }

.phc-btn-secondary { background: var(--wp--custom--action-secondary-bg); color: var(--wp--custom--action-secondary-fg); border-color: var(--wp--custom--action-secondary-border); }
.phc-btn-secondary:hover { background: var(--wp--custom--action-secondary-bg-hover); border-color: var(--wp--custom--phc-ink); color: var(--wp--custom--action-secondary-fg); }

.phc-btn-accent { background: var(--wp--custom--action-accent-bg); color: var(--wp--custom--action-accent-fg); border-color: var(--wp--custom--action-accent-bg); }
.phc-btn-accent:hover { background: var(--wp--custom--action-accent-bg-hover); border-color: var(--wp--custom--action-accent-bg-hover); color: var(--wp--custom--action-accent-fg); }

.phc-btn-inverse { background: var(--wp--custom--action-inverse-bg); color: var(--wp--custom--action-inverse-fg); border-color: var(--wp--custom--action-inverse-bg); }
.phc-btn-inverse:hover { background: var(--wp--custom--phc-white); border-color: var(--wp--custom--phc-white); color: var(--wp--custom--action-inverse-fg); }

.phc-btn-inverse-outline { background: transparent; color: var(--wp--custom--text-inverse); border-color: rgba(251, 250, 246, .42); }
.phc-btn-inverse-outline:hover { background: rgba(251, 250, 246, .14); border-color: var(--wp--custom--text-inverse); color: var(--wp--custom--text-inverse); }

.phc-btn-ghost { background: transparent; color: var(--wp--custom--text-primary); border-color: transparent; }
.phc-btn-ghost:hover { background: var(--wp--custom--surface-tint); color: var(--wp--custom--text-primary); }

.phc-btn[disabled] {
	cursor: not-allowed;
	opacity: .4;
	transform: none !important;
}

/* ==========================================================================
   Tag — ported from _ds_bundle.js components/feedback/Tag.jsx.
   ========================================================================== */

.phc-tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	flex-shrink: 0;
	width: fit-content;
	margin: 0;
	gap: var(--wp--preset--spacing--2);
	border-radius: var(--wp--custom--radius-pill);
	padding: 6px 12px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: var(--wp--custom--weight-semibold);
	letter-spacing: var(--wp--custom--type-overline-track);
	text-transform: uppercase;
	line-height: 1;
}

.phc-tag-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.phc-tag-neutral { background: var(--wp--custom--surface-tint); color: var(--wp--custom--text-secondary); }
.phc-tag-navy { background: var(--wp--preset--color--care-primary); color: var(--wp--preset--color--navy); }
.phc-tag-sky { background: var(--wp--preset--color--care-sexual-health); color: var(--wp--custom--phc-sky-800); }
.phc-tag-coral { background: var(--wp--preset--color--care-hiv); color: var(--wp--custom--phc-coral-700); }
.phc-tag-moss { background: var(--wp--preset--color--care-weight); color: var(--wp--custom--phc-moss-600); }
.phc-tag-amber { background: var(--wp--custom--phc-amber-100); color: var(--wp--custom--phc-amber-700); }
.phc-tag-plum { background: var(--wp--preset--color--care-hormone); color: var(--wp--custom--phc-plum-600); }
.phc-tag-rose { background: var(--wp--preset--color--care-affirming); color: var(--wp--custom--phc-rose-700); }
.phc-tag-inverse { background: rgba(251, 250, 246, .12); color: var(--wp--custom--text-inverse); }

/* ==========================================================================
   Reveal — scroll-triggered entrance. Paired with assets/js/phc.js
   initScrollReveal(), which toggles .is-revealed on [data-phc-reveal].
   ========================================================================== */

.phc-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--wp--custom--duration-reveal) var(--wp--custom--ease-entrance), transform var(--wp--custom--duration-reveal) var(--wp--custom--ease-entrance);
}

.phc-reveal.is-revealed,
body.elementor-editor-active .phc-reveal,
body.elementor-editor-preview .phc-reveal,
.elementor-editor-active .phc-reveal,
.elementor-editor-preview .phc-reveal,
.elementor-preview-mode .phc-reveal,
.elementor-editor-active [data-phc-reveal] {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

/* ==========================================================================
   Hero — ported from design/site/sections/Hero.jsx.
   ========================================================================== */

.phc-hero {
	position: relative;
	min-height: clamp(560px, 80vh, 880px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--wp--custom--surface-inverse);
	padding: var(--wp--custom--section-y-tight) var(--wp--custom--layout-gutter) var(--wp--preset--spacing--16);
}

.phc-hero-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 72% 45%;
	margin: 0;
}

/* Step 10: hero photo is a core/image block so it's swappable from the
   editor -- the block puts .phc-hero-media on the outer <figure>, so the
   sizing/position rule above still applies to the figure, and this rule
   pulls the fit/position onto the actual <img> inside it. */
.phc-hero-media.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 72% 45%;
}

.phc-hero-wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(8, 11, 36, .78) 0%, rgba(8, 11, 36, .44) 44%, rgba(8, 11, 36, .06) 80%);
}

.phc-hero-scrim {
	position: absolute;
	inset: 0;
	background: var(--wp--custom--scrim-bottom);
}

.phc-hero-inner {
	position: relative;
	width: 100%;
	max-width: var(--wp--custom--layout-max);
	margin: 0 auto;
}

/* Step 10: Hero CTAs are core/button blocks so labels + URLs are editable --
   see the .phc-location-card-actions rule for the same "class on the block,
   style the child <a>" convention this reuses. */
.phc-hero-actions .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 54px;
	padding: 0 30px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-style: solid;
	border-width: 1px;
	transition: var(--wp--custom--transition-control);
}

.phc-hero-actions .wp-block-button > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
}

.phc-hero-actions .wp-block-button.phc-btn-inverse > a {
	background: var(--wp--custom--action-inverse-bg);
	color: var(--wp--custom--action-inverse-fg);
	border-color: var(--wp--custom--action-inverse-bg);
}

.phc-hero-actions .wp-block-button.phc-btn-inverse > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-hero-actions .wp-block-button.phc-btn-inverse > a:hover {
	background: var(--wp--custom--phc-white);
	border-color: var(--wp--custom--phc-white);
	color: var(--wp--custom--action-inverse-fg);
}

.phc-hero-actions .wp-block-button.phc-btn-inverse > a:hover::after {
	transform: translateX(2px);
}

.phc-hero-actions .wp-block-button.phc-btn-inverse-outline > a {
	background: transparent;
	color: var(--wp--custom--text-inverse);
	border-color: rgba(251, 250, 246, .42);
}

.phc-hero-actions .wp-block-button.phc-btn-inverse-outline > a:hover {
	background: rgba(251, 250, 246, .14);
	border-color: var(--wp--custom--text-inverse);
	color: var(--wp--custom--text-inverse);
}

.phc-hero-title {
	margin: var(--wp--preset--spacing--8) 0 0;
	max-width: 11ch;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--display-xl);
	line-height: var(--wp--custom--type-display-xl-line);
	letter-spacing: var(--wp--custom--type-display-xl-track);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-inverse);
	text-wrap: balance;
}

.phc-hero-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--12);
}

.phc-hero-copy {
	margin: 0;
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: var(--wp--custom--type-body-l-line);
	color: rgba(251, 250, 246, .82);
	text-wrap: pretty;
}

.phc-hero-copy strong {
	color: var(--wp--custom--text-inverse);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

.phc-stats-section {
	background: var(--wp--custom--surface-page);
	padding: var(--wp--preset--spacing--16) var(--wp--custom--layout-gutter);
}

.phc-stats {
	max-width: var(--wp--custom--layout-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: var(--wp--custom--grid-gap);
}

.phc-stat {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.phc-stat-value {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--wp--custom--type-display-m-line);
	letter-spacing: var(--wp--custom--type-display-m-track);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-primary);
}

.phc-stat-label {
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
	max-width: 24ch;
}

@media (max-width: 680px) {
	.phc-hero {
		min-height: auto;
		padding-top: var(--wp--custom--section-y);
	}

	.phc-hero-foot {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   DPC Price Ribbon (Homepage Strip)
   ========================================================================== */

.phc-dpc-ribbon-wrap {
	background: var(--wp--custom--surface-page);
	padding: 0 var(--wp--custom--layout-gutter) var(--wp--preset--spacing--12);
	max-width: var(--wp--custom--layout-max);
	margin: 0 auto;
}

.phc-dpc-ribbon {
	background: var(--wp--custom--surface-tint);
	border: 1px solid rgba(15, 34, 74, 0.08);
	border-radius: var(--wp--custom--radius-lg);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
	flex-wrap: wrap;
}

.phc-dpc-ribbon-badge {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.phc-dpc-ribbon-tiers {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--6);
	flex-wrap: wrap;
}

.phc-dpc-tier-item {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--2);
}

.phc-dpc-tier-label {
	font-size: var(--wp--preset--font-size--body-xs);
	color: var(--wp--custom--text-secondary);
	font-weight: 500;
}

.phc-dpc-tier-price {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: 600;
	color: var(--wp--custom--text-primary);
}

.phc-dpc-tier-sep {
	width: 1px;
	height: 18px;
	background: rgba(15, 34, 74, 0.15);
}

.phc-dpc-ribbon-cta {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.phc-dpc-ribbon-disclaimer {
	font-size: 11px;
	color: var(--wp--custom--text-secondary);
	margin-top: 6px;
	text-align: right;
	opacity: 0.8;
}

@media (max-width: 768px) {
	.phc-dpc-ribbon {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--4);
	}
	.phc-dpc-ribbon-tiers {
		width: 100%;
		justify-content: space-between;
	}
	.phc-dpc-tier-sep {
		display: none;
	}
	.phc-dpc-ribbon-disclaimer {
		text-align: left;
	}
}

/* ==========================================================================
   Card - ported from components/content/Card.jsx.
   ========================================================================== */

.phc-card {
	display: block;
	background: var(--wp--custom--surface-card);
	color: var(--wp--custom--text-primary);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-lg);
	padding: var(--wp--preset--spacing--8);
	text-decoration: none;
	transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration-base) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

.phc-card-interactive:hover,
a.phc-card:hover,
.phc-spec-card:hover,
.phc-appt-card:hover,
.phc-booking-card:hover,
.phc-prevention-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow-md);
	border-color: var(--wp--custom--border-strong);
}

.phc-card-tint { background: var(--wp--custom--surface-tint); }
.phc-card-sky { background: var(--wp--custom--surface-sky); }
.phc-card-inverse {
	background: var(--wp--custom--surface-inverse-soft);
	color: var(--wp--custom--text-inverse);
	border-color: var(--wp--custom--border-inverse);
}

/* ==========================================================================
   SectionHeader - ported from components/content/SectionHeader.jsx.
   ========================================================================== */

.phc-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--8);
	margin-bottom: var(--wp--preset--spacing--10);
}

.phc-section-header.is-centered {
	justify-content: center;
	text-align: center;
}

.phc-section-header-main {
	max-width: min(100%, 720px);
	flex: 1 1 520px;
}

.phc-section-header.is-centered .phc-section-header-main {
	max-width: min(100%, 760px);
}

.phc-section-header-eyebrow {
	font-size: var(--wp--preset--font-size--overline);
	letter-spacing: var(--wp--custom--type-overline-track);
	text-transform: uppercase;
	font-weight: var(--wp--custom--weight-semibold);
	color: var(--wp--custom--text-muted);
	margin: 0 0 var(--wp--preset--spacing--3);
}

.phc-section-header-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--wp--custom--type-display-m-line);
	letter-spacing: var(--wp--custom--type-display-m-track);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-primary);
	text-wrap: balance;
	max-width: 22ch;
}

.phc-section-header-aside {
	flex: 0 1 380px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--4);
}

.phc-section-header-aside p {
	margin: 0;
}

.phc-section-header.is-centered .phc-section-header-aside {
	align-items: center;
}

.phc-section-header-desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: var(--wp--custom--type-body-l-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

/* Step 10: SectionHeader's action button (e.g. "See all partners" in
   patterns/partners.php) is a core/button block so its label + URL are
   editable -- same convention as .phc-services-head-aside above, sized to
   .phc-btn-md. */
.phc-section-header-aside .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 44px;
	padding: 0 22px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: var(--wp--custom--transition-control);
}

.phc-section-header-aside .wp-block-button > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-section-header-aside .wp-block-button > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
}

.phc-section-header-aside .wp-block-button > a:hover::after {
	transform: translateX(2px);
}

.phc-section-header-aside .wp-block-button.phc-btn-secondary > a {
	background: var(--wp--custom--action-secondary-bg);
	color: var(--wp--custom--action-secondary-fg);
	border-color: var(--wp--custom--action-secondary-border);
}

.phc-section-header-aside .wp-block-button.phc-btn-secondary > a:hover {
	background: var(--wp--custom--action-secondary-bg-hover);
	border-color: var(--wp--custom--phc-ink);
	color: var(--wp--custom--action-secondary-fg);
}

.phc-section-header.is-inverse .phc-section-header-eyebrow,
.phc-section-header.is-inverse .phc-section-header-desc {
	color: var(--wp--custom--text-inverse-muted);
}

.phc-section-header.is-inverse .phc-section-header-title {
	color: var(--wp--custom--text-inverse);
}

/* ==========================================================================
   MediaFrame - ported from components/content/MediaFrame.jsx.
   ========================================================================== */

.phc-media-frame {
	margin: 0;
}

.phc-media-frame-inner {
	position: relative;
	border-radius: var(--wp--custom--radius-media);
	overflow: hidden;
	background: var(--wp--custom--surface-tint-strong);
	display: flex;
	align-items: center;
	justify-content: center;
}

.phc-media-frame-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 800ms var(--wp--custom--ease-out);
}

/* Step 10: team/careers/partner photos inside a MediaFrame became core/image
   blocks so they're swappable from the editor -- the block wraps the <img>
   in a <figure class="wp-block-image">, which needs to fill the frame the
   same way the original bare <img> did and loses the browser default figure
   margin. .phc-media-frame-inner img above still reaches the nested <img>
   unaffected by the extra wrapper -- same technique as .phc-hero-media.wp-block-image img. */
.phc-media-frame-inner .wp-block-image {
	margin: 0;
	width: 100%;
	height: 100%;
}

.phc-care-row:hover .phc-media-frame-inner img,
.phc-media-frame:hover .phc-media-frame-inner img {
	transform: scale(1.03);
}

.phc-service-card:hover .phc-media-frame-inner img,
.phc-service-card:hover img {
	transform: scale(1.09);
}

.phc-media-frame-no-zoom:hover .phc-media-frame-inner img {
	transform: none;
}

.phc-media-frame-inner img.is-zoomed {
	transform: scale(1.09);
}

.phc-media-frame-caption {
	margin-top: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
}

.phc-media-frame-round .phc-media-frame-inner {
	border-radius: 50%;
}

/* ==========================================================================
   ServiceCard - ported from components/content/ServiceCard.jsx.
   ========================================================================== */

.phc-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-lg);
	padding: var(--wp--preset--spacing--5);
	text-decoration: none;
	color: var(--wp--custom--text-primary);
	height: 100%;
	transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration-base) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

.phc-service-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow-md);
	border-color: var(--wp--custom--border-strong);
}

.phc-service-card:hover .phc-media-frame-inner img,
.phc-service-card:hover img {
	transform: scale(1.09);
}

/* Step 10: ServiceCard was a single <a class="phc-service-card"> wrapping the
   whole card in the source markup. core/group has no "a" tagName option and
   there's no native "linked group" block, so the card became a plain <div>
   with the click target moved onto the photo (core/image's native "custom
   URL" link -- see patterns/services.php) and stretched across the full
   card here, reproducing "click anywhere on the card" with one real anchor
   and no nested links. .phc-service-card needs position:relative (added
   above) as the containing block for the stretched overlay. */
.phc-service-card .wp-block-image,
.phc-service-card .wp-block-image a {
	margin: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.phc-service-card .wp-block-image a {
	position: relative;
}

.phc-service-card .wp-block-image a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.phc-service-card:focus-within {
	box-shadow: var(--wp--custom--focus-ring);
}

.phc-service-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	padding: 0 var(--wp--preset--spacing--3) var(--wp--preset--spacing--3);
}

.phc-service-card-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: var(--wp--custom--type-heading-m-line);
	letter-spacing: var(--wp--custom--type-heading-m-track);
	font-weight: var(--wp--custom--weight-medium);
	transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

.phc-service-card:hover .phc-service-card-title {
	transform: translateX(3px);
}

.phc-service-card-desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-service-card-cta {
	margin-top: var(--wp--preset--spacing--4);
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	align-self: flex-start;
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-service-card:hover .phc-service-card-cta {
	border-bottom-color: var(--wp--custom--text-primary);
}

.phc-service-card-cta span {
	display: inline-block;
	transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

.phc-service-card:hover .phc-service-card-cta span {
	transform: translateX(3px);
}

/* ==========================================================================
   LocationCard - ported from components/content/LocationCard.jsx.
   ========================================================================== */

.phc-location-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-lg);
	padding: var(--wp--preset--spacing--8);
	height: 100%;
	transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration-base) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

.phc-location-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow-md);
	border-color: var(--wp--custom--border-strong);
}

.phc-location-card-inverse {
	background: var(--wp--custom--surface-inverse-soft);
	border-color: var(--wp--custom--border-inverse);
}

.phc-location-card-name {
	margin: var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: var(--wp--custom--type-heading-l-line);
	letter-spacing: var(--wp--custom--type-heading-l-track);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-primary);
}

.phc-location-card-inverse .phc-location-card-name {
	color: var(--wp--custom--text-inverse);
}

.phc-location-card-address {
	margin: 0 0 var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--body-m);
	color: var(--wp--custom--text-secondary);
	max-width: 30ch;
}

.phc-location-card-inverse .phc-location-card-address {
	color: var(--wp--custom--text-inverse-muted);
}

.phc-location-card-facts {
	margin-top: auto;
}

.phc-location-card-row {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--4) 0;
	border-top: 1px solid var(--wp--custom--border-subtle);
	font-size: var(--wp--preset--font-size--body-s);
}

.phc-location-card-inverse .phc-location-card-row {
	border-top-color: var(--wp--custom--border-inverse);
}

.phc-location-card-row > :first-child {
	color: var(--wp--custom--text-muted);
}

.phc-location-card-inverse .phc-location-card-row > :first-child {
	color: var(--wp--custom--text-inverse-muted);
}

.phc-location-card-row > :last-child {
	text-align: right;
	color: var(--wp--custom--text-primary);
	font-family: var(--wp--preset--font-family--mono);
}

.phc-location-card-inverse .phc-location-card-row > :last-child {
	color: var(--wp--custom--text-inverse);
}

.phc-location-card-actions {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	margin-top: var(--wp--preset--spacing--6);
	flex-wrap: wrap;
}

/* core/button wraps its <a> in a .wp-block-button div that carries our
   className -- reuse the .phc-btn look on that child <a> rather than the
   .phc-btn class itself, which core/button has no attribute to apply there. */
.phc-location-card-actions .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 44px;
	padding: 0 22px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: var(--wp--custom--transition-control);
}

.phc-location-card-actions .wp-block-button > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
}

.phc-location-card-actions .wp-block-button.phc-btn-primary > a {
	background: var(--wp--custom--action-primary-bg);
	color: var(--wp--custom--action-primary-fg);
	border-color: var(--wp--custom--action-primary-bg);
}

.phc-location-card-actions .wp-block-button.phc-btn-primary > a:hover {
	background: var(--wp--custom--action-primary-bg-hover);
	border-color: var(--wp--custom--action-primary-bg-hover);
	color: var(--wp--custom--action-primary-fg);
}

.phc-location-card-actions .wp-block-button.phc-btn-secondary > a {
	background: var(--wp--custom--action-secondary-bg);
	color: var(--wp--custom--action-secondary-fg);
	border-color: var(--wp--custom--action-secondary-border);
}

.phc-location-card-actions .wp-block-button.phc-btn-secondary > a:hover {
	background: var(--wp--custom--action-secondary-bg-hover);
	border-color: var(--wp--custom--phc-ink);
	color: var(--wp--custom--action-secondary-fg);
}

/* ==========================================================================
   PartnerCard - ported from components/content/PartnerCard.jsx.
   ========================================================================== */

.phc-partner-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-lg);
	padding: var(--wp--preset--spacing--8);
	height: 100%;
	transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration-base) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

.phc-partner-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow-md);
	border-color: var(--wp--custom--border-strong);
}

.phc-partner-card-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-s);
	letter-spacing: var(--wp--custom--type-heading-s-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-partner-card-desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

.phc-partner-card-services {
	margin: var(--wp--preset--spacing--2) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.phc-partner-card-services li {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-secondary);
}

.phc-partner-card-services li::before {
	content: "\2014";
	color: var(--wp--custom--phc-sky-500);
}

.phc-partner-card-cta {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--6);
}

/* Step 10: "Visit partner" is a wp:paragraph wrapping the phc-link-arrow
   (per the task's own phc-link-arrow conversion rule), so zero the
   paragraph's default browser margin -- the <a> was a direct flex child in
   the source with no wrapping element. */
.phc-partner-card-cta p {
	margin: 0;
}

/* ==========================================================================
   EventCard - ported from components/content/EventCard.jsx.
   ========================================================================== */

.phc-event-card {
	display: grid;
	grid-template-columns: minmax(96px, 140px) 1fr;
	gap: var(--wp--preset--spacing--8);
	align-items: start;
	padding: var(--wp--preset--spacing--8) 0;
	border-top: 1px solid var(--wp--custom--border-subtle);
}

.phc-event-card-date {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-primary);
}

.phc-event-card-time {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
	margin-top: 4px;
}

.phc-event-card-title {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: var(--wp--custom--type-heading-s-line);
	letter-spacing: var(--wp--custom--type-heading-s-track);
	font-weight: var(--wp--custom--weight-medium);
	max-width: 36ch;
}

.phc-event-card-location {
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
}

.phc-event-card-desc {
	margin: var(--wp--preset--spacing--4) 0 0;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-secondary);
	max-width: 56ch;
}

.phc-event-card-cta {
	margin-top: var(--wp--preset--spacing--5);
}

.phc-event-card-cta .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	color: var(--wp--custom--text-primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-event-card-cta .wp-block-button > a::after {
	content: "\2192";
}

.phc-event-card-cta .wp-block-button > a:hover {
	color: var(--wp--custom--text-primary);
	border-bottom-color: var(--wp--custom--text-primary);
}

.phc-event-card-desc p {
	margin: var(--wp--preset--spacing--4) 0 0;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-secondary);
	max-width: 56ch;
}

/* ==========================================================================
   Quote - ported from components/content/Quote.jsx.
   ========================================================================== */

.phc-quote {
	margin: 0;
}

.phc-quote blockquote {
	margin: 0;
}

/* Step 10: core/quote wraps its text in a <p> -- zero that child's default
   browser margin so the blockquote's own margin:0 isn't defeated by margin
   collapsing through it (the source markup had no inner <p> at all). */
.phc-quote blockquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: var(--wp--custom--weight-medium);
	font-size: var(--wp--preset--font-size--quote);
	line-height: var(--wp--custom--type-quote-line);
	letter-spacing: var(--wp--custom--type-quote-track);
	color: var(--wp--custom--text-primary);
	text-wrap: balance;
	max-width: 26ch;
}

/* ==========================================================================
   Accordion - ported from components/feedback/Accordion.jsx.
   ========================================================================== */

.phc-accordion {
	border-top: 1px solid var(--wp--custom--border-subtle);
}

.phc-accordion-item {
	border-bottom: 1px solid var(--wp--custom--border-subtle);
}

.phc-accordion-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	padding: var(--wp--preset--spacing--6) 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-heading-s-track);
	color: var(--wp--custom--text-primary);
}

.phc-accordion-icon {
	font-size: 22px;
	line-height: 1;
	transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
	color: var(--wp--custom--text-muted);
	flex-shrink: 0;
}

.phc-accordion-trigger[aria-expanded="true"] .phc-accordion-icon {
	transform: rotate(45deg);
}

.phc-accordion-panel-outer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

.phc-accordion-trigger[aria-expanded="true"] + .phc-accordion-panel-outer {
	grid-template-rows: 1fr;
}

.phc-accordion-panel {
	overflow: hidden;
}

.phc-accordion-panel p {
	margin: 0;
	padding-bottom: var(--wp--preset--spacing--6);
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-secondary);
}

/* ==========================================================================
   Select - ported from components/forms/Select.jsx.
   ========================================================================== */

.phc-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.phc-field-label {
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-select-wrap {
	position: relative;
}

.phc-select {
	width: 100%;
	height: 52px;
	padding: 0 var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--5);
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-m);
	color: var(--wp--custom--text-primary);
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-pill);
	outline: none;
	cursor: pointer;
	transition: var(--wp--custom--transition-control);
}

.phc-select:focus {
	border-color: var(--wp--custom--border-focus);
	box-shadow: 0 0 0 3px var(--wp--custom--phc-sky-200);
}

.phc-select-chevron {
	position: absolute;
	right: var(--wp--preset--spacing--5);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--wp--custom--text-muted);
	font-size: 12px;
}

/* ==========================================================================
   Section — shared layout wrapper (ported from kit.jsx Section()).
   ========================================================================== */

.phc-section {
	padding: var(--wp--custom--section-y) var(--wp--custom--layout-gutter);
}

.phc-section-tight { padding-top: var(--wp--custom--section-y-tight); padding-bottom: var(--wp--custom--section-y-tight); }
.phc-section-page { background: var(--wp--custom--surface-page); color: var(--wp--custom--text-primary); }
.phc-section-tint { background: var(--wp--custom--surface-tint); color: var(--wp--custom--text-primary); }
.phc-section-sky { background: var(--wp--custom--surface-sky); color: var(--wp--custom--text-primary); }
.phc-section-inverse { background: var(--wp--custom--surface-inverse); color: var(--wp--custom--text-inverse); }
.phc-section-card { background: var(--wp--custom--surface-card); color: var(--wp--custom--text-primary); }

.phc-section-inner {
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
}

.phc-grid {
	display: grid;
	gap: var(--wp--custom--grid-gap);
}

.phc-grid-min-260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.phc-grid-min-300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.phc-grid-min-340 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* ==========================================================================
   BookingStrip — ported from design/site/sections/BookingStrip.jsx.
   ========================================================================== */

.phc-booking-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	height: 100%;
	border-color: var(--wp--custom--phc-ink);
}

.phc-booking-card-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: var(--wp--custom--type-heading-m-line);
	letter-spacing: var(--wp--custom--type-heading-m-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-booking-card-body {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

/* Card 1 Clinics List in 3-Card section */
.phc-card-clinics-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: var(--wp--preset--spacing--2) 0;
}

.phc-card-clinic-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: var(--wp--custom--surface-page);
	border: 1px solid rgba(15, 34, 74, 0.08);
	border-radius: var(--wp--custom--radius-md);
	gap: 12px;
}

.phc-card-clinic-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.phc-card-clinic-info strong {
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-primary);
	font-weight: 600;
}

.phc-card-clinic-phone {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-xs);
	color: var(--wp--custom--text-secondary);
	text-decoration: none;
}

.phc-card-clinic-phone:hover {
	color: var(--wp--custom--action-primary-bg);
	text-decoration: underline;
}

.phc-card-clinic-book {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 14px;
	font-size: var(--wp--preset--font-size--body-xs);
	font-weight: 600;
	color: #ffffff;
	background: var(--wp--custom--action-primary-bg);
	border-radius: var(--wp--custom--radius-pill);
	text-decoration: none;
	transition: background 0.15s ease;
	flex-shrink: 0;
}

.phc-card-clinic-book:hover {
	background: var(--wp--custom--action-primary-bg-hover);
}

.phc-card-foot-link {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--3);
}

.phc-card-foot-link a {
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: 600;
	color: var(--wp--custom--action-primary-bg);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.phc-card-foot-link a:hover {
	text-decoration: underline;
}

.phc-booking-card-cta {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--6);
}

/* Step 10: core/button wraps its <a> in a .wp-block-button div that carries
   our className -- reuse the .phc-btn / .phc-btn-md / .phc-btn-primary /
   .phc-btn-secondary look on that child <a> rather than the .phc-btn class
   itself, which core/button has no attribute to apply there. Same convention
   as .phc-location-card-actions above; the trailing arrow reproduces the
   removed <span class="phc-btn-icon"> via ::after, matching
   .phc-event-card-cta .wp-block-button > a::after. */
.phc-booking-card-cta .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 44px;
	padding: 0 22px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: var(--wp--custom--transition-control);
}

.phc-booking-card-cta .wp-block-button > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-booking-card-cta .wp-block-button > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
}

.phc-booking-card-cta .wp-block-button > a:hover::after {
	transform: translateX(2px);
}

.phc-booking-card-cta .wp-block-button.phc-btn-primary > a {
	background: var(--wp--custom--action-primary-bg);
	color: var(--wp--custom--action-primary-fg);
	border-color: var(--wp--custom--action-primary-bg);
}

.phc-booking-card-cta .wp-block-button.phc-btn-primary > a:hover {
	background: var(--wp--custom--action-primary-bg-hover);
	border-color: var(--wp--custom--action-primary-bg-hover);
	color: var(--wp--custom--action-primary-fg);
}

.phc-booking-card-cta .wp-block-button.phc-btn-secondary > a {
	background: var(--wp--custom--action-secondary-bg);
	color: var(--wp--custom--action-secondary-fg);
	border-color: var(--wp--custom--action-secondary-border);
}

.phc-booking-card-cta .wp-block-button.phc-btn-secondary > a:hover {
	background: var(--wp--custom--action-secondary-bg-hover);
	border-color: var(--wp--custom--phc-ink);
	color: var(--wp--custom--action-secondary-fg);
}

/* ==========================================================================
   Welcome — ported from design/site/sections/Welcome.jsx.
   ========================================================================== */

/* .phc-welcome-head.phc-welcome-head (repeated selector, not a typo): boosts
   specificity to (0,2,0) so it reliably beats WordPress's own
   `:root :where(.is-layout-flow) > *` blockGap reset (also (0,1,0) via :root),
   which otherwise wins the specificity tie on cascade order and zeroes this
   margin -- a regression the step-10 block retrofit exposed by making this
   element a real child of a recognized group block for the first time. See
   NOTES.md for the full writeup; the same fix is applied to every other class
   below discovered to have the same exposure. */
.phc-welcome-head.phc-welcome-head {
	border-top: 1px solid var(--wp--custom--border-subtle);
	padding-top: var(--wp--preset--spacing--10);
	margin-bottom: var(--wp--preset--spacing--12);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--8);
}

.phc-welcome-head h2 {
	margin: 0;
	max-width: 18ch;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--wp--custom--type-display-m-line);
	letter-spacing: var(--wp--custom--type-display-m-track);
	font-weight: var(--wp--custom--weight-medium);
	text-wrap: balance;
}

.phc-welcome-head p {
	margin: 0;
	max-width: 40ch;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-welcome-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--custom--grid-gap);
}

.phc-pillar {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	height: 100%;
	padding-top: var(--wp--preset--spacing--6);
	border-top-width: 2px;
	border-top-style: solid;
}

.phc-pillar-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: var(--wp--custom--type-heading-s-line);
	letter-spacing: var(--wp--custom--type-heading-s-track);
	font-weight: var(--wp--custom--weight-medium);
	max-width: 18ch;
}

.phc-pillar-body {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-pillar-link {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--5);
}

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

@media (max-width: 680px) {
	.phc-welcome-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Services — ported from design/site/sections/Services.jsx.
   ========================================================================== */

.phc-services-head {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: var(--wp--preset--spacing--12);
	align-items: end;
}

.phc-services-head-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

.phc-services-head h2 {
	margin: 0;
	max-width: 16ch;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--wp--custom--type-display-m-line);
	letter-spacing: var(--wp--custom--type-display-m-track);
	font-weight: var(--wp--custom--weight-medium);
	text-wrap: balance;
}

.phc-services-head-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--5);
}

.phc-services-head-aside p {
	margin: 0;
	max-width: 38ch;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

/* Step 10: "Explore all services" is a core/button block so its label + URL
   are editable -- same "class on the block, style the child <a>" convention
   as .phc-booking-card-cta / .phc-location-card-actions above. */
.phc-services-head-aside .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 44px;
	padding: 0 22px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: var(--wp--custom--transition-control);
}

.phc-services-head-aside .wp-block-button > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-services-head-aside .wp-block-button > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
}

.phc-services-head-aside .wp-block-button > a:hover::after {
	transform: translateX(2px);
}

.phc-services-head-aside .wp-block-button.phc-btn-secondary > a {
	background: var(--wp--custom--action-secondary-bg);
	color: var(--wp--custom--action-secondary-fg);
	border-color: var(--wp--custom--action-secondary-border);
}

.phc-services-head-aside .wp-block-button.phc-btn-secondary > a:hover {
	background: var(--wp--custom--action-secondary-bg-hover);
	border-color: var(--wp--custom--phc-ink);
	color: var(--wp--custom--action-secondary-fg);
}

/* Specificity boost -- see .phc-welcome-head.phc-welcome-head comment above. */
.phc-finder.phc-finder {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	align-items: flex-end;
	margin-top: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--5);
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-2xl);
}

.phc-finder .phc-field {
	flex: 1;
}

/* Step 10: "Find Your Care" is a core/button block so its label + URL are
   editable -- same convention as above, sized to .phc-btn-lg. */
.phc-finder .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 54px;
	padding: 0 30px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: var(--wp--custom--transition-control);
}

.phc-finder .wp-block-button > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-finder .wp-block-button > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
}

.phc-finder .wp-block-button > a:hover::after {
	transform: translateX(2px);
}

.phc-finder .wp-block-button.phc-btn-primary > a {
	background: var(--wp--custom--action-primary-bg);
	color: var(--wp--custom--action-primary-fg);
	border-color: var(--wp--custom--action-primary-bg);
}

.phc-finder .wp-block-button.phc-btn-primary > a:hover {
	background: var(--wp--custom--action-primary-bg-hover);
	border-color: var(--wp--custom--action-primary-bg-hover);
	color: var(--wp--custom--action-primary-fg);
}

.phc-services-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--grid-gap);
	margin-top: var(--wp--preset--spacing--12);
}

@media (max-width: 960px) {
	.phc-services-head { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--8); align-items: start; }
	.phc-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.phc-services-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.phc-finder { flex-direction: column; align-items: stretch; border-radius: var(--wp--custom--radius-lg); }
	.phc-finder > * { width: 100%; }
}

/* ==========================================================================
   WholePerson — ported from design/site/sections/WholePerson.jsx.
   ========================================================================== */

.phc-whole {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: var(--wp--preset--spacing--16);
	align-items: center;
}

.phc-whole-eyebrow {
	font-size: var(--wp--preset--font-size--overline);
	letter-spacing: var(--wp--custom--type-overline-track);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--custom--text-muted);
	margin: 0 0 var(--wp--preset--spacing--8);
}

.phc-whole .phc-quote {
	margin-bottom: var(--wp--preset--spacing--10);
}

.phc-whole p.phc-whole-copy {
	margin: 0 0 var(--wp--preset--spacing--5);
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-whole p.phc-whole-copy:last-of-type {
	margin-bottom: var(--wp--preset--spacing--8);
}

@media (max-width: 960px) {
	.phc-whole {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--12);
	}
}

/* ==========================================================================
   Testing - ported from design/site/sections/Testing.jsx.
   ========================================================================== */

.phc-testing-band {
	position: relative;
	clip-path: inset(0);
	background: var(--wp--custom--surface-inverse);
	padding: clamp(104px, 13vw, 180px) var(--wp--custom--layout-gutter) clamp(120px, 15vw, 200px);
}

.phc-testing-media {
	position: fixed;
	inset: 0;
	z-index: 0;
}

.phc-testing-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

.phc-testing-media-wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 11, 36, .72) 0%, rgba(8, 11, 36, .34) 46%, rgba(8, 11, 36, .04) 100%);
}

.phc-testing-content {
	position: relative;
	z-index: 1;
	max-width: var(--wp--custom--layout-max);
	margin: 0 auto;
}

.phc-testing-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
	gap: var(--wp--preset--spacing--16);
	align-items: center;
}

.phc-testing-grid h2 {
	margin: var(--wp--preset--spacing--6) 0;
	max-width: 15ch;
	font-size: var(--wp--preset--font-size--display-l);
	line-height: var(--wp--custom--type-display-l-line);
	letter-spacing: var(--wp--custom--type-display-l-track);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-inverse);
	text-wrap: balance;
}

.phc-testing-grid > div:first-child > p:not(.phc-tag) {
	margin: 0 0 var(--wp--preset--spacing--10);
	max-width: 44ch;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: var(--wp--custom--type-body-l-line);
	color: rgba(251, 250, 246, .84);
	text-wrap: pretty;
}

.phc-testing-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

.phc-hivfacts {
	border-radius: var(--wp--custom--radius-lg);
	border: 1px solid rgba(251, 250, 246, .20);
	background: rgba(8, 11, 36, .42);
	backdrop-filter: blur(6px);
	padding: var(--wp--preset--spacing--6);
}

.phc-hivfacts-title {
	margin: 0 0 var(--wp--preset--spacing--5);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(251, 250, 246, .62);
}

.phc-hivfacts-list {
	display: flex;
	flex-direction: column;
}

.phc-hivfacts-item {
	appearance: none;
	text-align: left;
	cursor: pointer;
	font: inherit;
	background: transparent;
	border: 0;
	border-top: 1px solid rgba(251, 250, 246, .16);
	padding: var(--wp--preset--spacing--4) 0;
	color: var(--wp--custom--text-inverse);
	width: 100%;
}

.phc-hivfacts-item:first-child {
	border-top: 0;
}

.phc-hivfacts-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
}

.phc-hivfacts-key {
	flex: none;
	min-width: 58px;
	padding: 4px 10px;
	border-radius: 999px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--wp--custom--text-inverse);
	background: rgba(251, 250, 246, .12);
	transition: background var(--wp--custom--duration-fast) var(--wp--custom--ease-out), color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-hivfacts-item[aria-expanded="true"] .phc-hivfacts-key {
	color: var(--wp--custom--phc-navy-950);
	background: var(--phc-hivfacts-accent, var(--wp--custom--phc-sky-500));
}

.phc-hivfacts-q {
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: rgba(251, 250, 246, .76);
	transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-hivfacts-item[aria-expanded="true"] .phc-hivfacts-q {
	color: var(--wp--custom--text-inverse);
}

.phc-hivfacts-panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows var(--wp--custom--duration-base) var(--wp--custom--ease-out), opacity var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

.phc-hivfacts-item[aria-expanded="true"] .phc-hivfacts-panel {
	grid-template-rows: 1fr;
	opacity: 1;
}

.phc-hivfacts-panel-inner {
	overflow: hidden;
}

.phc-hivfacts-answer {
	display: block;
	padding-left: calc(58px + var(--wp--preset--spacing--4));
	padding-top: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: rgba(251, 250, 246, .78);
	text-wrap: pretty;
}

/* Specificity boost -- see .phc-welcome-head.phc-welcome-head comment above. */
.phc-hiv-grid.phc-hiv-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--grid-gap);
	margin-top: var(--wp--custom--grid-gap);
	position: relative;
	z-index: 2;
}

.phc-hiv-path {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--custom--surface-card);
	border-radius: var(--wp--custom--radius-lg);
	border: 1px solid var(--wp--custom--border-subtle);
	box-shadow: var(--wp--custom--shadow-md);
	overflow: hidden;
}

.phc-hiv-path-accent {
	height: 4px;
}

.phc-hiv-path-body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	flex: 1;
	padding: var(--wp--preset--spacing--8);
}

.phc-hiv-path-step-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

.phc-hiv-path-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	color: var(--wp--custom--text-primary);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
}

.phc-hiv-path-label {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

.phc-hiv-path-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: var(--wp--custom--type-heading-m-line);
	letter-spacing: var(--wp--custom--type-heading-m-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-hiv-path-desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-hiv-path-facts {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	list-style: none;
	margin: var(--wp--preset--spacing--2) 0 0;
	padding: 0;
}

.phc-hiv-path-facts li {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-primary);
}

.phc-hiv-path-facts li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	transform: translateY(-2px);
}

.phc-hiv-path-cta {
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--6);
	border-top: 1px solid var(--wp--custom--border-subtle);
}

/* Specificity boost -- see .phc-welcome-head.phc-welcome-head comment above. */
.phc-hiv-urgent.phc-hiv-urgent {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	margin-top: calc(-1 * clamp(56px, 7vw, 96px));
	position: relative;
	z-index: 2;
	padding: var(--wp--preset--spacing--8);
	border-radius: var(--wp--custom--radius-lg);
	background: var(--wp--preset--color--care-hiv);
	border: 1px solid rgba(220, 106, 78, .28);
}

.phc-hiv-urgent-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--phc-coral-500);
}

.phc-hiv-urgent p.phc-hiv-urgent-body {
	margin: 0;
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-primary);
	text-wrap: pretty;
}

/* Selectors are doubled to match the specificity boost on the base rules above;
   single-class versions here lost the cascade and never applied. */
@media (max-width: 960px) {
	.phc-testing-grid { grid-template-columns: minmax(0, 1fr); }
	.phc-hiv-grid.phc-hiv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.phc-hiv-urgent.phc-hiv-urgent { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

@media (max-width: 680px) {
	.phc-hiv-grid.phc-hiv-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Team - ported from design/site/sections/Team.jsx.
   ========================================================================== */

.phc-team-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--grid-gap);
	margin-top: var(--wp--preset--spacing--12);
	list-style: none;
	padding: 0;
}

.phc-team-grid > li {
	list-style: none;
	margin: 0;
}

.phc-team-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	height: 100%;
}

.phc-team-photo {
	max-width: 260px;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
}

.phc-team-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.phc-team-name {
	margin: 0 0 var(--wp--preset--spacing--1);
	font-size: var(--wp--preset--font-size--heading-s);
	letter-spacing: var(--wp--custom--type-heading-s-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-team-role {
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
	margin-bottom: var(--wp--preset--spacing--3);
}

.phc-team-bio {
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-team-bio p {
	margin: 0;
}

.phc-team-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--wp--custom--surface-tint-strong);
	color: var(--wp--custom--text-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--overline);
	letter-spacing: var(--wp--custom--type-overline-track);
	text-transform: uppercase;
	text-align: center;
	padding: var(--wp--preset--spacing--6);
}

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

@media (max-width: 680px) {
	.phc-team-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Careers - ported from design/site/sections/Careers.jsx.
   ========================================================================== */

.phc-careers {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	align-items: center;
	gap: var(--wp--preset--spacing--16);
}

.phc-careers h2 {
	margin: var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--5);
	max-width: 18ch;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--wp--custom--type-display-m-line);
	letter-spacing: var(--wp--custom--type-display-m-track);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-inverse);
	text-wrap: balance;
}

.phc-careers-copy {
	margin: 0;
	max-width: 56ch;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: rgba(251, 250, 246, .78);
	text-wrap: pretty;
}

.phc-careers-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--8);
}

.phc-careers-actions p {
	margin: 0;
	max-width: 26ch;
	font-size: var(--wp--preset--font-size--body-s);
	color: rgba(251, 250, 246, .62);
}

.phc-careers-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Step 10: team photo is a core/image block so it's swappable from the
   editor -- the block wraps the <img> in a <figure class="wp-block-image">,
   which carries a browser/core default margin the original bare <img> never
   had. Zero it so spacing inside .phc-careers-image is unchanged; the
   .phc-careers-image img rule above still reaches the nested <img>
   unaffected by the extra wrapper. */
.phc-careers-image .wp-block-image {
	margin: 0;
}

@media (max-width: 960px) {
	.phc-careers { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--12); }
}

/* Step 10: Careers CTA is a core/button block so the label + URL are
   editable -- same "class on the block, style the child <a>" convention as
   .phc-hero-actions. */
.phc-careers-actions .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 54px;
	padding: 0 30px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-style: solid;
	border-width: 1px;
	transition: var(--wp--custom--transition-control);
}

.phc-careers-actions .wp-block-button > a:hover {
	transform: translateY(-1px);
}

.phc-careers-actions .wp-block-button.phc-btn-inverse > a {
	background: var(--wp--custom--action-inverse-bg);
	color: var(--wp--custom--action-inverse-fg);
	border-color: var(--wp--custom--action-inverse-bg);
}

.phc-careers-actions .wp-block-button.phc-btn-inverse > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-careers-actions .wp-block-button.phc-btn-inverse > a:hover {
	background: var(--wp--custom--phc-white);
	border-color: var(--wp--custom--phc-white);
	color: var(--wp--custom--action-inverse-fg);
}

.phc-careers-actions .wp-block-button.phc-btn-inverse > a:hover::after {
	transform: translateX(3px);
}

.phc-careers.phc-careers-image-left {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 80px);
}

.phc-careers.phc-careers-image-left .phc-careers-copy p {
	margin: 0 0 var(--wp--preset--spacing--5);
}

.phc-careers.phc-careers-image-left .phc-careers-copy p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Locations, Partners, Events (homepage sections) - ported from
   design/site/sections/Locations.jsx, Partners.jsx, Events.jsx.
   ========================================================================== */

/* Events and FAQ stack as two full-width rows: a card grid of upcoming
   events, then the FAQ with its heading beside the accordion. */
.phc-events {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, var(--wp--preset--spacing--16));
}

.phc-events-col-head {
	margin-top: var(--wp--preset--spacing--8);
}

/* Events carousel: uses the shared .phc-carousel (phc.js initCarousels()).
   The viewport is pulled out by the slide gutter so the first and last cards
   line up with the section header, and padded vertically so the card hover
   lift and shadow aren't clipped by its overflow:hidden. */
.phc-events-carousel .phc-carousel-viewport {
	margin: calc(-1 * var(--wp--preset--spacing--4)) calc(-1 * clamp(8px, 1vw, 14px)) calc(-1 * var(--wp--preset--spacing--8));
	padding: var(--wp--preset--spacing--4) 0 var(--wp--preset--spacing--8);
}

.phc-events-carousel .phc-carousel-slide {
	display: flex;
}

/* No-JS / pre-init: slides stack full width. */
.phc-events-carousel:not(.is-js) .phc-carousel-slide {
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--6);
}

.phc-events-carousel .phc-carousel-arrow:not([disabled]):hover {
	border-color: var(--wp--custom--border-strong);
	background: var(--wp--custom--surface-tint);
}

.phc-carousel.is-static .phc-carousel-controls {
	display: none;
}

.phc-event-tile {
	width: 100%;
	display: flex;
	flex-direction: column;
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-lg);
	padding: var(--wp--preset--spacing--8);
	transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration-base) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

.phc-event-tile:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow-md);
	border-color: var(--wp--custom--border-strong);
}

.phc-event-tile-head {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	padding-bottom: var(--wp--preset--spacing--6);
	margin-bottom: var(--wp--preset--spacing--6);
	border-bottom: 1px solid var(--wp--custom--border-subtle);
}

.phc-event-tile-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: var(--wp--custom--radius-md);
	background: var(--wp--custom--surface-sky);
	color: var(--wp--custom--text-primary);
	line-height: 1;
}

.phc-event-tile-month {
	font-size: var(--wp--preset--font-size--overline);
	letter-spacing: var(--wp--custom--type-overline-track);
	text-transform: uppercase;
	font-weight: var(--wp--custom--weight-semibold);
	color: var(--wp--custom--phc-sky-700);
}

.phc-event-tile-day {
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--heading-m, var(--wp--preset--font-size--heading-s));
	font-weight: var(--wp--custom--weight-medium);
}

.phc-event-tile-badge {
	margin-left: auto;
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius-pill);
	border: 1px solid var(--wp--custom--border-strong);
	background: var(--wp--custom--surface-tint);
	color: var(--wp--custom--text-muted);
	font-size: var(--wp--preset--font-size--overline);
	letter-spacing: var(--wp--custom--type-overline-track);
	text-transform: uppercase;
	font-weight: var(--wp--custom--weight-semibold);
	line-height: 1.4;
	white-space: nowrap;
}

/* Past events stay readable but step back from the upcoming ones. */
.phc-event-tile.is-ended {
	background: var(--wp--custom--surface-tint);
}

.phc-event-tile.is-ended .phc-event-tile-date {
	background: var(--wp--custom--surface-tint-strong);
}

.phc-event-tile.is-ended .phc-event-tile-month {
	color: var(--wp--custom--text-muted);
}

.phc-event-tile.is-ended .phc-event-tile-title,
.phc-event-tile.is-ended .phc-event-tile-day {
	color: var(--wp--custom--text-secondary);
}

.phc-event-tile-when p {
	margin: 0;
}

.phc-event-tile-weekday {
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-primary);
}

.phc-event-tile-time {
	margin-top: 2px !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
}

.phc-event-tile-title {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: var(--wp--custom--type-heading-s-line);
	letter-spacing: var(--wp--custom--type-heading-s-track);
	font-weight: var(--wp--custom--weight-medium);
	text-wrap: balance;
}

.phc-event-tile-venue {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
}

.phc-event-tile-desc p {
	margin: var(--wp--preset--spacing--4) 0 0;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-secondary);
}

.phc-events-empty {
	margin: 0;
	color: var(--wp--custom--text-secondary);
}

.phc-faq-row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--16);
	align-items: start;
	padding-top: var(--wp--preset--spacing--16);
	border-top: 1px solid var(--wp--custom--border-subtle);
}

.phc-faq-row-head .phc-section-header-desc {
	margin-top: var(--wp--preset--spacing--5);
	max-width: 40ch;
}

@media (max-width: 960px) {
	.phc-faq-row { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--10); }
}

@media (max-width: 680px) {
	.phc-event-tile { padding: var(--wp--preset--spacing--6); }
}

/* ==========================================================================
   ClosingCta - ported from design/site/sections/ClosingCta.jsx.
   ========================================================================== */

.phc-closing-cta {
	position: relative;
	padding: var(--wp--custom--section-y) var(--wp--custom--layout-gutter);
	background: var(--wp--custom--surface-inverse);
	overflow: hidden;
}

.phc-closing-cta-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	margin: 0;
}

/* Step 10: closing photo is a core/image block so it's swappable from the
   editor -- the block puts .phc-closing-cta-media on the outer <figure>, so
   the sizing/position rule above still applies to the figure, and this rule
   pulls the fit/position onto the actual <img> inside it. Same split as
   .phc-hero-media.wp-block-image img. */
.phc-closing-cta-media.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

/* Step 10: ClosingCta CTAs are core/button blocks so labels + URLs are
   editable -- same "class on the block, style the child <a>" convention as
   .phc-hero-actions. */
.phc-closing-cta-actions .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 54px;
	padding: 0 30px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-style: solid;
	border-width: 1px;
	transition: var(--wp--custom--transition-control);
}

.phc-closing-cta-actions .wp-block-button > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
}

.phc-closing-cta-actions .wp-block-button.phc-btn-inverse > a {
	background: var(--wp--custom--action-inverse-bg);
	color: var(--wp--custom--action-inverse-fg);
	border-color: var(--wp--custom--action-inverse-bg);
}

.phc-closing-cta-actions .wp-block-button.phc-btn-inverse > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-closing-cta-actions .wp-block-button.phc-btn-inverse > a:hover {
	background: var(--wp--custom--phc-white);
	border-color: var(--wp--custom--phc-white);
	color: var(--wp--custom--action-inverse-fg);
}

.phc-closing-cta-actions .wp-block-button.phc-btn-inverse > a:hover::after {
	transform: translateX(2px);
}

.phc-closing-cta-actions .wp-block-button.phc-btn-inverse-outline > a {
	background: transparent;
	color: var(--wp--custom--text-inverse);
	border-color: rgba(251, 250, 246, .42);
}

.phc-closing-cta-actions .wp-block-button.phc-btn-inverse-outline > a:hover {
	background: rgba(251, 250, 246, .14);
	border-color: var(--wp--custom--text-inverse);
	color: var(--wp--custom--text-inverse);
}

.phc-closing-cta-scrim {
	position: absolute;
	inset: 0;
	background: var(--wp--custom--scrim-bottom);
}

.phc-closing-cta-wash {
	position: absolute;
	inset: 0;
	background: rgba(8, 11, 36, .42);
}

.phc-closing-cta-inner {
	position: relative;
	max-width: var(--wp--custom--layout-max);
	margin: 0 auto;
}

.phc-closing-cta-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--8);
	min-height: 280px;
	justify-content: flex-end;
}

.phc-closing-cta-content h2 {
	margin: 0;
	max-width: 16ch;
	font-size: var(--wp--preset--font-size--display-l);
	line-height: var(--wp--custom--type-display-l-line);
	letter-spacing: var(--wp--custom--type-display-l-track);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-inverse);
	text-wrap: balance;
}

.phc-closing-cta-content p {
	margin: 0;
	max-width: 48ch;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: var(--wp--custom--type-body-l-line);
	color: var(--wp--custom--text-inverse-muted);
}

.phc-closing-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	justify-content: center;
}

/* ==========================================================================
   LinkArrow - ported from components/actions/LinkArrow.jsx.
   ========================================================================== */

.phc-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	color: var(--wp--custom--text-primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-link-arrow:hover {
	color: var(--wp--custom--text-primary);
	border-bottom-color: var(--wp--custom--text-primary);
}

.phc-link-arrow::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

.phc-link-arrow:hover::after,
.phc-partner-card:hover .phc-link-arrow::after,
.phc-service-card:hover .phc-link-arrow::after,
.phc-spec-card:hover .phc-link-arrow::after,
.phc-appt-card:hover .phc-link-arrow::after,
.phc-card:hover .phc-link-arrow::after {
	transform: translateX(3px);
}

.phc-link-arrow-inverse {
	color: var(--wp--custom--text-inverse);
}

.phc-link-arrow-inverse:hover {
	color: var(--wp--custom--text-inverse);
	border-bottom-color: var(--wp--custom--text-inverse);
}

/* ==========================================================================
   ArcField -- decorative spectrum-arc background lines, ported from
   kit.jsx ArcBand()/ArcField(). Used behind Welcome (set a), Events (set b),
   Locations (set c). Purely decorative, aria-hidden, never over text --
   confined to the section's own top/bottom padding band via the mask fade.
   ========================================================================== */

.phc-section-arcs {
	position: relative;
	overflow: hidden;
}

.phc-arc-band {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
}

.phc-arc-band-top {
	top: 0;
}

.phc-arc-band-bottom {
	bottom: 0;
	transform: scaleY(-1);
}

/* ==========================================================================
   PageHero - shared interior-page opener, ported from design/site/shell.jsx
   PageHero(). Used by Services, Locations, Partners, Contact.
   ========================================================================== */

.phc-page-hero {
	padding-top: calc(var(--wp--custom--section-y-tight) + var(--wp--preset--spacing--6));
}

.phc-page-head {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: var(--wp--preset--spacing--12);
	align-items: end;
}

.phc-page-head-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

.phc-page-head h1 {
	margin: 0;
	max-width: 15ch;
	font-size: var(--wp--preset--font-size--display-l);
	line-height: var(--wp--custom--type-display-l-line);
	letter-spacing: var(--wp--custom--type-display-l-track);
	font-weight: var(--wp--custom--weight-medium);
	text-wrap: balance;
}

.phc-page-head-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--5);
}

.phc-page-head-aside p {
	margin: 0;
	max-width: 44ch;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-jump-chips {
	margin-top: var(--wp--preset--spacing--10);
	padding-top: var(--wp--preset--spacing--6);
	border-top: 1px solid var(--wp--custom--border-subtle);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}

.phc-jump-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	padding: 10px var(--wp--preset--spacing--5);
	border-radius: var(--wp--custom--radius-pill);
	border: 1px solid var(--wp--custom--border-subtle);
	background: var(--wp--custom--surface-card);
	color: var(--wp--custom--text-primary);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-jump-chip:hover {
	border-color: var(--wp--custom--border-strong);
	transform: translateY(-1px);
}

.phc-jump-chip-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

@media (max-width: 960px) {
	.phc-page-head {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--8);
		align-items: start;
	}
}

/* ==========================================================================
   PageCta - shared interior-page closing band, ported from
   design/site/shell.jsx PageCta(). Same visual treatment as ClosingCta.
   ========================================================================== */

.phc-page-cta {
	position: relative;
	padding: var(--wp--custom--section-y) var(--wp--custom--layout-gutter);
	background: var(--wp--custom--surface-inverse);
	overflow: hidden;
}

.phc-page-cta-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.phc-page-cta-scrim {
	position: absolute;
	inset: 0;
	background: var(--wp--custom--scrim-bottom);
}

.phc-page-cta-wash {
	position: absolute;
	inset: 0;
	background: rgba(8, 11, 36, .42);
}

.phc-page-cta-inner {
	position: relative;
	max-width: var(--wp--custom--layout-max);
	margin: 0 auto;
}

.phc-page-cta-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--8);
	min-height: 240px;
	justify-content: flex-end;
}

.phc-page-cta-content h2 {
	margin: 0;
	max-width: 16ch;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--wp--custom--type-display-m-line);
	letter-spacing: var(--wp--custom--type-display-m-track);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-inverse);
	text-wrap: balance;
}

.phc-page-cta-content p {
	margin: 0;
	max-width: 50ch;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: var(--wp--custom--type-body-l-line);
	color: var(--wp--custom--text-inverse-muted);
}

.phc-page-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	justify-content: center;
}

/* ==========================================================================
   DetailRow - shared labelled address/phone/fax/hours row, ported from
   design/site/shell.jsx DetailRow().
   ========================================================================== */

.phc-detail-row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--3) 0;
	border-top: 1px solid var(--wp--custom--border-subtle);
	align-items: baseline;
}

.phc-detail-row-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

.phc-detail-row-value {
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

.phc-detail-row-value.is-mono {
	font-family: var(--wp--preset--font-family--mono);
}

.phc-detail-row-value a {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   Services interior page - ported from design/site/pages/ServicesPage.jsx.
   ========================================================================== */

.phc-svc-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
}

.phc-svc-hero h1 {
	margin: 0 0 var(--wp--preset--spacing--8);
	max-width: 12ch;
	font-size: var(--wp--preset--font-size--display-l);
	line-height: var(--wp--custom--type-display-l-line);
	letter-spacing: var(--wp--custom--type-display-l-track);
	font-weight: var(--wp--custom--weight-medium);
	text-wrap: balance;
}

.phc-svc-hero-lede {
	margin: 0 0 var(--wp--preset--spacing--8);
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: var(--wp--custom--type-body-l-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-svc-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

.phc-svc-index-label {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

.phc-svc-index-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.phc-svc-index {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	gap: var(--wp--preset--spacing--5);
	align-items: baseline;
	padding: var(--wp--preset--spacing--5) 0;
	border-top: 1px solid var(--wp--custom--border-subtle);
	color: var(--wp--custom--text-primary);
	text-decoration: none;
	transition: background var(--wp--custom--duration-fast) var(--wp--custom--ease-out), padding-left var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-svc-index:hover {
	padding-left: var(--wp--preset--spacing--4);
	background: var(--wp--custom--surface-tint);
}

.phc-svc-index-n {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
}

.phc-svc-index-title {
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.15;
	letter-spacing: var(--wp--custom--type-heading-m-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-svc-index-label-text {
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
	white-space: nowrap;
}

.phc-svc-index-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

/* Specificity boost -- see .phc-welcome-head.phc-welcome-head comment above. */
.phc-care-line.phc-care-line {
	border-top: 1px solid var(--wp--custom--border-subtle);
	padding-top: var(--wp--preset--spacing--12);
	margin-top: var(--wp--preset--spacing--12);
	scroll-margin-top: 120px;
}

.phc-care-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 80px);
	align-items: center;
}

.phc-care-row-text.is-flipped {
	order: 2;
}

.phc-care-row-media.is-flipped {
	order: 1;
}

.phc-care-row-meta {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--6);
}

.phc-care-row-n {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
}

.phc-care-row-text h2 {
	margin: 0 0 var(--wp--preset--spacing--5);
	max-width: 14ch;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: var(--wp--custom--type-display-s-line);
	letter-spacing: var(--wp--custom--type-display-s-track);
	font-weight: var(--wp--custom--weight-medium);
	text-wrap: balance;
}

.phc-care-row-desc {
	margin: 0 0 var(--wp--preset--spacing--4);
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: var(--wp--custom--type-body-l-line);
	color: var(--wp--custom--text-primary);
	text-wrap: pretty;
}

.phc-care-row-detail {
	margin: 0 0 var(--wp--preset--spacing--8);
	max-width: 50ch;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-care-row-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

.phc-appt-grid {
	display: grid;
	gap: var(--wp--custom--grid-gap);
}

.phc-appt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phc-appt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.phc-appt-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	height: 100%;
}

.phc-appt-card-phone {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--heading-s);
	color: var(--wp--custom--text-primary);
	text-decoration: none;
}

.phc-appt-card h3, .phc-appt-card h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: var(--wp--custom--type-heading-m-line);
	letter-spacing: var(--wp--custom--type-heading-m-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-appt-card-body {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

.phc-appt-card-cta {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--6);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
	align-items: center;
}

@media (max-width: 960px) {
	.phc-svc-hero { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--12); }
	.phc-appt-grid-2, .phc-appt-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
	.phc-care-row { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--8); }
	.phc-care-row-text.is-flipped, .phc-care-row-media.is-flipped { order: 0; }
}

@media (max-width: 760px) {
	.phc-appt-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Locations interior page - ported from design/site/pages/LocationsPage.jsx.
   ========================================================================== */

/* Specificity boost -- see .phc-welcome-head.phc-welcome-head comment above. */
.phc-clinic-band-head.phc-clinic-band-head {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--8);
	padding-bottom: var(--wp--preset--spacing--5);
	border-bottom: 1px solid var(--wp--custom--border-subtle);
}

.phc-clinic-band-index {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
}

.phc-clinic-band-head h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: var(--wp--custom--type-display-s-line);
	letter-spacing: var(--wp--custom--type-display-s-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-clinic-panel {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) auto;
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
}

.phc-clinic-panel-intro p {
	margin: 0;
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

.phc-clinic-panel-intro h3 {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: var(--wp--custom--type-heading-m-line);
	letter-spacing: var(--wp--custom--type-heading-m-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-clinic-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--wp--preset--spacing--8);
}

.phc-clinic-actions {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	align-items: stretch;
}

/* Step 10: clinic-band CTAs are core/button blocks so labels + URLs are
   editable -- same "class on the block, style the child <a>" convention as
   .phc-location-card-actions, values copied verbatim from there (phc-btn-md). */
.phc-clinic-actions .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 44px;
	padding: 0 22px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: var(--wp--custom--transition-control);
}

.phc-clinic-actions .wp-block-button > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
}

.phc-clinic-actions .wp-block-button.phc-btn-primary > a {
	background: var(--wp--custom--action-primary-bg);
	color: var(--wp--custom--action-primary-fg);
	border-color: var(--wp--custom--action-primary-bg);
}

.phc-clinic-actions .wp-block-button.phc-btn-primary > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-clinic-actions .wp-block-button.phc-btn-primary > a:hover {
	background: var(--wp--custom--action-primary-bg-hover);
	border-color: var(--wp--custom--action-primary-bg-hover);
	color: var(--wp--custom--action-primary-fg);
}

.phc-clinic-actions .wp-block-button.phc-btn-primary > a:hover::after {
	transform: translateX(2px);
}

.phc-clinic-actions .wp-block-button.phc-btn-ghost > a {
	background: transparent;
	color: var(--wp--custom--text-primary);
	border-color: transparent;
}

.phc-clinic-actions .wp-block-button.phc-btn-ghost > a:hover {
	background: var(--wp--custom--surface-tint);
	color: var(--wp--custom--text-primary);
}

.phc-roster-label-wrap,
p.phc-roster-label,
.phc-roster-label {
	margin-top: clamp(48px, 5vw, 64px) !important;
	margin-bottom: clamp(24px, 3vw, 32px) !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

.phc-roster {
	display: grid;
	gap: clamp(24px, 3vw, 48px);
	row-gap: clamp(40px, 5vw, 64px);
}

.phc-roster-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.phc-roster-photo {
	width: min(180px, 52%);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
}

.phc-roster-photo img {
	transition: transform 800ms var(--wp--custom--ease-out);
}

.phc-roster-card:hover .phc-roster-photo img,
.phc-roster-photo:hover img {
	transform: scale(1.04);
}

.phc-roster-card h4 {
	margin: 0 0 var(--wp--preset--spacing--1);
	font-size: var(--wp--preset--font-size--heading-s);
	letter-spacing: var(--wp--custom--type-heading-s-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-roster-role {
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
	margin-bottom: var(--wp--preset--spacing--3);
}

.phc-roster-bio {
	margin: 0;
	max-width: 40ch;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-family-practice {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 80px);
	align-items: center;
}

.phc-family-practice-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-inverse-muted);
}

.phc-family-practice h2 {
	margin: 0 0 var(--wp--preset--spacing--6);
	max-width: 16ch;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: var(--wp--custom--type-display-s-line);
	letter-spacing: var(--wp--custom--type-display-s-track);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-inverse);
	text-wrap: balance;
}

.phc-family-practice p.phc-family-practice-copy {
	margin: 0 0 var(--wp--preset--spacing--5);
	max-width: 56ch;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-inverse-muted);
	text-wrap: pretty;
}

.phc-family-practice p.is-fine-print {
	margin: 0 0 var(--wp--preset--spacing--8);
	font-size: var(--wp--preset--font-size--body-s);
}

/* Step 10: the "Online application" CTA is a core/button block so the label
   + URL are editable -- same size/color/arrow treatment as
   .phc-careers-actions (phc-btn-inverse phc-btn-lg on a dark section),
   values copied verbatim from there rather than re-derived. */
.phc-family-practice-actions .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 54px;
	padding: 0 30px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-style: solid;
	border-width: 1px;
	transition: var(--wp--custom--transition-control);
}

.phc-family-practice-actions .wp-block-button > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
}

.phc-family-practice-actions .wp-block-button.phc-btn-inverse > a {
	background: var(--wp--custom--action-inverse-bg);
	color: var(--wp--custom--action-inverse-fg);
	border-color: var(--wp--custom--action-inverse-bg);
}

.phc-family-practice-actions .wp-block-button.phc-btn-inverse > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-family-practice-actions .wp-block-button.phc-btn-inverse > a:hover {
	background: var(--wp--custom--phc-white);
	border-color: var(--wp--custom--phc-white);
	color: var(--wp--custom--action-inverse-fg);
}

.phc-family-practice-actions .wp-block-button.phc-btn-inverse > a:hover::after {
	transform: translateX(2px);
}

@media (max-width: 1040px) {
	.phc-clinic-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.phc-clinic-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 960px) {
	.phc-clinic-panel { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--8); }
	.phc-clinic-actions { flex-direction: row; flex-wrap: wrap; }
	.phc-roster { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.phc-family-practice { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--12); }
}

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

@media (max-width: 680px) {
	.phc-roster { grid-template-columns: minmax(0, 1fr) !important; }
	.phc-clinic-facts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
	.phc-clinic-actions > a { width: 100%; }
}

/* ==========================================================================
   Partners interior page - ported from design/site/pages/PartnersPage.jsx.
   ========================================================================== */

.phc-intro-cols {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(24px, 5vw, 80px);
	align-items: start;
}

.phc-intro-cols-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

.phc-intro-cols h2 {
	margin: 0;
	max-width: 14ch;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: var(--wp--custom--type-display-s-line);
	letter-spacing: var(--wp--custom--type-display-s-track);
	font-weight: var(--wp--custom--weight-medium);
	text-wrap: balance;
}

.phc-intro-cols p.is-lede {
	margin: 0 0 var(--wp--preset--spacing--6);
	max-width: 58ch;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: var(--wp--custom--type-body-l-line);
	color: var(--wp--custom--text-primary);
	text-wrap: pretty;
}

.phc-intro-cols p.is-body {
	margin: 0 0 var(--wp--preset--spacing--5);
	max-width: 58ch;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-partners-list-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
	padding-bottom: var(--wp--preset--spacing--6);
	border-bottom: 1px solid var(--wp--custom--border-subtle);
}

.phc-partners-list-head h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: var(--wp--custom--type-display-s-line);
	letter-spacing: var(--wp--custom--type-display-s-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-partners-list-count {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
}

.phc-partners-list {
	display: grid;
	gap: var(--wp--custom--grid-gap);
	margin-top: var(--wp--preset--spacing--10);
}

.phc-partner-block {
	scroll-margin-top: 120px;
}

.phc-partner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
}

.phc-partner-meta {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--6);
}

.phc-partner-n {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
}

.phc-partner-media {
	margin-bottom: var(--wp--preset--spacing--8);
}

.phc-partner h3 {
	margin: 0 0 var(--wp--preset--spacing--5);
	max-width: 16ch;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: var(--wp--custom--type-heading-l-line);
	letter-spacing: var(--wp--custom--type-heading-l-track);
	font-weight: var(--wp--custom--weight-medium);
	text-wrap: balance;
}

.phc-partner-desc {
	margin: 0 0 var(--wp--preset--spacing--8);
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-partner-services-label {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

.phc-partner-services-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}

.phc-partner-services-list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--4);
	align-items: baseline;
	padding: var(--wp--preset--spacing--4) 0;
	border-top: 1px solid var(--wp--custom--border-subtle);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

.phc-partner-services-list li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--phc-partner-rule, var(--wp--custom--phc-sky-500));
	transform: translateY(-2px);
}

.phc-partner-block-top-rule {
	border-top: 2px solid var(--phc-partner-rule, var(--wp--custom--phc-sky-500));
}

/* Step 10: each "Check Out X" CTA is a core/button block so the label + URL
   are editable -- base sizing copied verbatim from .phc-location-card-actions
   (phc-btn-md), secondary color values copied from the same rule, with an
   arrow added to match the original's literal <span class="phc-btn-icon">
   markup (same ::after technique as .phc-clinic-actions/.phc-hero-actions). */
.phc-partner-cta .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 44px;
	padding: 0 22px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: var(--wp--custom--transition-control);
}

.phc-partner-cta .wp-block-button > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
}

.phc-partner-cta .wp-block-button.phc-btn-secondary > a {
	background: var(--wp--custom--action-secondary-bg);
	color: var(--wp--custom--action-secondary-fg);
	border-color: var(--wp--custom--action-secondary-border);
}

.phc-partner-cta .wp-block-button.phc-btn-secondary > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-partner-cta .wp-block-button.phc-btn-secondary > a:hover {
	background: var(--wp--custom--action-secondary-bg-hover);
	border-color: var(--wp--custom--phc-ink);
	color: var(--wp--custom--action-secondary-fg);
}

.phc-partner-cta .wp-block-button.phc-btn-secondary > a:hover::after {
	transform: translateX(2px);
}

/* Step 10: the referral band's "Contact our team" CTA is a core/button block
   so the label + URL are editable -- same base/primary/arrow values as
   .phc-clinic-actions (phc-btn-md). */
.phc-appt-grid-actions .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 44px;
	padding: 0 22px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: var(--wp--custom--transition-control);
}

.phc-appt-grid-actions .wp-block-button > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
}

.phc-appt-grid-actions .wp-block-button.phc-btn-primary > a {
	background: var(--wp--custom--action-primary-bg);
	color: var(--wp--custom--action-primary-fg);
	border-color: var(--wp--custom--action-primary-bg);
}

.phc-appt-grid-actions .wp-block-button.phc-btn-primary > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-appt-grid-actions .wp-block-button.phc-btn-primary > a:hover {
	background: var(--wp--custom--action-primary-bg-hover);
	border-color: var(--wp--custom--action-primary-bg-hover);
	color: var(--wp--custom--action-primary-fg);
}

.phc-appt-grid-actions .wp-block-button.phc-btn-primary > a:hover::after {
	transform: translateX(2px);
}

@media (max-width: 960px) {
	.phc-intro-cols { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--6); }
	.phc-partner { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--8); }
}

/* ==========================================================================
   Contact interior page - ported from design/site/pages/ContactPage.jsx.
   ========================================================================== */

.phc-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 80px);
	align-items: start;
}

.phc-contact-grid-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

.phc-contact-grid h2 {
	margin: 0 0 var(--wp--preset--spacing--8);
	max-width: 13ch;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: var(--wp--custom--type-display-s-line);
	letter-spacing: var(--wp--custom--type-display-s-track);
	font-weight: var(--wp--custom--weight-medium);
	text-wrap: balance;
}

.phc-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.phc-contact-form-head h3 {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: var(--wp--custom--type-heading-m-line);
	letter-spacing: var(--wp--custom--type-heading-m-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-contact-form-head p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

.phc-contact-form form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.phc-contact-form .phc-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.phc-contact-form-required {
	color: var(--wp--custom--phc-coral-700);
}

.phc-contact-form-input {
	width: 100%;
	height: 44px;
	padding: 0 var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-primary);
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-pill);
	outline: none;
	transition: var(--wp--custom--transition-control), box-shadow var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-contact-form-input:focus {
	border-color: var(--wp--custom--border-focus);
	box-shadow: 0 0 0 3px var(--wp--custom--phc-sky-200);
}

textarea.phc-contact-form-input {
	height: 80px;
	min-height: 80px;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	line-height: var(--wp--custom--type-body-m-line);
	border-radius: var(--wp--custom--radius-md);
	resize: vertical;
}

.phc-contact-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	margin-top: 2px;
}

.phc-contact-form-status {
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-secondary);
}

/* Contact Form 7 skinning */
.phc-contact-form-actions input[type="submit"].phc-btn {
	height: 42px;
	padding: 0 24px;
	font-size: var(--wp--preset--font-size--body-s);
}

.phc-contact-form-actions input[type="submit"].phc-btn::after {
	content: "\2192";
	display: inline-block;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-contact-form-actions input[type="submit"].phc-btn:hover::after {
	transform: translateX(2px);
}

.phc-contact-form .wpcf7-spinner {
	margin: 0 0 0 var(--wp--preset--spacing--2);
}

.phc-contact-form .wpcf7-response-output {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-secondary);
}

.phc-contact-form form.invalid .wpcf7-response-output,
.phc-contact-form form.sent .wpcf7-response-output {
	color: var(--wp--custom--text-primary);
}

.phc-contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--wp--preset--spacing--1);
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--custom--phc-coral-700);
}

.phc-contact-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--wp--custom--phc-coral-500);
}

.phc-contact-form-legal {
	margin: var(--wp--preset--spacing--2) 0 0;
	font-size: 11px;
	line-height: 1.4;
	color: var(--wp--custom--text-muted);
}

.phc-hours-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

.phc-hours h2 {
	margin: 0 0 var(--wp--preset--spacing--5);
	max-width: 15ch;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: var(--wp--custom--type-display-s-line);
	letter-spacing: var(--wp--custom--type-display-s-track);
	font-weight: var(--wp--custom--weight-medium);
	text-wrap: balance;
}

.phc-hours-lede {
	margin: 0 0 var(--wp--preset--spacing--8);
	max-width: 44ch;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-secondary);
}

.phc-hours-table {
	width: 100%;
	border-collapse: collapse;
	border-bottom: 1px solid var(--wp--custom--border-subtle);
}

.phc-hours-table caption {
	caption-side: top;
	text-align: left;
	padding-bottom: var(--wp--preset--spacing--3);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

.phc-hours-table th,
.phc-hours-table td {
	padding: var(--wp--preset--spacing--4) 0;
	border-top: 1px solid var(--wp--custom--border-subtle);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: 400;
	color: var(--wp--custom--text-primary);
}

.phc-hours-table th {
	text-align: left;
}

.phc-hours-table td {
	text-align: right;
}

.phc-hours-table .is-closed {
	color: var(--wp--custom--text-muted);
}

.phc-hours-note {
	margin: var(--wp--preset--spacing--5) 0 0;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-secondary);
}

.phc-visit-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
	padding-bottom: var(--wp--preset--spacing--6);
	border-bottom: 1px solid var(--wp--custom--border-subtle);
}

.phc-visit-head h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: var(--wp--custom--type-display-s-line);
	letter-spacing: var(--wp--custom--type-display-s-track);
	font-weight: var(--wp--custom--weight-medium);
}

@media (max-width: 960px) {
	.phc-contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--12); }
}

/* ==========================================================================
   Step 10 button-block companions -- Testing and WholePerson CTAs are now
   core/button blocks so labels + URLs are editable. Same "class on the
   block, style the child <a>" convention as .phc-hero-actions /
   .phc-location-card-actions: modifier classes land on the wrapping
   .wp-block-button div, and the full .phc-btn base + size + variant look is
   reconstructed here scoped to each wrapper, since core never lets us put
   the literal .phc-btn classes on the actual <a>.
   ========================================================================== */

.phc-testing-actions .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 54px;
	padding: 0 30px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-style: solid;
	border-width: 1px;
	transition: var(--wp--custom--transition-control);
}

.phc-testing-actions .wp-block-button > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
}

.phc-testing-actions .wp-block-button.phc-btn-inverse > a {
	background: var(--wp--custom--action-inverse-bg);
	color: var(--wp--custom--action-inverse-fg);
	border-color: var(--wp--custom--action-inverse-bg);
}

.phc-testing-actions .wp-block-button.phc-btn-inverse > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-testing-actions .wp-block-button.phc-btn-inverse > a:hover {
	background: var(--wp--custom--phc-white);
	border-color: var(--wp--custom--phc-white);
	color: var(--wp--custom--action-inverse-fg);
}

.phc-testing-actions .wp-block-button.phc-btn-inverse > a:hover::after {
	transform: translateX(2px);
}

.phc-testing-actions .wp-block-button.phc-btn-inverse-outline > a {
	background: transparent;
	color: var(--wp--custom--text-inverse);
	border-color: rgba(251, 250, 246, .42);
}

.phc-testing-actions .wp-block-button.phc-btn-inverse-outline > a:hover {
	background: rgba(251, 250, 246, .14);
	border-color: var(--wp--custom--text-inverse);
	color: var(--wp--custom--text-inverse);
}

.phc-hiv-urgent .wp-block-buttons .wp-block-button.phc-btn-primary > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 44px;
	padding: 0 22px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-style: solid;
	border-width: 1px;
	transition: var(--wp--custom--transition-control);
	background: var(--wp--custom--action-primary-bg);
	color: var(--wp--custom--action-primary-fg);
	border-color: var(--wp--custom--action-primary-bg);
}

.phc-hiv-urgent .wp-block-buttons .wp-block-button.phc-btn-primary > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-hiv-urgent .wp-block-buttons .wp-block-button.phc-btn-primary > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
	background: var(--wp--custom--action-primary-bg-hover);
	border-color: var(--wp--custom--action-primary-bg-hover);
	color: var(--wp--custom--action-primary-fg);
}

.phc-hiv-urgent .wp-block-buttons .wp-block-button.phc-btn-primary > a:hover::after {
	transform: translateX(2px);
}

.phc-whole .wp-block-buttons .wp-block-button.phc-btn-accent > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	height: 54px;
	padding: 0 30px;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-style: solid;
	border-width: 1px;
	transition: var(--wp--custom--transition-control);
	background: var(--wp--custom--action-accent-bg);
	color: var(--wp--custom--action-accent-fg);
	border-color: var(--wp--custom--action-accent-bg);
}

.phc-whole .wp-block-buttons .wp-block-button.phc-btn-accent > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-whole .wp-block-buttons .wp-block-button.phc-btn-accent > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
	background: var(--wp--custom--action-accent-bg-hover);
	border-color: var(--wp--custom--action-accent-bg-hover);
	color: var(--wp--custom--action-accent-fg);
}

.phc-whole .wp-block-buttons .wp-block-button.phc-btn-accent > a:hover::after {
	transform: translateX(2px);
}

/* ==========================================================================
   Step 10 button-block companions (continued) -- Services and Contact
   interior pages. Same "class on the block, style the child <a>" convention
   as .phc-hero-actions above: modifier classes land on the wrapping
   .wp-block-button div (or its .wp-block-buttons parent), and the full
   .phc-btn base + size + variant look is reconstructed here scoped to each
   container, since core never lets us put the literal .phc-btn classes on
   the actual <a>. Ghost-variant buttons never carried the arrow icon in the
   source (see .phc-hero-actions.phc-btn-inverse-outline above), so no
   ::after rule is added for .phc-btn-ghost in any of these containers.
   ========================================================================== */

.phc-svc-hero-actions .wp-block-button > a,
.phc-care-row-actions .wp-block-button > a,
.phc-appt-card-cta .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-style: solid;
	border-width: 1px;
	transition: var(--wp--custom--transition-control);
}

.phc-svc-hero-actions .wp-block-button > a:hover,
.phc-care-row-actions .wp-block-button > a:hover,
.phc-appt-card-cta .wp-block-button > a:hover {
	transform: translateY(-1px);
	font-weight: var(--wp--custom--weight-semibold);
}

.phc-svc-hero-actions .wp-block-button > a {
	height: 54px;
	padding: 0 30px;
	font-size: var(--wp--preset--font-size--body-m);
}

.phc-care-row-actions .wp-block-button > a,
.phc-appt-card-cta .wp-block-button > a {
	height: 44px;
	padding: 0 22px;
	font-size: var(--wp--preset--font-size--label);
}

.phc-svc-hero-actions .wp-block-button.phc-btn-primary > a,
.phc-care-row-actions .wp-block-button.phc-btn-primary > a,
.phc-appt-card-cta .wp-block-button.phc-btn-primary > a {
	background: var(--wp--custom--action-primary-bg);
	color: var(--wp--custom--action-primary-fg);
	border-color: var(--wp--custom--action-primary-bg);
}

.phc-svc-hero-actions .wp-block-button.phc-btn-primary > a:hover,
.phc-care-row-actions .wp-block-button.phc-btn-primary > a:hover,
.phc-appt-card-cta .wp-block-button.phc-btn-primary > a:hover {
	background: var(--wp--custom--action-primary-bg-hover);
	border-color: var(--wp--custom--action-primary-bg-hover);
	color: var(--wp--custom--action-primary-fg);
}

.phc-svc-hero-actions .wp-block-button.phc-btn-primary > a::after,
.phc-care-row-actions .wp-block-button.phc-btn-primary > a::after,
.phc-appt-card-cta .wp-block-button.phc-btn-primary > a::after,
.phc-appt-card-cta .wp-block-button.phc-btn-secondary > a::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-svc-hero-actions .wp-block-button.phc-btn-primary > a:hover::after,
.phc-care-row-actions .wp-block-button.phc-btn-primary > a:hover::after,
.phc-appt-card-cta .wp-block-button.phc-btn-primary > a:hover::after,
.phc-appt-card-cta .wp-block-button.phc-btn-secondary > a:hover::after {
	transform: translateX(2px);
}

.phc-appt-card-cta .wp-block-button.phc-btn-secondary > a {
	background: var(--wp--custom--action-secondary-bg);
	color: var(--wp--custom--action-secondary-fg);
	border-color: var(--wp--custom--action-secondary-border);
}

.phc-appt-card-cta .wp-block-button.phc-btn-secondary > a:hover {
	background: var(--wp--custom--action-secondary-bg-hover);
	border-color: var(--wp--custom--phc-ink);
	color: var(--wp--custom--action-secondary-fg);
}

.phc-svc-hero-actions .wp-block-button.phc-btn-ghost > a,
.phc-care-row-actions .wp-block-button.phc-btn-ghost > a,
.phc-appt-card-cta .wp-block-button.phc-btn-ghost > a {
	background: transparent;
	color: var(--wp--custom--text-primary);
	border-color: transparent;
}

.phc-svc-hero-actions .wp-block-button.phc-btn-ghost > a:hover,
.phc-care-row-actions .wp-block-button.phc-btn-ghost > a:hover,
.phc-appt-card-cta .wp-block-button.phc-btn-ghost > a:hover {
	background: var(--wp--custom--surface-tint);
	color: var(--wp--custom--text-primary);
}

/*
 * The source had several of these CTAs as bare <a> tags sitting directly in
 * a flex row (.phc-appt-card, .phc-appt-card-cta, .phc-visit-head) with no
 * margin of their own. Making a phone number, a LinkArrow-style link, or
 * "Meet both teams" independently editable requires a block-level wrapper
 * (wp:paragraph, or wp:buttons' own wrapper div), and both introduce a
 * default browser/block margin the source never had. Zeroing it out here is
 * the CLAUDE.md §13 "write custom CSS to match it" escape hatch, not a
 * design change -- the flex gap on the parent still produces the original
 * spacing.
 */
.phc-appt-card > p,
.phc-appt-card-cta > p,
.phc-visit-head > p {
	margin: 0;
}

.phc-appt-card-cta .wp-block-buttons {
	margin: 0;
}

/* ==========================================================================
   Step 10 retrofit: utility classes replacing inline style="" attributes on
   real block types (core/group, core/image, etc). WordPress's block editor
   validates a block by re-running its own save() function against the saved
   markup -- any inline style property save() doesn't know how to reproduce
   (a raw transition-delay, height, border-top-color, aspect-ratio, or any
   other CSS property with no matching block "supports" entry) makes the
   editor flag that block as "invalid content" the moment someone opens it.
   className is a real, always-preserved attribute, so moving these values
   into classes keeps every block editor-safe. (wp:html blocks are exempt --
   they have no save()/attribute schema to validate against, so PHP-driven
   per-item inline styles inside them, e.g. page-partners.php's --phc-partner-
   rule custom property, correctly stay untouched literal PHP.)
   ========================================================================== */

.phc-delay-60 { transition-delay: 60ms; }
.phc-delay-70 { transition-delay: 70ms; }
.phc-delay-80 { transition-delay: 80ms; }
.phc-delay-90 { transition-delay: 90ms; }
.phc-delay-100 { transition-delay: 100ms; }
.phc-delay-110 { transition-delay: 110ms; }
.phc-delay-120 { transition-delay: 120ms; }
.phc-delay-140 { transition-delay: 140ms; }
.phc-delay-160 { transition-delay: 160ms; }
.phc-delay-180 { transition-delay: 180ms; }
.phc-delay-200 { transition-delay: 200ms; }
.phc-delay-210 { transition-delay: 210ms; }

.phc-fill { height: 100%; }

.phc-pillar-rose { border-top-color: var(--wp--custom--phc-rose-500); }
.phc-pillar-plum { border-top-color: var(--wp--custom--phc-plum-600); }
.phc-pillar-sky { border-top-color: var(--wp--custom--phc-sky-500); }
.phc-pillar-moss { border-top-color: var(--wp--custom--phc-moss-600); }

.phc-fix-mt-1 { scroll-margin-top: 88px; }
.phc-fix-x-2 { align-self: flex-start; }
.phc-fix-x-3 { padding: clamp(24px, 3vw, 44px); }
.phc-fix-mt-4 { scroll-margin-top: 120px; }
.phc-fix-bg-5 { background: var(--wp--custom--surface-sky); scroll-margin-top: 88px; }
.phc-fix-mt-6 { margin-top: var(--wp--preset--spacing--10); }
.phc-fix-padtop-7 { padding-top: calc(var(--wp--custom--section-y) + var(--wp--preset--spacing--6)); }
.phc-fix-padtop0-8 { padding-top: 0; }
.phc-fix-aspect-9 { aspect-ratio: 5 / 4; }
.phc-fix-bg-10 { background: var(--wp--custom--surface-sky); }
.phc-fix-mt-11 { margin-top: var(--wp--preset--spacing--12); }
.phc-fix-aspect-12 { aspect-ratio: 16 / 11; border-radius: var(--wp--custom--radius-md); }
.phc-fix-bg-13 { background: var(--wp--custom--surface-page); }
.phc-fix-pad-14 { position: relative; z-index: 2; padding: 0 var(--wp--custom--layout-gutter) var(--wp--custom--section-y); }
.phc-fix-bg-15 { background: var(--wp--custom--phc-sky-500); }
.phc-fix-bg-16 { background: var(--wp--custom--phc-sky-50); }
.phc-fix-x-17 { color: var(--wp--custom--phc-sky-500); }
.phc-fix-bg-18 { background: var(--wp--custom--phc-coral-500); }
.phc-fix-bg-19 { background: var(--wp--custom--phc-coral-100); }
.phc-fix-x-20 { color: var(--wp--custom--phc-coral-500); }
.phc-fix-bg-21 { background: var(--wp--custom--phc-moss-600); }
.phc-fix-bg-22 { background: var(--wp--custom--phc-moss-100); }
.phc-fix-x-23 { color: var(--wp--custom--phc-moss-600); }
.phc-fix-aspect-24 { aspect-ratio: 1 / 1; }
.phc-fix3-1 { color: var(--wp--custom--text-primary); }

/* ==========================================================================
   Service detail pages - shared components ported from
   design/site/service-detail.jsx. Used by the six inner service-line pages
   (STI Testing, HIV Prevention, HIV Care, Hormone Therapy, Weight
   Management, Primary Care). Each component below composes from already-
   supported primitives (.phc-card, .phc-tag-*, .phc-btn-*, .phc-media-frame,
   .phc-reveal, .phc-accordion) the same way page-services.php's
   .phc-care-row/.phc-appt-card do.

   Care-tone accents (a 2px rule, a small dot, a numeral colour) vary per
   instance by the JSX `care` prop -- rather than one modifier class per
   component x tone combination, every such accent uses one of the five
   .phc-accent-border-*/.phc-accent-bg-* utilities below as an additional
   class on the specific element, mirroring the existing numbered
   .phc-fix-x-N / .phc-fix-bg-N one-off utilities already in this file.
   ========================================================================== */

.phc-accent-border-sky   { border-color: var(--wp--custom--phc-sky-500); }
.phc-accent-border-coral { border-color: var(--wp--custom--phc-coral-500); }
.phc-accent-border-plum  { border-color: var(--wp--custom--phc-plum-600); }
.phc-accent-border-moss  { border-color: var(--wp--custom--phc-moss-600); }
.phc-accent-border-navy  { border-color: var(--wp--custom--phc-navy-700); }

.phc-accent-bg-sky   { background: var(--wp--custom--phc-sky-500); }
.phc-accent-bg-coral { background: var(--wp--custom--phc-coral-500); }
.phc-accent-bg-plum  { background: var(--wp--custom--phc-plum-600); }
.phc-accent-bg-moss  { background: var(--wp--custom--phc-moss-600); }
.phc-accent-bg-navy  { background: var(--wp--custom--phc-navy-700); }

.phc-accent-text-sky   { color: var(--wp--custom--phc-sky-500); }
.phc-accent-text-coral { color: var(--wp--custom--phc-coral-500); }
.phc-accent-text-plum  { color: var(--wp--custom--phc-plum-600); }
.phc-accent-text-moss  { color: var(--wp--custom--phc-moss-600); }
.phc-accent-text-navy  { color: var(--wp--custom--phc-navy-700); }

/* RuledSection - a 2px care-tone rule above the section content, with an
   optional two-column eyebrow/title/description+action head. */

.phc-ruled-section {
	border-top-width: 2px;
	border-top-style: solid;
	padding-top: var(--wp--preset--spacing--8);
}

.phc-ruled-head {
	display: grid;
	gap: clamp(24px, 5vw, 72px);
	align-items: end;
	margin-bottom: var(--wp--preset--spacing--12);
}

.phc-ruled-head-2col { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }

.phc-ruled-head-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

/* Standalone H2/H3 typography classes -- the design source's H2/H3 style
   constants (service-detail.jsx) are applied to headings both inside
   RuledSection's own eyebrow/title head AND to standalone headings
   elsewhere in the same pages (e.g. a manually-built two-column section
   that doesn't use RuledSection's title prop at all). Apply .phc-h2/.phc-h3
   directly to any <h2>/<h3> that uses that style, not only ones inside
   .phc-ruled-head -- add a max-width override via a plain style attribute
   on the block where a page's copy specifies a different ch value. */
.phc-h2 {
	margin: 0;
	max-width: 16ch;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: var(--wp--custom--type-display-s-line);
	letter-spacing: var(--wp--custom--type-display-s-track);
	font-weight: var(--wp--custom--weight-medium);
	text-wrap: balance;
}

.phc-h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: var(--wp--custom--type-heading-m-line);
	letter-spacing: var(--wp--custom--type-heading-m-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-ruled-head h2 {
	margin: 0;
	max-width: 16ch;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: var(--wp--custom--type-display-s-line);
	letter-spacing: var(--wp--custom--type-display-s-track);
	font-weight: var(--wp--custom--weight-medium);
	text-wrap: balance;
}

.phc-ruled-head-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--5);
}

.phc-ruled-head-aside p {
	margin: 0;
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: var(--wp--custom--type-body-l-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-section-inverse .phc-ruled-head h2 { color: var(--wp--custom--text-inverse); }
.phc-section-inverse .phc-ruled-head-aside p { color: var(--wp--custom--text-inverse-muted); }

@media (max-width: 860px) {
	.phc-ruled-head-2col { grid-template-columns: minmax(0, 1fr); }
}

/* ServiceHero - full-bleed photographic opener for a service page. */

.phc-svc-hero-full {
	position: relative;
	overflow: hidden;
	background: var(--wp--custom--surface-inverse);
	padding: calc(var(--wp--custom--section-y) + var(--wp--preset--spacing--10)) var(--wp--custom--layout-gutter) var(--wp--custom--section-y);
}

.phc-svc-hero-full-media,
.phc-svc-hero-full-media.wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
	margin: 0;
}

.phc-svc-hero-full-scrim {
	position: absolute;
	inset: 0;
	background: var(--wp--custom--scrim-bottom);
}

.phc-svc-hero-full-wash {
	position: absolute;
	inset: 0;
	background: rgba(8, 11, 36, .52);
}

.phc-svc-hero-full-inner {
	position: relative;
	max-width: var(--wp--custom--layout-max);
	margin: 0 auto;
}

.phc-svc-hero-full-eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--6);
}

.phc-svc-hero-full-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.phc-svc-hero-full-eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-inverse-muted);
}

.phc-svc-hero-full h1 {
	margin: 0 0 var(--wp--preset--spacing--6);
	max-width: 16ch;
	font-size: var(--wp--preset--font-size--display-l);
	line-height: var(--wp--custom--type-display-l-line);
	letter-spacing: var(--wp--custom--type-display-l-track);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-inverse);
	text-wrap: balance;
}

.phc-svc-hero-full-lede {
	margin: 0 0 var(--wp--preset--spacing--8);
	max-width: 50ch;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: var(--wp--custom--type-body-l-line);
	color: var(--wp--custom--text-inverse-muted);
	text-wrap: pretty;
}

.phc-svc-hero-full-kicker {
	margin: 0 0 var(--wp--preset--spacing--8);
	max-width: 26ch;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.1;
	letter-spacing: -.02em;
	font-weight: 400;
	color: var(--wp--custom--text-inverse);
}

/* Optional hero callout (e.g. "only offered at one clinic"): frosted panel
   with an accent rule so it reads as a notice, not another fact. */
.phc-svc-hero-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--4);
	max-width: 620px;
	margin: 0 0 var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
	border: 1px solid var(--wp--custom--border-inverse);
	border-left: 4px solid var(--wp--custom--phc-moss-600);
	border-radius: var(--wp--custom--radius-md);
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--wp--custom--text-inverse);
}

/* Beats core's `:root :where(.is-layout-flow) > :first-child { margin-top: 0 }`
   when the notice is the first thing under the headline. */
.phc-svc-hero-full .phc-svc-hero-full-inner .phc-svc-hero-notice {
	margin-top: var(--wp--preset--spacing--8);
}

.phc-svc-hero-notice-icon {
	flex: 0 0 auto;
	margin-top: 2px;
}

.phc-svc-hero-notice p {
	margin: 0;
}

.phc-svc-hero-notice-title {
	font-size: var(--wp--preset--font-size--body-l);
	font-weight: var(--wp--custom--weight-semibold);
	line-height: 1.3;
}

.phc-svc-hero-notice-text {
	margin-top: var(--wp--preset--spacing--2) !important;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-l-line);
	color: var(--wp--custom--text-inverse-muted);
}

.phc-svc-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--8);
	margin: 0 0 var(--wp--preset--spacing--10);
	max-width: 900px;
}

.phc-svc-facts > div {
	border-top: 1px solid rgba(255, 255, 255, .28);
	padding-top: var(--wp--preset--spacing--4);
}

.phc-svc-facts dt {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-inverse-muted);
}

.phc-svc-facts dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-inverse);
}

.phc-svc-facts dd.is-prose { font-family: var(--wp--preset--font-family--sans); }

.phc-svc-hero-full-label {
	margin: var(--wp--preset--spacing--6) 0 0;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-inverse-muted);
}

/* Same "class on the block, style the child <a>" convention as
   .phc-hero-actions -- reuse .phc-hero-actions alongside this class on the
   wp:buttons wrapper so the primary/inverse/inverse-outline button
   variants and hover states already defined for the homepage hero apply
   here unchanged. */
.phc-svc-hero-full-actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3); align-items: center; }

@media (max-width: 680px) {
	.phc-svc-facts { grid-template-columns: minmax(0, 1fr); }
}

/* BenefitList - hairline list, bold label + en-dash gloss, mono numeral. */

.phc-benefit-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.phc-benefit-list li {
	border-top: 1px solid var(--wp--custom--border-subtle);
	padding: var(--wp--preset--spacing--5) 0;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--4);
	align-items: baseline;
}

.phc-benefit-list-n {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-muted);
}

.phc-benefit-list-text {
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-secondary);
}

.phc-benefit-list-text strong {
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-primary);
}

/* SpecCard - .phc-card + tag + 2px care-rule h3 + mono spec rows. Add this
   className alongside .phc-card (and .phc-card-interactive if it should
   lift on hover) on the same wp:group. */

.phc-spec-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	height: 100%;
}

.phc-spec-card h3 {
	margin: 0;
	border-top-width: 2px;
	border-top-style: solid;
	padding-top: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: var(--wp--custom--type-heading-m-line);
	letter-spacing: var(--wp--custom--type-heading-m-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-spec-card-rows {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.phc-spec-card-rows li {
	border-top: 1px solid var(--wp--custom--border-subtle);
	padding: var(--wp--preset--spacing--3) 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-secondary);
}

.phc-spec-card-action {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--6);
}

.phc-spec-card-body {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

/* TermGrid - glossary grid, term over definition, hairline separated. */

.phc-term-grid {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 0;
	border-top: 1px solid var(--wp--custom--border-subtle);
}

.phc-term-grid > div {
	border-bottom: 1px solid var(--wp--custom--border-subtle);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.phc-term-grid dt {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-primary);
}

.phc-term-grid-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.phc-term-grid dd {
	margin: 0;
	max-width: 38ch;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

/* QuoteBand - full-bleed pull quote: rule bar, serif blockquote, attribution. */

.phc-quote-band {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	text-align: center;
}

.phc-quote-band-rule {
	width: 40px;
	height: 2px;
}

/* The inner <p> needs margin:0 too, not just the blockquote. core gives a
   paragraph `margin: 1em 0`, which at the quote's ~56px font size is 56.32px
   top and bottom. Those margins escape the blockquote (61px tall) and inflated
   the figure to 173px, adding ~112px of dead space that read as a broken gap
   between the quote and its attribution. `.phc-quote` (WholePerson) already
   targeted `blockquote p` for exactly this reason; `.phc-quote-band` did not.
   The design's Quote component sets margin 0 on figure, blockquote and p. */
.phc-quote-band blockquote p {
	margin: 0;
}

.phc-quote-band blockquote {
	margin: 0;
	max-width: 34ch;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(30px, 4.4vw, 62px);
	line-height: 1.08;
	letter-spacing: -.02em;
	font-weight: 400;
	color: var(--wp--custom--text-primary);
	text-wrap: balance;
}

.phc-quote-band-attribution {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

/* StepList - numbered process steps: mono numeral, hairline rule, prose. */

.phc-step-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}

.phc-step {
	border-top: 1px solid var(--wp--custom--border-subtle);
	padding: clamp(24px, 3vw, 44px) 0;
	display: grid;
	grid-template-columns: clamp(60px, 7vw, 120px) minmax(0, 1fr) minmax(0, 1.2fr);
	gap: clamp(20px, 4vw, 64px);
	align-items: start;
}

.phc-step-n {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(20px, 2.4vw, 34px);
	line-height: 1;
}

/* Fallback colour for a StepList numeral, wrapped in :where() so it carries
   ZERO specificity.

   The design's StepList colours this numeral with the care tone
   (`color: c.rule`), so the real value is set per instance with
   .phc-accent-text-{tone}. Sky-500 is the right fallback because it is what
   the component itself defaults to (`function StepList({ care = "sky" … })`),
   and without any fallback a missing accent class silently inherits body
   colour -- which is exactly how HIV Prevention's 01-04 ended up grey.

   The :where() is load-bearing. Written as a plain `.phc-step-n { color }`
   this rule is a single class, the same specificity as
   `.phc-accent-text-coral`, but it sits LATER in the file -- so it won on
   source order and turned both HIV pages' numerals sky instead of coral.
   Zero specificity means every tone class overrides it, while a StepList
   that forgot its tone class still degrades to the component default rather
   than to body text. */
:where(.phc-step-n) {
	color: var(--wp--custom--phc-sky-500);
}

.phc-step h3 {
	margin: 0;
	max-width: 18ch;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: var(--wp--custom--type-heading-m-line);
	letter-spacing: var(--wp--custom--type-heading-m-track);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-step-body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.phc-step-body p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-step-body ul {
	margin: 0;
	padding-left: 1.1em;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.phc-step-body li {
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

@media (max-width: 680px) {
	.phc-step { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--3); }
}

/* FigureRows - two-column figure list (rates, prices), mono values. */

.phc-figure-rows {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top-width: 2px;
	border-top-style: solid;
}

.phc-figure-rows li {
	border-bottom: 1px solid var(--wp--custom--border-subtle);
	padding: var(--wp--preset--spacing--5) 0;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--6);
}

.phc-figure-rows-label {
	font-size: var(--wp--preset--font-size--body-m);
	color: var(--wp--custom--text-primary);
}

.phc-figure-rows-value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(18px, 1.8vw, 26px);
	color: var(--wp--custom--text-primary);
}

.phc-figure-rows-note {
	margin: var(--wp--preset--spacing--5) 0 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

/* Explorer - sticky tab list + single card panel, used by the STI conditions
   explorer (StiTestingPage) and the Primary Care services explorer
   (PrimaryCarePage). JS in phc.js swaps the active tab/panel on click; this
   is plain progressive-enhancement markup -- with JS disabled every panel
   renders (see .phc-explorer-panel below), so content is never hidden from
   a no-JS visitor, only left unsplit into tabs. */

.phc-explorer {
	display: grid;
	grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
	gap: var(--wp--custom--grid-gap);
	align-items: start;
}

.phc-explorer-tabs {
	display: flex;
	flex-direction: column;
	position: sticky;
	top: calc(var(--wp--custom--header-h, 76px) + 24px);
	border-top: 1px solid var(--wp--custom--border-subtle);
}

.phc-explorer-tab {
	appearance: none;
	cursor: pointer;
	text-align: left;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	min-height: 64px;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border: none;
	border-bottom: 1px solid var(--wp--custom--border-subtle);
	border-left: 3px solid transparent;
	background: transparent;
	color: var(--wp--custom--text-primary);
	font-family: inherit;
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.25;
	letter-spacing: -.01em;
	font-weight: var(--wp--custom--weight-regular);
	transition: background var(--wp--custom--duration-fast) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-explorer-tab[aria-selected="true"] {
	background: var(--wp--custom--surface-card);
	font-weight: var(--wp--custom--weight-medium);
}

.phc-explorer-tab-arrow {
	font-size: 15px;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--wp--custom--duration-fast) var(--wp--custom--ease-out), transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-explorer-tab[aria-selected="true"] .phc-explorer-tab-arrow {
	opacity: 1;
	transform: none;
}

.phc-explorer-panel[hidden] { display: none; }

@media (max-width: 860px) {
	.phc-explorer { grid-template-columns: minmax(0, 1fr); }
	.phc-explorer-tabs { position: static; flex-direction: row; overflow-x: auto; }
	.phc-explorer-tab { min-height: 48px; border-bottom: none; border-left: none; border-top: 3px solid transparent; white-space: nowrap; }
	.phc-explorer-tab[aria-selected="true"] { border-top-color: currentColor; }
}

/* Carousel - draggable slide track used by the HIV basics explainer
   (HivPreventionPage, HivCarePage). Progressive enhancement: phc.js adds
   .is-js to .phc-carousel once it has wired up the drag/dot/arrow controls;
   until then .phc-carousel-track wraps and every slide stacks and reads
   top-to-bottom, so a no-JS visitor loses nothing, same principle as the
   Explorer panels above. */

.phc-carousel {
	user-select: none;
	-webkit-user-select: none;
}

.phc-carousel-viewport {
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.phc-carousel.is-js .phc-carousel-viewport { cursor: grab; }
.phc-carousel.is-js .phc-carousel-viewport.is-dragging { cursor: grabbing; user-select: none; }

.phc-carousel-track {
	display: flex;
	flex-wrap: wrap;
	user-select: none;
	-webkit-user-select: none;
}

.phc-carousel.is-js .phc-carousel-track {
	flex-wrap: nowrap;
	transition: transform 520ms cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.phc-carousel-track.is-dragging { transition: none !important; }

.phc-carousel-slide {
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 0 clamp(8px, 1vw, 14px);
	user-select: none;
	-webkit-user-select: none;
}

.phc-carousel-slide figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	user-select: none;
}

.phc-carousel-slide-media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--wp--custom--radius-media);
	border: 1px solid var(--wp--custom--border-subtle);
	background: var(--wp--custom--surface-card);
}

.phc-carousel-slide-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

.phc-carousel-slide figcaption {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

.phc-carousel-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--5);
	flex-wrap: wrap;
	margin-top: clamp(20px, 2.5vw, 32px);
}

.phc-carousel-dots {
	display: flex;
	gap: var(--wp--preset--spacing--2);
}

.phc-carousel-dot {
	width: 10px;
	height: 10px;
	border-radius: var(--wp--custom--radius-pill);
	border: none;
	padding: 0;
	cursor: pointer;
	background: var(--wp--custom--border-subtle);
	transition: width 240ms, background 240ms;
}

.phc-carousel-dot[aria-current="true"] {
	width: 28px;
	background: var(--wp--custom--phc-coral-500);
}

.phc-carousel-arrows {
	display: flex;
	gap: var(--wp--preset--spacing--3);
}

.phc-carousel-arrow {
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius-pill);
	border: 1px solid var(--wp--custom--border-subtle);
	background: var(--wp--custom--surface-card);
	color: var(--wp--custom--text-primary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background var(--wp--custom--duration-fast) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), opacity var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-carousel-arrow[disabled] {
	opacity: .4;
	cursor: default;
}

/* ==========================================================================
   HIV Prevention page - one-off scoped classes for the two shapes that
   don't already have a shared component: the PEP/PrEP labelled-block
   prose cards, the inverse-band success-rate list, and the PrEP
   medications card. Ported from design/site/pages/HivPreventionPage.jsx.
   ========================================================================== */

.phc-prevention-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
	height: 100%;
}

.phc-prevention-card > .phc-tag { align-self: flex-start; }

.phc-prevention-card > h3 {
	border-top-width: 2px;
	border-top-style: solid;
	padding-top: var(--wp--preset--spacing--4);
}

.phc-prevention-card-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.phc-prevention-card-label {
	margin: 0;
	font-size: 11px;
}

.phc-prevention-card-list {
	margin: 0;
	padding-left: 1.1em;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.phc-prevention-card-list li {
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

.phc-prevention-card-action {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--6);
}

@media (max-width: 860px) {
	.phc-two-col { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ==========================================================================
   Service-detail responsive stacking.

   Why every rule here carries !important: the six service pages reproduce the
   JSX's *inline* `style="display:grid;grid-template-columns:…"` verbatim, as
   CLAUDE.md §13 requires. An inline declaration outranks any stylesheet rule,
   so a plain `grid-template-columns: 1fr` in a media query silently loses and
   the band stays two-up on a phone. The design's own site/site.css solves it
   the same way -- roughly thirty of its responsive declarations are
   !important, precisely because it is overriding the same inline styles (see
   `.phc-care-row{grid-template-columns:minmax(0,1fr) !important}` there). Our
   port had dropped most of them; this restores that layer.

   Breakpoints follow CLAUDE.md §7: 960 collapses two-column bands, 860 stacks
   care-line rows, 680 goes single column.

   `.phc-cond-grid` is deliberately absent -- it is `auto-fit/minmax`, so it
   reflows on its own and must not be pinned (§13: never swap a layout
   technique).

   TODO: not specified in design. The supplied design screenshots are desktop
   only, and the design's site.css never covered the service-detail hooks
   (`.phc-svc-head`, `.phc-uu`, `.phc-hormone-offered`, …) because those pages
   postdate it. These rules implement the breakpoint behaviour §7 mandates
   using the pattern the design file already established; the exact mobile
   composition still needs sign-off against a mobile design.
   ========================================================================== */

@media (max-width: 960px) {
	.phc-sti-head,
	.phc-svc-head,
	.phc-notice-head,
	.phc-prevention-head,
	.phc-hivcare-head,
	.phc-hormone-head,
	.phc-hormone-offered,
	.phc-prep-start,
	.phc-benefit-row,
	.phc-appt-book,
	.phc-uu {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: var(--wp--preset--spacing--8) !important;
		align-items: start !important;
	}

	/* The order flip that puts the media column first on Hormone Therapy is a
	   desktop composition; stacked, the text must lead. */
	.phc-hormone-offered > * {
		order: 0 !important;
	}

	/* Sticky side panels have nothing to stick beside once stacked. */
	.phc-uu > *,
	.phc-prep-start > * {
		position: static !important;
	}
}

@media (max-width: 860px) {
	/* Matches design site/site.css line 21-22 exactly, !important included --
	   our port had these two declarations without it, so the inline grid on
	   Primary Care / STI / Weight Management kept its desktop columns and the
	   mono rate figures ($120/month) overflowed the viewport by 66px. */
	.phc-care-row {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: var(--wp--preset--spacing--8) !important;
	}

	.phc-care-row > * {
		order: 0 !important;
	}
}

@media (max-width: 680px) {
	/* Single column: the last multi-column holdouts. */
	.phc-weight-program,
	.phc-appt-grid,
	.phc-appt-grid-2,
	.phc-appt-grid-3 {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* The scroll-capped criteria stack has no reason to stay capped once it is
	   the full column width -- capping it there just hides content behind an
	   inner scrollbar on the smallest screens. */
	.phc-criteria-scroll {
		max-height: none !important;
		overflow-y: visible !important;
		padding-right: 0 !important;
	}
}

/* ==========================================================================
   Header: stop the sticky bar overflowing the viewport on small phones.

   `.phc-header-logo` and `.phc-header-actions` are both flex-shrink:0, so at
   375px the logo (~130px) + the "Book an Appointment" pill + the 44px drawer
   toggle + gutters exceed the viewport and the whole document scrolls
   sideways -- which CLAUDE.md §7 forbids. It affected every page, the
   homepage included, so it predates the service pages.

   The pill is hidden rather than shrunk: the drawer already contains a
   full-width "Book an Appointment" CTA (see parts/header.html), so the action
   is still one tap away and nothing is lost. That is what "nav collapses to a
   drawer" (§6) implies. The toggle stays, and the CTA returns above 560px.

   TODO: not specified in design -- no mobile header design was supplied.
   ========================================================================== */

@media (max-width: 560px) {
	.phc-header-actions > .phc-btn {
		display: none;
	}
}

/* Proven-success-rates / community-impact eyebrow label on the inverse
   PrEP-effectiveness band -- an 11px variant of .phc-ruled-head-eyebrow
   with a 2px coral rule underneath, per the JSX's inline style. */
.phc-prevention-rate-label {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--4);
	align-self: flex-start;
	font-size: 11px;
	color: var(--wp--custom--phc-coral-100);
	border-bottom: 2px solid var(--wp--custom--phc-coral-500);
	padding-bottom: var(--wp--preset--spacing--2);
}

.phc-prevention-rate-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.phc-prevention-rate-list li {
	border-top: 1px solid rgba(255, 255, 255, .28);
	padding: var(--wp--preset--spacing--5) 0;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-inverse-muted);
	text-wrap: pretty;
}

.phc-prevention-rate-list strong {
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-inverse);
}

/* The lead-in is optionally a link. It sits on the inverse band, so it takes
   the inverse text colour and marks itself with an underline rather than a
   hue -- a coral link here would fight the coral section label above it. */
.phc-prevention-rate-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .42);
	transition: border-color var(--wp--custom--motion-fast, 160ms) ease, color var(--wp--custom--motion-fast, 160ms) ease;
}

.phc-prevention-rate-link:hover,
.phc-prevention-rate-link:focus-visible {
	border-bottom-color: var(--wp--custom--phc-coral-300, #ffb4a2);
}

.phc-prevention-rate-link:hover strong,
.phc-prevention-rate-link:focus-visible strong {
	color: var(--wp--custom--phc-coral-100);
}

/* PrEP medications card -- square contain-fit image, linked drug-class
   subtitle, mono form line, hairline approvals list (reuses
   .phc-spec-card-rows), dotted notes list. */

.phc-prevention-med-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	height: 100%;
}

.phc-prevention-med-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--wp--custom--radius-media);
	border: 1px solid var(--wp--custom--border-subtle);
	background: var(--wp--custom--surface-tint);
}

.phc-prevention-med-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.phc-prevention-med-card > h3 {
	margin: 0;
	border-top-width: 2px;
	border-top-style: solid;
	padding-top: var(--wp--preset--spacing--4);
}

.phc-prevention-med-sub {
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.phc-prevention-med-form {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--custom--text-primary);
}

.phc-prevention-med-notes {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.phc-prevention-med-notes li {
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--3);
	align-items: start;
}

.phc-prevention-med-notes li span:first-child {
	width: 6px;
	height: 6px;
	margin-top: 8px;
	border-radius: 50%;
}

.phc-prevention-med-notes li span:last-child {
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

/* ==========================================================================
   Weight Management page - "What to expect in our program" 3-column grid,
   ported from design/site/pages/WeightManagementPage.jsx (PROGRAM). Added
   by the build coordinator because the class was used in
   patterns/page-weight-management.php but not yet defined.
   ========================================================================== */

.phc-weight-program {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
}

.phc-weight-program-item {
	border-top-width: 2px;
	border-top-style: solid;
	padding-top: var(--wp--preset--spacing--6);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	height: 100%;
}

.phc-weight-program-n {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1;
	color: var(--wp--custom--text-muted);
}

.phc-weight-program-bullets {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.phc-weight-program-bullets li {
	display: grid;
	grid-template-columns: 10px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-weight-program-dot {
	margin-top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	flex-shrink: 0;
}

@media (max-width: 860px) {
	.phc-weight-program { grid-template-columns: minmax(0, 1fr); }
}

/* StatBlock, ported from _ds_bundle.js StatBlock() -- value over label,
   used inverse on the Weight Management page's closing band. Added by the
   build coordinator because the class was used in
   patterns/page-weight-management.php but not yet defined. */

.phc-weight-stat {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.phc-weight-stat-value {
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--wp--custom--type-display-m-line);
	letter-spacing: var(--wp--custom--type-display-m-track);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-inverse);
}

.phc-weight-stat-label {
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-inverse-muted);
}

/* ==========================================================================
   STI Testing page ("Free STI Testing") - two bespoke one-off widgets from
   StiTestingPage.jsx with no existing shared-component equivalent: the
   TestingWindow window-period diagram (first RuledSection) and the
   ConditionExplorer panel grid (MediaFrame + labelled prose blocks, in the
   "What we test for, and what it means" explorer). Everything else on the
   page reuses the shared service-detail components documented above
   (RuledSection, ServiceHero, BenefitList, SpecCard, Accordion, Explorer,
   BookingBand).
   ========================================================================== */

.phc-sti-window {
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
	padding: clamp(28px, 3vw, 40px);
	background: var(--wp--custom--surface-tint);
	border-radius: var(--wp--custom--radius-l, 20px);
}

.phc-sti-window-eyebrow {
	margin: 0 0 28px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--custom--text-secondary);
}

.phc-sti-window-marks {
	display: grid;
	gap: clamp(22px, 2.4vw, 32px);
}

.phc-sti-window-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--6);
	align-items: start;
}

.phc-sti-window-track {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
}

.phc-sti-window-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: 0 0 auto;
	margin-top: 6px;
}

.phc-sti-window-line {
	width: 2px;
	flex: 1 1 auto;
	min-height: 34px;
	margin-top: 8px;
	background: var(--wp--custom--border-subtle, rgba(0, 0, 0, .12));
}

.phc-sti-window-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 2px;
}

.phc-sti-window-when {
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.1;
	letter-spacing: -.02em;
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-primary);
}

.phc-sti-window-label {
	font-size: var(--wp--preset--font-size--body-m);
	line-height: 1.4;
	color: var(--wp--custom--text-primary);
}

.phc-sti-window-note {
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.45;
	color: var(--wp--custom--text-secondary);
}

.phc-sti-window-footnote {
	margin: 28px 0 0;
	padding-top: var(--wp--preset--spacing--6);
	border-top: 1px solid var(--wp--custom--border-subtle, rgba(0, 0, 0, .12));
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.45;
	color: var(--wp--custom--text-secondary);
}

/* ConditionExplorer panel: 260px MediaFrame + a column of labelled prose
   blocks (string body -> <p>, array body -> <ul>). */

.phc-sti-cond-panel {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: 28px;
	align-items: stretch;
}

.phc-sti-cond-panel .phc-media-frame,
.phc-sti-cond-panel .phc-media-frame-inner,
.phc-sti-cond-panel .phc-media-frame-inner img {
	height: 100%;
	min-height: 100%;
	object-fit: cover;
}

.phc-sti-cond-panel-body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
}

.phc-sti-cond-block {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.phc-sti-cond-block-label { margin: 0; font-size: 11px; }

.phc-sti-cond-list {
	margin: 0;
	padding-left: 1.1em;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.phc-sti-cond-list li,
.phc-sti-cond-block p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

@media (max-width: 640px) {
	.phc-sti-cond-panel { grid-template-columns: minmax(0, 1fr); }
	.phc-sti-cond-panel .phc-media-frame,
	.phc-sti-cond-panel .phc-media-frame-inner { height: 260px; min-height: 260px; }
}

/* ==========================================================================
   core/button fallback — unscoped .phc-btn-* reconstruction.

   The established convention in this file is "class on the block, style the
   child <a>", scoped per container (.phc-hero-actions, .phc-care-row-actions,
   .phc-appt-card-cta …). That works, but it fails silently the moment a
   pattern adds a wp:buttons group without also adding a scoped wrapper class
   and a matching rule here — and it had: seven button groups across five of
   the six service pages sat inside a bare <div class="wp-block-buttons">.

   Two things went wrong in that state, both visible:

   1. The variant class (.phc-btn-inverse etc.) lands on the OUTER
      .wp-block-button div. Those variant rules set background/color/
      border-color but not display/padding/radius (which live on the .phc-btn
      base class, absent here) — so the wrapper painted a bare coloured
      rectangle *behind* the real button. That was the white box around the
      navy "Book a consultation" pill on Weight Management.
   2. The inner <a> matched no scoped rule, so it fell back to core's default
      wp-element-button styling — a navy fill — regardless of the variant
      actually requested. Hence "Get directions" (inverse-outline) and
      "Check your insurance" (ghost) both rendering as solid navy pills.

   This block fixes the whole class of bug instead of the instances: it resets
   the wrapper and reconstructs the button on the child <a> for any
   .wp-block-button carrying a .phc-btn-* variant, with no container required.
   Specificity is deliberately low (one class + child), so every existing
   container-scoped rule above still wins and nothing already-correct moves.

   Arrow policy matches the scoped rules: primary / secondary / inverse carry
   the trailing arrow; ghost and inverse-outline never did in the source.
   ========================================================================== */

/* 0. Gap between buttons in a bare wrapper.

   core's `is-layout-flex` gives these wrappers display:flex and
   flex-wrap:wrap but derives the gap from block-gap, which is unset here — so
   it computed 0px and the pills sat flush against each other. Every button row
   on the six service-detail pages uses `gap: var(--space-3)` in the design
   JSX, so 12px is the right value.

   The `:not([class*="phc-"])` is load-bearing: it restricts this to wrappers
   with no scoped class of their own. Without it the rule's specificity
   (`:has()` contributes its argument's) would outrank `.phc-appt-card-cta`
   and silently flatten that one's deliberate 16px (`--space-4`, per
   ServicesPage.jsx) down to 12px. Verified before and after: that card still
   measures 16px, every scoped wrapper still measures 12px.

   `:has()` is baseline-supported (Chrome 105+, Safari 15.4+, Firefox 121+). */
.wp-block-buttons:not([class*="phc-"]):has( > .wp-block-button[class*="phc-btn-"] ) {
	gap: var(--wp--preset--spacing--3);
}

/* 1. Stop the variant class painting the wrapper. */
.wp-block-button.phc-btn-primary,
.wp-block-button.phc-btn-secondary,
.wp-block-button.phc-btn-accent,
.wp-block-button.phc-btn-ghost,
.wp-block-button.phc-btn-inverse,
.wp-block-button.phc-btn-inverse-outline {
	background: none;
	border: 0;
	padding: 0;
}

/* 2. Rebuild .phc-btn base on the rendered anchor. */
.wp-block-button[class*="phc-btn-"] > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: var(--wp--custom--weight-medium);
	letter-spacing: var(--wp--custom--type-label-track);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-style: solid;
	border-width: 1px;
	transition: var(--wp--custom--transition-control);
}

.wp-block-button[class*="phc-btn-"] > a:hover {
	transform: translateY(-1px);
}

/* 3. Sizes. */
.wp-block-button.phc-btn-lg > a { height: 54px; padding: 0 30px; font-size: var(--wp--preset--font-size--body-m); }
.wp-block-button.phc-btn-md > a { height: 44px; padding: 0 22px; font-size: var(--wp--preset--font-size--label); }
.wp-block-button.phc-btn-sm > a { height: 36px; padding: 0 16px; font-size: var(--wp--preset--font-size--label); }

/* 4. Variants — values copied from the canonical .phc-btn-* rules above. */
.wp-block-button.phc-btn-primary > a {
	background: var(--wp--custom--action-primary-bg);
	color: var(--wp--custom--action-primary-fg);
	border-color: var(--wp--custom--action-primary-bg);
}

.wp-block-button.phc-btn-primary > a:hover {
	background: var(--wp--custom--action-primary-bg-hover);
	border-color: var(--wp--custom--action-primary-bg-hover);
	color: var(--wp--custom--action-primary-fg);
}

.wp-block-button.phc-btn-secondary > a {
	background: var(--wp--custom--action-secondary-bg);
	color: var(--wp--custom--action-secondary-fg);
	border-color: var(--wp--custom--action-secondary-border);
}

.wp-block-button.phc-btn-secondary > a:hover {
	background: var(--wp--custom--action-secondary-bg-hover);
	border-color: var(--wp--custom--phc-ink);
	color: var(--wp--custom--action-secondary-fg);
}

.wp-block-button.phc-btn-accent > a {
	background: var(--wp--custom--action-accent-bg);
	color: var(--wp--custom--action-accent-fg);
	border-color: var(--wp--custom--action-accent-bg);
}

.wp-block-button.phc-btn-accent > a:hover {
	background: var(--wp--custom--action-accent-bg-hover);
	border-color: var(--wp--custom--action-accent-bg-hover);
	color: var(--wp--custom--action-accent-fg);
}

.wp-block-button.phc-btn-ghost > a {
	background: transparent;
	color: var(--wp--custom--text-primary);
	border-color: transparent;
}

.wp-block-button.phc-btn-ghost > a:hover {
	background: var(--wp--custom--surface-tint);
	color: var(--wp--custom--text-primary);
}

.wp-block-button.phc-btn-inverse > a {
	background: var(--wp--custom--action-inverse-bg);
	color: var(--wp--custom--action-inverse-fg);
	border-color: var(--wp--custom--action-inverse-bg);
}

.wp-block-button.phc-btn-inverse > a:hover {
	background: var(--wp--custom--phc-white);
	border-color: var(--wp--custom--phc-white);
	color: var(--wp--custom--action-inverse-fg);
}

.wp-block-button.phc-btn-inverse-outline > a {
	background: transparent;
	color: var(--wp--custom--text-inverse);
	border-color: rgba(251, 250, 246, .42);
}

.wp-block-button.phc-btn-inverse-outline > a:hover {
	background: rgba(251, 250, 246, .14);
	border-color: var(--wp--custom--text-inverse);
	color: var(--wp--custom--text-inverse);
}

/* 5. Trailing arrow, on the variants that carried one in the source.

   `:not(:has(.phc-btn-icon))` prevents a double arrow. This codebase has two
   arrow mechanisms: plain `.phc-btn` anchors (from phc_render_page_cta() /
   phc_render_booking_band()) carry a literal `<span class="phc-btn-icon">→</span>`,
   while wp:button blocks get theirs from a ::after rule. Two wp:button blocks
   mix both conventions -- STI Testing's "Get tested" and HIV Care's "Start
   care" have the literal span in their markup -- so adding ::after
   unconditionally rendered "Get tested → →". Skipping the pseudo-element when
   the anchor already contains an icon span makes both conventions safe to mix,
   here and in any future pattern. */
.wp-block-button.phc-btn-primary > a:not(:has(.phc-btn-icon))::after,
.wp-block-button.phc-btn-secondary > a:not(:has(.phc-btn-icon))::after,
.wp-block-button.phc-btn-inverse > a:not(:has(.phc-btn-icon))::after {
	content: "\2192";
	display: inline-flex;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.wp-block-button.phc-btn-primary > a:not(:has(.phc-btn-icon)):hover::after,
.wp-block-button.phc-btn-secondary > a:not(:has(.phc-btn-icon)):hover::after,
.wp-block-button.phc-btn-inverse > a:not(:has(.phc-btn-icon)):hover::after {
	transform: translateX(3px);
}

/* ==========================================================================
   core/quote: strip the opinionated left bar.

   `add_theme_support( 'wp-block-styles' )` (functions.php) pulls in core's
   opinionated block CSS, which styles `.wp-block-quote` with
   `border-left: .25em solid; padding-left: 1em`. At the quote font size that
   computed to a **9px solid ink bar plus 38.4px of padding**, which is both
   undesigned and off-centre -- the padding shifted the centred quote text
   rightward inside its own box.

   The design's Quote component (see `function Quote` in _ds_bundle.js) gives
   its `<figure>` nothing but `margin: 0`; no border, no padding. So this is
   precisely the case CLAUDE.md §15 describes: "strip or override core's
   wp-block-* styles that inject padding, borders, or font sizes not in the
   design".

   Scoped to the two quote components this theme actually ships
   (`.phc-quote-band` on the service pages, `.phc-quote` inline on
   WholePerson) rather than clobbering `.wp-block-quote` globally, so a plain
   core quote added by the client elsewhere keeps its default look.
   ========================================================================== */

.phc-quote-band .wp-block-quote,
.wp-block-quote.phc-quote {
	border: 0;
	padding: 0;
	margin: 0;
}

@media (max-width: 768px) {
	.phc-spec-cards-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ==========================================================================
   PHC Posts Archive & Editorial Single Post Design System
   ========================================================================== */

/* --- Posts Page Hero --- */
.phc-posts-hero {
	padding-top: clamp(48px, 6vw, 80px);
	padding-bottom: clamp(32px, 4vw, 48px);
	background: var(--wp--custom--surface-page);
	text-align: center;
}

.phc-posts-hero-content {
	max-width: 820px;
	margin: 0 auto;
}

.phc-posts-hero-title {
	font-size: clamp(32px, 4.5vw, 56px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--custom--text-primary);
	margin: 12px 0 16px;
	letter-spacing: -0.02em;
}

.phc-posts-hero-title em {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	color: var(--wp--custom--phc-sky-500);
}

.phc-posts-hero-desc {
	font-size: clamp(16px, 1.8vw, 19px);
	line-height: 1.6;
	color: var(--wp--custom--text-secondary);
	margin: 0 auto;
	max-width: 660px;
}

/* --- Category Filter Navigation --- */
.phc-posts-filter-section {
	padding: 0 0 clamp(24px, 3vw, 40px);
	background: var(--wp--custom--surface-page);
}

.phc-filter-pills-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	align-items: center;
}

.phc-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: var(--wp--custom--radius-full);
	background: #ffffff;
	border: 1px solid var(--wp--custom--border-subtle);
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--custom--text-secondary);
	text-decoration: none;
	transition: all var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-filter-pill:hover {
	border-color: var(--wp--custom--action-primary-bg);
	color: var(--wp--custom--action-primary-bg);
	transform: translateY(-1px);
}

.phc-filter-pill.is-active {
	background: var(--wp--custom--action-primary-bg);
	border-color: var(--wp--custom--action-primary-bg);
	color: #ffffff;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(15, 34, 74, 0.18);
}

.phc-pill-count {
	font-size: 12px;
	opacity: 0.75;
}

/* --- Featured Article Spotlight --- */
.phc-featured-post-section {
	padding: 0 0 clamp(40px, 5vw, 64px);
	background: var(--wp--custom--surface-page);
}

.phc-featured-card {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(24px, 4vw, 48px);
	background: #ffffff;
	border-radius: var(--wp--custom--radius-lg);
	border: 1px solid var(--wp--custom--border-subtle);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow-sm);
	transition: transform var(--wp--custom--duration-normal) var(--wp--custom--ease-out),
	            box-shadow var(--wp--custom--duration-normal) var(--wp--custom--ease-out),
	            border-color var(--wp--custom--duration-normal) var(--wp--custom--ease-out);
}

.phc-featured-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow-md);
	border-color: rgba(15, 34, 74, 0.2);
}

.phc-featured-media {
	display: block;
	overflow: hidden;
	background: var(--wp--custom--surface-tint);
	position: relative;
	min-height: 320px;
}

.phc-featured-media .phc-media-frame-inner {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.phc-featured-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 800ms var(--wp--custom--ease-out);
}

.phc-featured-card:hover .phc-featured-media img {
	transform: scale(1.04);
}

.phc-featured-body {
	padding: clamp(28px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.phc-spotlight-badge {
	display: inline-flex;
	align-items: center;
	background: rgba(43, 123, 196, 0.12);
	color: var(--wp--custom--phc-sky-500);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius-full);
}

.phc-featured-title {
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.25;
	margin: 14px 0 16px;
}

.phc-featured-title a {
	color: var(--wp--custom--text-primary);
	text-decoration: none;
	transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-featured-title a:hover {
	color: var(--wp--custom--phc-sky-500);
}

.phc-featured-excerpt {
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--custom--text-secondary);
	margin-bottom: 24px;
}

.phc-featured-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
}

@media (max-width: 900px) {
	.phc-featured-card {
		grid-template-columns: 1fr;
	}
	.phc-featured-media {
		min-height: 240px;
		aspect-ratio: 16 / 9;
	}
}

/* --- Posts Grid & Cards --- */
.phc-posts-grid-section {
	padding: clamp(48px, 6vw, 80px) 0;
	background: var(--wp--custom--surface-tint);
}

.phc-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 32px);
}

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

@media (max-width: 640px) {
	.phc-posts-grid {
		grid-template-columns: 1fr;
	}
}

.phc-post-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: var(--wp--custom--radius-md);
	border: 1px solid var(--wp--custom--border-subtle);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow-sm);
	transition: transform var(--wp--custom--duration-normal) var(--wp--custom--ease-out),
	            box-shadow var(--wp--custom--duration-normal) var(--wp--custom--ease-out),
	            border-color var(--wp--custom--duration-normal) var(--wp--custom--ease-out);
}

.phc-post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow-md);
	border-color: rgba(15, 34, 74, 0.2);
}

.phc-post-card-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #eaeff5;
	position: relative;
}

.phc-post-card-media .phc-media-frame-inner {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.phc-post-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 800ms var(--wp--custom--ease-out);
}

.phc-post-card:hover .phc-post-card-media img {
	transform: scale(1.04);
}

.phc-post-placeholder-media {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #94a3b8;
}

.phc-post-placeholder-media .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
}

.phc-post-card-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.phc-post-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.phc-cat-pill {
	display: inline-flex;
	align-items: center;
	background: rgba(15, 34, 74, 0.06);
	color: var(--wp--custom--action-primary-bg);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: var(--wp--custom--radius-full);
}

.phc-reading-badge,
.phc-reading-badge-sm {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--wp--custom--text-muted);
	font-family: var(--wp--preset--font-family--mono);
}

.phc-post-card-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 10px;
}

.phc-post-card-title a {
	color: var(--wp--custom--text-primary);
	text-decoration: none;
	transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-post-card-title a:hover {
	color: var(--wp--custom--phc-sky-500);
}

.phc-post-card-excerpt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--custom--text-secondary);
	margin-bottom: 20px;
	flex: 1;
}

.phc-post-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid var(--wp--custom--border-subtle);
	margin-top: auto;
}

.phc-post-date {
	font-size: 12px;
	color: var(--wp--custom--text-muted);
}

/* --- Pagination & Empty States --- */
.phc-pagination-wrap {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

.phc-pagination-wrap .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: var(--wp--custom--radius-md);
	background: #ffffff;
	border: 1px solid var(--wp--custom--border-subtle);
	color: var(--wp--custom--text-primary);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-pagination-wrap .page-numbers.current,
.phc-pagination-wrap .page-numbers:hover {
	background: var(--wp--custom--action-primary-bg);
	border-color: var(--wp--custom--action-primary-bg);
	color: #ffffff;
}

.phc-no-posts-card {
	text-align: center;
	padding: 64px 32px;
	background: #ffffff;
	border-radius: var(--wp--custom--radius-lg);
	border: 1px dashed var(--wp--custom--border-subtle);
	max-width: 540px;
	margin: 0 auto;
}

.phc-no-posts-card h3 {
	font-size: 20px;
	margin: 0 0 10px;
	color: var(--wp--custom--text-primary);
}

.phc-no-posts-card p {
	color: var(--wp--custom--text-secondary);
	margin-bottom: 20px;
}

/* ==========================================================================
   Single Post Editorial Page
   ========================================================================== */
.phc-article-wrapper {
	background: var(--wp--custom--surface-page);
}

.phc-article-breadcrumb-bar {
	padding: 18px 0;
	border-bottom: 1px solid var(--wp--custom--border-subtle);
	background: #ffffff;
}

.phc-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: var(--wp--custom--text-muted);
}

.phc-breadcrumbs a {
	color: var(--wp--custom--text-secondary);
	text-decoration: none;
	transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-breadcrumbs a:hover {
	color: var(--wp--custom--action-primary-bg);
}

.phc-breadcrumb-sep {
	color: #cbd5e1;
}

.phc-breadcrumb-current {
	color: var(--wp--custom--text-primary);
	font-weight: 500;
	max-width: 320px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.phc-article-header {
	padding: clamp(32px, 5vw, 64px) 0 clamp(24px, 3vw, 36px);
}

.phc-article-header-inner {
	max-width: 860px;
	margin: 0 auto;
}

.phc-article-meta-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.phc-article-title {
	font-size: clamp(30px, 4.5vw, 48px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--custom--text-primary);
	letter-spacing: -0.02em;
	margin: 0 0 24px;
}

.phc-article-byline-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--custom--border-subtle);
}

.phc-article-author-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.phc-author-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--custom--action-primary-bg);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.phc-author-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--custom--text-primary);
}

.phc-publish-date {
	font-size: 13px;
	color: var(--wp--custom--text-muted);
}

.phc-article-share-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.phc-share-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--custom--text-muted);
	margin-right: 4px;
}

.phc-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid var(--wp--custom--border-subtle);
	color: var(--wp--custom--text-secondary);
	text-decoration: none;
	transition: all var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-share-btn:hover {
	background: var(--wp--custom--action-primary-bg);
	border-color: var(--wp--custom--action-primary-bg);
	color: #ffffff;
	transform: translateY(-2px);
}

/* --- Hero Image Media Frame --- */
.phc-article-hero-media-wrap {
	margin-bottom: clamp(32px, 5vw, 56px);
}

.phc-article-hero-inner {
	max-width: 1040px;
	margin: 0 auto;
}

.phc-article-hero-media {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 520px;
	border-radius: var(--wp--custom--radius-lg);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow-md);
	background: #eaeff5;
}

.phc-article-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Reading Column & Editorial Content --- */
.phc-article-body-section {
	padding-bottom: clamp(64px, 8vw, 96px);
}

.phc-article-body-inner {
	max-width: 780px;
	margin: 0 auto;
}

.phc-article-content {
	font-size: 17px;
	line-height: 1.75;
	color: var(--wp--custom--text-primary);
}

.phc-article-content > :first-child {
	font-size: 20px;
	line-height: 1.6;
	color: var(--wp--custom--text-primary);
	font-weight: 400;
	margin-bottom: 28px;
}

.phc-article-content h2,
.phc-article-content h3,
.phc-article-content h4 {
	color: var(--wp--custom--text-primary);
	font-weight: 700;
	line-height: 1.3;
	margin-top: 40px;
	margin-bottom: 16px;
}

.phc-article-content h2 {
	font-size: clamp(24px, 3vw, 32px);
	border-bottom: 1px solid var(--wp--custom--border-subtle);
	padding-bottom: 8px;
}

.phc-article-content h3 {
	font-size: clamp(20px, 2.5vw, 24px);
}

.phc-article-content h4 {
	font-size: 18px;
}

.phc-article-content p {
	margin-bottom: 22px;
}

.phc-article-content ul,
.phc-article-content ol {
	margin: 20px 0 28px;
	padding-left: 24px;
}

.phc-article-content li {
	margin-bottom: 10px;
	line-height: 1.65;
}

.phc-article-content hr {
	border: 0;
	border-top: 1px solid var(--wp--custom--border-subtle);
	margin: 36px 0;
}

.phc-article-content blockquote {
	border-left: 4px solid var(--wp--custom--phc-sky-500);
	padding: 16px 24px;
	margin: 32px 0;
	background: #ffffff;
	border-radius: 0 var(--wp--custom--radius-md) var(--wp--custom--radius-md) 0;
	font-size: 18px;
	font-style: italic;
	color: var(--wp--custom--text-secondary);
}

/* --- In-Article Callout Card --- */
.phc-article-callout-card {
	display: flex;
	gap: 20px;
	background: #ffffff;
	border: 1px solid var(--wp--custom--border-subtle);
	border-left: 4px solid var(--wp--custom--phc-coral-500);
	border-radius: var(--wp--custom--radius-md);
	padding: 28px;
	margin: 48px 0 36px;
	box-shadow: var(--wp--custom--shadow-sm);
}

.phc-callout-icon {
	color: var(--wp--custom--phc-coral-500);
	flex-shrink: 0;
	margin-top: 2px;
}

.phc-callout-body h2,
.phc-callout-body h3 {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 600;
	color: var(--wp--custom--text-primary);
}

.phc-callout-body p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--custom--text-secondary);
	margin-bottom: 18px;
}

.phc-callout-services {
	margin: -6px 0 18px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.phc-callout-services li {
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--custom--text-secondary, #4a5568);
}

.phc-callout-services a {
	display: block;
	font-weight: 600;
	color: var(--wp--custom--text-primary, #0f2a44);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.phc-callout-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* --- Article Tags --- */
.phc-article-tags-wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 24px 0;
	border-top: 1px solid var(--wp--custom--border-subtle);
	border-bottom: 1px solid var(--wp--custom--border-subtle);
	margin-bottom: 36px;
}

.phc-tags-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--custom--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.phc-tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.phc-tag-pill {
	display: inline-block;
	padding: 5px 12px;
	border-radius: var(--wp--custom--radius-full);
	background: #ffffff;
	border: 1px solid var(--wp--custom--border-subtle);
	font-size: 13px;
	color: var(--wp--custom--text-secondary);
	text-decoration: none;
	transition: all var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-tag-pill:hover {
	border-color: var(--wp--custom--action-primary-bg);
	color: var(--wp--custom--action-primary-bg);
}

/* --- Author Bio Box --- */
.phc-article-author-card {
	display: flex;
	gap: 20px;
	background: #ffffff;
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-md);
	padding: 24px;
	margin-bottom: 36px;
}

.phc-author-card-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(43, 123, 196, 0.12);
	color: var(--wp--custom--phc-sky-500);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.phc-author-card-avatar .dashicons {
	font-size: 26px;
	width: 26px;
	height: 26px;
}

.phc-author-card-body h3,
.phc-author-card-body h4 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--custom--text-primary);
}

.phc-author-card-body p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--custom--text-secondary);
}

/* --- Prev / Next Navigation --- */
.phc-post-nav-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 36px;
}

@media (max-width: 600px) {
	.phc-post-nav-grid {
		grid-template-columns: 1fr;
	}
}

.phc-post-nav-card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background: #ffffff;
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-md);
	text-decoration: none;
	transition: all var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-post-nav-card:hover {
	border-color: var(--wp--custom--action-primary-bg);
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow-sm);
}

.phc-nav-dir {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--custom--phc-sky-500);
	margin-bottom: 6px;
}

.phc-nav-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--custom--text-primary);
}

/* --- CTA Band --- */
.phc-posts-cta-band {
	background: var(--wp--custom--surface-inverse);
	color: #ffffff;
	padding: clamp(60px, 8vw, 96px) 0;
}

.phc-posts-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.phc-posts-cta-text {
	max-width: 620px;
}

.phc-posts-cta-text h2 {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
	margin: 8px 0 16px;
}

.phc-posts-cta-text p {
	font-size: 16px;
	line-height: 1.6;
	color: #cbd5e1;
	margin: 0;
}

.phc-posts-cta-buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	flex-shrink: 0;
}

@media (max-width: 860px) {
	.phc-posts-cta-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Homepage Minimal & Unique Posts Grid (3-Column Clean Editorial Grid)
   ========================================================================== */
.phc-home-posts-section {
	background: var(--wp--custom--surface-tint);
	padding: clamp(64px, 7vw, 96px) 0;
	border-top: 1px solid var(--wp--custom--border-subtle);
}

.phc-home-posts-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: clamp(32px, 4vw, 48px);
}

.phc-home-posts-title {
	font-size: clamp(28px, 3.5vw, 40px);
	font-weight: 700;
	color: var(--wp--custom--text-primary);
	margin: 6px 0 0;
	line-height: 1.22;
	letter-spacing: -0.02em;
}

.phc-home-posts-title em {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	color: var(--wp--custom--phc-sky-500);
}

.phc-home-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.5vw, 32px);
	align-items: stretch;
}

.phc-home-post-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: var(--wp--custom--radius-lg);
	border: 1px solid var(--wp--custom--border-subtle);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow-sm);
	transition: transform var(--wp--custom--duration-normal) var(--wp--custom--ease-out),
	            box-shadow var(--wp--custom--duration-normal) var(--wp--custom--ease-out),
	            border-color var(--wp--custom--duration-normal) var(--wp--custom--ease-out);
}

.phc-home-post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--shadow-md);
	border-color: rgba(15, 34, 74, 0.2);
}

.phc-home-card-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #eaeff5;
	position: relative;
}

.phc-home-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 800ms var(--wp--custom--ease-out);
}

.phc-home-post-card:hover .phc-home-card-media img {
	transform: scale(1.04);
}

.phc-home-card-num {
	position: absolute;
	top: 12px;
	right: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 600;
	color: #ffffff;
	background: rgba(11, 21, 40, 0.6);
	backdrop-filter: blur(4px);
	padding: 3px 8px;
	border-radius: var(--wp--custom--radius-pill);
	letter-spacing: 0.05em;
}

.phc-home-card-body {
	padding: 24px 22px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.phc-home-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.phc-home-card-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.phc-home-card-title a {
	color: var(--wp--custom--text-primary);
	text-decoration: none;
	transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-home-post-card:hover .phc-home-card-title a {
	color: var(--wp--custom--phc-sky-500);
}

.phc-home-card-excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--custom--text-secondary);
	margin-bottom: 20px;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.phc-home-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid var(--wp--custom--border-subtle);
	margin-top: auto;
}

@media (max-width: 980px) {
	.phc-home-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.phc-home-posts-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

@media (max-width: 640px) {
	.phc-home-posts-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Ambient Visual Enhancements & Grid Staggers
   ========================================================================== */

/* ArcField ambient line shimmer */
@keyframes phcArcShimmer {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 0.75; }
}

.phc-arc-band {
	animation: phcArcShimmer 9s ease-in-out infinite;
	pointer-events: none;
}

/* Automatic stagger cascade for card grids */
.phc-services-grid > *:nth-child(1),
.phc-grid > *:nth-child(1),
.phc-home-posts-grid > *:nth-child(1),
.phc-posts-grid > *:nth-child(1),
.phc-locations-grid > *:nth-child(1) {
	transition-delay: 0ms;
}

.phc-services-grid > *:nth-child(2),
.phc-grid > *:nth-child(2),
.phc-home-posts-grid > *:nth-child(2),
.phc-posts-grid > *:nth-child(2),
.phc-locations-grid > *:nth-child(2) {
	transition-delay: 90ms;
}

.phc-services-grid > *:nth-child(3),
.phc-grid > *:nth-child(3),
.phc-home-posts-grid > *:nth-child(3),
.phc-posts-grid > *:nth-child(3),
.phc-locations-grid > *:nth-child(3) {
	transition-delay: 180ms;
}

.phc-services-grid > *:nth-child(4),
.phc-grid > *:nth-child(4),
.phc-home-posts-grid > *:nth-child(4),
.phc-posts-grid > *:nth-child(4),
.phc-locations-grid > *:nth-child(4) {
	transition-delay: 270ms;
}

.phc-services-grid > *:nth-child(5),
.phc-grid > *:nth-child(5),
.phc-posts-grid > *:nth-child(5) {
	transition-delay: 360ms;
}

.phc-services-grid > *:nth-child(6),
.phc-grid > *:nth-child(6),
.phc-posts-grid > *:nth-child(6) {
	transition-delay: 450ms;
}

/* ==========================================================================
   PHC Minimal Branded Page Loader (Icon Only)
   ========================================================================== */

.phc-page-loader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--custom--surface-page, #FCFAF6);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            visibility 0.4s ease;
	pointer-events: all;
	user-select: none;
	-webkit-user-select: none;
}

/* Smooth Fade Out */
.phc-page-loader.is-loaded {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* The wordmark is ~2.9:1, so it sits in a column with the progress bar under
   it. The old orbital ring assumed a square icon and would crop a wordmark. */
.phc-loader-icon-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
}

.phc-loader-icon {
	width: clamp(180px, 42vw, 232px);
	height: auto;
	object-fit: contain;
	animation: phcIconBreathe 2s ease-in-out infinite;
}

/* Indeterminate bar: reads as progress without implying a percentage. */
.phc-loader-bar {
	position: relative;
	display: block;
	width: 104px;
	height: 2px;
	border-radius: 2px;
	background: rgba(43, 123, 196, 0.16);
	overflow: hidden;
}

.phc-loader-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 42%;
	border-radius: 2px;
	background: var(--wp--custom--phc-sky-500, #2B7BC4);
	animation: phcLoaderBar 1.15s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes phcLoaderBar {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(238%); }
}

@keyframes phcIconBreathe {
	0%, 100% {
		transform: scale(0.96);
		opacity: 0.88;
	}
	50% {
		transform: scale(1.04);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.phc-page-loader {
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}
	.phc-loader-bar::after,
	.phc-loader-icon {
		animation: none !important;
	}
}

/* ==========================================================================
   Patient Resources Hub - Unique UI Components
   ========================================================================== */

/* --- Hero Feature Badges --- */
.phc-resources-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin-top: var(--wp--preset--spacing--6);
}

.phc-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: var(--wp--custom--radius-pill);
	font-size: var(--wp--preset--font-size--body-xs, 13px);
	font-weight: var(--wp--custom--weight-medium);
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	color: var(--wp--custom--text-primary);
}

.phc-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}

/* --- 1. Clinic Direct-Dial Booking Cards --- */
.phc-booking-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
	margin-top: clamp(40px, 5vw, 64px);
}

@media (max-width: 860px) {
	.phc-booking-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

.phc-clinic-card {
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-lg);
	padding: clamp(24px, 4vw, 36px);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-clinic-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow-sm);
	border-color: var(--wp--custom--border-strong);
}

.phc-clinic-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
}

.phc-clinic-card-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-primary);
}

.phc-clinic-details {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-secondary);
}

.phc-clinic-detail-row {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3);
}

.phc-clinic-detail-icon {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: var(--wp--custom--weight-semibold);
	color: var(--wp--custom--phc-sky-500);
	flex-shrink: 0;
	min-width: 20px;
}

.phc-walkin-banner {
	margin-top: var(--wp--preset--spacing--8);
	background: var(--wp--custom--surface-card);
	border: 1px dashed var(--wp--custom--border-strong);
	border-radius: var(--wp--custom--radius-md);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
}

/* --- 2. Patient Portal Digital Dashboard Card --- */
.phc-portal-dashboard {
	background: var(--wp--custom--surface-inverse);
	color: var(--wp--custom--text-inverse);
	border-radius: var(--wp--custom--radius-lg);
	padding: clamp(32px, 5vw, 56px);
	position: relative;
	overflow: hidden;
	margin-top: clamp(40px, 5vw, 64px);
}

.phc-portal-dashboard::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--custom--phc-sky-500), var(--wp--custom--phc-plum-500), var(--wp--custom--phc-rose-500));
}

.phc-portal-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

@media (max-width: 900px) {
	.phc-portal-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.phc-portal-tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--custom--phc-sky-300, #78B5EC);
	margin-bottom: var(--wp--preset--spacing--3);
	display: block;
}

.phc-portal-title {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--display-m);
	color: var(--wp--custom--text-inverse);
	line-height: 1.2;
}

.phc-portal-copy {
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: rgba(251, 250, 246, 0.82);
	margin-bottom: var(--wp--preset--spacing--6);
}

.phc-portal-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--4);
}

@media (max-width: 520px) {
	.phc-portal-features {
		grid-template-columns: minmax(0, 1fr);
	}
}

.phc-portal-feature-item {
	background: rgba(251, 250, 246, 0.06);
	border: 1px solid rgba(251, 250, 246, 0.12);
	border-radius: var(--wp--custom--radius-md);
	padding: var(--wp--preset--spacing--4);
}

.phc-portal-feature-name {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: var(--wp--custom--weight-semibold);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-inverse);
	margin: 0 0 4px;
}

/* Inline SVG icon that replaces the old emoji glyphs. Nudged down so it sits on
   the optical centre of the first line when the title wraps. */
.phc-inline-icon {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 0.12em;
}

.phc-portal-feature-desc {
	font-size: 13px;
	color: rgba(251, 250, 246, 0.68);
	margin: 0;
	line-height: 1.4;
}

/* --- 3. Numbered 3-Step Intake Pathway --- */
.phc-step-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
	margin-top: clamp(40px, 5vw, 64px);
}

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

.phc-step-card {
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-lg);
	padding: clamp(24px, 3vw, 32px);
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}

.phc-step-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--display-m);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--phc-sky-500);
	margin: 0 0 var(--wp--preset--spacing--3);
	line-height: 1;
}

.phc-step-title {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-primary);
}

.phc-step-body {
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
	margin: 0 0 var(--wp--preset--spacing--4);
}

.phc-checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--4);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.phc-checklist li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-primary);
}

.phc-checklist-check {
	color: var(--wp--custom--phc-moss-600, #3F6F55);
	font-weight: 700;
}

/* --- 4. Accepted Insurance Deck --- */
.phc-insurance-matrix {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
	margin-top: clamp(40px, 5vw, 64px);
}

@media (max-width: 900px) {
	.phc-insurance-matrix {
		grid-template-columns: minmax(0, 1fr);
	}
}

.phc-insurance-col {
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-lg);
	padding: var(--wp--preset--spacing--6);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.phc-insurance-col-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--wp--custom--border-subtle);
	padding-bottom: var(--wp--preset--spacing--3);
}

.phc-insurance-col-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-primary);
}

.phc-carrier-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.phc-carrier-pill {
	display: inline-flex;
	padding: 5px 12px;
	background: var(--wp--custom--surface-tint);
	border-radius: var(--wp--custom--radius-sm);
	font-size: 13px;
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-primary);
}

.phc-financial-help-box {
	margin-top: var(--wp--preset--spacing--8);
	background: var(--wp--custom--surface-card);
	border-left: 4px solid var(--wp--custom--phc-amber-500, #C98A2C);
	border-radius: var(--wp--custom--radius-md);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
	border-top: 1px solid var(--wp--custom--border-subtle);
	border-right: 1px solid var(--wp--custom--border-subtle);
	border-bottom: 1px solid var(--wp--custom--border-subtle);
}

/* --- 6. Notice of Privacy Practices Panel --- */
.phc-privacy-box {
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-lg);
	padding: clamp(28px, 4vw, 44px);
	margin-top: clamp(40px, 5vw, 64px);
}

.phc-rights-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
	margin: var(--wp--preset--spacing--6) 0;
}

@media (max-width: 768px) {
	.phc-rights-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.phc-right-card {
	background: var(--wp--custom--surface-tint);
	border-radius: var(--wp--custom--radius-md);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
}

.phc-right-title {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: var(--wp--custom--weight-semibold);
	color: var(--wp--custom--text-primary);
}

.phc-right-desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-secondary);
	line-height: 1.45;
}

/* ==========================================================================
   PHC Locations (unified)
   One locations section for every page. Reuses .phc-clinic-card for the shell
   so it stays in step with the Schedule Appointment hub; only the description,
   the fax row and the two-CTA footer are new.
   ========================================================================== */

.phc-loc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--10);
}

.phc-loc-card {
	gap: var(--wp--preset--spacing--4);
}

.phc-loc-card > .phc-tag {
	align-self: flex-start;
}

.phc-loc-card-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-weight: var(--wp--custom--weight-medium, 500);
	color: var(--wp--custom--text-primary);
}

.phc-loc-card-desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.55;
	color: var(--wp--custom--text-secondary);
}

.phc-loc-phone,
.phc-loc-fax {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--custom--text-primary);
}

.phc-loc-phone {
	text-decoration: none;
	border-bottom: 1px solid var(--wp--custom--border-strong);
	transition: border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-loc-phone:hover,
.phc-loc-phone:focus-visible {
	color: var(--wp--custom--phc-sky-500);
	border-bottom-color: var(--wp--custom--phc-sky-500);
}

/* Exactly two CTAs, primary first, pinned to the bottom so the buttons line
   up across cards of unequal description length. */
.phc-loc-actions {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--2);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

.phc-loc-actions .wp-block-button {
	flex: 1 1 auto;
}

.phc-loc-actions .wp-block-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	white-space: nowrap;
}

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

@media (max-width: 720px) {
	.phc-loc-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Before Your First Visit
   Replaces the old closing CTA banner. Four compact cards, no button -- the
   section header's arrow link is the only outbound click, so it never competes
   with the locations cards above it.
   ========================================================================== */

.phc-fv-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--5);
	margin-top: clamp(32px, 4vw, 56px);
}

.phc-fv-card {
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-lg);
	padding: clamp(20px, 2.5vw, 28px);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	height: 100%;
}

.phc-fv-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--sky-tint, rgba(56, 132, 189, 0.1));
	color: var(--wp--custom--phc-sky-500, #3884bd);
	flex: none;
}

.phc-fv-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: 1.25;
	font-weight: var(--wp--custom--weight-semibold, 600);
	color: var(--wp--custom--text-primary);
}

.phc-fv-body {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.5;
	color: var(--wp--custom--text-secondary);
}

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

@media (max-width: 600px) {
	.phc-fv-grid {
		grid-template-columns: 1fr;
	}
}

/* Trustindex Google reviews embed. The plugin ships its own card styling, so
   this only places the block in the section's vertical rhythm. */
.phc-testimonials-google {
	margin-top: clamp(32px, 4vw, 56px);
}

.phc-testimonials-google-notice {
	margin-top: clamp(32px, 4vw, 56px);
	padding: 18px 22px;
	border: 1px dashed var(--wp--custom--border-strong, #D0CABC);
	border-radius: var(--wp--custom--radius-md, 14px);
	font-size: var(--wp--preset--font-size--body-s, 0.9375rem);
	color: var(--wp--custom--text-secondary, #645F6D);
}

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

.phc-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
	margin-top: clamp(40px, 5vw, 64px);
}

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

.phc-testimonial-card {
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-lg);
	padding: clamp(24px, 3.5vw, 36px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	position: relative;
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-testimonial-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow-sm);
	border-color: var(--wp--custom--border-strong);
}

.phc-testimonial-stars {
	color: var(--wp--custom--phc-amber-500, #C98A2C);
	font-size: 16px;
	letter-spacing: 2px;
	margin-bottom: var(--wp--preset--spacing--3);
}

.phc-testimonial-quote {
	font-size: var(--wp--preset--font-size--body-m);
	line-height: var(--wp--custom--type-body-m-line);
	color: var(--wp--custom--text-primary);
	font-style: italic;
	margin: 0 0 var(--wp--preset--spacing--6);
	flex-grow: 1;
}

.phc-testimonial-footer {
	border-top: 1px solid var(--wp--custom--border-subtle);
	padding-top: var(--wp--preset--spacing--4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.phc-testimonial-author {
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: var(--wp--custom--weight-semibold);
	color: var(--wp--custom--text-primary);
}

.phc-testimonial-location {
	font-size: 12px;
	color: var(--wp--custom--text-muted);
	font-weight: var(--wp--custom--weight-regular);
}

.phc-testimonial-privacy {
	margin-top: var(--wp--preset--spacing--8);
	background: var(--wp--custom--surface-tint);
	border-radius: var(--wp--custom--radius-md);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
	font-size: 12px;
	line-height: 1.5;
	color: var(--wp--custom--text-secondary);
	text-align: center;
}

/* ==========================================================================
   Homepage Insurance Section
   ========================================================================== */

.phc-insurance-logos-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--4);
	margin-top: clamp(32px, 4vw, 48px);
}

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

@media (max-width: 480px) {
	.phc-insurance-logos-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.phc-insurance-logo-card {
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-md);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration-fast) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-insurance-logo-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow-sm);
	border-color: var(--wp--custom--border-strong);
}

.phc-carrier-badge-icon {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: var(--wp--custom--surface-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--custom--border-subtle);
	flex-shrink: 0;
}

.phc-carrier-card-info {
	min-width: 0;
}

.phc-carrier-card-name {
	font-size: 15px;
	font-weight: var(--wp--custom--weight-semibold);
	color: var(--wp--custom--text-primary);
	line-height: 1.3;
	margin: 0;
}

.phc-carrier-card-type {
	font-size: 12px;
	color: var(--wp--custom--text-muted);
	margin-top: 2px;
}

.phc-insurance-selfpay-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
	margin-top: clamp(32px, 4vw, 48px);
}

@media (max-width: 768px) {
	.phc-insurance-selfpay-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.phc-insurance-selfpay-card {
	background: var(--wp--custom--surface-card);
	border: 1px solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius-lg);
	padding: clamp(24px, 3vw, 36px);
}

.phc-insurance-selfpay-card h3 {
	font-size: var(--wp--preset--font-size--heading-s);
	color: var(--wp--custom--text-primary);
	margin: 0 0 var(--wp--preset--spacing--3);
	display: flex;
	align-items: center;
	gap: 10px;
}

.phc-insurance-selfpay-card p {
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-secondary);
	line-height: 1.6;
	margin: 0;
}

.phc-insurance-disclaimer-box {
	margin-top: var(--wp--preset--spacing--8);
	background: var(--wp--custom--surface-tint);
	border-radius: var(--wp--custom--radius-md);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
	font-size: 12px;
	line-height: 1.55;
	color: var(--wp--custom--text-secondary);
	border-left: 3px solid var(--wp--preset--color--navy);
}

/* ==========================================================================
   Medical Marijuana Service Page
   ========================================================================== */

.phc-two-col .phc-step {
	grid-template-columns: clamp(48px, 5vw, 84px) minmax(0, 1fr);
	gap: clamp(16px, 2.4vw, 36px);
}

.phc-step-moss .phc-step-n {
	color: var(--wp--custom--phc-moss-600);
}

@media (max-width: 900px) {
	.phc-mmj-trio {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}












/* ==========================================================================
   Schedule Appointment -- booking hub
   The page is a router, so the three clinic buttons are the only strong marks
   on it: the step strip is deliberately quiet type, and the walk-in band and
   support row sit below the fold of the decision.
   ========================================================================== */

.phc-hub-steps-label {
	margin: 0 0 var(--wp--preset--spacing--5);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: var(--wp--custom--weight-semibold);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--custom--text-muted);
}

.phc-hub-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
	margin: 0 0 clamp(40px, 5vw, 72px);
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.phc-hub-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		'n title'
		'n body';
	column-gap: var(--wp--preset--spacing--4);
	row-gap: var(--wp--preset--spacing--2);
	align-items: baseline;
	padding-top: var(--wp--preset--spacing--4);
	border-top: 2px solid var(--wp--custom--border-strong);
}

.phc-hub-step-n {
	grid-area: n;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: var(--wp--custom--weight-semibold);
	color: var(--wp--custom--phc-sky-500);
}

.phc-hub-step-title {
	grid-area: title;
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-primary);
}

.phc-hub-step-body {
	grid-area: body;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

/* Clinic cards ------------------------------------------------------------ */

.phc-hub-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
}

.phc-hub-card {
	gap: var(--wp--preset--spacing--4);
}

.phc-hub-card-title {
	margin-top: var(--wp--preset--spacing--3);
}

.phc-hub-phone {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--custom--border-strong);
	transition: border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-hub-phone:hover,
.phc-hub-phone:focus-visible {
	color: var(--wp--custom--text-link);
	border-bottom-color: var(--wp--custom--text-link);
}

/* The option block is the answer to "how do I book here?", so it reads as a
   distinct panel rather than more body copy. */
.phc-hub-option {
	background: var(--wp--custom--surface-sky);
	border-radius: var(--wp--custom--radius-md);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
}

.phc-hub-option-phone {
	background: var(--wp--custom--surface-tint);
}

.phc-hub-option-label {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: var(--wp--custom--weight-semibold);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--custom--text-primary);
}

.phc-hub-option-note {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
	text-wrap: pretty;
}

.phc-hub-action {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--2);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--4);
}

.phc-hub-btn {
	width: 100%;
	justify-content: center;
}

/* Walk-in band & support row ---------------------------------------------- */

.phc-hub-walkin-tag {
	margin-bottom: var(--wp--preset--spacing--2);
}

.phc-hub-walkin-title {
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-primary);
}

.phc-hub-walkin-copy {
	margin: 0;
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--wp--custom--type-body-s-line);
	color: var(--wp--custom--text-secondary);
}

.phc-hub-support {
	margin-top: clamp(32px, 4vw, 56px);
	padding-top: var(--wp--preset--spacing--6);
	border-top: 1px solid var(--wp--custom--border-subtle);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4) clamp(24px, 4vw, 56px);
}

.phc-hub-support-link {
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-secondary);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--custom--border-strong);
	padding-bottom: 2px;
	transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-hub-support-link:hover,
.phc-hub-support-link:focus-visible {
	color: var(--wp--custom--text-link);
	border-bottom-color: var(--wp--custom--text-link);
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1000px) {
	.phc-hub-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.phc-hub-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--5);
	}
}

@media (max-width: 720px) {
	.phc-hub-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.phc-hub-support {
		flex-direction: column;
		gap: var(--wp--preset--spacing--4);
	}
}

/* Detail icons on the hub cards are inline SVG, not glyphs, so the icon slot
   has to align the drawing rather than a text baseline. */
.phc-booking-hub .phc-clinic-detail-icon {
	display: inline-flex;
	align-items: center;
	min-width: 16px;
	color: var(--wp--custom--phc-sky-500);
	margin-top: 1px;
}

.phc-hub-icon {
	display: block;
	flex-shrink: 0;
}

/* ==========================================================================
   MMJ Booking - closing section of the medical marijuana page
   (phc-core widget-mmj-booking.php): booking pitch + what to expect on the
   left, the single clinic that offers the service on the right.
   ========================================================================== */

.phc-mmj-book {
	position: relative;
	overflow: hidden;
}

/* Soft moss glow so the section ties back to the page's care tone. */
.phc-mmj-book::before {
	content: "";
	position: absolute;
	inset: auto -10% -40% auto;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(63, 111, 85, .38) 0%, rgba(63, 111, 85, 0) 70%);
	pointer-events: none;
}

.phc-mmj-book .phc-section-inner {
	position: relative;
}

.phc-mmj-book-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}

.phc-mmj-book-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--5);
}

.phc-mmj-book-eyebrow p {
	margin: 0;
	font-size: var(--wp--preset--font-size--overline);
	letter-spacing: var(--wp--custom--type-overline-track);
	text-transform: uppercase;
	font-weight: var(--wp--custom--weight-semibold);
	color: var(--wp--custom--text-inverse-muted);
}

.phc-mmj-book-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--custom--phc-moss-600);
	box-shadow: 0 0 0 4px rgba(63, 111, 85, .28);
}

.phc-mmj-book-title {
	margin: 0;
	max-width: 16ch;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--wp--custom--type-display-m-line);
	letter-spacing: var(--wp--custom--type-display-m-track);
	font-weight: var(--wp--custom--weight-medium);
	color: var(--wp--custom--text-inverse);
	text-wrap: balance;
}

.phc-mmj-book-copy {
	margin: var(--wp--preset--spacing--5) 0 0;
	max-width: 48ch;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: var(--wp--custom--type-body-l-line);
	color: var(--wp--custom--text-inverse-muted);
}

.phc-mmj-book-steps {
	list-style: none;
	margin: var(--wp--preset--spacing--10) 0 0;
	padding: 0;
	border-top: 1px solid var(--wp--custom--border-inverse);
}

.phc-mmj-book-steps li {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--5) 0;
	border-bottom: 1px solid var(--wp--custom--border-inverse);
}

.phc-mmj-book-steps p {
	margin: 0;
}

.phc-mmj-book-step-n {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--phc-moss-600);
	filter: brightness(1.6);
	padding-top: 2px;
}

.phc-mmj-book-step-label {
	font-weight: var(--wp--custom--weight-semibold);
	color: var(--wp--custom--text-inverse);
}

.phc-mmj-book-step-text {
	margin-top: 2px !important;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--wp--custom--text-inverse-muted);
}

.phc-mmj-book-actions {
	margin-top: var(--wp--preset--spacing--10);
	gap: var(--wp--preset--spacing--3);
}

/* Clinic card */
.phc-mmj-book-card {
	background: var(--wp--custom--surface-card);
	color: var(--wp--custom--text-primary);
	border-radius: var(--wp--custom--radius-lg);
	border-top: 4px solid var(--wp--custom--phc-moss-600);
	padding: clamp(28px, 3vw, 40px);
	box-shadow: var(--wp--custom--shadow-lg);
}

.phc-mmj-book-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
}

.phc-mmj-book-card-label {
	margin: 0;
	font-size: var(--wp--preset--font-size--overline);
	letter-spacing: var(--wp--custom--type-overline-track);
	text-transform: uppercase;
	font-weight: var(--wp--custom--weight-semibold);
	color: var(--wp--custom--text-muted);
}

.phc-mmj-book-badge {
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius-pill);
	background: var(--wp--preset--color--care-weight, var(--wp--custom--surface-tint));
	color: var(--wp--custom--phc-moss-600);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight-semibold);
	white-space: nowrap;
}

.phc-mmj-book-card-title {
	margin: var(--wp--preset--spacing--4) 0 var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.1;
	font-weight: var(--wp--custom--weight-medium);
}

.phc-mmj-book-details {
	margin: 0;
	border-top: 1px solid var(--wp--custom--border-subtle);
}

.phc-mmj-book-details > div {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: var(--wp--preset--spacing--3);
	align-items: start;
	padding: var(--wp--preset--spacing--4) 0;
	border-bottom: 1px solid var(--wp--custom--border-subtle);
}

.phc-mmj-book-details dt {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--care-weight, var(--wp--custom--surface-tint));
	color: var(--wp--custom--phc-moss-600);
}

.phc-mmj-book-details dd {
	margin: 0;
	padding-top: 5px;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.55;
	color: var(--wp--custom--text-secondary);
}

.phc-mmj-book-details dd a {
	color: var(--wp--custom--text-primary);
	text-decoration: none;
	font-weight: var(--wp--custom--weight-medium);
}

.phc-mmj-book-details dd a:hover {
	text-decoration: underline;
}

.phc-mmj-book-card-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--6);
}

.phc-mmj-book .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 960px) {
	.phc-mmj-book-grid { grid-template-columns: minmax(0, 1fr); }
}