/* ==========================================================================
   LUNA LABS - Page Sections
   Home, What & Why, Crew, and Footer sections
   ========================================================================== */

/* ==========================================================================
   1. HOME SECTION
   Full-width hero section with flex layout
   ========================================================================== */
.section-home {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 0;
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Home Layout
   - Flexbox container for text + SVG as a centered unit
   - Gap scales proportionally with viewport width
   ----------------------------------------------------------------------------- */
.home-layout {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
	gap: clamp(2rem, 5vw, 6rem);
}

/* -----------------------------------------------------------------------------
   Blueprint Moon SVG
   - Flex item that sits beside content
   - Scales with viewport
   ----------------------------------------------------------------------------- */
.moon-bg {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: auto;
	height: clamp(400px, 70vh, 800px);
	aspect-ratio: 1;
	pointer-events: none;
	/* Uses theme text color for strokes */
	color: var(--text);
	/* Start hidden - animated in by JS to prevent flash on navigation */
	opacity: 0;
	/* CSS fallback animation if JS is slow/disabled */
	animation: moon-fade-in 1s ease-out 0.3s forwards;
}

@keyframes moon-fade-in {
	to {
		opacity: 0.4;
	}
}

.moon-bg svg {
	width: 100%;
	height: 100%;
}

/* Dark mode: reset filter, use standard rendering */
[data-theme="dark"] .moon-bg {
	color: var(--text);
	filter: none;
}

@keyframes moon-fade-in-dark {
	to {
		opacity: 0.6;
	}
}

[data-theme="dark"] .moon-bg {
	animation-name: moon-fade-in-dark;
}

/* -----------------------------------------------------------------------------
   Home Content
   - Left-aligned typography
   - Staggered animation on load
   ----------------------------------------------------------------------------- */
.home-content {
	opacity: 0;
	max-width: 600px;
	flex-shrink: 1;
}

.brand-large {
	font-size: 8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--text);
	margin: 0 0 1rem 0;
	line-height: 0.9;
	/* Slightly increased from 0.85 to prevent descender clipping */
}

.tagline-large {
	font-size: 2rem;
	font-weight: 400;
	color: var(--accent);
	margin-bottom: 0.75rem;
	line-height: 1.15;
}

.subtitle-caps {
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin-top: 1.5rem;
}

/* Company description - minimal context */
.home-description {
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--text-muted);
	line-height: 1.5;
	max-width: 500px;
	margin-top: 1.75rem;
}

/* ==========================================================================
   2. WHAT & WHY SECTION
   Blueprint-style explanation of services and mission
   ========================================================================== */
.section-what-why {
	padding: 4rem 0;
}

/* Rocket Blueprint Background - Floats across What/Why and Crew sections

   Positioning & Scaling: JavaScript calculates:
   - Exact gap center between what-why-headers and what-why-content
   - Width based on gap size (scales responsively)
   See initRocketPosition() in script.js
*/
.rocket-bg {
	position: absolute;
	top: 110vh;
	/* Start after home section, pushed down */
	left: 33%;
	/* Fallback before JS runs */
	transform: translateX(-50%);
	height: 100vh;
	/* Fallback before JS runs */
	width: auto;
	/* Maintain aspect ratio */
	pointer-events: none;
	z-index: 0;
	opacity: 0.1;
	transition: opacity 0.3s ease;
}

/* -----------------------------------------------------------------------------
   What & Why Layout
   - CSS Grid for proper row alignment between headers and content
   - Each header aligns horizontally with its corresponding content
   ----------------------------------------------------------------------------- */
.what-why-layout {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto minmax(auto, 700px);
	grid-template-rows: auto auto auto;
	column-gap: clamp(3rem, 8vw, 8rem);
	/* row-gap: 1rem; */
	align-items: start;
	justify-content: center;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* -----------------------------------------------------------------------------
   Left Column: Large Section Headers
   - display: contents flattens children into grid
   ----------------------------------------------------------------------------- */
.what-why-headers {
	display: contents;
}

/* Place header blocks in correct grid rows */
.what-why-headers .header-block:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}

.what-why-headers .header-block:nth-child(2) {
	grid-column: 1;
	grid-row: 2;
}

/* CTA button in row 3, left column */
.what-why-headers .cta-button {
	grid-column: 1;
	grid-row: 3;
	align-self: center;
}

