/* ==========================================================================
   Hero conversion — compact above-the-fold CTAs (site-wide)
   ========================================================================== */

:root {
	--hero-pad-top: var(--space-5);
	--hero-pad-bottom: var(--space-6);
	--hero-gap-xs: var(--space-2);
	--hero-gap-sm: var(--space-3);
	--hero-gap-md: var(--space-5);
	--hero-gap-lg: var(--space-6);
	--hero-sub-max: 42rem;
}

@media (min-width: 75rem) {
	:root {
		--hero-pad-top: var(--space-6);
		--hero-pad-bottom: var(--space-8);
	}
}

/* ---- Shared hero shell ---- */
.hero,
.hub-hero,
.services-hero,
.about-hero,
.contact-hero,
.discovery-hero,
.process-hero,
.blog-hub-hero,
.blog-single-hero,
.cs-hero,
.legal-page__hero {
	padding-block: var(--hero-pad-top) var(--hero-pad-bottom);
}

.cs-page > .cs-breadcrumbs + .cs-hero {
	padding-top: var(--space-4);
}

/* ---- Badge → headline rhythm ---- */
.hero .badge,
.hub-hero .badge,
.services-hero .badge,
.about-hero .badge,
.contact-hero .badge,
.discovery-hero .badge,
.process-hero .badge,
.blog-hub-hero .badge,
.cs-hero .badge {
	margin-bottom: var(--hero-gap-sm);
}

/* ---- Headlines ---- */
.hero__title,
.hub-hero__title,
.services-hero__title,
.about-hero__title,
.contact-hero__title,
.discovery-hero__title,
.process-hero__title,
.blog-hub-hero__title,
.cs-hero__headline {
	margin-bottom: var(--hero-gap-md);
	line-height: 1.08;
}

.blog-single-hero__title {
	margin-bottom: var(--hero-gap-sm);
	line-height: 1.1;
}

/* ---- Supporting copy ---- */
.hero__description,
.hub-hero__sub,
.services-hero__sub,
.about-hero__sub,
.contact-hero__sub,
.discovery-hero__sub,
.process-hero__sub,
.blog-hub-hero__sub,
.cs-hero__sub,
.blog-single-hero__deck {
	margin-bottom: var(--hero-gap-lg);
	max-width: var(--hero-sub-max);
	line-height: 1.6;
	font-size: clamp(0.95rem, 1.6vw, 1.05rem);
}

/* ---- CTAs ---- */
.hero__actions,
.hub-hero__actions,
.services-hero__actions,
.about-hero__actions,
.contact-hero__actions,
.process-hero__actions,
.cs-hero__actions,
.blog-hub-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: 0;
	margin-bottom: 0;
}

/* ---- Bordered page heroes: breathing room below CTA ---- */
.hub-hero,
.services-hero,
.about-hero,
.contact-hero,
.discovery-hero,
.process-hero,
.blog-hub-hero,
.cs-hero,
.legal-page__hero {
	padding-bottom: var(--space-10);
}

@media (min-width: 75rem) {
	.hub-hero,
	.services-hero,
	.about-hero,
	.contact-hero,
	.discovery-hero,
	.process-hero,
	.blog-hub-hero,
	.cs-hero,
	.legal-page__hero {
		padding-bottom: var(--space-12);
	}
}

/* ---- Homepage ---- */
.hero.section {
	padding-block: var(--hero-pad-top) var(--hero-pad-bottom);
}

.hero {
	padding-bottom: var(--space-6);
}

.hero__actions {
	margin-bottom: 0;
}

.hero .trust-bar {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
}

@media (min-width: 75rem) {
	.hero__layout {
		align-items: start;
	}

	.hero__visual {
		padding-block: 0;
	}
}

/* ---- About: keep CTA above portrait stack on mobile ---- */
@media (max-width: 47.99rem) {
	#hero.hero.section {
		padding-top: var(--space-4);
		padding-bottom: var(--space-4);
	}

	#hero .hero__actions {
		margin-bottom: 0;
	}

	#hero .trust-bar {
		margin-top: var(--space-5);
		padding-top: var(--space-5);
	}

	.about-hero__media {
		display: none;
	}

	.about-hero__layout {
		gap: 0;
	}
}

