/**
 * Design Sprint 3 — Premium Internal Experience.
 *
 * Sprint 1 gave the homepage hero its language; Sprint 2 gave the
 * homepage components theirs. This module carries both across every
 * internal page: page heroes, breadcrumbs, editorial prose, blog, search,
 * 404, contact, the service and city routes, sidebars, comments, forms and
 * pagination.
 *
 * It does NOT touch Sprint 1 or Sprint 2. Nothing here selects
 * `.home-hero--premium`, and the shared card system stays owned by
 * `sections-premium.css` — this file only adds the page-level chrome those
 * cards sit inside.
 *
 * Why site-wide: before this sprint, `.entry-content`, `.entry-title`,
 * `.page-header`, `.widget`, the comment list, the search form, `.error-404`
 * and `.no-results` had no theme styling at all — the blog, single posts,
 * standard pages, search and 404 rendered with browser defaults inside a
 * designed shell. That is the single largest consistency gap in the theme,
 * and it is global chrome, so the fix is global.
 *
 * Design-system rules (same as Sprint 2):
 *   - No hardcoded colour. Tokens, or `color-mix()` derived from tokens,
 *     with a `@supports` fallback to an existing token.
 *   - The `--premium-*` aliases declared by `sections-premium.css` are
 *     reused here rather than redeclared, so a shadow or radius still has
 *     exactly one definition in the codebase.
 *   - Mobile-first: base rules are the 360px layout, every media query is
 *     `min-width`.
 *   - Motion is `transform`/`opacity` only. Nothing animates a layout
 *     property, so no rule here can contribute to CLS.
 */

/* ==================================================================
   0. Main content column
   ------------------------------------------------------------------
   Every internal template now wraps its body in `.section > .container`,
   the same rhythm the service, city and contact routes already used. The
   generic `.site-main` padding would double it, so it is released on
   those templates only — `.site-main--home` and any template still using
   the plain `.site-main` are untouched.
   ================================================================== */

.site-main--page,
.site-main--post,
.site-main--blog,
.site-main--archive,
.site-main--search,
.site-main--404 {
	padding-inline: 0;
	padding-block: 0;
}

/* ==================================================================
   1. Page hero — the premium banner every internal page opens with
   ================================================================== */

.page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--color-page, var(--color-background));
	color: var(--color-heading);
}

/* The same static two-point glow the homepage hero uses, at lower
   intensity. A pseudo-element, not an animated background, so it costs one
   paint and never runs on a timer. */
.page-hero::before {
	content: '';
	position: absolute;
	inset: -40% -10% auto;
	block-size: 180%;
	background-image: radial-gradient(
			circle at 82% 18%,
			color-mix(in srgb, var(--color-primary-500) 14%, transparent),
			transparent 58%
		),
		radial-gradient(
			circle at 10% 92%,
			color-mix(in srgb, var(--color-accent-400) 12%, transparent),
			transparent 55%
		);
	pointer-events: none;
	z-index: -1;
}

/* A hairline closing edge, so the hero resolves into the page instead of
   stopping abruptly. */
.page-hero::after {
	content: '';
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: 1px;
	background-image: linear-gradient(
		90deg,
		transparent,
		var(--premium-ring) 18%,
		var(--premium-ring) 82%,
		transparent
	);
	pointer-events: none;
}

.page-hero__inner {
	position: relative;
	padding-block: var(--space-10) var(--space-12);
	text-align: start;
}

.page-hero__title {
	margin: 0 0 var(--space-4);
	max-inline-size: 20ch;
	font-family: var(--font-family-heading);
	font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
	font-weight: var(--font-weight-medium);
	line-height: 1.06;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.page-hero__subtitle {
	max-inline-size: 52ch;
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-md);
	line-height: var(--line-height-relaxed);
	opacity: 1;
	text-wrap: pretty;
}

.page-hero__cta {
	margin-block-start: var(--space-6);
	min-block-size: 3.25rem;
	padding-inline: var(--space-8);
	border-radius: var(--radius-lg);
}

/* Image variant: the hero keeps a dark overlay and inverts, so a photo
   never costs legibility. */
.page-hero--has-image {
	color: var(--color-text-inverse);
}

.page-hero--has-image .page-hero__title,
.page-hero--has-image .page-hero__subtitle {
	color: inherit;
}