.header-block {
	position: relative;
}


.header-label {
	display: block;
	font-family: monospace;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.15em;
	margin-bottom: 0.5rem;
	opacity: 0.6;
}

.section-header-large {
	font-size: clamp(4rem, 10vw, 7rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--text);
	line-height: 0.85;
	margin: 0;
	/* Text stroke with Firefox fallback using text-shadow */
	-webkit-text-stroke: 1px var(--text);
	paint-order: stroke fill;
}

/* Firefox fallback - no webkit-text-stroke support */
@supports not (-webkit-text-stroke: 1px black) {
	.section-header-large {
		text-shadow:
			1px 1px 0 var(--text),
			-1px -1px 0 var(--text),
			1px -1px 0 var(--text),
			-1px 1px 0 var(--text);
	}
}

/* Hollow text effect - second header */
.header-block:nth-child(2) .section-header-large {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--text);
}

/* Firefox fallback for hollow text */
@supports not (-webkit-text-stroke: 1px black) {
	.header-block:nth-child(2) .section-header-large {
		color: var(--background);
		text-shadow:
			2px 2px 0 var(--text),
			-2px -2px 0 var(--text),
			2px -2px 0 var(--text),
			-2px 2px 0 var(--text),
			0 2px 0 var(--text),
			0 -2px 0 var(--text),
			2px 0 0 var(--text),
			-2px 0 0 var(--text);
	}
}

[data-theme="dark"] .header-block:nth-child(2) .section-header-large {
	-webkit-text-stroke: 1px var(--text);
	opacity: 0.7;
}

/* -----------------------------------------------------------------------------
   Right Column: Content Blocks
   - display: contents flattens children into grid
   ----------------------------------------------------------------------------- */
.what-why-content {
	display: contents;
}

/* Place content blocks in correct grid rows */
.what-why-content .content-block:nth-child(1) {
	grid-column: 2;
	grid-row: 1;
	/* Align with header-label offset */
	padding-top: calc(0.75rem + 0.5rem);
}

.what-why-content .content-block:nth-child(2) {
	grid-column: 2;
	grid-row: 2;
	/* Align with header-label offset */
	padding-top: calc(0.75rem + 0.5rem);
}

/* Stats row in row 3, right column */
.what-why-content .stats-row {
	grid-column: 2;
	grid-row: 3;
	align-self: center;
}

.content-block {
	position: relative;
}

.content-lead {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 500;
	color: var(--text);
	line-height: 1.2;
	margin: 0 0 0.875rem 0;
}

.content-body {
	font-size: 1rem;
	font-weight: 400;
	color: var(--text-muted);
	line-height: 1.55;
	margin: 0 0 1.25rem 0;
	max-width: 580px;
}

/* -----------------------------------------------------------------------------
   Content List (Services)
   ----------------------------------------------------------------------------- */
.content-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.content-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.9375rem;
	color: var(--text-muted);
	font-weight: 400;
}

.list-marker {
	color: var(--accent);
	font-weight: 500;
	font-size: 0.875rem;
	opacity: 0.8;
}

/* -----------------------------------------------------------------------------
   Stats Row
   ----------------------------------------------------------------------------- */
.stats-row {
	display: flex;
	gap: clamp(2rem, 5vw, 4rem);
	margin-top: 0.5rem;
}

