/* ===================================================================
 * VPH PAGES — .vph-svc-* service page overrides, breadcrumb hero,
 * location page grid, about/contact layouts.
 * ================================================================ */

/* ===================================================================
 * SERVICE PAGE SECTIONS (.vph-svc-*)
 * 13-section blueprint applied to all 8 service pages.
 * ================================================================ */

/* Button variants needed by service page hero + final CTA */
.vph-btn-ghost {
	background: rgba(255,255,255,0.08);
	color: #fff;
	border: 2px solid #fff;
	backdrop-filter: blur(2px);
}
.vph-btn-ghost:hover {
	background: #fff;
	color: #000000;
	transform: translateY(-2px);
}
.vph-btn-ghost-light {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255,255,255,0.5);
}
.vph-btn-ghost-light:hover {
	background: #fff;
	color: #000000;
	border-color: #fff;
}

/* ---- 1. Hero ---- */
.vph-svc-hero {
	position: relative;
	min-height: 480px;
	background-color: #000000;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	padding: 120px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	overflow: hidden;
}
.vph-svc-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(15,15,30,0.72) 0%, rgba(26,26,46,0.58) 100%);
	z-index: 1;
	pointer-events: none;
}
.vph-svc-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 820px;
	margin: 0 auto;
}
.vph-svc-hero-inner .vph-eyebrow {
	color: var(--vph-color-accent);
	margin-bottom: 16px;
}
.vph-svc-hero-inner h1 {
	font-size: 52px;
	line-height: 1.1;
	color: #fff;
	font-weight: 800;
	margin: 0 0 18px;
}
.vph-svc-hero-sub {
	font-size: 19px;
	color: #e5e5e5;
	line-height: 1.55;
	margin: 0 auto 28px;
	max-width: 720px;
}
.vph-svc-hero-ctas {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 28px;
}
.vph-svc-hero-trust {
	display: flex;
	gap: 28px;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 14px;
	color: #f5f5f5;
	font-weight: 600;
}
.vph-svc-hero-trust span {
	white-space: nowrap;
}

/* ---- 2. Lead Form (inherits .vph-quick-quote-card styles from home) ---- */
.vph-svc-lead-form-section {
	background: var(--vph-bg-alt);
}

/* ---- 3. Problem + Solution ---- */
.vph-svc-problem-solution {
	background: #fff;
}
.vph-svc-ps-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}
.vph-svc-ps-problem .vph-eyebrow,
.vph-svc-ps-solution .vph-eyebrow {
	color: var(--vph-color-accent);
}
.vph-svc-ps-problem h2 {
	font-size: 32px;
	line-height: 1.15;
	color: #000000;
	font-weight: 800;
	margin: 0 0 20px;
}
.vph-svc-problem-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.vph-svc-problem-list li {
	position: relative;
	padding: 10px 0 10px 34px;
	color: #333;
	font-size: 16px;
	line-height: 1.55;
	border-bottom: 1px solid #eee;
}
.vph-svc-problem-list li:before {
	content: "\26A0";
	position: absolute;
	left: 0;
	top: 10px;
	color: var(--vph-color-accent);
	font-size: 18px;
	font-weight: 700;
}
.vph-svc-problem-list li:last-child {
	border-bottom: none;
}
.vph-svc-ps-solution p {
	font-size: 17px;
	color: #444;
	line-height: 1.65;
	margin: 0 0 24px;
}

/* ---- 4. Service Details (features grid) ---- */
.vph-svc-features-section {
	background: #f9f9fb;
}
.vph-svc-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.vph-svc-feature-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 30px 26px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vph-svc-feature-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(15,15,30,0.08);
}
.vph-svc-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vph-color-accent);
	color: #ffffff;
	font-size: 20px;
	font-weight: 900;
	margin-bottom: 16px;
}
.vph-svc-feature-card h3 {
	font-size: 19px;
	color: #000000;
	margin: 0 0 10px;
	font-weight: 700;
}
.vph-svc-feature-card p {
	font-size: 15px;
	color: #555;
	line-height: 1.55;
	margin: 0;
}

/* ---- 5. Why Choose Us ---- */
.vph-svc-why-section {
	background: #fff;
}
.vph-svc-why-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px 40px;
	max-width: 920px;
	margin: 0 auto;
}
.vph-svc-why-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.vph-svc-why-check {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--vph-color-accent);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 900;
}
.vph-svc-why-content h3 {
	font-size: 18px;
	margin: 0 0 6px;
	color: #000000;
	font-weight: 700;
}
.vph-svc-why-content p {
	font-size: 15px;
	color: #555;
	line-height: 1.55;
	margin: 0;
}

