/* Imeegi services.html — page-specific styles.
   Shared header/footer/buttons/hero/contact-form live in shared.css. */

/* Hero */

.services-hero {
	text-align: left;
	overflow: hidden;
}

.services-hero .container {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.services-hero .eyebrow,
.services-hero .subhead {
	margin-left: 0;
}

.services-hero h1 {
	margin-left: 0;
	max-width: none;
}

.services-hero .subhead {
	max-width: 34rem;
}

.services-hero .cta-row {
	justify-content: flex-start;
}

.services-hero-illustration {
	border-radius: var(--br-mini);
	box-shadow: 0 24px 50px rgba(105, 54, 216, 0.16);
	overflow: hidden;
}

.services-hero-illustration img {
	width: 100%;
	height: auto;
	display: block;
}

/* Hero load-in animation (above the fold, so it plays on load rather than on scroll) */

.services-hero .eyebrow,
.services-hero h1,
.services-hero .subhead,
.services-hero-illustration {
	opacity: 0;
	transform: translateY(16px);
	animation: servicesFadeUp 0.7s ease forwards;
}

.services-hero .eyebrow { animation-delay: 0.05s; }
.services-hero h1 { animation-delay: 0.15s; }
.services-hero .subhead { animation-delay: 0.28s; }
.services-hero-illustration { animation-delay: 0.25s; }

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

/* CTA buttons fade up with a slight scale, so they read as a distinct,
   slightly bouncier beat after the rest of the hero settles in. */

.services-hero .cta-row {
	opacity: 0;
	transform: translateY(16px) scale(0.94);
	animation: servicesCtaFadeUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	animation-delay: 0.42s;
}

@keyframes servicesCtaFadeUp {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Services grid */

.services-grid-section {
	background-color: var(--color-white);
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	border: 1px solid var(--color-gainsboro);
	border-radius: var(--br-mini);
	padding: 2.25rem 1.75rem;
	box-shadow: 0 4px 16px rgba(23, 26, 29, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	opacity: 0;
	transform: translateY(40px) scale(0.9);
}

.service-card.is-visible {
	animation: servicesCardPop 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}

@keyframes servicesCardPop {
	0% {
		opacity: 0;
		transform: translateY(40px) scale(0.9);
	}
	65% {
		opacity: 1;
		transform: translateY(-10px) scale(1.03);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.service-card.is-visible:hover,
.service-card.is-visible:focus-within {
	transform: translateY(-10px);
	box-shadow: 0 24px 48px rgba(105, 54, 216, 0.22);
}

/* stagger cards across each row so a row pops up left-to-right rather than as one flat block */
.services-grid .service-card:nth-child(2) { animation-delay: 0.1s; }
.services-grid .service-card:nth-child(3) { animation-delay: 0.2s; }
.services-grid .service-card:nth-child(5) { animation-delay: 0.1s; }
.services-grid .service-card:nth-child(6) { animation-delay: 0.2s; }

.service-icon {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background-color: var(--color-lavender-100);
	color: var(--color-blueviolet-100);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	opacity: 0;
	transform: scale(0.5) rotate(-15deg);
	transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s, opacity 0.45s ease 0.12s, background-color 0.25s ease;
}

.service-icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.service-card.is-visible .service-icon {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.service-card.is-visible:hover .service-icon {
	transform: scale(1.1) rotate(-6deg);
	background-color: var(--color-blueviolet-100);
	color: var(--color-white);
}

.service-card h3 {
	font-size: var(--font-size-5xl);
	font-weight: 600;
	margin-bottom: 0.625rem;
}

.service-card p {
	font-size: var(--font-size-base);
	color: var(--color-gray-100);
	line-height: 1.6;
	margin: 0;
	flex-grow: 1;
}

.service-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.5rem;
	width: fit-content;
	font-family: var(--font-poppins);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-blueviolet-100);
	text-decoration: none;
	opacity: 0;
	transform: translateY(10px) scale(0.92);
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.24s, opacity 0.45s ease 0.24s, text-shadow 0.25s ease;
}

.service-card.is-visible .service-cta {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* soft glow on hover */
.service-card.is-visible:hover .service-cta,
.service-cta:focus-visible {
	text-shadow: 0 0 14px rgba(105, 54, 216, 0.4);
}

/* gradient-sweep underline on hover */
.service-cta::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--color-blueviolet-100), #a480f2);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.service-card.is-visible:hover .service-cta::after,
.service-cta:focus-visible::after {
	transform: scaleX(1);
}

.service-cta svg {
	width: 1rem;
	height: 1rem;
	transition: transform 0.25s ease;
}

.service-card.is-visible:hover .service-cta svg,
.service-cta:focus-visible svg {
	transform: translateX(4px);
}

.service-cta:focus-visible {
	outline: 2px solid var(--color-blueviolet-100);
	outline-offset: 3px;
	border-radius: var(--br-8xs);
}

/* Featured card */

.service-card--featured {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 2.5rem;
	align-items: center;
	padding: 3rem;
	background: linear-gradient(135deg, var(--color-blueviolet-100), #5028a8);
	background-image:
		radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
		linear-gradient(135deg, var(--color-blueviolet-100), #5028a8);
	border: none;
	color: var(--color-white);
}

.service-card--featured .service-icon {
	background-color: rgba(255, 255, 255, 0.18);
	color: var(--color-white);
}

.service-card--featured.is-visible:hover .service-icon {
	background-color: var(--color-white);
	color: var(--color-blueviolet-100);
}

.service-card--featured h3 {
	color: var(--color-white);
	font-size: 2rem;
}

.service-card--featured p {
	color: var(--color-lavender-100);
}

.service-card--featured .featured-lede {
	font-family: var(--font-poppins);
	font-weight: 600;
	color: var(--color-white);
	margin-bottom: 0.5rem;
}

.service-card--featured .cta-row {
	justify-content: flex-start;
	margin-top: 1.75rem;
	opacity: 0;
	transform: translateY(10px) scale(0.94);
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.26s, opacity 0.5s ease 0.26s;
}

.service-card--featured.is-visible .cta-row {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.service-card--featured .btn-primary {
	background-color: var(--color-white);
	color: var(--color-blueviolet-100);
}

.service-card--featured .btn-outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--color-white);
}

.service-card--featured .btn:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 3px;
}

/* Soft glow + gradient sweep on hover for the real (filled/outlined) CTA
   buttons in the hero and the featured card. Kept scoped to this page so
   the rest of the site's buttons are unaffected. */

.services-hero .btn,
.service-card--featured .btn {
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: 220% 100%;
	background-position: 150% 0;
	transition: background-position 0.6s ease, transform 0.25s ease, box-shadow 0.3s ease, opacity 0.15s ease;
}

.services-hero .btn-primary,
.service-card--featured .btn-primary {
	background-image: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.5) 45%, transparent 60%);
}

.services-hero .btn-outline {
	background-image: linear-gradient(120deg, transparent 0%, rgba(105, 54, 216, 0.16) 45%, transparent 60%);
}

.service-card--featured .btn-outline {
	background-image: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.22) 45%, transparent 60%);
}

