/**
 * Pure Haven IT — Typography hierarchy (final structural layer).
 * Clear scan levels: eyebrow → H2 → intro → card title → card body → CTA.
 * Brand fonts and colours unchanged.
 */

/* ==========================================================================
   Level 1 — Eyebrow (small, electric blue, spaced)
   ========================================================================== */
body.ph-body .ph-eyebrow:not(.ph-section-label),
body.ph-body .ph-eyebrow-anim:not(.ph-section-label),
body.ph-body .ph-section-header__eyebrow:not(.ph-section-label) {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: #0066FF !important;
	margin: 0 0 14px !important;
	line-height: 1.3 !important;
}

/* ==========================================================================
   Level 2 — Section H2 (large, navy, impact)
   ========================================================================== */
body.ph-body .ph-section-title,
body.ph-body .ph-section-header .ph-h2.ph-section-title,
body.ph-body .ph-section-header__headline .ph-section-title {
	font-family: 'Montserrat', var(--ph-font-heading), sans-serif !important;
	font-size: clamp(2.125rem, 4.5vw, 3.125rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.04em !important;
	line-height: 1.08 !important;
	color: #0D1B3E !important;
	margin: 0 !important;
}

body.ph-body .ph-section-header--center .ph-section-title {
	max-width: 900px;
	margin-inline: auto;
}

body.ph-body .ph-section-header__headline {
	margin: 0;
}

/* Page H1 — above section H2 */
body.ph-body .ph-page-hero__title {
	font-size: clamp(2.25rem, 5vw, 3rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.04em !important;
	line-height: 1.08 !important;
	margin-bottom: var(--ph-space-md) !important;
}

body.ph-body .ph-page-hero__subtitle {
	font-size: clamp(1.0625rem, 1.8vw, 1.1875rem) !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
	color: #000000 !important;
	margin-top: var(--ph-space-md) !important;
	max-width: 680px;
}

/* ==========================================================================
   Level 3 — Intro line (subordinate, muted, separated from H2)
   ========================================================================== */
body.ph-body .ph-section-intro,
body.ph-body .ph-section-header__text.ph-section-intro {
	font-family: 'Inter', var(--ph-font-body), sans-serif !important;
	font-size: clamp(1rem, 1.6vw, 1.125rem) !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
	color: #000000 !important;
	margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0 !important;
	max-width: 640px;
	padding-top: clamp(1rem, 2vw, 1.25rem);
	border-top: 1px solid rgba(0, 102, 255, 0.14);
}

body.ph-body .ph-section-header--center .ph-section-intro {
	text-align: center;
}

body.ph-body .ph-section-header:not(.ph-section-header--center) .ph-section-intro {
	margin-inline: 0;
	text-align: left;
}

/* What We Do — reference hierarchy block */
.ph-services-section .ph-section-header {
	margin-bottom: clamp(3rem, 5.5vw, 4rem);
}

.ph-services-section .ph-section-intro {
	max-width: 600px;
	margin-top: clamp(1.5rem, 3vw, 2rem) !important;
	padding-top: clamp(1.25rem, 2.5vw, 1.5rem) !important;
}

.ph-employers-band__intro {
	margin-top: clamp(1.25rem, 2vw, 1.5rem) !important;
	padding-top: clamp(1rem, 2vw, 1.25rem) !important;
	border-top: 1px solid rgba(0, 102, 255, 0.14);
	max-width: 580px;
}

/* Section header spacing */
body.ph-body .ph-section-header {
	margin-bottom: clamp(2.75rem, 5vw, 4rem);
}

/* ==========================================================================
   Level 4–6 — Feature panels (title / highlight / body / CTA)
   ========================================================================== */
body.ph-body .ph-feature-panel {
	padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 1.75rem);
	gap: 0;
}

body.ph-body .ph-feature-panel__title {
	font-size: clamp(1.25rem, 2.2vw, 1.5rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.025em !important;
	line-height: 1.2 !important;
	color: #0D1B3E !important;
	margin-bottom: var(--ph-space-md) !important;
}

body.ph-body .ph-feature-panel__highlight {
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	color: #0066FF !important;
	margin-bottom: var(--ph-space-md) !important;
	padding: 10px 14px;
}

body.ph-body .ph-feature-panel__body p {
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	color: #000000 !important;
}

body.ph-body .ph-feature-panel__cta {
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	color: #0066FF !important;
	margin-top: auto;
	padding-top: var(--ph-space-md);
}

body.ph-body .ph-feature-panel__cta:hover {
	color: #0052CC !important;
}

body.ph-body .ph-feature-panel__tag {
	font-size: 10px !important;
	letter-spacing: 0.12em !important;
}

body.ph-body .ph-feature-panel__badge {
	font-size: 12px !important;
	min-width: 40px;
	height: 40px;
}

/* Compact panels (why-us grid) */
.ph-feature-panel--compact {
	padding: clamp(1.35rem, 2vw, 1.65rem);
}

.ph-feature-panel--compact .ph-feature-panel__title {
	font-size: clamp(1.1rem, 1.8vw, 1.25rem) !important;
}

.ph-feature-panel--compact .ph-feature-panel__highlight {
	font-size: 0.875rem !important;
	padding: 8px 12px;
}

.ph-feature-panel--compact .ph-feature-panel__body p {
	font-size: 0.8125rem !important;
}

/* Lead card emphasis */
body.ph-body .ph-feature-panel--lead .ph-feature-panel__title {
	color: #081428 !important;
}

/* ==========================================================================
   Preview panels — industry / specialisation tiles
   ========================================================================== */
.ph-preview-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.35rem, 2.5vw, 1.75rem);
	border-radius: var(--ph-radius-xl);
	background: linear-gradient(165deg, #FFFFFF 0%, #F8FAFC 100%);
	min-height: 100%;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.ph-preview-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: linear-gradient(135deg, rgba(0, 102, 255, 0.5) 0%, rgba(0, 180, 166, 0.25) 60%, rgba(226, 232, 240, 0.85) 100%);
	-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-preview-panel:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 40px -12px rgba(0, 102, 255, 0.2);
}

.ph-preview-panel__marker {
	display: block;
	width: 32px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, #0066FF, #00B4A6);
	margin-bottom: var(--ph-space-md);
}

body.ph-body .ph-preview-panel__title {
	font-family: 'Montserrat', var(--ph-font-heading), sans-serif !important;
	font-size: clamp(1.05rem, 1.8vw, 1.2rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.25 !important;
	color: #0D1B3E !important;
	margin: 0 0 var(--ph-space-sm) !important;
}

body.ph-body .ph-preview-panel__desc,
body.ph-body .ph-preview-panel__highlight {
	font-family: 'Inter', var(--ph-font-body), sans-serif !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	line-height: 1.65 !important;
	color: #475569 !important;
	margin: 0 !important;
}

.ph-preview-panel--spec .ph-preview-panel__highlight {
	font-weight: 600 !important;
	color: #0066FF !important;
	margin-bottom: var(--ph-space-md) !important;
}

.ph-preview-panel__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--ph-space-md);
}