/* ---- 6. Reviews ---- */
.vph-svc-reviews-section {
	background: #f9f9fb;
}
.vph-svc-reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.vph-svc-review-card {
	background: #fff;
	border-radius: 8px;
	padding: 28px 26px;
	border: 1px solid #eee;
	box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.vph-svc-review-stars {
	color: var(--vph-color-accent);
	font-size: 18px;
	letter-spacing: 2px;
	margin-bottom: 14px;
}
.vph-svc-review-quote {
	font-size: 15px;
	color: #333;
	line-height: 1.6;
	margin: 0 0 16px;
	font-style: italic;
}
.vph-svc-review-author {
	font-size: 14px;
	color: #666;
}
.vph-svc-review-author strong {
	color: #000000;
}
.vph-svc-reviews-disclaimer {
	font-size: 14px;
	color: #888;
	font-style: italic;
}
.vph-svc-reviews-disclaimer a {
	color: #000000;
	font-weight: 600;
	text-decoration: none;
}
.vph-svc-reviews-disclaimer a:hover {
	text-decoration: underline;
}

/* ---- 7. Process ---- */
.vph-svc-process-section {
	background: #fff;
}
.vph-svc-process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}
.vph-svc-process-step {
	text-align: center;
	padding: 20px 16px;
}
.vph-svc-process-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--vph-color-accent);
	color: #ffffff;
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 16px;
	letter-spacing: 1px;
}
.vph-svc-process-step h3 {
	font-size: 18px;
	margin: 0 0 8px;
	color: #000000;
	font-weight: 700;
}
.vph-svc-process-step p {
	font-size: 14px;
	color: #555;
	line-height: 1.55;
	margin: 0;
}

/* ---- 8. Service Area ---- */
.vph-svc-area-section {
	background: #f9f9fb;
}
.vph-svc-area-section .vph-section-head p {
	max-width: 640px;
	margin: 0 auto;
	color: #555;
}
.vph-svc-area-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	max-width: 820px;
	margin: 32px auto 0;
}
.vph-svc-city-link {
	display: block;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	color: #000000;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	transition: all 0.2s ease;
	font-size: 15px;
}
.vph-svc-city-link:hover {
	background: #000000;
	border-color: #ffffff;
	color: #ffffff;
	transform: translateY(-2px);
}

/* ---- 9. Pricing ---- */
.vph-svc-pricing-section {
	background: #fff;
}
.vph-svc-pricing-section .vph-section-head p {
	max-width: 640px;
	margin: 0 auto;
	color: #555;
}
.vph-svc-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	max-width: 1020px;
	margin: 0 auto;
}
.vph-svc-pricing-card {
	background: #fff;
	border: 2px solid #eee;
	border-radius: 8px;
	padding: 34px 28px;
	transition: all 0.25s ease;
}
.vph-svc-pricing-card:hover {
	border-color: #000000;
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(15,15,30,0.08);
}
.vph-svc-pricing-card h3 {
	font-size: 22px;
	color: #000000;
	font-weight: 800;
	margin: 0 0 4px;
}
.vph-svc-pricing-subtitle {
	color: #000000;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 18px;
}
.vph-svc-pricing-card ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.vph-svc-pricing-card ul li {
	position: relative;
	padding: 10px 0 10px 26px;
	color: #444;
	font-size: 15px;
	line-height: 1.5;
	border-bottom: 1px solid #f0f0f0;
}
.vph-svc-pricing-card ul li:before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 10px;
	color: var(--vph-color-accent);
	font-weight: 900;
}
.vph-svc-pricing-card ul li:last-child {
	border-bottom: none;
}
.vph-svc-pricing-cta {
	text-align: center;
	margin-top: 38px;
}

/* ---- 10. FAQ ---- */
.vph-svc-faq-section {
	background: #f9f9fb;
}
.vph-container-narrow {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 24px;
}
.vph-svc-faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.vph-svc-faq-item {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	overflow: hidden;
}
.vph-svc-faq-item summary {
	padding: 20px 24px;
	font-size: 17px;
	font-weight: 700;
	color: #000000;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 48px;
}
.vph-svc-faq-item summary::-webkit-details-marker {
	display: none;
}
.vph-svc-faq-item summary:after {
	content: "+";
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	color: #000000;
	font-weight: 800;
	transition: transform 0.2s ease;
}
.vph-svc-faq-item[open] summary:after {
	content: "\2212";
}
.vph-svc-faq-answer {
	padding: 4px 24px 22px;
}
.vph-svc-faq-answer p {
	margin: 0;
	color: #555;
	font-size: 15px;
	line-height: 1.65;
}

/* ---- 11. Final CTA ---- */
.vph-svc-final-cta-section {
	background: linear-gradient(135deg, #000000 0%, #000000 100%);
	color: #fff;
	padding: 80px 0 !important;
}
.vph-svc-final-cta-inner {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}
.vph-svc-final-cta-inner h2 {
	color: #fff;
	font-size: 36px;
	line-height: 1.15;
	font-weight: 800;
	margin: 0 0 12px;
}
.vph-svc-final-cta-inner p {
	color: #ccc;
	font-size: 17px;
	margin: 0 0 30px;
}
.vph-svc-final-cta-buttons {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}