.stat-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.stat-number {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 600;
	color: var(--accent);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

/* Stats count-up animation states */
.stat-number[data-count-target] {
	transition: color 0.3s ease;
}

.stat-number.counting {
	color: var(--text);
}

.stat-label {
	font-family: monospace;
	font-size: 0.625rem;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* -----------------------------------------------------------------------------
   CTA Button
   ----------------------------------------------------------------------------- */
.cta-button {
	position: relative;
	display: inline-block;
	width: fit-content;
	padding: 1rem 2rem;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	text-decoration: none;
	text-align: left;
	border: 1px solid var(--text-muted);
	background: transparent;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Email tooltip on hover - only for contact buttons with data-email */
.cta-button[data-email]::after {
	content: attr(data-email);
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(0.5rem);
	padding: 0.25rem 0.5rem;
	font-family: monospace;
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--text-muted);
	background: var(--background);
	border: 1px solid var(--text-muted);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.cta-button[data-email]:hover::after {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0.75rem);
}

.cta-button:hover {
	background: var(--text);
	color: var(--background);
	border-color: var(--text);
}

.cta-button:active {
	background: var(--accent);
	color: var(--background);
	border-color: var(--accent);
}

.cta-button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Secondary CTA Button */
.cta-button-secondary {
	margin-top: 1rem;
	border-style: dashed;
	opacity: 0.7;
	transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cta-button-secondary:hover {
	opacity: 1;
	border-style: solid;
}

/* Grid placement for the secondary CTA */
.what-why-headers .cta-button-secondary {
	grid-column: 1;
	grid-row: 4;
	align-self: start;
}

/* -----------------------------------------------------------------------------
   Nav Link Prominent - "How We Think" style link
   ----------------------------------------------------------------------------- */
.nav-link-prominent {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding: 1rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--background);
	background: var(--text);
	text-decoration: none;
	letter-spacing: 0.02em;
	border: 2px solid var(--text);
	transition: transform 0.3s ease, gap 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.nav-link-prominent:hover {
	background: transparent;
	color: var(--text);
	transform: translateX(4px);
}

.nav-link-prominent:hover .nav-arrow {
	transform: translateX(4px);
}

.nav-arrow {
	font-size: 1.125rem;
	font-weight: 400;
	transition: transform 0.2s ease;
}

/* Grid placement for nav-link-prominent - in right column, aligned right */
.what-why-content .nav-link-prominent {
	grid-column: 2;
	grid-row: 4;
	justify-self: end;
	align-self: start;
	margin-top: 1rem;
	margin-right: 2rem;
}

/* Think CTA - How We Think link with horizontal line */
.think-cta {
	grid-column: 2;
	grid-row: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1rem;
	margin-top: 2rem;
	margin-right: 2rem;
}

.think-cta-line {
	width: 100%;
	max-width: 300px;
	height: 1px;
	border: none;
	background: var(--text-muted);
	margin: 0;
	opacity: 0.5;
}

.think-cta-lead {
	font-size: 0.9375rem;
	color: var(--text-muted);
	margin: 0;
	font-style: italic;
	text-align: right;
}

.think-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1.25rem;
	background: var(--text);
	color: var(--background);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	border: 2px solid var(--text);
	transition: transform 0.3s ease, gap 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.think-cta-link:hover {
	background: transparent;
	color: var(--text);
	transform: translateX(4px);
	gap: 1rem;
}

.think-cta-arrow {
	font-size: 1.125rem;
	transition: transform 0.3s ease;
}

.think-cta-link:hover .think-cta-arrow {
	transform: translateX(4px);
}

/* ==========================================================================
   3. CREW SECTION
   Team members with photos and bios
   ========================================================================== */
.section-crew {
	overflow: hidden;
	padding: 6rem 0;
	padding-top: 8rem;
}

/* -----------------------------------------------------------------------------
   Crew Layout
   ----------------------------------------------------------------------------- */
.crew-layout {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 2rem;
}

.crew-header {
	margin-bottom: 2rem;
}

/* Solo crew member layout for single person showcase */
.crew-solo {
	width: 100%;
}

.crew-member-featured {
	display: flex;
	align-items: flex-start;
	gap: 3rem;
}

.member-photo-featured {
	flex-shrink: 0;
	width: 280px;
}

.member-photo-featured .photo-wrapper {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 4px;
	overflow: hidden;
}

.member-photo-featured .photo-original,
.member-photo-featured .photo-duotone {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.4s ease;
}

.member-photo-featured .photo-duotone {
	opacity: 0;
}

.member-photo-featured .photo-original {
	opacity: 1;
}

.member-photo-featured .photo-wrapper:hover .photo-original {
	opacity: 0;
}

.member-photo-featured .photo-wrapper:hover .photo-duotone {
	opacity: 1;
}

.member-info-featured {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-top: 0.5rem;
}

.member-info-featured .member-label {
	display: block;
	font-family: monospace;
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--accent);
	letter-spacing: 0.15em;
	margin-bottom: 0.75rem;
	opacity: 0.9;
}

.member-info-featured .member-name {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--text);
	line-height: 1;
	margin: 0 0 1rem 0;
}

.member-info-featured .member-bio {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0;
	max-width: 520px;
}

/* Legacy grid styles for reference (kept for compatibility) */
.crew-members {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}

/* -----------------------------------------------------------------------------
   Crew Member Card
   ----------------------------------------------------------------------------- */
.crew-member {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Alternate layout - no longer needed in grid, keep for compatibility */
.crew-member-alt {
	flex-direction: column;
}

/* -----------------------------------------------------------------------------
   Member Info
   ----------------------------------------------------------------------------- */
.member-info {
	flex: 1;
	order: 2;
	display: flex;
	flex-direction: column;
}

.member-label {
	display: block;
	font-family: monospace;
	font-size: 0.625rem;
	font-weight: 500;
	color: var(--accent);
	letter-spacing: 0.15em;
	margin-bottom: 0.5rem;
	opacity: 0.9;
}

.member-name {
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--text);
	line-height: 1;
	margin: 0 0 0.5rem 0;
}

.member-name a {
	color: inherit;
	text-decoration: none;
	position: relative;
	transition: color 0.3s ease;
}

.member-name a::after {
	content: '';
	position: absolute;
	bottom: 0.05em;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--text);
	opacity: 0.3;
	transition: background 0.3s ease, opacity 0.3s ease;
}