.page-hero--has-overlay .page-hero__overlay {
	background-image: linear-gradient(
		100deg,
		color-mix(in srgb, var(--color-primary-900) 82%, transparent),
		color-mix(in srgb, var(--color-primary-900) 45%, transparent)
	);
}

.page-hero--has-image::before,
.page-hero--has-image::after {
	display: none;
}

/* ==================================================================
   2. Breadcrumbs
   ================================================================== */

.breadcrumb {
	margin-block-end: var(--space-5);
	font-size: var(--font-size-xs);
}

.breadcrumb__list {
	gap: var(--space-2);
	flex-wrap: wrap;
}

.breadcrumb__item {
	letter-spacing: 0.04em;
}

.breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
	border-block-end: 1px solid transparent;
	transition: color var(--transition-fast) var(--ease-standard);
}

.breadcrumb a:hover {
	color: var(--color-primary-600);
	border-block-end-color: currentColor;
}

.breadcrumb [aria-current='page'] {
	color: var(--color-heading);
	font-weight: var(--font-weight-semibold);
}

.page-hero--has-image .breadcrumb a,
.page-hero--has-image .breadcrumb [aria-current='page'] {
	color: var(--color-text-inverse);
}

/* ==================================================================
   3. Archive / page header (archive.php, search.php, 404.php)
   ================================================================== */

.page-header {
	margin-block-end: var(--space-8);
}

.page-title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-family-heading);
	font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem);
	font-weight: var(--font-weight-medium);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.page-title span {
	color: var(--color-primary-600);
}

.archive-description,
.page-header > p {
	max-inline-size: 52ch;
	margin: 0;
	color: var(--color-text-muted);
	line-height: var(--line-height-relaxed);
}

/* ==================================================================
   4. Prose — editorial content
   ------------------------------------------------------------------
   One typographic system for every long-form region in the theme: post
   and page content, the service and city descriptions, and the Contact
   page's editable body. This is what makes an About page built entirely
   out of core Gutenberg blocks look designed without anyone writing
   page-specific CSS.
   ================================================================== */

.entry-content,
.page-template-body,
.service-content,
.city-content {
	max-inline-size: 68ch;
	color: var(--color-text);
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
}

.entry-content > * + *,
.page-template-body > * + *,
.service-content > * + * {
	margin-block-start: var(--space-5);
}

.entry-content h2,
.page-template-body h2 {
	margin-block: var(--space-12) var(--space-4);
	font-family: var(--font-family-heading);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-snug);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.entry-content h3,
.page-template-body h3 {
	margin-block: var(--space-8) var(--space-3);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-snug);
	text-wrap: balance;
}

.entry-content h4,
.page-template-body h4 {
	margin-block: var(--space-6) var(--space-2);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
}

/* The first heading in a prose block should not push a huge gap under the
   hero it already sits below. */
.entry-content > :first-child,
.page-template-body > :first-child {
	margin-block-start: 0;
}

.entry-content p,
.page-template-body p {
	text-wrap: pretty;
}

.entry-content a:not(.btn):not(.wp-block-button__link),
.page-template-body a:not(.btn):not(.wp-block-button__link) {
	color: var(--color-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.entry-content a:not(.btn):hover,
.page-template-body a:not(.btn):hover {
	color: var(--color-link-hover);
}

.entry-content ul,
.entry-content ol,
.page-template-body ul,
.page-template-body ol {
	padding-inline-start: var(--space-6);
}

.entry-content li + li,
.page-template-body li + li {
	margin-block-start: var(--space-2);
}

.entry-content li::marker,
.page-template-body li::marker {
	color: var(--color-primary-500);
}

.entry-content blockquote,
.page-template-body blockquote,
.entry-content .wp-block-quote,
.entry-content .wp-block-pullquote {
	margin-inline: 0;
	padding: var(--space-5) var(--space-6);
	border: 0;
	border-inline-start: 3px solid var(--color-primary-500);
	border-radius: 0 var(--premium-radius-sm) var(--premium-radius-sm) 0;
	background-color: var(--premium-surface-soft);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-md);
	font-style: normal;
	line-height: var(--line-height-snug);
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite {
	display: block;
	margin-block-start: var(--space-3);
	color: var(--color-text-muted);
	font-family: var(--font-family-body);
	font-size: var(--font-size-sm);
	font-style: normal;
}

.entry-content img,
.entry-content .wp-block-image img,
.page-template-body img {
	block-size: auto;
	max-inline-size: 100%;
	border-radius: var(--premium-radius-sm);
}

.entry-content figure,
.page-template-body figure {
	margin-inline: 0;
}

.entry-content figcaption,
.page-template-body figcaption {
	margin-block-start: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	text-align: center;
}

.entry-content hr,
.entry-content .wp-block-separator {
	margin-block: var(--space-12);
	border: 0;
	block-size: 1px;
	background-image: linear-gradient(
		90deg,
		transparent,
		var(--premium-ring) 20%,
		var(--premium-ring) 80%,
		transparent
	);
}

.entry-content table,
.page-template-body table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-sm);
}

