/**
 * about.css — About page styles + its exclusive partials.
 *
 * Loaded by src/about.njk via its `styles:` frontmatter array.
 *
 * Three sections, each exclusively used by the About page:
 *   1. PROCESS PARTIAL  — `src/_includes/partials/process.njk` (four-phase
 *                          engagement methodology)
 *   2. ABOUT PAGE       — about-specific narrative + section styling
 *   3. TECH ERAS PARTIAL — `src/_includes/partials/tech-eras.njk`
 *                          (12-year stack-evolution timeline)
 *
 * Extracted from src/assets/css/app.css as part of #147 PR 2 — CSS
 * file split: static pages. File-size cap rationale: 523 lines (1.05×
 * the 500-line cap, 5% over). The three sections are all About-page-
 * scoped and tightly coupled to the page's narrative flow; sub-splitting
 * would fragment without functional benefit. Accept the documented
 * exception per docs/engineering-standards.md § file-size cap. Content
 * byte-for-byte preserved.
 */

/* ─────────────────────────────────────────────────────────────────────
	PROCESS PARTIAL
	─────────────────────────────────────────────────────────────────────
	Four-phase engagement methodology partial. Markup in
	`src/_includes/partials/process.njk`. Consumed on `/services/`
	between the services-list section and the stats-band partial.

	Layout: two-column grid per phase (mono-style oversized cyan
	number on the left + body content on the right). The kit ref
	had a three-column grid (number + weeks + body) but we dropped
	the weeks column because INNOV8 engagements have no fixed
	timeline. Mobile collapses to a single column.

	Subtle vertical cyan gradient (top → bottom) gives the section
	a faint backdrop that distinguishes it from the flat-ink
	services-list above without competing with the stats-band
	below. Step-row borders are hairline-subtle so the four phases
	read as a single rhythm rather than separate boxes.

	Class prefix: `innov8-proc-`.
	───────────────────────────────────────────────────────────────────── */