.member-name a:hover {
	color: var(--accent);
}

.member-name a:hover::after {
	background: var(--accent);
	opacity: 1;
}

.member-bio {
	flex: 1;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--text-muted);
	line-height: 1.45;
	margin: 0 0 0.75rem 0;
}

.member-skills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.member-skills li {
	font-family: monospace;
	font-size: 0.5625rem;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.05em;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--text-muted);
	opacity: 0.6;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.member-skills li:hover {
	opacity: 1;
	border-color: var(--text);
}

/* Member CTA (Join button) */
.member-cta {
	display: inline-block;
	position: relative;
	margin-top: 1.5rem;
	padding: 0.75rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	text-decoration: none;
	border: 1px solid var(--text-muted);
	background: transparent;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.member-cta:hover {
	background: var(--text);
	color: var(--background);
	border-color: var(--text);
}

.member-cta::after {
	content: attr(data-email);
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(0.5rem);
	padding: 0.25rem 0.5rem;
	font-family: monospace;
	font-size: 0.625rem;
	color: var(--text-muted);
	background: var(--background);
	border: 1px solid var(--text-muted);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.member-cta:hover::after {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0.75rem);
}

/* -----------------------------------------------------------------------------
   Member Photo (Right Side)
   ----------------------------------------------------------------------------- */
.member-photo {
	flex-shrink: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	order: 1;
}

.photo-wrapper {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		box-shadow 0.4s ease;
}

.photo-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.4s ease;
}

/* Original photo - hidden by default, shown on hover */
.photo-original {
	opacity: 0;
	z-index: 1;
}

/* Duotone photo - visible by default */
.photo-duotone {
	opacity: 1;
	z-index: 2;
}