.entry-content :is(th, td),
.page-template-body :is(th, td) {
	padding: var(--space-3) var(--space-4);
	border-block-end: 1px solid var(--premium-ring);
	text-align: start;
}

.entry-content th {
	color: var(--color-heading);
	font-weight: var(--font-weight-semibold);
}

.entry-content :is(code, kbd, samp) {
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
	background-color: var(--color-gray-100);
	font-family: var(--font-family-mono);
	font-size: 0.9em;
}

.entry-content pre {
	overflow-x: auto;
	padding: var(--space-5);
	border-radius: var(--premium-radius-sm);
	background-color: var(--color-gray-100);
	font-family: var(--font-family-mono);
	font-size: var(--font-size-sm);
}

/* Prose that should span the full column rather than the reading measure —
   grids and banners composed in the editor. */
.entry-content :is(.wp-block-columns, .wp-block-group, .wp-block-gallery, .wp-block-cover, .wp-block-media-text, .wp-block-buttons) {
	max-inline-size: none;
}

.entry-content .wp-block-group.has-background {
	padding: var(--space-8);
	border-radius: var(--premium-radius);
}

.entry-content .wp-block-button__link {
	min-block-size: 3rem;
	padding-inline: var(--space-6);
	border-radius: var(--radius-lg);
	font-weight: var(--font-weight-semibold);
}

/* ==================================================================
   5. Article surfaces — blog index, archive, search results
   ================================================================== */

.entry-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-family-heading);
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
	font-weight: var(--font-weight-medium);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.entry-title a {
	color: inherit;
	text-decoration: none;
}

.entry-title a:hover {
	color: var(--color-primary-600);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.entry-meta a {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid transparent;
}

.entry-meta a:hover {
	color: var(--color-primary-600);
	border-block-end-color: currentColor;
}

.entry-meta__reading-time {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

.entry-meta__reading-time svg {
	inline-size: 0.95rem;
	block-size: 0.95rem;
	flex: 0 0 auto;
}

.post-layout__main {
	min-inline-size: 0;
}

.entry-footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin-block-start: var(--space-8);
	padding-block-start: var(--space-5);
	border-block-start: 1px solid var(--premium-ring);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.post-thumbnail {
	display: block;
	margin-block-end: var(--space-6);
	border-radius: var(--premium-radius);
	overflow: hidden;
}

.post-thumbnail img {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

/* A list of posts (archive.php / index.php fallback) reads as a stack of
   editorial rows rather than raw <article> elements. */
.post-stack {
	display: grid;
	gap: var(--space-6);
}

.post-stack > article,
.search-results-list > article {
	padding: var(--space-6);
	border: 1px solid var(--premium-ring);
	border-radius: var(--premium-radius);
	background-color: var(--color-background);
	box-shadow: var(--premium-shadow-soft);
	transition:
		transform var(--transition-base) var(--ease-standard),
		box-shadow var(--transition-base) var(--ease-standard),
		border-color var(--transition-base) var(--ease-standard);
}

.post-stack > article:hover,
.search-results-list > article:hover,
.post-stack > article:focus-within,
.search-results-list > article:focus-within {
	transform: translateY(var(--premium-lift));
	border-color: var(--premium-ring-strong);
	box-shadow: var(--premium-shadow-lift);
}

.post-stack .entry-title,
.search-results-list .entry-title {
	font-size: var(--font-size-xl);
}

.entry-summary {
	margin-block-start: var(--space-3);
	color: var(--color-text-muted);
	line-height: var(--line-height-relaxed);
}

/* ==================================================================
   6. Blog: magazine archive
   ================================================================== */

.blog-archive__grid {
	display: grid;
	gap: var(--space-6);
}

.blog-preview-card__title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-medium);
	letter-spacing: -0.01em;
	line-height: var(--line-height-snug);
}

.blog-preview-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin: 0 0 var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.blog-preview-card__category {
	text-transform: none;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.blog-preview-card__reading-time {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

.blog-preview-card__reading-time svg {
	inline-size: 0.85rem;
	block-size: 0.85rem;
}

/* ==================================================================
   7. Blog: single post
   ================================================================== */

/* Reading progress. Pure CSS via a scroll-driven animation — no listener,
   no rAF loop, no layout read. Browsers without `animation-timeline` keep
   `scaleX(0)`, so the bar is simply absent rather than broken. */
.reading-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background-image: var(--gradient-primary);
	z-index: var(--z-fixed);
	pointer-events: none;
}

@supports (animation-timeline: scroll()) {
	.reading-progress {
		animation: agencycare-reading-progress linear both;
		animation-timeline: scroll(root block);
	}

	@keyframes agencycare-reading-progress {
		from {
			transform: scaleX(0);
		}

		to {
			transform: scaleX(1);
		}
	}
}

.post-layout {
	display: grid;
	gap: var(--space-8);
}

.post-toc {
	position: relative;
	padding: var(--space-5) var(--space-6);
	border: 1px solid var(--premium-ring);
	border-radius: var(--premium-radius-sm);
	background-color: var(--premium-surface-soft);
}

.post-toc__title {
	margin: 0 0 var(--space-3);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary-700);
}

.post-toc__list {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--font-size-sm);
}

