/**
 * onmethod-2027 — wow-services.css: the offer ladder, 1000x.
 *
 * Dark cinematic hero with the ladder graphic, ascending price rungs,
 * and a spotlight audit card. Copy untouched — CSS only.
 * Respects prefers-reduced-motion and html.wow-off.
 */

/* ============ 1. Dark hero ============ */

.is-services .services-hero {
	position: relative;
	overflow: hidden;
	background: #0a0a0c;
	color: #f4f4f2;
	border-bottom: 0;
}

.services-hero__bg {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(10, 10, 12, 0.5), rgba(10, 10, 12, 0.94) 85%),
		url("../img/services-ladder.jpg") center 25% / cover no-repeat,
		#0a0a0c;
	pointer-events: none;
}

@supports (animation-timeline: view()) {
	.services-hero__bg {
		animation: services-hero-drift linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}
	@keyframes services-hero-drift {
		from { transform: scale(1.1) translateY(-3%); }
		to { transform: scale(1.04) translateY(2%); }
	}
}

.is-services .services-hero .wrap { position: relative; z-index: 1; }

.is-services .services-hero .kicker { color: var(--volt); }

.is-services .services-hero h1 {
	font-size: clamp(2.4rem, 7vw, 4.6rem);
	letter-spacing: -0.025em;
	line-height: 1.04;
	text-wrap: balance;
	max-width: 18ch;
}

.is-services .services-hero .lede { color: rgba(244, 244, 242, 0.72); }

.is-services .services-hero .btn-secondary {
	color: #f4f4f2;
	border-color: rgba(244, 244, 242, 0.35);
}

/* ============ 2. Ascending rungs — the ladder climbs ============ */

@media (min-width: 900px) {
	.is-services .grid-3 {
		align-items: start;
		padding-bottom: 2.5rem;
	}
	/* Each rung sits higher than the last: the ladder climbs. */
	.is-services .grid-3 .card:nth-child(1) { transform: translateY(3.2rem); }
	.is-services .grid-3 .card:nth-child(2) { transform: translateY(1.6rem); }
	.is-services .grid-3 .card:nth-child(3) { transform: none; }
	.is-services .grid-3 .card { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease; }
	.is-services .grid-3 .card:nth-child(1):hover { transform: translateY(3.2rem) translateY(-8px); }
	.is-services .grid-3 .card:nth-child(2):hover { transform: translateY(1.6rem) translateY(-8px); }
	.is-services .grid-3 .card:nth-child(3):hover { transform: translateY(-8px); }
}

/* Rung numerals: oversized, volt, race-pit. */
.is-services .grid-3 .step-num {
	font-size: clamp(2.6rem, 5vw, 3.6rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--volt);
	display: block;
	line-height: 1;
	margin-bottom: 0.6rem;
}

.is-services .grid-3 .card {
	position: relative;
	overflow: hidden;
}

.is-services .grid-3 .card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--volt), transparent 70%);
	opacity: 0.85;
}

/* ============ 3. Audit spotlight card ============ */

.is-services .section:first-of-type .card {
	background:
		radial-gradient(700px 320px at 50% -10%, rgba(217, 255, 0, 0.09), transparent 60%),
		#101014;
	color: #f4f4f2;
	border: 1px solid rgba(217, 255, 0, 0.22);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.is-services .section:first-of-type .card .price { color: var(--volt); }

.is-services .section:first-of-type .card .meta,
.is-services .section:first-of-type .card .checklist li { color: rgba(244, 244, 242, 0.78); }

.is-services .section:first-of-type .card .checklist li::marker { color: var(--volt); }


/* Breathing volt glow — the hero stays alive. */
.services-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(700px 340px at 50% 108%, rgba(217, 255, 0, 0.09), transparent 62%);
	animation: hero-breathe 7s ease-in-out infinite;
}

@keyframes hero-breathe {
	50% { opacity: 0.35; }
}

/* ============ 3b. SI agents band — the dark persuasion pattern ============ */

.agents-band {
	background:
		radial-gradient(900px 420px at 50% 0%, rgba(217, 255, 0, 0.05), transparent 60%),
		#0a0a0c;
	color: #f4f4f2;
}

.agents-band .kicker { color: var(--volt); }

.agents-band h2 { color: #f4f4f2; }

.agents-band .lede { color: rgba(244, 244, 242, 0.72); }

.agents-band .card {
	background: #131316;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-top: 3px solid var(--volt);
	color: #f4f4f2;
}

.agents-band .card h3 { color: #f4f4f2; }

.agents-band .card p { color: rgba(244, 244, 242, 0.66); }

.agents-band > .wrap > p:last-of-type { color: rgba(244, 244, 242, 0.72); }

/* ============ 4. Kill switch ============ */

html.wow-off .services-hero__bg { animation: none; }
html.wow-off .services-hero::after { animation: none; }
html.wow-off .is-services .grid-3 .card,
html.wow-off .is-services .grid-3 .card:hover { transform: none; }