/**
 * Pure Haven IT — Visual rhythm & section differentiation (v1.8.6).
 * Carries hero blue/orange energy through every major beat.
 * Brand palette and fonts unchanged.
 */

/* ==========================================================================
   Global section rhythm — separators & decorative mesh
   ========================================================================== */
.ph-home .ph-band--beat {
	position: relative;
	overflow: hidden;
	padding: clamp(4rem, 7.5vw, 6.5rem) 0;
}

.ph-home .ph-band--beat::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.ph-home .ph-band--beat > .ph-container,
.ph-home .ph-band--beat > .ph-hero__grid {
	position: relative;
	z-index: 1;
}

/* Wave divider between hero momentum and content */
.ph-home .ph-band--beat-metrics {
	margin-top: -1px;
	border-top: 3px solid transparent;
	border-image: linear-gradient(90deg, #0066FF, #00B4A6, #FF6B00, #0066FF) 1;
}

/* Beat 1 — Metrics strip (brand light blue — styled in premium-metrics.css) */
.ph-band--beat-metrics.ph-metrics-band {
	padding: clamp(2rem, 4vw, 2.75rem) 0 !important;
}

.ph-band--beat-metrics.ph-metrics-band::after {
	width: 280px;
	height: 280px;
	top: -80px;
	right: -60px;
	background: radial-gradient(circle, rgba(0, 102, 255, 0.12) 0%, transparent 70%);
}

/* ==========================================================================
   Beat 2 — About split (grey mesh + visual panel)
   ========================================================================== */
.ph-band--beat-about {
	background:
		radial-gradient(circle at 0% 100%, rgba(0, 102, 255, 0.08) 0%, transparent 42%),
		linear-gradient(180deg, #F5F7FA 0%, #e8eef6 55%, #f5f8fc 100%);
}

.ph-band--beat-about::after {
	width: 360px;
	height: 360px;
	bottom: -120px;
	left: -100px;
	background: radial-gradient(circle, rgba(0, 180, 166, 0.08) 0%, transparent 65%);
}

.ph-band--beat-about .ph-split--about {
	align-items: center;
}

/* ==========================================================================
   Beat 3 — Services (designed white + grid mesh + visual strip)
   ========================================================================== */
.ph-band--beat-services {
	background:
		linear-gradient(rgba(0, 102, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 102, 255, 0.04) 1px, transparent 1px),
		radial-gradient(circle at 100% 0%, rgba(0, 102, 255, 0.09) 0%, transparent 38%),
		radial-gradient(circle at 0% 100%, rgba(255, 107, 0, 0.04) 0%, transparent 35%),
		#FFFFFF;
	background-size: 48px 48px, 48px 48px, auto, auto, auto;
}

.ph-band--beat-services::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: linear-gradient(180deg, #0066FF 0%, #00B4A6 50%, #FF6B00 100%);
	opacity: 0.85;
	z-index: 0;
}

.ph-band--beat-services .ph-services-visual {
	box-shadow:
		0 20px 56px -16px rgba(0, 102, 255, 0.4),
		0 0 0 1px rgba(0, 102, 255, 0.15);
	transform: perspective(900px) rotateX(2deg);
	transition: transform 0.5s ease;
}

.ph-band--beat-services .ph-services-visual:hover {
	transform: perspective(900px) rotateX(0deg);
}

/* ==========================================================================
   Beat 4 — Industries (deep blue wash)
   ========================================================================== */
.ph-band--beat-industries {
	background:
		radial-gradient(circle at 15% 85%, rgba(0, 102, 255, 0.18) 0%, transparent 50%),
		radial-gradient(circle at 90% 10%, rgba(0, 180, 166, 0.1) 0%, transparent 42%),
		linear-gradient(165deg, #E6F0FF 0%, #f4f8ff 45%, #FFFFFF 100%);
	border-top: 2px solid rgba(0, 102, 255, 0.15);
	border-bottom: 2px solid rgba(0, 102, 255, 0.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ph-band--beat-industries::after {
	width: 200px;
	height: 200px;
	top: 10%;
	right: 5%;
	background: radial-gradient(circle, rgba(255, 107, 0, 0.08) 0%, transparent 70%);
}

/* ==========================================================================
   Beat 5 — Specialisations (navy-tint mesh — NOT plain white)
   ========================================================================== */
.ph-band--beat-specs {
	background:
		linear-gradient(rgba(0, 102, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 102, 255, 0.06) 1px, transparent 1px),
		radial-gradient(circle at 50% 0%, rgba(13, 27, 62, 0.06) 0%, transparent 55%),
		linear-gradient(180deg, #eef2f8 0%, #f8fafc 50%, #FFFFFF 100%);
	background-size: 40px 40px, 40px 40px, auto, auto;
	border-top: 1px solid rgba(13, 27, 62, 0.08);
}

.ph-band--beat-specs .ph-preview-panel {
	background: linear-gradient(165deg, #FFFFFF 0%, rgba(230, 240, 255, 0.35) 100%);
}

.ph-band--beat-specs .ph-preview-panel--spec .ph-preview-panel__marker {
	background: linear-gradient(90deg, #0D1B3E, #0066FF);
}

/* ==========================================================================
   Beat 6 — Employers (grey + blue glass panel glow)
   ========================================================================== */
.ph-band--beat-employers {
	background:
		radial-gradient(circle at 100% 0%, rgba(255, 107, 0, 0.06) 0%, transparent 40%),
		radial-gradient(circle at 0% 80%, rgba(0, 102, 255, 0.1) 0%, transparent 45%),
		linear-gradient(180deg, #F5F7FA 0%, #e9eef5 100%);
}

.ph-band--beat-employers .ph-highlight-panel--blue {
	background:
		linear-gradient(145deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 102, 255, 0.06) 40%, rgba(255, 255, 255, 0.95) 100%);
	box-shadow:
		0 16px 48px -12px rgba(0, 102, 255, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.7);
	transform: perspective(800px) rotateY(-2deg);
	transition: transform 0.45s ease;
}

.ph-band--beat-employers .ph-highlight-panel--blue:hover {
	transform: perspective(800px) rotateY(0deg);
}

.ph-band--beat-employers .ph-cta-group .ph-btn--orange {
	box-shadow: 0 8px 24px -4px rgba(255, 107, 0, 0.45);
}

/* ==========================================================================
   Beat 7 — Why us (rich blue band)
   ========================================================================== */
.ph-band--beat-why {
	background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 55%, #F8FAFC 100%);
	border-top: 1px solid #E2E8F0;
	border-bottom: 1px solid #E2E8F0;
}

.ph-band--beat-why .ph-feature-panel {
	background: #FFFFFF;
}

.ph-band--beat-why > .ph-container {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Beat 8 — Testimonial / referral (social proof split)
   ========================================================================== */
.ph-band--beat-testimonial {
	background:
		radial-gradient(circle at 30% 50%, rgba(0, 102, 255, 0.07) 0%, transparent 50%),
		linear-gradient(180deg, #FFFFFF 0%, #f0f4fa 100%);
	padding: clamp(4rem, 7vw, 6rem) 0 !important;
}

.ph-band--beat-testimonial::after {
	width: 320px;
	height: 320px;
	bottom: -100px;
	right: -80px;
	background: radial-gradient(circle, rgba(255, 107, 0, 0.07) 0%, transparent 70%);
}

.ph-quote-panel {
	position: relative;
	padding: clamp(1.75rem, 3vw, 2.25rem);
	border-radius: var(--ph-radius-xl);
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(0, 102, 255, 0.2);
	box-shadow:
		0 12px 40px -12px rgba(0, 102, 255, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ph-quote-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: linear-gradient(135deg, rgba(0, 102, 255, 0.45), rgba(0, 180, 166, 0.3));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.ph-quote-panel .ph-quote {
	font-size: clamp(1.0625rem, 1.8vw, 1.2rem) !important;
	line-height: 1.65 !important;
	color: #0D1B3E !important;
	font-weight: 500 !important;
	margin: var(--ph-space-md) 0;
}

.ph-quote-panel .ph-h3 {
	font-size: clamp(1.1rem, 2vw, 1.25rem) !important;
	color: #0066FF !important;
	font-weight: 700 !important;
}

.ph-referral-panel {
	position: relative;
	padding: clamp(1.75rem, 3vw, 2.25rem);
	border-radius: var(--ph-radius-xl);
	background:
		linear-gradient(155deg, rgba(255, 107, 0, 0.12) 0%, rgba(255, 107, 0, 0.04) 35%, #FFFFFF 70%);
	border: 1px solid rgba(255, 107, 0, 0.28);
	box-shadow:
		0 16px 48px -12px rgba(255, 107, 0, 0.25),
		0 8px 24px -8px rgba(13, 27, 62, 0.08);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.ph-referral-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: var(--ph-radius-xl) var(--ph-radius-xl) 0 0;
	background: linear-gradient(90deg, #FF6B00, #FF6B00 60%, #0066FF);
}

.ph-referral-panel:hover {
	transform: translateY(-4px);
	box-shadow:
		0 20px 56px -12px rgba(255, 107, 0, 0.3),
		0 12px 32px -8px rgba(13, 27, 62, 0.1);
}

.ph-referral-panel .ph-h3 {
	color: #0D1B3E !important;
	font-weight: 700 !important;
}

.ph-referral-panel p {
	color: #475569 !important;
	font-size: 0.9375rem !important;
	line-height: 1.65 !important;
}

.ph-split--social {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;
}

/* ==========================================================================
   Beat 9 — Final CTA (navy + orange energy)
   ========================================================================== */
.ph-band--beat-final {
	background:
		radial-gradient(circle at 20% 30%, rgba(0, 102, 255, 0.35) 0%, transparent 45%),
		radial-gradient(circle at 85% 70%, rgba(255, 107, 0, 0.2) 0%, transparent 42%),
		linear-gradient(135deg, #081428 0%, #0D1B3E 45%, #1A2F5C 100%);
	position: relative;
	overflow: hidden;
}

.ph-band--beat-final::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(0, 102, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 102, 255, 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	opacity: 0.5;
	pointer-events: none;
}

.ph-band--beat-final .ph-final-cta__inner {
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}

.ph-band--beat-final .ph-h2 {
	font-size: clamp(2rem, 4vw, 2.75rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
}

.ph-band--beat-final .ph-btn--orange {
	box-shadow: 0 8px 32px -4px rgba(255, 107, 0, 0.5);
}

/* ==========================================================================
   Inner pages — alternating section mood
   ========================================================================== */
.ph-page-shell > .ph-page-section.ph-band--rhythm-white {
	background:
		radial-gradient(circle at 100% 0%, rgba(0, 102, 255, 0.05) 0%, transparent 40%),
		#FFFFFF;
}

.ph-page-shell > .ph-page-section.ph-band--rhythm-grey {
	background:
		radial-gradient(circle at 0% 100%, rgba(0, 102, 255, 0.08) 0%, transparent 42%),
		linear-gradient(180deg, #F5F7FA 0%, #eef2f8 100%);
}

.ph-page-shell > .ph-page-section.ph-band--rhythm-blue {
	background:
		radial-gradient(circle at 50% 0%, rgba(0, 102, 255, 0.14) 0%, transparent 50%),
		linear-gradient(180deg, #E6F0FF 0%, #f8fbff 100%);
	border-top: 2px solid rgba(0, 102, 255, 0.12);
}

/* Showcase pages — alternating beats */
.ph-band--beat-showcase-a {
	background:
		radial-gradient(circle at 90% 20%, rgba(0, 102, 255, 0.06) 0%, transparent 40%),
		#FFFFFF;
	padding: clamp(3rem, 6vw, 5rem) 0;
}

.ph-band--beat-showcase-b {
	background:
		radial-gradient(circle at 10% 80%, rgba(0, 102, 255, 0.1) 0%, transparent 42%),
		linear-gradient(180deg, #F5F7FA 0%, #eef2f8 100%);
	padding: clamp(3rem, 6vw, 5rem) 0;
}

.ph-showcase-group .ph-showcase-group__title {
	padding-bottom: var(--ph-space-md);
	border-bottom: 2px solid rgba(0, 102, 255, 0.12);
	margin-bottom: var(--ph-space-xl) !important;
}

/* Page hero mesh */
.ph-page-hero--light,
.ph-page-hero--surface {
	position: relative;
	overflow: hidden;
}

.ph-page-hero--light::after,
.ph-page-hero--surface::after {
	content: "";
	position: absolute;
	top: -40%;
	right: -10%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(0, 102, 255, 0.08) 0%, transparent 65%);
	pointer-events: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.ph-split--social {
		grid-template-columns: 1fr;
	}

	.ph-band--beat-employers .ph-highlight-panel--blue {
		transform: none;
	}
}

@media (max-width: 768px) {
	.ph-home .ph-band--beat {
		padding: clamp(3rem, 6vw, 4.5rem) 0;
	}

	.ph-band--beat-services::before {
		width: 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ph-band--beat-services .ph-services-visual,
	.ph-band--beat-employers .ph-highlight-panel--blue,
	.ph-referral-panel:hover {
		transform: none;
	}
}