.post-toc__list a {
	color: var(--color-text);
	text-decoration: none;
}

.post-toc__list a:hover {
	color: var(--color-primary-600);
}

/* Author box — monogram, not a Gravatar, so a post page makes no
   third-party request to render its byline. */
.post-author {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	margin-block-start: var(--space-10);
	padding: var(--space-6);
	border: 1px solid var(--premium-ring);
	border-radius: var(--premium-radius);
	background-color: var(--color-background);
	box-shadow: var(--premium-shadow-soft);
}

.post-author__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	flex: 0 0 auto;
	border-radius: var(--radius-full);
	background-image: var(--gradient-primary);
	color: var(--color-text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
}

.post-author__label {
	margin: 0 0 var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.post-author__name {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
}

.post-author__bio {
	margin: var(--space-2) 0 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
}

/* Share row — plain links, no third-party script, no tracking pixel. */
.post-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-block-start: var(--space-8);
	padding-block-start: var(--space-6);
	border-block-start: 1px solid var(--premium-ring);
}

.post-share__label {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.post-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-share__list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid var(--premium-ring);
	border-radius: var(--radius-full);
	background-color: var(--color-background);
	color: var(--color-primary-700);
	transition:
		transform var(--transition-fast) var(--ease-standard),
		border-color var(--transition-fast) var(--ease-standard),
		background-color var(--transition-fast) var(--ease-standard);
}

.post-share__list a:hover {
	transform: translateY(-2px);
	border-color: var(--premium-ring-strong);
	background-color: var(--premium-surface-soft);
}