/* Hover effects */
.photo-wrapper:hover {
	transform: translateY(-12px) scale(1.02);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.photo-wrapper:hover .photo-original {
	opacity: 1;
}

.photo-wrapper:hover .photo-duotone {
	opacity: 0;
}

[data-theme="dark"] .photo-wrapper:hover {
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* -----------------------------------------------------------------------------
   Placeholder Avatar
   ----------------------------------------------------------------------------- */
.placeholder-avatar {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--background);
	border: 2px dashed var(--text-muted);
	transition: border-color 0.4s ease, background 0.4s ease;
}

.placeholder-icon {
	font-size: clamp(4rem, 10vw, 6rem);
	font-weight: 300;
	color: var(--text-muted);
	opacity: 0.4;
	transition: opacity 0.4s ease, color 0.4s ease;
}

.member-photo-placeholder .photo-wrapper:hover .placeholder-avatar {
	border-color: var(--accent);
	background: var(--text);
}

.member-photo-placeholder .photo-wrapper:hover .placeholder-icon {
	opacity: 1;
	color: var(--background);
}


/* Reach Out Button */
.btn-reach-out {
	position: relative;
	display: inline-block;
	padding: 1rem 2rem;
	margin-top: 1.5rem;
	background: transparent;
	border: 1px solid var(--text-muted);
	color: var(--text-muted);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-reach-out::after {
	content: attr(data-email);
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(0.75rem);
	padding: 0.375rem 0.625rem;
	font-family: monospace;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--text-muted);
	background: var(--background);
	border: 1px solid var(--text-muted);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.btn-reach-out:hover::after {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(1rem);
}

.btn-reach-out:hover {
	background: var(--text);
	color: var(--background);
	border-color: var(--text);
}

.btn-reach-out:active {
	background: var(--accent);
	color: var(--background);
	border-color: var(--accent);
}

/* -----------------------------------------------------------------------------
   Blueprint Earth SVG (Crew section background)
   - Positioned like rocket-bg, floats across Crew section
   - Controlled by JavaScript for scroll parallax
   ----------------------------------------------------------------------------- */
.earth-bg {
	position: absolute;
	top: 0;
	/* Position relative to page center to align with centered crew content */
	left: 50%;
	right: auto;
	/* Use transform for both X offset and Y positioning to avoid CLS */
	--earth-top: 0px;
	transform: translate(calc(-50% + 350px), var(--earth-top));
	height: clamp(400px, 70vh, 600px);
	width: auto;
	pointer-events: none;
	z-index: 0;
	opacity: 0.18;
	color: var(--text);
	transition: opacity 0.3s ease;
	overflow: visible;
	will-change: transform;
}

/* Dark mode - higher opacity */
[data-theme="dark"] .earth-bg {
	opacity: 0.28;
}

/* ==========================================================================
   4. FOOTER
   ========================================================================== */
.site-footer {
	padding: 3rem 2rem 2rem;
}

.footer-content {
	max-width: 1400px;
	margin: 0 auto;
}

.footer-line {
	border: none;
	height: 1px;
	background: var(--text-muted);
	opacity: 0.3;
	margin: 0 0 1.5rem 0;
}

.footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.footer-cta {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.footer-cta-label {
	font-family: monospace;
	font-size: 0.625rem;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.15em;
	opacity: 0.5;
}

.footer-cta-link {
	position: relative;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--text-muted);
	text-decoration: none;
	opacity: 0.5;
	transition: color 0.2s ease, opacity 0.3s ease;
}

.footer-cta-link:hover {
	opacity: 1;
	color: var(--text);
}

.footer-cta-link::after {
	content: attr(data-email);
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(0.5rem);
	padding: 0.25rem 0.5rem;
	font-family: monospace;
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--text-muted);
	background: var(--background);
	border: 1px solid var(--text-muted);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.footer-cta-link:hover::after {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0.75rem);
}

.footer-cta-link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.footer-text {
	font-family: monospace;
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--text-muted);
	letter-spacing: 0.1em;
	opacity: 0.4;
	margin: 0;
}

/* ==========================================================================
   RESPONSIVE - Sections
   ========================================================================== */

/* iPad Landscape / Small Laptops (769px - 1200px) */
@media (min-width: 769px) and (max-width: 1200px) {
	.section-home {
		min-height: auto;
		padding: 6rem 0;
		margin-bottom: 2rem;
	}

	/* Remove bottom margin from last section before footer */
	.section-crew {
		margin-bottom: 0;
	}

	.home-layout {
		gap: clamp(1.5rem, 3vw, 3rem);
	}

	.moon-bg {
		height: clamp(320px, 50vh, 500px);
	}

	/* Earth background: Large tablets */
	.earth-bg {
		height: clamp(350px, 60vh, 500px);
		transform: translate(calc(-50% + 280px), var(--earth-top));
	}

	/* What & Why: Reduce column gap, add spacing after */
	.section-what-why {
		padding: 5rem 0;
		margin-bottom: 2rem;
	}

	.what-why-layout {
		column-gap: clamp(2rem, 4vw, 4rem);
	}

	.section-header-large {
		font-size: clamp(3.5rem, 8vw, 5.5rem);
	}

	/* Crew section */
	.section-crew {
		padding: 4rem 0;
		margin-bottom: 0;
	}

	/* Footer: tighter on iPad */
	.site-footer {
		padding: 2rem 2rem 1.5rem;
	}

	.crew-members {
		gap: 2rem;
	}

	.crew-member {
		gap: 1rem;
	}
}

