@layer pages {
	.haf-service-archive,
	.haf-service-single,
	.haf-appointment-page {
		--haf-service-section-gap: clamp(var(--haf-space-7), 8vw, var(--haf-space-9));
	}

	.haf-service-archive__header {
		width: min(100%, var(--haf-content-width));
		margin-block-end: var(--haf-space-5);
	}

	.haf-service-categories {
		overflow-x: auto;
		margin-block-end: var(--haf-space-5);
		border-block: 1px solid var(--haf-color-border);
		scrollbar-color: var(--haf-color-border-strong) transparent;
		scrollbar-width: thin;
	}

	.haf-service-categories__track {
		display: grid;
		grid-template-columns: repeat(var(--haf-service-category-count), minmax(10.5rem, 1fr));
		min-width: max(100%, calc(var(--haf-service-category-count) * 10.5rem));
	}

	body:not(.wp-admin) .haf-service-categories__item {
		display: grid;
		min-height: 5.25rem;
		place-content: center;
		gap: var(--haf-space-1);
		padding: var(--haf-space-3);
		border-block-start: 0.1875rem solid transparent;
		border-inline-end: 1px solid var(--haf-color-border);
		color: var(--haf-color-ink) !important;
		text-align: center;
		text-decoration: none;
		transition:
			background-color var(--haf-transition-fast),
			border-color var(--haf-transition-fast),
			color var(--haf-transition-fast);
	}

	.haf-service-categories__item:last-child {
		border-inline-end: 0;
	}

	body:not(.wp-admin) .haf-service-categories__item:hover {
		background: var(--haf-color-surface);
		color: var(--haf-color-primary-hover) !important;
	}

	.haf-service-categories__item:focus-visible {
		position: relative;
		z-index: 1;
		outline: 0.1875rem solid var(--haf-color-primary);
		outline-offset: -0.1875rem;
	}

	body:not(.wp-admin) .haf-service-categories__item.is-current {
		border-block-start-color: var(--haf-color-primary);
		background: var(--haf-color-ink);
		color: var(--haf-color-base) !important;
	}

	body:not(.wp-admin) .haf-service-categories__item.is-current:hover {
		background: var(--haf-color-ink-soft, #17212a);
	}

	.haf-service-categories__label {
		font-size: var(--haf-font-size-sm);
		font-weight: 800;
		line-height: 1.35;
		overflow-wrap: anywhere;
	}

	.haf-service-categories__code {
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-xs);
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: 1;
	}

	.haf-service-categories__item.is-current .haf-service-categories__code {
		display: none;
	}

	.haf-service-grid,
	.haf-service-related-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--haf-space-5);
	}

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

	.haf-service-card,
	.haf-service-related-card {
		display: flex;
		min-width: 0;
		flex-direction: column;
		overflow: hidden;
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-lg);
		background: var(--haf-color-base);
		box-shadow: var(--haf-shadow-sm);
	}

	.haf-service-card__media,
	.haf-service-related-card__media {
		display: block;
		aspect-ratio: 3 / 2;
		overflow: hidden;
		background: var(--haf-color-surface-strong);
	}

	.haf-service-card__media > img,
	.haf-service-related-card__media > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.haf-service-card__media .haf-media,
	.haf-service-related-card__media.haf-media {
		height: 100%;
	}

	.haf-service-card__body,
	.haf-service-related-card__body {
		display: flex;
		min-width: 0;
		flex: 1;
		flex-direction: column;
		gap: var(--haf-space-3);
		padding: var(--haf-space-5);
	}

	.haf-service-card__tags {
		--haf-cluster-gap: var(--haf-space-2);
	}

	.haf-service-card__title,
	.haf-service-related-card h3 {
		margin: 0;
		font-size: var(--haf-font-size-xl);
		overflow-wrap: anywhere;
	}

	.haf-service-card__title a,
	.haf-service-related-card h3 a,
	.haf-service-card__link {
		color: inherit;
		text-decoration: none;
	}

	.haf-service-card__excerpt,
	.haf-service-related-card__body p {
		color: var(--haf-color-muted);
	}

	.haf-service-card__excerpt > :last-child,
	.haf-service-related-card__body > :last-child {
		margin-block-end: 0;
	}

	.haf-service-card__link {
		display: inline-flex;
		align-items: center;
		gap: var(--haf-space-2);
		margin-block-start: auto;
		color: var(--haf-color-primary);
		font-weight: 800;
	}

	.haf-service-card__link:hover,
	.haf-service-card__title a:hover,
	.haf-service-related-card h3 a:hover {
		color: var(--haf-color-primary-hover);
	}

	.haf-service-detail {
		min-width: 0;
	}

	.haf-service-detail__hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(var(--haf-space-5), 6vw, var(--haf-space-8));
		align-items: center;
	}

	.haf-service-detail__media {
		min-height: 18rem;
		overflow: hidden;
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-xl);
		background: var(--haf-color-surface-strong);
	}

	.haf-service-detail__media > img,
	.haf-service-detail__media > .haf-media {
		width: 100%;
		height: 100%;
		min-height: 18rem;
	}

	.haf-service-detail__media > img {
		object-fit: cover;
	}

	.haf-service-detail__intro {
		min-width: 0;
	}

	.haf-service-detail__intro h1 {
		margin-block: var(--haf-space-3);
		overflow-wrap: anywhere;
	}

	.haf-service-detail__claim {
		margin-block: 0 var(--haf-space-3);
		color: var(--haf-color-primary);
		font-weight: 800;
	}

	.haf-service-detail__excerpt {
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-lg);
	}

	.haf-service-detail__excerpt > :last-child {
		margin-block-end: 0;
	}

	.haf-service-summary {
		display: grid;
		gap: var(--haf-space-3);
		margin-block: var(--haf-space-5);
	}

	.haf-service-summary > div {
		padding: var(--haf-space-4);
		border-inline-start: 0.25rem solid var(--haf-color-accent);
		border-radius: var(--haf-radius-md);
		background: var(--haf-color-primary-soft);
	}

	.haf-service-summary dt,
	.haf-service-facts dt {
		color: var(--haf-color-muted);
		font-weight: 700;
	}

	.haf-service-summary dd,
	.haf-service-facts dd {
		margin: var(--haf-space-1) 0 0;
		font-weight: 800;
		overflow-wrap: anywhere;
	}

	.haf-service-section,
	.haf-service-consultation {
		margin-block-start: var(--haf-service-section-gap);
	}

	.haf-service-section > h2,
	.haf-service-consultation h2 {
		margin-block-end: var(--haf-space-5);
	}

	.haf-service-audience {
		display: flex;
		flex-wrap: wrap;
		gap: var(--haf-space-2);
		margin: 0 0 var(--haf-space-4);
		padding: 0;
		list-style: none;
	}

	.haf-service-audience li {
		padding: var(--haf-space-2) var(--haf-space-3);
		border-radius: var(--haf-radius-pill);
		background: var(--haf-color-primary-soft);
		font-weight: 700;
	}

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

	.haf-service-process li {
		position: relative;
		min-width: 0;
		padding: var(--haf-space-5) var(--haf-space-5) var(--haf-space-5) calc(var(--haf-space-7) + var(--haf-space-2));
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-lg);
		background: var(--haf-color-base);
		counter-increment: haf-service-step;
	}

	.haf-service-process li::before {
		position: absolute;
		inset-block-start: var(--haf-space-5);
		inset-inline-start: var(--haf-space-5);
		display: grid;
		width: 2rem;
		height: 2rem;
		place-items: center;
		border-radius: 50%;
		background: var(--haf-color-primary);
		color: var(--haf-color-base);
		font-weight: 800;
		content: counter(haf-service-step);
	}

	.haf-service-process h3,
	.haf-service-process p {
		margin-block: 0;
		overflow-wrap: anywhere;
	}

	.haf-service-process p {
		margin-block-start: var(--haf-space-2);
		color: var(--haf-color-muted);
	}

	.haf-service-facts {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		margin: 0;
		border-block-start: 1px solid var(--haf-color-border);
	}

	.haf-service-facts > div {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--haf-space-1);
		padding-block: var(--haf-space-4);
		border-block-end: 1px solid var(--haf-color-border);
	}

	.haf-service-faq {
		display: grid;
		gap: var(--haf-space-3);
	}

	.haf-service-faq details {
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-md);
		background: var(--haf-color-base);
	}

	.haf-service-faq summary {
		padding: var(--haf-space-4);
		color: var(--haf-color-ink);
		font-weight: 800;
		cursor: pointer;
	}

	.haf-service-faq details > .haf-prose {
		padding: 0 var(--haf-space-4) var(--haf-space-4);
	}

	.haf-service-consultation {
		display: grid;
		gap: var(--haf-space-5);
		padding: clamp(var(--haf-space-5), 6vw, var(--haf-space-8));
		border-radius: var(--haf-radius-xl);
		background: var(--haf-color-ink);
		color: var(--haf-color-base);
	}

	.haf-service-consultation h2 {
		color: inherit;
	}

	.haf-service-consultation__actions {
		align-self: center;
	}

	.haf-appointment-context {
		margin-block-start: var(--haf-service-section-gap);
		padding: clamp(var(--haf-space-5), 6vw, var(--haf-space-7));
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-xl);
		background: var(--haf-color-surface);
	}

	.haf-appointment-context__current {
		font-weight: 800;
		overflow-wrap: anywhere;
	}

	.haf-appointment-context__form {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--haf-space-3);
	}

	.haf-appointment-context__form .haf-button {
		justify-self: start;
	}

	.haf-appointment-context__next {
		display: grid;
		gap: var(--haf-space-4);
		margin-block-start: var(--haf-space-6);
		padding: var(--haf-space-5);
		border-radius: var(--haf-radius-lg);
		background: var(--haf-color-ink);
		color: var(--haf-color-base);
	}

	.haf-appointment-context__next h3 {
		margin-block-end: var(--haf-space-2);
		color: inherit;
	}

	.haf-appointment-context__next p {
		margin: 0;
		color: #c5d4d7;
	}

	.haf-appointment-context__actions .haf-button--secondary {
		border-color: rgb(255 255 255 / 50%);
		background: transparent;
		color: var(--haf-color-base);
	}

	.haf-empty-state--compact {
		width: 100%;
		padding: var(--haf-space-5);
		text-align: start;
	}

	@media (min-width: 32rem) {
		.haf-service-summary {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.haf-service-facts > div {
			grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1.3fr);
			gap: var(--haf-space-4);
		}
	}

	@media (min-width: 48rem) {
		.haf-service-grid,
		.haf-service-related-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.haf-service-process {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.haf-appointment-context__form {
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: end;
		}

		.haf-appointment-context__form label {
			grid-column: 1 / -1;
		}
	}

	@media (min-width: 64rem) {
		.haf-service-grid,
		.haf-service-related-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.haf-service-detail__hero {
			grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
		}

		.haf-service-consultation {
			grid-template-columns: minmax(0, 1fr) auto;
		}
	}

}