.post-share__list svg {
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

/* ==================================================================
   8. Search
   ================================================================== */

/* The result count, the refine form and the category chips this section
   used to style separately now render through the shared Collection
   Toolbar (assets/css/internal-premium.css §2), which the service
   archive, city archive and blog index also open with — one bar, one
   rule set, four templates. */

.search-results-list {
	display: grid;
	gap: var(--space-5);
}

/* The core search form, reskinned wherever it appears. */
.search-form {
	display: flex;
	gap: var(--space-2);
	inline-size: 100%;
	max-inline-size: 34rem;
}

.search-form label {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.search-form .search-field {
	min-block-size: 3.25rem;
	border-radius: var(--radius-lg);
	background-color: var(--color-background);
}

.search-form .search-submit {
	min-block-size: 3.25rem;
	padding-inline: var(--space-6);
	border-radius: var(--radius-lg);
	font-weight: var(--font-weight-semibold);
	white-space: nowrap;
}

/* ==================================================================
   9. Empty states and 404
   ================================================================== */

.empty-state,
.no-results,
.error-404 {
	max-inline-size: 42rem;
	margin-inline: auto;
	padding: var(--space-10) var(--space-6);
	text-align: center;
}

.empty-state {
	border: 1px solid var(--premium-ring);
	border-radius: var(--premium-radius);
	background-color: var(--color-background);
	box-shadow: var(--premium-shadow-soft);
}

/* The 404 and the "nothing found" state now open with the decorative
   inline-SVG scenes in `template-parts/components/illustration.php`; this
   medallion is still what the reusable Empty State component uses. */
.empty-state__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 4.5rem;
	block-size: 4.5rem;
	margin-block-end: var(--space-5);
	border-radius: var(--radius-full);
	background-image: linear-gradient(
		145deg,
		var(--premium-surface-soft),
		var(--color-primary-100)
	);
	color: var(--color-primary-600);
	box-shadow: inset 0 0 0 1px var(--premium-ring);
}

.empty-state__icon svg {
	inline-size: 2rem;
	block-size: 2rem;
}

.no-results .page-header,
.error-404 .page-header {
	margin-block-end: var(--space-4);
}

.no-results .page-content > * + *,
.error-404 .page-content > * + * {
	margin-block-start: var(--space-6);
}

.no-results .search-form,
.error-404 .search-form {
	margin-inline: auto;
}

/* 404: a drawn mark rather than an illustration asset — no image request,
   scales perfectly, and inherits the palette. */
.error-404__code {
	margin: 0 0 var(--space-2);
	font-family: var(--font-family-heading);
	font-size: clamp(4rem, 2rem + 12vw, 8rem);
	font-weight: var(--font-weight-medium);
	line-height: 0.9;
	letter-spacing: -0.05em;
	background-image: var(--gradient-primary);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.error-404__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: stretch;
}

.error-404__actions .btn {
	min-block-size: 3.25rem;
	border-radius: var(--radius-lg);
}

.error-404__suggestions {
	margin-block-start: var(--space-12);
	text-align: start;
}

.error-404__suggestions-title,
.contact-map__title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	text-align: center;
}

/* ==================================================================
   10. Contact
   ================================================================== */

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

.contact-grid__heading {
	margin: 0 0 var(--space-6);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	letter-spacing: -0.01em;
}

.contact-list {
	display: grid;
	gap: var(--space-3);
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

.contact-list__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-5);
	border: 1px solid var(--premium-ring);
	border-radius: var(--premium-radius-sm);
	background-color: var(--color-background);
	box-shadow: var(--premium-shadow-soft);
	transition:
		transform var(--transition-base) var(--ease-standard),
		border-color var(--transition-base) var(--ease-standard),
		box-shadow var(--transition-base) var(--ease-standard);
}

.contact-list__item:hover,
.contact-list__item:focus-within {
	transform: translateY(-3px);
	border-color: var(--premium-ring-strong);
	box-shadow: var(--premium-shadow-lift);
}

.contact-list__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	flex: 0 0 auto;
	border-radius: var(--premium-radius-sm);
	background-color: var(--premium-surface-soft);
	color: var(--color-primary-600);
	box-shadow: inset 0 0 0 1px var(--premium-ring);
}

.contact-list__icon svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.contact-list__item--whatsapp .contact-list__icon {
	color: var(--color-whatsapp-dark);
}

.contact-list__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-inline-size: 0;
}

.contact-list__label {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.contact-list__value {
	color: var(--color-heading);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.contact-list__value:hover {
	color: var(--color-primary-600);
}

/* Business hours, read from the same footer company info the footer uses. */
.contact-hours {
	margin-block-start: var(--space-6);
	padding: var(--space-5) var(--space-6);
	border: 1px solid var(--premium-ring);
	border-radius: var(--premium-radius-sm);
	background-color: var(--premium-surface-soft);
}

.contact-hours__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary-700);
}

.contact-hours__title svg {
	inline-size: 1rem;
	block-size: 1rem;
}

.contact-hours__list {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--font-size-sm);
}

.contact-hours__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
}

.contact-hours__days {
	color: var(--color-text-muted);
}

.contact-hours__time {
	color: var(--color-heading);
	font-weight: var(--font-weight-semibold);
	font-variant-numeric: tabular-nums;
}

