/*
 * ═══════════════════════════════════════════════════════════════
 * SERVICE HUB — page-specific styles only
 * css/page-service-hub.css
 *
 * Shared components (features-grid, process steps, reviews,
 * news-header, cards, buttons, etc.) live in ukva-styles.css.
 * This file contains ONLY hub-specific layout and the CTA form.
 * ═══════════════════════════════════════════════════════════════
 */

/* ── Hub Hero ─────────────────────────── */
.hub-hero {
	background: var(--blue);
	padding: 64px var(--gutter);
	text-align: center;
}

.hub-hero-inner {
	max-width: 760px;
	margin: 0 auto;
}

.hub-hero h1 {
	font-family: var(--font-display);
	font-size: clamp(24px, 3.5vw, 38px);
	font-weight: 400;
	color: var(--white);
	line-height: 1.25;
	margin-bottom: 16px;
}

.hub-hero-intro {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.7;
	max-width: 600px;
	margin: 0 auto;
}


/* ── Services Section Heading ─────────── */
.hub-services-heading {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 400;
	color: var(--navy);
	margin-bottom: var(--space-md);
}


/* ── Remaining Services ───────────────── */
.hub-more-heading {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 400;
	color: var(--navy);
	margin-bottom: var(--space-sm);
	line-height: 1.3;
}

.hub-more-grid {
	max-width: 600px;
}


/* CTA form rules migrated to ukva-styles.css §12c (2026-05-07). */


/* ═══════════════════════════════════════
   BREAKPOINTS
═══════════════════════════════════════ */

@media (min-width: 1024px) {
	.hub-hero {
		padding: 80px var(--gutter);
	}

	.hub-services-heading {
		font-size: 24px;
	}

	/* .hub-cta-* responsive moved to ukva-styles.css §12c. */
}