/**
 * City service-area pages — presentation layer
 * ---------------------------------------------------------------------------
 * Scoped to children of the "Service Area City" parent page (body class
 * .parent-pageid-3361), so it styles every city page and nothing else.
 *
 * CSS only: no page content, headings or links are altered. The page title
 * (h1.entry-title) is hidden site-wide by a global rule; it is restored here
 * for these pages only, so each city page has a visible heading again.
 */

body.parent-pageid-3361 {
	--city-brand: #06aef7;
	--city-brand-dk: #0284c7;
	--city-deep: #075985;
	--city-ink: #0f172a;
	--city-text: #475569;
	--city-tint: #f0f9ff;
	--city-border: #e2e8f0;
	--city-measure: 760px;
	--city-wide: 1100px;
	--city-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px rgba(15, 23, 42, .10);
}

/* ── Shell ────────────────────────────────────────────────────────────────── */
body.parent-pageid-3361 .site-main {
	max-width: none;
	padding: 0 20px 72px;
	background: #fff;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
body.parent-pageid-3361 .page-header {
	position: relative;
	max-width: var(--city-wide);
	margin: 28px auto 0;
	padding: clamp(40px, 6vw, 68px) clamp(24px, 5vw, 56px) clamp(64px, 8vw, 96px);
	background:
		radial-gradient(120% 140% at 80% 0%, rgba(255, 255, 255, .16) 0%, transparent 55%),
		linear-gradient(135deg, #0b2b3f 0%, var(--city-deep) 48%, var(--city-brand) 100%);
	border-radius: 24px;
	overflow: hidden;
	text-align: center;
}

/* Decorative location pin above the title. */
body.parent-pageid-3361 .page-header::before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: .9;
}

/* Restore the globally hidden page title, for these pages only. */
body.parent-pageid-3361 .page-header .entry-title {
	display: block !important; /* beats the site-wide "hide page title" !important rule */
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	color: #fff;
	font-size: clamp(1.85rem, 4vw, 2.9rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.025em;
	text-wrap: balance;
}

/* ── Content column ───────────────────────────────────────────────────────── */
body.parent-pageid-3361 .page-content {
	max-width: var(--city-measure);
	margin: 0 auto;
	padding: 0;
	color: var(--city-text);
	font-size: 1.0625rem;
	line-height: 1.8;
}

/* ── Featured image — lifted card overlapping the hero ────────────────────── */
body.parent-pageid-3361 .page-content > p:first-child {
	/* Break out of the 760px reading measure so the image spans the hero width. */
	width: min(var(--city-wide), calc(100vw - 60px));
	max-width: none;
	margin: clamp(-56px, -5vw, -40px) 0 44px 50%;
	transform: translateX(-50%);
	padding: 0;
}

body.parent-pageid-3361 .page-content > p:first-child img {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	border-radius: 20px;
	border: 6px solid #fff;
	box-shadow: var(--city-shadow);
	margin-bottom: 0;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
body.parent-pageid-3361 .page-content > h2 {
	margin: 56px 0 16px;
	color: var(--city-ink);
	font-size: clamp(1.45rem, 2.4vw, 1.9rem);
	font-weight: 750;
	line-height: 1.25;
	letter-spacing: -.02em;
	text-wrap: balance;
}

body.parent-pageid-3361 .page-content > h2::before {
	content: "";
	display: block;
	width: 46px;
	height: 4px;
	margin-bottom: 18px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--city-brand), var(--city-brand-dk));
}

body.parent-pageid-3361 .page-content > h3 {
	margin: 34px 0 10px;
	color: var(--city-ink);
	font-size: clamp(1.1rem, 1.6vw, 1.25rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
}

/* First paragraph after the opening H2 reads as a standfirst. */
body.parent-pageid-3361 .page-content > h2:first-of-type + p {
	font-size: 1.15rem;
	line-height: 1.75;
	color: #334155;
}

body.parent-pageid-3361 .page-content p {
	margin: 0 0 20px;
}

/* ── Links ────────────────────────────────────────────────────────────────── */
body.parent-pageid-3361 .page-content a {
	color: var(--city-brand-dk);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color .15s ease;
}

body.parent-pageid-3361 .page-content a:hover {
	color: var(--city-ink);
}

/* ── Service list — checklist card ────────────────────────────────────────── */
body.parent-pageid-3361 .page-content ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 28px;
	margin: 28px 0 32px;
	padding: 28px 30px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--city-border);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px rgba(15, 23, 42, .06);
}

body.parent-pageid-3361 .page-content ul li {
	position: relative;
	margin: 0;
	padding-left: 32px;
	color: #334155;
	font-size: 1rem;
	line-height: 1.55;
}

body.parent-pageid-3361 .page-content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .16em;
	width: 21px;
	height: 21px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23e0f2fe'/%3E%3Cpath d='M5.6 10.4l2.9 2.9 5.9-5.9' fill='none' stroke='%230284c7' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── Closing section as a call-to-action panel ────────────────────────────── */
body.parent-pageid-3361 .page-content > h2:last-of-type,
body.parent-pageid-3361 .page-content > h2:last-of-type ~ p {
	margin: 0;
	padding: 0 clamp(22px, 4vw, 36px);
	background: var(--city-tint);
	border-inline: 1px solid #dbeafe;
}

body.parent-pageid-3361 .page-content > h2:last-of-type {
	margin-top: 60px;
	padding-top: clamp(30px, 4vw, 40px);
	border-top: 1px solid #dbeafe;
	border-radius: 20px 20px 0 0;
}

body.parent-pageid-3361 .page-content > h2:last-of-type ~ p {
	padding-bottom: 18px;
}

body.parent-pageid-3361 .page-content > h2:last-of-type ~ p:last-child {
	padding-bottom: clamp(30px, 4vw, 40px);
	border-bottom: 1px solid #dbeafe;
	border-radius: 0 0 20px 20px;
}

/* Links inside the closing panel stay inline prose — they sit mid-sentence. */
body.parent-pageid-3361 .page-content > h2:last-of-type ~ p a {
	color: var(--city-brand-dk);
	font-weight: 650;
	text-decoration-thickness: 2px;
}

body.parent-pageid-3361 .page-content a:focus-visible {
	outline: 3px solid rgba(6, 174, 247, .45);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 782px) {
	body.parent-pageid-3361 .site-main { padding: 0 16px 56px; }

	body.parent-pageid-3361 .page-header {
		margin-top: 16px;
		border-radius: 18px;
	}

	body.parent-pageid-3361 .page-content > p:first-child img {
		aspect-ratio: 4 / 3;
		border-width: 5px;
		border-radius: 16px;
	}

	body.parent-pageid-3361 .page-content ul {
		grid-template-columns: 1fr;
		padding: 22px 20px;
	}

	body.parent-pageid-3361 .page-content > h2 { margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	body.parent-pageid-3361 .page-content a { transition: none; }
}