/* Map placeholder. Deliberately not an embedded iframe: a Google Maps
   embed is a third-party script, a cookie, and a large layout-shifting
   frame on the critical path. This is the designed slot for one — the
   owner drops the embed in when they want it. */
.contact-map {
	margin-block-start: var(--space-12);
}

.contact-map__frame {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	aspect-ratio: 16 / 9;
	padding: var(--space-8);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--premium-radius);
	background-image: linear-gradient(
			145deg,
			var(--premium-surface-soft),
			var(--color-background)
		),
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 14px,
			var(--premium-ring) 14px,
			var(--premium-ring) 15px
		);
	background-blend-mode: normal;
	color: var(--color-text-muted);
	text-align: center;
}

.contact-map__frame svg {
	inline-size: 2.5rem;
	block-size: 2.5rem;
	color: var(--color-primary-500);
}

.contact-map__note {
	margin: 0;
	max-inline-size: 36ch;
	font-size: var(--font-size-sm);
}

/* When a real embed is dropped in, it inherits the frame's shape. */
.contact-map__frame iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	border-radius: inherit;
}

.contact-grid__form .page-template-body {
	max-inline-size: none;
}

.contact-grid__form-hint,
.contact-list__empty {
	margin: 0;
	padding: var(--space-5);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--premium-radius-sm);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
}

/* ==================================================================
   11. Forms — premium controls, theme-wide
   ================================================================== */

.form-input,
.form-textarea,
.form-select,
input[type='text'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='date'],
.search-field,
textarea,
select {
	min-block-size: 3rem;
	border-radius: var(--radius-lg);
	border-color: var(--premium-ring);
	font-size: var(--font-size-base);
	transition:
		border-color var(--transition-fast) var(--ease-standard),
		box-shadow var(--transition-fast) var(--ease-standard);
}

textarea,
.form-textarea {
	min-block-size: 9rem;
	padding-block: var(--space-4);
	line-height: var(--line-height-relaxed);
}

.form-input::placeholder,
input::placeholder,
textarea::placeholder {
	color: var(--color-gray-400);
}

.form-label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* ==================================================================
   12. Sidebar, widgets, comments, pagination
   ================================================================== */

.widget-area {
	display: grid;
	gap: var(--space-6);
	align-content: start;
}

.widget {
	padding: var(--space-6);
	border: 1px solid var(--premium-ring);
	border-radius: var(--premium-radius);
	background-color: var(--color-background);
	box-shadow: var(--premium-shadow-soft);
}

.widget-title,
.widget h2 {
	margin: 0 0 var(--space-4);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
}

.widget li a {
	color: var(--color-text);
	text-decoration: none;
}

.widget li a:hover {
	color: var(--color-primary-600);
}

.posts-navigation,
.post-navigation,
.pagination {
	margin-block-start: var(--space-12);
	padding-block-start: var(--space-6);
	border-block-start: 1px solid var(--premium-ring);
}

.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: grid;
	gap: var(--space-4);
}

.posts-navigation a,
.post-navigation a {
	display: block;
	padding: var(--space-5);
	border: 1px solid var(--premium-ring);
	border-radius: var(--premium-radius-sm);
	background-color: var(--color-background);
	color: var(--color-heading);
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	transition:
		transform var(--transition-base) var(--ease-standard),
		border-color var(--transition-base) var(--ease-standard);
}

.posts-navigation a:hover,
.post-navigation a:hover {
	transform: translateY(-3px);
	border-color: var(--premium-ring-strong);
}

.comments-area {
	max-inline-size: 68ch;
	margin-block-start: var(--space-16);
	padding-block-start: var(--space-8);
	border-block-start: 1px solid var(--premium-ring);
}

.comments-title,
.comment-reply-title {
	margin: 0 0 var(--space-6);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
}

.comment-list {
	display: grid;
	gap: var(--space-5);
	margin: 0 0 var(--space-10);
	padding: 0;
	list-style: none;
}

.comment-list .comment-body {
	padding: var(--space-5);
	border: 1px solid var(--premium-ring);
	border-radius: var(--premium-radius-sm);
	background-color: var(--color-background);
}

.comment-list .children {
	margin-block-start: var(--space-4);
	padding-inline-start: var(--space-5);
	border-inline-start: 2px solid var(--premium-ring);
	list-style: none;
}