.ph-preview-panel__tag {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #0066FF;
	padding: 4px 10px;
	border-radius: var(--ph-radius-pill);
	background: rgba(0, 102, 255, 0.08);
	border: 1px solid rgba(0, 102, 255, 0.18);
}

/* Blue rhythm band tiles */
.ph-band--rhythm-blue .ph-preview-panel {
	background: linear-gradient(165deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 100%);
}

/* ==========================================================================
   Showcase full-page cards
   ========================================================================== */
body.ph-body .ph-showcase-card .ph-h3 {
	font-size: clamp(1.1rem, 1.8vw, 1.25rem) !important;
	font-weight: 700 !important;
	color: #0D1B3E !important;
	margin-bottom: var(--ph-space-sm) !important;
}

body.ph-body .ph-showcase-card__meta,
body.ph-body .ph-showcase-card p {
	font-size: 0.875rem !important;
	color: #475569 !important;
	line-height: 1.65 !important;
}

body.ph-body .ph-showcase-group__title {
	font-family: 'Montserrat', var(--ph-font-heading), sans-serif !important;
	font-size: clamp(1.5rem, 2.5vw, 1.875rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	color: #0D1B3E !important;
	margin-bottom: var(--ph-space-xl) !important;
}

/* ==========================================================================
   Prose / lead — distinct from section intro
   ========================================================================== */
body.ph-body .ph-lead {
	font-size: 1.0625rem !important;
	color: #1E293B !important;
	line-height: 1.7 !important;
}

body.ph-body .ph-prose p:not(.ph-section-label) {
	font-size: 1rem !important;
	color: #1E293B !important;
	line-height: 1.7 !important;
}

/* ==========================================================================
   Heading underline animation — blue accent
   ========================================================================== */
body.ph-body .ph-section-title.ph-heading-anim::after,
body.ph-body .ph-section-header .ph-heading-anim::after {
	width: 88px !important;
	height: 4px !important;
	margin-top: 18px !important;
	background: linear-gradient(90deg, #0066FF 0%, #0066FF 65%, #00B4A6 100%) !important;
}

body.ph-body .ph-section-header--center .ph-heading-anim::after {
	margin-inline: auto;
}

/* ==========================================================================
   Grid rhythm
   ========================================================================== */
.ph-feature-panel-grid,
.ph-preview-grid,
.ph-tile-grid {
	gap: clamp(1.25rem, 2.5vw, 1.75rem) !important;
}

@media (max-width: 768px) {
	body.ph-body .ph-section-title {
		font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
	}

	body.ph-body .ph-section-intro {
		font-size: 1rem !important;
		padding-top: 1rem;
		margin-top: 1.25rem !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ph-preview-panel:hover,
	.ph-feature-panel:hover {
		transform: none;
	}
}