@media (min-width: 48rem) {
	.about-hero__layout {
		gap: var(--space-8);
		align-items: center;
	}

	.about-hero__portrait {
		max-width: 14rem;
	}
}

/* ---- Case studies ---- */
.cs-hero__headline {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	margin-bottom: var(--hero-gap-sm);
}

.cs-hero__sub {
	margin-top: 0;
}

.cs-project-details {
	padding-block: var(--space-6) var(--space-8);
	border-bottom: 1px solid var(--color-border);
}

.cs-project-details .cs-details-grid {
	margin-bottom: 0;
	padding: var(--space-5) var(--space-6);
	gap: var(--space-4);
}

/* ---- Case studies hub ---- */
.hub-page .container {
	max-width: var(--container-max);
}

.hub-hero__inner {
	max-width: 44rem;
}

/* ---- Blog hub ---- */
.blog-hub-hero__inner {
	max-width: 44rem;
}

.blog-hub-hero__title {
	margin-bottom: var(--hero-gap-md);
}

/* ---- Blog single: meta below title, image below fold on mobile ---- */
.blog-single-hero {
	padding-bottom: var(--space-10);
}

@media (min-width: 75rem) {
	.blog-single-hero {
		padding-bottom: var(--space-12);
	}
}

.blog-single-hero__meta {
	margin-bottom: var(--hero-gap-md);
	gap: var(--space-3) var(--space-5);
}

@media (max-width: 47.99rem) {
	.blog-single-hero__deck,
	.blog-single-hero__figure {
		display: none;
	}
}

/* ---- Mobile conversion (390–430px): headline + CTA priority ---- */
@media (max-width: 26.875rem) {
	.hero__description,
	.hub-hero__sub,
	.services-hero__sub,
	.about-hero__sub,
	.contact-hero__sub,
	.discovery-hero__sub,
	.process-hero__sub,
	.blog-hub-hero__sub,
	.cs-hero__sub {
		display: none;
	}

	.hero .badge,
	.hub-hero .badge,
	.services-hero .badge,
	.about-hero .badge,
	.contact-hero .badge,
	.discovery-hero .badge,
	.process-hero .badge,
	.blog-hub-hero .badge,
	.cs-hero .badge {
		margin-bottom: var(--hero-gap-xs);
	}

	.hero__title,
	.hub-hero__title,
	.services-hero__title,
	.about-hero__title,
	.contact-hero__title,
	.discovery-hero__title,
	.process-hero__title,
	.blog-hub-hero__title,
	.cs-hero__headline,
	.blog-single-hero__title {
		margin-bottom: var(--hero-gap-sm);
		font-size: clamp(1.65rem, 7.5vw, 2rem);
	}

	:root {
		--hero-pad-top: var(--space-4);
		--hero-pad-bottom: var(--space-5);
	}
}

/* ---- Blog category archives ---- */
.blog-hub--category .blog-hub-hero__sub {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.blog-hub--category .blog-hub-hero__back {
	margin-top: var(--hero-gap-md);
	font-size: var(--text-sm);
}

.blog-hub--category .blog-hub-hero__back a {
	color: var(--color-accent);
	text-decoration: none;
}

/* ==========================================================================
   Page hero reveals — CSS load animation (no scroll required)
   ========================================================================== */

@keyframes page-hero-reveal {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

:is(
	#hero,
	.hub-hero,
	.services-hero,
	.contact-hero,
	.discovery-hero,
	.process-hero,
	.about-hero,
	.blog-hub-hero,
	.blog-single-hero,
	.cs-hero,
	.legal-page__hero,
	.thank-you,
	.not-found
) :is(.reveal, .stagger-group) {
	animation: page-hero-reveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: calc(var(--reveal-i, 0) * 75ms + 50ms);
	transition: none;
	will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
	:is(
		#hero,
		.hub-hero,
		.services-hero,
		.contact-hero,
		.discovery-hero,
		.process-hero,
		.about-hero,
		.blog-hub-hero,
		.blog-single-hero,
		.cs-hero,
		.legal-page__hero,
		.thank-you,
		.not-found
	) :is(.reveal, .stagger-group) {
		animation: none;
		opacity: 1;
		transform: none;
	}
}