@layer components {
	.innov8-proc {
		position: relative;
		padding: clamp(72px, 9vw, 112px) 0;
		background:
			linear-gradient(180deg, transparent 0%, rgba(95, 236, 253, 0.035) 50%, transparent 100%), var(--color-ink-1000);
	}

	/* Header — eyebrow + h2 + side-rail mono label. The label sits
	   to the right of the h2 on desktop; stacks below on mobile. */
	.innov8-proc-header {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: clamp(20px, 3vw, 40px);
		align-items: flex-end;
		margin-bottom: clamp(40px, 5vw, 64px);
	}

	.innov8-proc-eyebrow {
		grid-column: 1 / -1;
		margin-bottom: clamp(14px, 1.6vw, 20px);
	}

	.innov8-proc-title {
		margin: 0;
		max-width: 22ch;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(30px, 3.6vw, 48px);
		line-height: var(--leading-tight);
		letter-spacing: 0.005em;
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.innov8-proc-meta {
		font-family: var(--font-mono);
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--fg-tertiary);
		padding-bottom: 6px;
	}

	@media (max-width: 720px) {
		.innov8-proc-header {
			grid-template-columns: 1fr;
		}

		.innov8-proc-meta {
			padding-bottom: 0;
		}
	}

	/* Ordered list of four phases. List-style stripped so the
		numbering is purely the oversized `.innov8-proc-step-number`
		chip; the <ol> semantics carry the step order for assistive
		tech. */
	.innov8-proc-steps {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		gap: 0;
	}

	.innov8-proc-step {
		display: grid;
		grid-template-columns: 120px 1fr;
		gap: clamp(20px, 3vw, 40px);
		padding: clamp(24px, 3vw, 36px) 0;
		border-top: 1px solid var(--border-subtle);
		align-items: flex-start;
	}

	.innov8-proc-step:last-child {
		border-bottom: 1px solid var(--border-subtle);
	}

	.innov8-proc-step-number {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(36px, 4vw, 56px);
		line-height: 1;
		letter-spacing: 0.01em;
		color: rgba(95, 236, 253, 0.5);
		font-variant-numeric: tabular-nums;
	}

	.innov8-proc-step-body {
		max-width: 640px;
	}

	.innov8-proc-step-title {
		margin: 8px 0 10px;
		font-family: var(--font-display);
		font-weight: 600;
		font-size: clamp(20px, 2.2vw, 24px);
		letter-spacing: 0.015em;
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.innov8-proc-step-copy {
		margin: 0;
		font-family: var(--font-sans);
		font-size: var(--text-body);
		line-height: var(--leading-base);
		color: var(--color-ink-200);
		text-wrap: pretty;
	}

	@media (max-width: 720px) {
		.innov8-proc-step {
			grid-template-columns: 80px 1fr;
			gap: 16px;
		}

		.innov8-proc-step-number {
			font-size: 36px;
		}
	}
}

/* ─────────────────────────────────────────────────────────────────────
	ABOUT PAGE
	─────────────────────────────────────────────────────────────────────
	The /about/ long-form page. Markup in `src/about.njk`. Eight
	stacked sections — page-header partial, then four prose sections
	interleaved with three partial-includes (stats-band,
	client-marquee, cta-banner) for visual rhythm.

	Class prefix: `innov8-about-`.

	Two alternating background tones (default ink-1000 and ink-950
	via the `-alt` modifier) provide section-level break cues
	without requiring rule lines or padding tricks. Reading rhythm
	matters more than visual showmanship on a content-heavy page;
	the typography handles the lift.

	The hero header CSS that used to live here was consolidated
	into the `.innov8-page-header-*` block above (single set of
	rules now serves about / services / recs / contact).
	───────────────────────────────────────────────────────────────────── */

@layer components {
	.innov8-about {
		position: relative;
		color: var(--fg-primary);
	}

	/* Hero header CSS lives in the PAGE HEADER PARTIAL block in shared.css
		— `.innov8-page-header-*` rules serve about / services / recs /
		contact uniformly. Adopt via the macro in
		`src/_includes/partials/page-header.njk`. */

	/* ─── Prose section frame ───────────────────────────────────────── */
	/* Section padding deliberately tighter than the embedded partials
		(stats-band, client-marquee, cta-banner) so the stacked padding
		doesn't create cavernous gaps between sections + partials. The
		alternating ink-1000/ink-950 background tones do enough visual
		work on their own without big buffer zones. */
	.innov8-about-section {
		padding: clamp(48px, 6vw, 80px) 0;
		background: var(--color-ink-1000);
	}

	.innov8-about-section-alt {
		background: var(--color-ink-950);
		border-top: 1px solid var(--border-subtle);
		border-bottom: 1px solid var(--border-subtle);
	}

	.innov8-about-section-eyebrow {
		margin-bottom: 18px;
	}

	.innov8-about-section-title {
		margin: 0 0 clamp(32px, 4vw, 48px);
		max-width: 22ch;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(30px, 3.6vw, 48px);
		line-height: 1.1;
		letter-spacing: var(--tracking-snug);
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

	/* ─── Prose body ────────────────────────────────────────────────── */
	/* Constrained measure (~72ch) keeps body text readable; the
		container's max-width is the page-level constraint, this is
		the typographic one. */
	.innov8-about-prose {
		max-width: none; /* container already caps at 1240px */
	}

	.innov8-about-prose p {
		max-width: 72ch;
		margin: 0;
		font-family: var(--font-sans);
		font-size: var(--text-body-lg);
		line-height: var(--leading-loose);
		color: var(--fg-secondary);
		text-wrap: pretty;
	}

	.innov8-about-prose p + p {
		margin-top: 1.25em;
	}

	.innov8-about-prose strong {
		color: var(--fg-primary);
		font-weight: 600;
	}

	.innov8-about-prose em {
		font-style: italic;
		color: var(--accent-spark);
	}

	.innov8-about-prose a:not(.heading-anchor) {
		color: var(--accent-spark);
		text-decoration: underline;
		text-decoration-color: rgba(95, 236, 253, 0.4);
		text-underline-offset: 3px;
		transition: text-decoration-color var(--duration-base) var(--ease-out);
	}

	.innov8-about-prose a:not(.heading-anchor):hover,
	.innov8-about-prose a:not(.heading-anchor):focus-visible {
		text-decoration-color: var(--accent-spark);
		outline: none;
	}

	/* ─── Pull quote — Mike's voice in the origin section ───────────── */
	.innov8-about-quote {
		position: relative;
		margin: 0 0 clamp(28px, 3.2vw, 40px);
		padding: clamp(28px, 3.6vw, 40px) clamp(28px, 3.6vw, 44px) clamp(24px, 3vw, 32px);
		max-width: 72ch;
		background: rgba(95, 236, 253, 0.04);
		border-left: 3px solid var(--accent-spark);
		border-radius: 0 var(--radius-md) var(--radius-md) 0;
	}

	.innov8-about-quote p {
		margin: 0;
		max-width: none;
		font-family: var(--font-display);
		font-weight: 500;
		font-size: clamp(20px, 2.4vw, 26px);
		line-height: 1.4;
		letter-spacing: 0.005em;
		color: var(--fg-primary);
		text-wrap: balance;
	}

	.innov8-about-quote-attribution {
		display: block;
		margin-top: 18px;
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--accent-spark);
	}

	/* ─── Legal footnote (DBA line at end of "Currently" section) ───── */
	.innov8-about-legal {
		margin-top: clamp(24px, 3vw, 36px) !important;
		font-size: var(--text-body-sm) !important;
		color: var(--fg-muted) !important;
		font-style: italic;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
	TECH ERAS PARTIAL
	Companion CSS for src/_includes/partials/tech-eras.njk — the four-column
	era-timeline credibility band on /about/. Each era column tone-codes
	to the brand palette (cyan / blue / amber / volt) via a
	.innov8-te-col--{tone} modifier that maps tone-specific values onto
	custom properties the inner elements (dot, range label, gradient
	rail backdrop) consume.

	Two breakpoints:
		- <=820px: 4-col → 2-col, rail hidden (the connector no longer
			makes sense when columns stack)
		- <=480px: 2-col → 1-col

	Class prefix: `innov8-te-`.
	═════════════════════════════════════════════════════════════════════════ */

@layer components {
	.innov8-te {
		position: relative;
		padding: clamp(72px, 9vw, 112px) 0;
		background: linear-gradient(180deg, transparent, rgba(31, 86, 245, 0.04), transparent);
	}

	/* Header — eyebrow + h2 + lead, stacked vertically */
	.innov8-te-header {
		margin-bottom: clamp(48px, 6vw, 64px);
		max-width: 760px;
	}

	.innov8-te-eyebrow {
		margin-bottom: clamp(14px, 1.6vw, 20px);
	}

	.innov8-te-title {
		margin: 0 0 clamp(16px, 1.8vw, 24px);
		font-family: var(--font-display);
		font-weight: 800;
		font-size: clamp(36px, 5.2vw, 76px);
		line-height: 1.02;
		letter-spacing: 0.005em;
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.innov8-te-title-grad {
		background: linear-gradient(
			110deg,
			var(--color-cyan-300) 0%,
			var(--color-blue-400) 35%,
			var(--color-amber-400) 70%,
			var(--color-volt-400) 100%
		);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}

	.innov8-te-lead {
		margin: 0;
		font-family: var(--font-sans);
		font-size: var(--text-body);
		line-height: var(--leading-base);
		color: var(--color-ink-200);
		max-width: 480px;
		text-wrap: pretty;
	}

	/* Timeline wrap — relative anchor for the rail */
	.innov8-te-wrap {
		position: relative;
		padding-top: 8px;
	}

	/* Horizontal gradient rail beneath the dots. Hidden on narrow
		viewports — the columns stack and the rail no longer reads
		as a chronological connector. */
	.innov8-te-rail {
		position: absolute;
		top: 18px;
		left: 8px;
		right: 8px;
		height: 1px;
		background: linear-gradient(
			90deg,
			rgba(95, 236, 253, 0.45) 0%,
			rgba(93, 126, 255, 0.45) 33%,
			rgba(245, 158, 11, 0.45) 66%,
			rgba(204, 255, 0, 0.45) 100%
		);
		opacity: 0.55;
	}

	/* 4-col grid → collapses below */
	.innov8-te-grid {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: clamp(20px, 2.4vw, 32px);
		position: relative;
	}

	@media (max-width: 820px) {
		.innov8-te-grid {
			grid-template-columns: repeat(2, 1fr);
			gap: 32px 24px;
		}

		.innov8-te-rail {
			display: none;
		}
	}

	@media (max-width: 480px) {
		.innov8-te-grid {
			grid-template-columns: 1fr;
		}
	}

	/* Era column — relative positioning so the dot sits on the rail.
		3px top padding nudges the dot's vertical center into alignment
		with the gradient rail at top:18px (dot is 14px tall — center
		was landing 3px above the rail without the offset). */
	.innov8-te-col {
		position: relative;
		padding-top: 3px;
		--te-fg: var(--color-cyan-300);
		--te-glow: rgba(95, 236, 253, 0.55);
		--te-halo: rgba(95, 236, 253, 0.1);
	}

	.innov8-te-col--cyan {
		--te-fg: var(--color-cyan-300);
		--te-glow: rgba(95, 236, 253, 0.55);
		--te-halo: rgba(95, 236, 253, 0.1);
	}

	.innov8-te-col--blue {
		--te-fg: var(--color-blue-300);
		--te-glow: rgba(93, 126, 255, 0.55);
		--te-halo: rgba(93, 126, 255, 0.1);
	}

	.innov8-te-col--amber {
		--te-fg: var(--color-amber-300);
		--te-glow: rgba(245, 158, 11, 0.55);
		--te-halo: rgba(245, 158, 11, 0.1);
	}

	.innov8-te-col--volt {
		--te-fg: var(--color-volt-400);
		--te-glow: rgba(204, 255, 0, 0.5);
		--te-halo: rgba(204, 255, 0, 0.1);
	}

	.innov8-te-dot {
		width: 14px;
		height: 14px;
		border-radius: var(--radius-pill);
		background: var(--te-fg);
		box-shadow:
			0 0 0 4px var(--te-halo),
			0 0 14px var(--te-glow);
		margin-bottom: 22px;
		position: relative;
		z-index: 1;
	}

	.innov8-te-col-title {
		margin: 0 0 6px;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(17px, 1.6vw, 19px);
		line-height: var(--leading-tight);
		letter-spacing: 0.015em;
		color: var(--fg-primary);
		text-transform: uppercase;
	}

	.innov8-te-col-subtitle {
		margin: 0 0 10px;
		font-family: var(--font-sans);
		font-size: 12px;
		line-height: var(--leading-snug);
		color: var(--fg-tertiary);
		text-wrap: pretty;
	}

	.innov8-te-col-range {
		margin: 0 0 14px;
		font-family: var(--font-mono);
		font-size: 11.5px;
		font-weight: 500;
		letter-spacing: 0.08em;
		color: var(--te-fg);
	}

	.innov8-te-col-stack {
		margin: 0 0 10px;
		font-family: var(--font-mono);
		font-size: 12px;
		line-height: var(--leading-base);
		color: var(--fg-tertiary);
	}

	.innov8-te-col-note {
		margin: 0;
		font-family: var(--font-sans);
		font-size: 13px;
		line-height: var(--leading-base);
		color: var(--color-ink-200);
		max-width: 240px;
		text-wrap: pretty;
	}
}