/* Smaller iPads / Large Tablets (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.section-home {
		padding: 5rem 0;
	}

	.home-layout {
		gap: clamp(1rem, 2.5vw, 2.5rem);
	}

	.moon-bg {
		height: clamp(280px, 45vh, 450px);
	}

	/* What & Why: Tablet landscape */
	.section-what-why {
		padding: 4rem 0;
		margin-bottom: 2rem;
	}

	.what-why-layout {
		column-gap: clamp(1.5rem, 3vw, 3rem);
	}

	.section-header-large {
		font-size: clamp(3rem, 7vw, 5rem);
	}

	/* Crew: Tablet landscape */
	.section-crew {
		padding: 4rem 0;
	}

	.crew-members {
		gap: 1.75rem;
	}

	.crew-member {
		gap: 1rem;
	}
}

/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
	.brand-large {
		font-size: 5rem;
		line-height: 1;
		margin-bottom: 1.25rem;
	}

	.tagline-large {
		font-size: 1.5rem;
		line-height: 1.35;
	}

	.subtitle-caps {
		font-size: 0.875rem;
		margin-top: 1.5rem;
	}

	.home-description {
		font-size: 1rem;
		line-height: 1.5;
		margin-top: 2rem;
	}

	.home-layout {
		padding: 0 1.5rem;
		gap: clamp(1rem, 3vw, 2rem);
	}

	.moon-bg {
		height: clamp(250px, 45vh, 400px);
		opacity: 0.4;
	}

	/* What & Why: Tablet - Stack vertically */
	.what-why-layout {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		row-gap: 2rem;
		padding: 0 1.5rem;
	}

	/* Tablet: Reset grid-row and use order for single column layout */
	.what-why-headers .header-block:nth-child(1) {
		grid-column: 1;
		grid-row: auto;
		order: 1;
	}

	.what-why-content .content-block:nth-child(1) {
		grid-column: 1;
		grid-row: auto;
		order: 2;
		padding-top: 0;
		max-width: 100%;
	}

	.what-why-headers .header-block:nth-child(2) {
		grid-column: 1;
		grid-row: auto;
		order: 3;
	}

	.what-why-content .content-block:nth-child(2) {
		grid-column: 1;
		grid-row: auto;
		order: 4;
		padding-top: 0;
		max-width: 100%;
	}

	.what-why-content .stats-row {
		grid-column: 1;
		grid-row: auto;
		order: 5;
	}

	.what-why-headers .cta-button {
		grid-column: 1;
		grid-row: auto;
		order: 6;
	}

	.what-why-content .nav-link-prominent {
		grid-column: 1;
		grid-row: auto;
		order: 7;
		justify-self: start;
	}

	.think-cta {
		grid-column: 1;
		grid-row: auto;
		order: 7;
		align-items: flex-start;
		margin-right: 0;
	}

	.think-cta-line {
		max-width: 200px;
	}

	.think-cta-lead {
		text-align: left;
	}

	/* Hide email tooltip on tablet - show below instead */
	.cta-button[data-email]::after {
		left: 0;
		top: 100%;
		transform: translateY(0.5rem) translateX(0);
	}

	.cta-button[data-email]:hover::after {
		transform: translateY(0.75rem) translateX(0);
	}

	.section-header-large {
		font-size: clamp(3rem, 8vw, 4rem);
	}

	.content-lead {
		font-size: 1.25rem;
	}

	.stats-row {
		gap: 2rem;
	}

	.stat-number {
		font-size: 2rem;
	}

	/* Crew: Tablet */
	.section-crew {
		padding: 4rem 0;
	}

	.crew-layout {
		padding: 0 1.5rem;
	}

	.crew-header {
		margin-bottom: 2rem;
	}

	.crew-members {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
		align-items: start;
	}

	.crew-member {
		gap: 1rem;
		align-items: flex-start;
	}

	.member-name {
		font-size: clamp(1.25rem, 4vw, 1.75rem);
	}

	.member-cta::after {
		left: 0;
		top: 100%;
		transform: translateY(0.5rem) translateX(0);
	}

	.member-cta:hover::after {
		transform: translateY(0.75rem) translateX(0);
	}

	/* Solo crew layout: Tablet */
	.crew-member-featured {
		gap: 2rem;
	}

	.member-photo-featured {
		width: 220px;
	}

	.member-info-featured .member-name {
		font-size: 1.5rem;
	}

	.member-info-featured .member-bio {
		font-size: 0.875rem;
	}

	/* Earth background: Tablet */
	.earth-bg {
		height: clamp(300px, 55vh, 450px);
		transform: translate(calc(-50% + 200px), var(--earth-top));
	}
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
	.brand-large {
		font-size: 3.5rem;
		line-height: 1.05;
		margin-bottom: 1rem;
	}

	.tagline-large {
		font-size: 1.25rem;
		line-height: 1.4;
	}

	.subtitle-caps {
		font-size: 0.75rem;
		letter-spacing: 0.15em;
		margin-top: 1.25rem;
	}

	.home-description {
		font-size: 0.9375rem;
		line-height: 1.5;
		margin-top: 1.5rem;
	}

	.home-layout {
		padding: 0 1.25rem;
	}

	/* Moon as background on mobile */
	.moon-bg {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
		width: 100%;
		height: auto;
		max-width: none;
		max-height: none;
		opacity: 0.12 !important;
		z-index: 0;
		will-change: transform;
	}

	.home-content {
		position: relative;
		z-index: 1;
	}

	/* Scale down rocket on mobile */
	.rocket-bg {
		opacity: 0.12;
		height: 70%;
		max-height: 400px;
	}


	/* What & Why: Mobile */
	.section-what-why {
		padding: 3rem 0;
	}

	.what-why-layout {
		position: relative;
		grid-template-columns: 1fr;
		row-gap: 1.5rem;
		padding: 0 1.25rem;
	}

	/* Mobile: Stats before CTA */
	.what-why-content .stats-row {
		order: 5;
	}

	.what-why-headers .cta-button {
		order: 6;
	}

	.what-why-content .nav-link-prominent {
		order: 7;
		justify-self: start;
	}

	.think-cta {
		order: 7;
		margin-top: 1rem;
	}

	.think-cta-line {
		max-width: 150px;
	}

	.think-cta-lead {
		font-size: 0.875rem;
	}

	.think-cta-link {
		padding: 0.75rem 1rem;
		font-size: 0.9375rem;
	}

	/* Show email directly on mobile instead of hover - only for elements with data-email */
	.cta-button[data-email]::after,
	.btn-reach-out[data-email]::after,
	.footer-cta-link[data-email]::after {
		position: static;
		display: block;
		transform: none !important;
		opacity: 0.7 !important;
		visibility: visible !important;
		margin-top: 0.25rem;
		padding: 0;
		border: none;
		background: none;
		font-size: 0.7rem;
	}

	/* Disable hover animations on mobile */
	.cta-button[data-email]:hover::after,
	.btn-reach-out[data-email]:hover::after,
	.footer-cta-link[data-email]:hover::after {
		transform: none !important;
		opacity: 0.7 !important;
	}

	.header-label {
		font-size: 0.625rem;
		margin-bottom: 0.25rem;
	}

	.section-header-large {
		font-size: clamp(2rem, 10vw, 3rem);
	}

	/* WHY hollow text - fix Android rendering with background fill + paint-order */
	.header-block:nth-child(2) .section-header-large {
		color: var(--background);
		-webkit-text-stroke: 3px var(--text);
		paint-order: stroke fill;
		letter-spacing: 0.04em;
	}

	[data-theme="dark"] .header-block:nth-child(2) .section-header-large {
		-webkit-text-stroke: 2px var(--text);
	}

	.content-lead {
		font-size: 1.125rem;
	}

	.content-body {
		font-size: 0.9375rem;
	}

	.content-list li {
		font-size: 0.875rem;
	}

	.stats-row {
		gap: 1rem;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	.stat-item {
		flex: 1 1 0;
		min-width: 0;
	}

	.stat-number {
		font-size: 1.75rem;
	}

	.stat-label {
		font-size: 0.5625rem;
	}

	/* Crew: Mobile */
	.section-crew {
		padding: 3rem 0;
	}

	.crew-layout {
		padding: 0 1.25rem;
	}

	.crew-header {
		margin-bottom: 1.5rem;
	}

	.crew-members {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.crew-member {
		gap: 1rem;
	}

	.member-label {
		font-size: 0.625rem;
	}

	.member-name {
		font-size: clamp(1.25rem, 5vw, 1.5rem);
		margin-bottom: 0.5rem;
	}

	.member-bio {
		font-size: 0.8125rem;
		margin-bottom: 0.75rem;
	}

	.member-skills {
		gap: 0.375rem;
	}

	.member-skills li {
		font-size: 0.5625rem;
		padding: 0.25rem 0.5rem;
	}

	.member-cta {
		padding: 0.625rem 1.25rem;
		font-size: 0.8125rem;
	}

	/* Solo crew layout: Mobile - stack vertically */
	.crew-member-featured {
		flex-direction: column;
		gap: 1.5rem;
	}

	.member-photo-featured {
		width: 100%;
		max-width: 200px;
	}

	.member-info-featured {
		padding-top: 0;
	}

	.member-info-featured .member-label {
		font-size: 0.625rem;
		margin-bottom: 0.5rem;
	}

	.member-info-featured .member-name {
		font-size: 1.375rem;
		margin-bottom: 0.75rem;
	}

	.member-info-featured .member-bio {
		font-size: 0.8125rem;
		line-height: 1.5;
	}

	/* Earth background: Mobile - centered horizontally on page */
	.earth-bg {
		display: block;
		position: absolute;
		left: 50%;
		right: auto;
		width: 65%;
		height: auto;
		aspect-ratio: 1 / 1;
		transform: translate(calc(-50% + 50px), var(--earth-top));
		opacity: 0.12;
		z-index: 0;
	}

	[data-theme="dark"] .earth-bg {
		opacity: 0.18;
	}

	/* Footer: Mobile */
	.site-footer {
		padding: 2rem 1.25rem 1.5rem;
	}

	.footer-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.footer-text {
		align-self: flex-start;
	}
}

/* Small Mobile (max-width: 360px) */
@media (max-width: 360px) {
	.home-layout {
		padding: 0 1rem;
	}

	.brand-large {
		font-size: 2.75rem;
		line-height: 1.1;
		margin-bottom: 0.875rem;
	}

	.tagline-large {
		font-size: 1rem;
		line-height: 1.45;
	}

	.subtitle-caps {
		font-size: 0.7rem;
		margin-top: 1rem;
	}

	.home-description {
		font-size: 0.875rem;
		margin-top: 1.25rem;
	}

	/* What & Why: Small Mobile */
	.what-why-layout {
		padding: 0 1rem;
		row-gap: 1.25rem;
	}

	.section-header-large {
		font-size: clamp(1.75rem, 12vw, 2.5rem);
	}

	.content-lead {
		font-size: 1rem;
	}

	.content-body {
		font-size: 0.875rem;
	}

	.stats-row {
		gap: 1rem;
	}

	.stat-number {
		font-size: 1.5rem;
	}

	.think-cta-line {
		max-width: 120px;
	}

	.think-cta-lead {
		font-size: 0.8125rem;
	}

	.think-cta-link {
		padding: 0.625rem 0.875rem;
		font-size: 0.875rem;
		gap: 0.5rem;
	}

	/* Crew: Small Mobile */
	.crew-layout {
		padding: 0 1rem;
	}

	.member-name {
		font-size: clamp(1.125rem, 5vw, 1.375rem);
	}

	.member-bio {
		font-size: 0.75rem;
	}

	/* Earth: Small Mobile - slightly smaller */
	.earth-bg {
		width: 50%;
		opacity: 0.1;
	}

	[data-theme="dark"] .earth-bg {
		opacity: 0.15;
	}
}

/* ==========================================================================
   TOUCH DEVICE SUPPORT
   Show email tooltips on all touch devices (tablets included)
   ========================================================================== */
@media (hover: none) {

	/* Always show email on touch devices instead of requiring hover */
	.cta-button[data-email]::after,
	.btn-reach-out[data-email]::after,
	.footer-cta-link[data-email]::after,
	.member-cta[data-email]::after {
		position: static;
		display: block;
		transform: none !important;
		opacity: 0.7 !important;
		visibility: visible !important;
		margin-top: 0.375rem;
		padding: 0;
		border: none;
		background: none;
		font-size: 0.75rem;
	}

	/* Disable hover animations on touch */
	.cta-button[data-email]:hover::after,
	.btn-reach-out[data-email]:hover::after,
	.footer-cta-link[data-email]:hover::after,
	.member-cta[data-email]:hover::after {
		transform: none !important;
		opacity: 0.7 !important;
	}
}