/* ==================================================================
   13. Service routes
   ================================================================== */

.service-navigation,
.city-navigation {
	margin-block-end: var(--space-8);
	padding-block-end: var(--space-6);
	border-block-end: 1px solid var(--premium-ring);
}

.service-navigation__list,
.city-navigation__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	/* Horizontal scroll on the narrowest screens beats a four-line wrap. */
	overflow-x: auto;
	scrollbar-width: none;
}

.service-navigation__list::-webkit-scrollbar,
.city-navigation__list::-webkit-scrollbar {
	display: none;
}

.service-navigation .chip,
.city-navigation .chip {
	min-block-size: 2.75rem;
	border-color: var(--premium-ring);
	background-color: var(--color-background);
	white-space: nowrap;
	transition:
		border-color var(--transition-fast) var(--ease-standard),
		background-color var(--transition-fast) var(--ease-standard),
		transform var(--transition-fast) var(--ease-standard);
}

.service-navigation .chip:hover,
.city-navigation .chip:hover {
	transform: translateY(-2px);
	border-color: var(--premium-ring-strong);
	background-color: var(--premium-surface-soft);
}

.service-navigation__count,
.city-navigation__count {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	font-variant-numeric: tabular-nums;
}

.service-layout,
.city-layout {
	display: grid;
	gap: var(--space-10);
	align-items: start;
}

.service-sections__block {
	margin-block-start: var(--space-12);
}

.service-sections__title,
.city-section .section-heading__title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-medium);
	letter-spacing: -0.02em;
}

.service-feature,
.service-checklist__item {
	padding: var(--space-5);
	border: 1px solid var(--premium-ring);
	border-radius: var(--premium-radius-sm);
	background-color: var(--color-background);
	box-shadow: var(--premium-shadow-soft);
}

.service-sidebar,
.city-sidebar {
	display: grid;
	gap: var(--space-5);
}

.service-sidebar__card,
.city-sidebar__card {
	border-radius: var(--premium-radius);
	border-color: var(--premium-ring);
	box-shadow: var(--premium-shadow-soft);
}

.service-sidebar__title,
.city-sidebar__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
}