.services-hero .btn:hover,
.services-hero .btn:focus-visible,
.service-card--featured .btn:hover,
.service-card--featured .btn:focus-visible {
	background-position: -30% 0;
	transform: translateY(-3px) scale(1.03);
}

.services-hero .btn-primary:hover,
.services-hero .btn-primary:focus-visible,
.service-card--featured .btn-primary:hover,
.service-card--featured .btn-primary:focus-visible {
	box-shadow: 0 14px 30px rgba(105, 54, 216, 0.4);
}

.services-hero .btn-outline:hover,
.services-hero .btn-outline:focus-visible {
	box-shadow: 0 10px 24px rgba(105, 54, 216, 0.18);
}

.service-card--featured .btn-outline:hover,
.service-card--featured .btn-outline:focus-visible {
	box-shadow: 0 10px 24px rgba(255, 255, 255, 0.2);
}

.service-checklist {
	list-style: none;
	margin: 0;
	padding: 1.75rem;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--br-mini);
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.service-checklist {
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}

.service-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: var(--font-size-base);
	color: var(--color-white);
	line-height: 1.5;
}

.service-checklist svg {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	color: #7ee08a;
}

/* Responsive: 3 / 2 / 1 columns */

@media (max-width: 1024px) {
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.services-hero .container {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.services-hero .cta-row {
		justify-content: center;
	}

	.services-hero-illustration {
		max-width: 26rem;
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.service-card--featured {
		grid-template-columns: 1fr;
		padding: 2rem;
	}

	.service-card--featured .cta-row {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 640px) {
	.services-grid {
		grid-template-columns: 1fr;
	}

	.services-grid .service-card:nth-child(n) {
		transition-delay: 0s;
	}
}

/* Respect reduced-motion preference */

@media (prefers-reduced-motion: reduce) {
	.services-hero .eyebrow,
	.services-hero h1,
	.services-hero .subhead,
	.services-hero .cta-row,
	.services-hero-illustration,
	.service-card,
	.service-icon,
	.service-cta,
	.service-cta::after,
	.service-card--featured .cta-row,
	.services-hero .btn,
	.service-card--featured .btn {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}