.service-sidebar__label,
.city-sidebar__label {
	display: block;
	margin-block-end: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.service-cta,
.city-section--emergency {
	border-radius: var(--premium-radius);
	box-shadow: var(--premium-shadow-panel);
}

.service-cta__title {
	font-family: var(--font-family-heading);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-weight: var(--font-weight-medium);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.service-cta__actions .btn {
	min-block-size: 3.25rem;
	padding-inline: var(--space-8);
	border-radius: var(--radius-lg);
}

/* ==================================================================
   14. City routes
   ================================================================== */

.city-archive__region {
	margin-block-end: var(--space-16);
	scroll-margin-block-start: calc(var(--header-height) + var(--space-6));
}

.city-archive__region .section-heading {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	margin-block-end: var(--space-6);
	padding-block-end: var(--space-4);
	border-block-end: 1px solid var(--premium-ring);
}

.city-areas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.city-areas__item {
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--premium-ring);
	background-color: var(--premium-surface-soft);
	color: var(--color-primary-700);
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: var(--font-size-sm);
}

.city-section {
	margin-block-start: var(--space-12);
}

.city-features {
	display: grid;
	gap: var(--space-5);
}

.city-testimonials {
	display: grid;
	gap: var(--space-5);
}

/* ==================================================================
   15. About / editorial page patterns
   ------------------------------------------------------------------
   Composable classes an About page can use, from the editor or from
   `template-about.php`. No copy lives here — only the shapes.
   ================================================================== */

.page-section {
	margin-block-start: var(--space-16);
}

.page-section:first-child {
	margin-block-start: 0;
}

/* Mission / Vision / Values: a card row that matches the homepage's
   feature cards without duplicating their rules. */
.value-grid {
	display: grid;
	gap: var(--space-5);
}

/* Timeline: the same rail-and-marker construction as the homepage
   Process section, in a vertical-only, text-led form. */
.timeline {
	position: relative;
	display: grid;
	gap: var(--space-8);
	margin: 0;
	padding: 0 0 0 var(--space-8);
	list-style: none;
}

.timeline::before {
	content: '';
	position: absolute;
	inset-block: var(--space-2);
	inset-inline-start: 0.4375rem;
	inline-size: 2px;
	background-image: linear-gradient(
		to bottom,
		var(--color-primary-300),
		var(--premium-ring)
	);
}

.timeline__item {
	position: relative;
}

.timeline__item::before {
	content: '';
	position: absolute;
	inset-block-start: 0.45rem;
	inset-inline-start: calc(var(--space-8) * -1);
	inline-size: 1rem;
	block-size: 1rem;
	border-radius: var(--radius-full);
	background-image: var(--gradient-primary);
	box-shadow: 0 0 0 4px var(--color-page, var(--color-background));
}

.timeline__label {
	display: block;
	margin-block-end: var(--space-1);
	color: var(--color-primary-600);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.timeline__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
}

.timeline__text {
	margin: 0;
	color: var(--color-text-muted);
	line-height: var(--line-height-relaxed);
}

/* ==================================================================
   16. Breakpoints
   ================================================================== */

@media (min-width: 30rem) {
	.error-404__actions {
		flex-direction: row;
		justify-content: center;
	}

	.value-grid,
	.city-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.page-hero__inner {
		padding-block: var(--space-16) var(--space-16);
	}

	.blog-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.contact-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: var(--space-10);
	}

	.contact-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.posts-navigation .nav-links,
	.post-navigation .nav-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.city-testimonials {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.page-hero__inner {
		padding-block: var(--space-20) var(--space-16);
	}

	/* Blog magazine: the first post spans two columns with a wider crop. */
	.blog-archive__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.blog-archive__grid > *:first-child {
		grid-column: span 2;
	}

	.blog-archive__grid > *:first-child .blog-preview-card__thumbnail {
		aspect-ratio: 21 / 9;
	}

	.blog-archive__grid > *:first-child .blog-preview-card__title {
		font-size: var(--font-size-2xl);
	}

	.service-layout,
	.city-layout {
		grid-template-columns: minmax(0, 1fr) 20rem;
		gap: var(--space-12);
	}

	/* The sticky CTA rail. `align-self: start` plus `position: sticky` is
	   what makes the booking / emergency / contact block follow a long
	   service page without any scroll listener. */
	.service-layout__sidebar,
	.city-layout__sidebar {
		position: sticky;
		inset-block-start: calc(var(--header-height) + var(--space-6));
		align-self: start;
		max-block-size: calc(100vh - var(--header-height) - var(--space-12));
		overflow-y: auto;
		scrollbar-width: thin;
	}

	.post-layout {
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: var(--space-12);
	}

	.post-layout__aside {
		position: sticky;
		inset-block-start: calc(var(--header-height) + var(--space-6));
		align-self: start;
	}

	.value-grid,
	.city-features {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.city-testimonials {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.error-404__suggestions {
		margin-block-start: var(--space-16);
	}
}

@media (min-width: 80rem) {
	.page-hero__title {
		max-inline-size: 24ch;
	}
}

/* ==================================================================
   17. Motion, contrast and print safeguards
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.reading-progress {
		display: none;
	}

	.post-stack > article:hover,
	.search-results-list > article:hover,
	.contact-list__item:hover,
	.post-share__list a:hover,
	.posts-navigation a:hover,
	.post-navigation a:hover,
	.service-navigation .chip:hover,
	.city-navigation .chip:hover {
		transform: none;
	}

	.service-layout__sidebar,
	.city-layout__sidebar,
	.post-layout__aside {
		position: static;
		max-block-size: none;
		overflow-y: visible;
	}
}

@media (forced-colors: active) {
	.page-hero::before,
	.page-hero::after,
	.reading-progress,
	.contact-map__frame {
		display: none;
	}

	.error-404__code {
		-webkit-text-fill-color: CanvasText;
		color: CanvasText;
	}

	.widget,
	.empty-state,
	.contact-list__item,
	.post-author,
	.post-stack > article,
	.search-results-list > article,
	.comment-list .comment-body {
		border: 1px solid CanvasText;
	}
}

@media print {
	.reading-progress,
	.post-share,
	.service-layout__sidebar,
	.city-layout__sidebar,
	.post-layout__aside,
	.breadcrumb {
		display: none;
	}

	.page-hero {
		background: none;
	}
}