/* ==========================================================================
   LUNA LABS - Components
   Case Studies, Work, Dispatch, and Voices sections
   ========================================================================== */

/* ==========================================================================
   1. CASE STUDIES SECTION (Homepage)
   Solid cards with image areas and descriptions
   ========================================================================== */
.section-cases {
	padding: 6rem 0;
}

.cases-layout {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.cases-header {
	margin-bottom: 4rem;
}

/* Cases Stack - Base container (minimal styles) */
.cases-stack {
	position: relative;
	width: 100%;
}

/* Cases Stack - Stacked variant (original click-to-restack behavior) */
.cases-stack--stacked {
	max-width: 500px;
	aspect-ratio: 1 / 1;
	margin-bottom: 4rem;
	/* Extra space for expanded stack */
	padding-right: 50px;
	padding-bottom: 50px;
}

/* Base Case Card - visual styles only, no positioning */
.case-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: var(--background);
	border: 2px solid var(--text);
	cursor: pointer;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.4s ease,
	            border-color 0.3s ease;
}

/* Stacked variant - absolute positioning for overlapping cards */
.cases-stack--stacked .case-card {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 50px);
	height: calc(100% - 50px);
}

/* Stack positions - condensed by default */
.cases-stack--stacked .case-card[data-position="1"] {
	z-index: 4;
	transform: translate(0, 0);
	box-shadow: 8px 8px 0 var(--text);
}

.cases-stack--stacked .case-card[data-position="2"] {
	z-index: 3;
	transform: translate(6px, 6px);
	box-shadow: none;
}

.cases-stack--stacked .case-card[data-position="3"] {
	z-index: 2;
	transform: translate(12px, 12px);
	box-shadow: none;
}

.cases-stack--stacked .case-card[data-position="4"] {
	z-index: 1;
	transform: translate(18px, 18px);
	box-shadow: none;
}

/* Hover on stack - expand the cards */
.cases-stack--stacked:hover .case-card[data-position="2"] {
	transform: translate(14px, 14px);
}

.cases-stack--stacked:hover .case-card[data-position="3"] {
	transform: translate(28px, 28px);
}

.cases-stack--stacked:hover .case-card[data-position="4"] {
	transform: translate(42px, 42px);
}

/* Non-front stacked cards - indicate clickability + depth effect */
.cases-stack--stacked .case-card:not([data-position="1"]) {
	cursor: pointer;
	opacity: 0.92;
}

.cases-stack--stacked .case-card[data-position="3"],
.cases-stack--stacked .case-card[data-position="4"] {
	opacity: 0.85;
}

/* Hover effect on non-front stacked cards */
.cases-stack--stacked .case-card:not([data-position="1"]):hover {
	box-shadow: 4px 4px 0 var(--text);
	border-color: var(--text);
	opacity: 1;
}

/* View All card styling */
.case-card-viewall .case-card-visual {
	background: var(--surface);
}

.case-card-viewall .case-card-icon {
	color: var(--text);
	font-size: 3rem;
	opacity: 0.6;
}

/* Visual Area - Full height, sharp corners */
.case-card-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	background: var(--text);
	overflow: hidden;
}

.case-card-pattern {
	position: absolute;
	inset: 0;
	opacity: 0.15;
}

/* Pattern variations */
.case-card-pattern[data-pattern="grid"] {
	background-image:
		linear-gradient(var(--background) 1px, transparent 1px),
		linear-gradient(90deg, var(--background) 1px, transparent 1px);
	background-size: 20px 20px;
}

.case-card-pattern[data-pattern="dots"] {
	background-image: radial-gradient(var(--background) 1.5px, transparent 1.5px);
	background-size: 12px 12px;
}

.case-card-pattern[data-pattern="lines"] {
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 8px,
		var(--background) 8px,
		var(--background) 9px
	);
}

.case-card-pattern[data-pattern="cross"] {
	background-image:
		linear-gradient(var(--background) 1px, transparent 1px),
		linear-gradient(90deg, var(--background) 1px, transparent 1px);
	background-size: 16px 16px;
	transform: rotate(45deg) scale(1.5);
}

.case-card-icon {
	position: relative;
	z-index: 1;
	font-size: 4rem;
	color: var(--background);
	opacity: 0.8;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.case-card:hover .case-card-icon {
	transform: scale(1.1);
	opacity: 1;
}

/* Card Body - Inside card at bottom */
.case-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1.25rem 1.5rem;
	background: var(--background);
}

.case-card-tag {
	font-family: monospace;
	font-size: 0.625rem;
	font-weight: 500;
	color: var(--accent);
	letter-spacing: 0.12em;
}

.case-card-title {
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--text);
	line-height: 1.3;
	margin: 0;
	transition: color 0.3s ease;
}

.case-card:hover .case-card-title {
	color: var(--text);
}

.case-card-desc {
	font-size: 0.875rem;
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0;
}

.case-metric-label {
	font-family: monospace;
	font-size: 0.5rem;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.1em;
	opacity: 0.7;
}

/* View All Footer */
.cases-footer {
	display: flex;
	justify-content: flex-end;
}

.cases-view-all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-muted);
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: color 0.3s ease, gap 0.3s ease;
}

.cases-view-all:hover {
	color: var(--text);
	gap: 0.75rem;
}

.cases-arrow {
	transition: transform 0.3s ease;
}

.cases-view-all:hover .cases-arrow {
	transform: translateX(3px);
}

/* ==========================================================================
   2. CASE STUDIES SECTION (Legacy - for case-studies.html)
   2-column layout with visual frames - like Crew section
   ========================================================================== */
.section-case-studies {
	padding: 4rem 0;
}

.case-studies-layout {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
}

.case-studies-header {
	margin-bottom: 2.5rem;
}

/* 2-Column Grid Layout */
.case-studies-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem 3rem;
}

/* Case Study Item - 2 column layout */
.case-study-item {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 1.5rem;
	align-items: start;
}

/* Alternating layout - swap columns */
.case-study-item-alt {
	grid-template-columns: 1fr 140px;
}

.case-study-item-alt .case-study-visual {
	order: 2;
}

.case-study-item-alt .case-study-info {
	order: 1;
	text-align: right;
}

/* Visual Frame */
.case-study-visual {
	flex-shrink: 0;
}

.case-study-frame {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 140px;
	border: 1px solid var(--text-muted);
	background: transparent;
	text-decoration: none;
	transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.case-study-frame:hover {
	border-color: var(--text);
	background: var(--text);
	transform: translateY(-4px);
}

.case-study-icon {
	font-size: 2.5rem;
	color: var(--text-muted);
	opacity: 0.6;
	transition: color 0.3s ease, opacity 0.3s ease;
}

.case-study-frame:hover .case-study-icon {
	color: var(--background);
	opacity: 1;
}

/* Info Section */
.case-study-info {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 0.5rem;
}

.case-study-tag {
	font-family: monospace;
	font-size: 0.5625rem;
	font-weight: 500;
	color: var(--accent);
	letter-spacing: 0.15em;
	opacity: 0.8;
}

.case-study-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text);
	line-height: 1.25;
	margin: 0;
}

.case-study-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.case-study-title a:hover {
	color: var(--accent);
}

.case-study-desc {
	font-size: 0.8125rem;
	color: var(--text-muted);
	line-height: 1.5;
	margin: 0;
	opacity: 0.8;
}

/* CTA - Simple link style */
.case-studies-cta {
	margin-top: 2.5rem;
}

/* Simple Link Style (no button animation) */
.link-simple {
	font-family: monospace;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-muted);
	text-decoration: none;
	letter-spacing: 0.05em;
	opacity: 0.5;
	transition: opacity 0.2s ease, color 0.2s ease;
}

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

/* ==========================================================================
   3. ACTIVE WORK SECTION
   Horizontal scrollable carousel of blog posts
   ========================================================================== */
.section-work {
	padding: 4rem 0;
	overflow: hidden;
}

.work-layout {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
}

.work-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.work-view-all {
	margin-left: auto;
}

/* Horizontal Scroll Carousel */
.work-carousel {
	display: flex;
	gap: 1.5rem;
	padding: 1rem 0 2rem;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin: 0 -2rem;
	padding-left: 2rem;
	padding-right: 2rem;
}

.work-carousel::-webkit-scrollbar {
	display: none;
}

/* Work Card - Vertical blog post preview */
.work-card {
	position: relative;
	flex-shrink: 0;
	width: clamp(260px, 28vw, 320px);
	display: flex;
	flex-direction: column;
	gap: 0;
	text-decoration: none;
	border: 1px solid var(--text-muted);
	opacity: 0.7;
	transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.work-card:hover {
	opacity: 1;
	border-color: var(--text);
	transform: translateY(-4px);
}

/* Work Card Image */
.work-card-image {
	width: 100%;
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--background);
	border-bottom: 1px solid var(--text-muted);
	transition: background 0.3s ease, border-color 0.3s ease;
}

.work-card:hover .work-card-image {
	background: var(--text);
	border-color: var(--text);
}

.work-card-icon {
	font-size: 2rem;
	color: var(--text-muted);
	opacity: 0.5;
	transition: color 0.3s ease, opacity 0.3s ease;
}

.work-card:hover .work-card-icon {
	color: var(--background);
	opacity: 1;
}

/* Work Card Content */
.work-card-content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	flex: 1;
}

.work-card-category {
	font-family: monospace;
	font-size: 0.5625rem;
	font-weight: 500;
	color: var(--accent);
	letter-spacing: 0.15em;
	opacity: 0.8;
}

.work-card-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	line-height: 1.35;
	margin: 0;
	transition: color 0.3s ease;
}

.work-card:hover .work-card-title {
	color: var(--accent);
}

.work-card-excerpt {
	font-size: 0.8125rem;
	color: var(--text-muted);
	line-height: 1.5;
	margin: 0;
	flex: 1;
	/* Limit to 3 lines */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.work-card-date {
	font-family: monospace;
	font-size: 0.5625rem;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.1em;
	opacity: 0.5;
	margin-top: auto;
}

/* -----------------------------------------------------------------------------
   Trajectory Prediction Dots
   - Subtle effect showing "predicted path" on card hover
   - Small dots appear above the card indicating lift direction
   - Creates sense of motion/trajectory in space theme
   ----------------------------------------------------------------------------- */
.work-card::after,
.cases-stack--grid .case-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 2px;
	background: transparent;
	border-radius: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
	/* Use consistent faded colors - only opacity changes on hover */
	box-shadow:
		0 -12px 0 0 rgba(26, 26, 26, 0.18),
		0 -22px 0 0 rgba(26, 26, 26, 0.10),
		0 -32px 0 0 rgba(26, 26, 26, 0.04);
}

.work-card:hover::after,
.cases-stack--grid .case-card:hover::after {
	opacity: 1;
}

/* Dark mode trajectory dots - same principle, only opacity transitions */
[data-theme="dark"] .work-card::after,
[data-theme="dark"] .cases-stack--grid .case-card::after {
	box-shadow:
		0 -12px 0 0 rgba(245, 245, 240, 0.22),
		0 -22px 0 0 rgba(245, 245, 240, 0.12),
		0 -32px 0 0 rgba(245, 245, 240, 0.05);
}

/* Disable on touch devices */
@media (hover: none) {
	.work-card::after,
	.cases-stack--grid .case-card::after {
		display: none;
	}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.work-card::after,
	.cases-stack--grid .case-card::after {
		display: none;
	}
}

/* ==========================================================================
   4. DISPATCH HYBRID SECTION
   Combined case studies stack + article stacks in grid layout
   ========================================================================== */
.section-dispatch-hybrid {
	padding: 6rem 0;
}

.dispatch-hybrid-layout {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.dispatch-hybrid-header {
	margin-bottom: 4rem;
}

/* Hybrid Grid: Cases Stack (left) + Article Stacks (right) */
.dispatch-hybrid-grid {
	display: grid;
	grid-template-columns: 1.8fr 1fr;
	gap: 1.5rem;
	align-items: start;
	margin-bottom: 3rem;
}

/* Remove bottom margin from cases-stack in hybrid grid */
.dispatch-hybrid-grid .cases-stack {
	margin-bottom: 0;
	max-width: 100%;
	aspect-ratio: 4 / 3;
}

/* Article Stacks Container - Two stacks */
.article-stacks {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Article Stack - Responsive squares with max size */
.article-stack {
	position: relative;
	background: none;
	border: none;
	padding: 0;
	padding-right: 14px;
	padding-bottom: 14px;
	cursor: pointer;
	text-align: left;
	width: clamp(180px, 100%, 240px);
	aspect-ratio: 1 / 1;
	transition: transform 0.3s ease;
}

.article-stack:hover {
	transform: translateY(-4px);
}

/* Stack layers behind the card - multiple for depth */
.article-stack-layer-3 {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 14px);
	height: calc(100% - 14px);
	background: var(--background);
	border: 1px solid var(--text-muted);
	transform: translate(12px, 12px);
	z-index: 1;
	transition: transform 0.3s ease;
}

.article-stack-layer-2 {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 14px);
	height: calc(100% - 14px);
	background: var(--background);
	border: 1px solid var(--text-muted);
	transform: translate(4px, 4px);
	z-index: 2;
	transition: transform 0.3s ease;
}

/* Front card layer */
.article-stack-layer-1 {
	z-index: 3;
}

.article-stack:hover .article-stack-layer-3 {
	transform: translate(14px, 14px);
}

.article-stack:hover .article-stack-layer-2 {
	transform: translate(6px, 6px);
}

/* Article Card - The front card */
.article-card {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: calc(100% - 14px);
	height: calc(100% - 14px);
	padding: 0;
	background: var(--background);
	border: 2px solid var(--text);
	text-decoration: none;
	color: inherit;
	box-shadow: 4px 4px 0 var(--text-muted);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.article-stack:hover .article-card {
	border-color: var(--text);
	box-shadow: 6px 6px 0 var(--text);
}

/* Article Card Header - Visual accent bar */
.article-card-header {
	background: var(--text);
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.article-card-header::after {
	content: '→';
	color: var(--background);
	font-size: 0.875rem;
	opacity: 0.6;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.article-stack:hover .article-card-header::after {
	opacity: 1;
	transform: translateX(4px);
}

/* Article Card Content */
.article-card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1rem 1.25rem;
}

.article-category {
	font-family: monospace;
	font-size: 0.5625rem;
	font-weight: 600;
	color: var(--background);
	letter-spacing: 0.15em;
}

/* Category in content area (fallback if no header) */
.article-card-content .article-category {
	color: var(--accent);
}

.article-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text);
	line-height: 1.3;
	margin: 0;
	transition: color 0.3s ease;
}

.article-stack:hover .article-title {
	color: var(--text);
}

.article-meta {
	font-family: monospace;
	font-size: 0.625rem;
	color: var(--text-muted);
	letter-spacing: 0.05em;
	opacity: 0.7;
}

/* Portfolio Subsections */
.portfolio-subsection {
	width: 100%;
	margin-bottom: 3rem;
}

.portfolio-subsection:last-of-type {
	margin-bottom: 2rem;
}

.portfolio-subsection-label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: monospace;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text);
	letter-spacing: 0.1em;
	margin-bottom: 1.5rem;
}

.portfolio-subsection-tag {
	font-size: 0.625rem;
	font-weight: 400;
	color: var(--text-muted);
	letter-spacing: 0.05em;
	opacity: 0.7;
}

/* Cases Stack - Grid variant (for multiple cards in grid layout) */
.cases-stack--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}

.cases-stack--grid .case-card {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
}

.cases-stack--grid .case-card:hover {
	transform: translateY(-4px);
	box-shadow: 8px 8px 0 var(--text);
}

.cases-stack--grid .case-card-body {
	min-height: 140px;
}

.cases-stack--grid .case-card-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Cases Stack - Single variant (for single card display) */
.cases-stack--single {
	max-width: 360px;
}

.cases-stack--single .case-card {
	width: 100%;
	aspect-ratio: 4 / 3;
}

.cases-stack--single .case-card:hover {
	transform: translateY(-4px);
	box-shadow: 8px 8px 0 var(--text);
}

/* Mobile: Full width portfolio cards */
@media (max-width: 768px) {
	.portfolio-subsection {
		width: 100% !important;
	}

	.cases-stack--grid {
		grid-template-columns: 1fr !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
	}

	.cases-stack--grid .case-card {
		width: 100% !important;
		max-width: 100% !important;
	}

	.cases-stack--single {
		max-width: 100% !important;
		width: 100% !important;
		padding: 0 !important;
	}

	.cases-stack--single .case-card {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Venture Card - Special styling */
.case-card-venture {
	border-color: var(--accent);
}

.case-card-venture .case-card-visual {
	background: var(--accent);
}

.case-card-venture .case-card-icon {
	color: var(--background);
}

.case-card-venture:hover {
	box-shadow: 8px 8px 0 var(--accent);
}

/* Dispatch Hybrid Footer */
.dispatch-hybrid-footer {
	display: flex;
	justify-content: flex-end;
}

/* ==========================================================================
   4b. DISPATCH SECTION (Legacy)
   Featured articles in asymmetric bento grid layout
   ========================================================================== */
.section-dispatch {
	padding: 6rem 0;
}

.dispatch-layout {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.dispatch-header {
	margin-bottom: 3rem;
}

/* Bento Grid - Asymmetric layout */
.dispatch-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

/* Card Base Styles */
.dispatch-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--text-muted);
	background: transparent;
	padding: 1.5rem;
	transition: border-color 0.3s ease, transform 0.3s ease;
	opacity: 0.85;
}

.dispatch-card:hover {
	border-color: var(--text);
	opacity: 1;
	transform: translateY(-3px);
}

/* Featured Card - Larger */
.dispatch-card-featured {
	grid-row: span 2;
	min-height: 400px;
}

/* Secondary Stack */
.dispatch-stack {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.dispatch-card-secondary {
	flex: 1;
}

/* Card Header */
.dispatch-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.dispatch-number {
	font-family: monospace;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--accent);
	letter-spacing: 0.05em;
}

.dispatch-badge {
	font-family: monospace;
	font-size: 0.5625rem;
	font-weight: 600;
	color: var(--background);
	background: var(--accent);
	padding: 0.25rem 0.5rem;
	letter-spacing: 0.1em;
}

/* Card Body */
.dispatch-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.dispatch-category {
	font-family: monospace;
	font-size: 0.5625rem;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.15em;
}

.dispatch-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text);
	line-height: 1.3;
	margin: 0;
	transition: color 0.3s ease;
}

.dispatch-card-featured .dispatch-title {
	font-size: 1.75rem;
}

.dispatch-card:hover .dispatch-title {
	color: var(--accent);
}

.dispatch-excerpt {
	font-size: 0.875rem;
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0;
}

.dispatch-card-featured .dispatch-excerpt {
	font-size: 1rem;
	max-width: 90%;
}

.dispatch-card-secondary .dispatch-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Card Footer */
.dispatch-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 1.5rem;
}

.dispatch-read-time {
	font-family: monospace;
	font-size: 0.5625rem;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.1em;
	opacity: 0.7;
}

.dispatch-date {
	font-family: monospace;
	font-size: 0.5625rem;
	font-weight: 400;
	color: var(--text-muted);
	letter-spacing: 0.1em;
	opacity: 0.5;
}

/* View All Footer */
.dispatch-footer {
	display: flex;
	justify-content: flex-end;
}

.dispatch-view-all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-muted);
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: color 0.3s ease, gap 0.3s ease;
}

.dispatch-view-all:hover {
	color: var(--text);
	gap: 0.75rem;
}

.dispatch-arrow {
	transition: transform 0.3s ease;
}

.dispatch-view-all:hover .dispatch-arrow {
	transform: translateX(3px);
}

/* ==========================================================================
   5. VOICES SECTION
   Testimonials and client feedback - compact centered layout
   ========================================================================== */
.section-voices {
	padding: 6rem 0;
}

.voices-layout {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 2rem;
}

.voices-header {
	margin-bottom: 2.5rem;
}

/* Voices Content Container */
.voices-content {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	width: 100%;
}

/* Client List */
.voices-clients {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid var(--text-muted);
	opacity: 0.6;
}

.clients-label {
	font-family: monospace;
	font-size: 0.5625rem;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.15em;
}

.clients-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 0.25rem;
}

.client-name {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.02em;
}

.client-name::after {
	content: '·';
	margin: 0 0.5rem;
	font-size: 0.75rem;
	opacity: 0.4;
}

.client-name:last-of-type::after {
	display: none;
}

.client-divider {
	display: none;
}

/* Metric */
.voices-metric {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.metric-number {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 600;
	color: var(--accent);
	line-height: 1;
	letter-spacing: -0.02em;
}

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

/* -----------------------------------------------------------------------------
   Traction Section - Studio Pulse
   ----------------------------------------------------------------------------- */
.section-traction {
	padding: 6rem 0;
}

.traction-layout {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 2rem;
}

.traction-header {
	margin-bottom: 2.5rem;
}

.traction-content {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	width: 100%;
}

/* Headline Stats */
.traction-stats {
	display: flex;
	gap: 3rem;
	flex-wrap: wrap;
}

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

.traction-stat-number {
	font-size: 2rem;
	font-weight: 700;
	color: var(--accent);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: color 0.3s ease;
}

/* Count-up animation state */
.traction-stat-number.counting {
	color: var(--text);
}

.traction-stat-label {
	font-family: monospace;
	font-size: 0.625rem;
	color: var(--text-muted);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Traction Highlight - for quote emphasis */
.traction-highlight {
	color: var(--accent);
	font-weight: 600;
}

/* Traction Stack - Stacked metric cards */
.traction-stack-container {
	margin: 2rem 0;
}

.traction-stack {
	position: relative;
	width: 100%;
	max-width: 420px;
	height: 240px;
	/* Extra space for stacked cards */
	padding-right: 30px;
	padding-bottom: 30px;
}

/* Base Traction Card - visual styles only */
.traction-card {
	display: flex;
	flex-direction: row;
	background: var(--background);
	border: 2px solid var(--text);
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
	overflow: hidden;
}

/* Traction cards inside stack - absolute positioning */
.traction-stack .traction-card {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 30px);
	height: calc(100% - 30px);
}

/* Traction Card Visual - Pattern area */
.traction-card-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35%;
	background: var(--text);
	overflow: hidden;
}

.traction-card-pattern {
	position: absolute;
	inset: 0;
	opacity: 0.15;
}

.traction-card-pattern[data-pattern="grid"] {
	background-image:
		linear-gradient(var(--background) 1px, transparent 1px),
		linear-gradient(90deg, var(--background) 1px, transparent 1px);
	background-size: 20px 20px;
}

.traction-card-icon {
	position: relative;
	z-index: 1;
	font-size: 2.5rem;
	color: var(--background);
	opacity: 0.8;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.traction-card:hover .traction-card-icon {
	transform: scale(1.1);
	opacity: 1;
}

/* Building status - different visual */
.traction-visual-building {
	background: var(--accent);
}

/* Stack positions */
.traction-stack .traction-card[data-position="1"] {
	z-index: 4;
	transform: translate(0, 0);
	box-shadow: 6px 6px 0 var(--text);
}

.traction-stack .traction-card[data-position="2"] {
	z-index: 3;
	transform: translate(6px, 6px);
	box-shadow: none;
}

.traction-stack .traction-card[data-position="3"] {
	z-index: 2;
	transform: translate(12px, 12px);
	box-shadow: none;
}

.traction-stack .traction-card[data-position="4"] {
	z-index: 1;
	transform: translate(18px, 18px);
	box-shadow: none;
}

/* Hover - spread cards */
.traction-stack:hover .traction-card[data-position="2"] {
	transform: translate(10px, 10px);
}

.traction-stack:hover .traction-card[data-position="3"] {
	transform: translate(20px, 20px);
}

.traction-stack:hover .traction-card[data-position="4"] {
	transform: translate(30px, 30px);
}

/* Non-front traction cards - indicate clickability + depth effect */
.traction-stack .traction-card:not([data-position="1"]) {
	cursor: pointer;
	opacity: 0.92;
}

.traction-stack .traction-card[data-position="3"],
.traction-stack .traction-card[data-position="4"] {
	opacity: 0.85;
}

/* Hover on non-front cards */
.traction-stack .traction-card:not([data-position="1"]):hover {
	box-shadow: 4px 4px 0 var(--text);
	border-color: var(--text);
	opacity: 1;
}

/* Traction Card Body */
.traction-card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.375rem;
	padding: 1.25rem 1.5rem;
	flex: 1;
}

.traction-card-status {
	font-family: monospace;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	padding: 0.25rem 0.5rem;
	border-radius: 2px;
	width: fit-content;
}

.traction-status-live {
	background: color-mix(in srgb, #22c55e 20%, transparent);
	color: #22c55e;
}

.traction-status-building {
	background: color-mix(in srgb, var(--accent) 20%, transparent);
	color: var(--accent);
}

.traction-card-name {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text);
	margin: 0;
	line-height: 1.2;
}

.traction-card-metric {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--accent);
	margin: 0;
	line-height: 1;
}

.traction-card-detail {
	font-family: monospace;
	font-size: 0.6875rem;
	color: var(--text-muted);
	letter-spacing: 0.05em;
	margin: 0;
}

/* Traction CTA */
.traction-cta {
	margin-top: 1rem;
}

.traction-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: monospace;
	font-size: 0.875rem;
	color: var(--accent);
	text-decoration: none;
	letter-spacing: 0.05em;
	transition: gap 0.3s ease;
}

.traction-cta-link:hover {
	gap: 0.75rem;
}

.traction-cta-text {
	text-transform: uppercase;
}

.traction-cta-arrow {
	transition: transform 0.3s ease;
}

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

/* Tablet Traction */
@media (max-width: 768px) {
	.section-traction {
		padding: 4rem 0;
	}

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

	.traction-stats {
		gap: 2rem;
	}

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

/* Mobile traction stack */
@media (max-width: 480px) {
	.traction-layout {
		padding: 0 1.25rem;
	}

	.traction-stats {
		gap: 1.5rem;
	}

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

	.traction-stack {
		max-width: 100%;
		height: 180px;
		padding-right: 20px;
		padding-bottom: 20px;
	}

	.traction-stack .traction-card {
		width: calc(100% - 20px);
		height: calc(100% - 20px);
	}

	.traction-card-visual {
		width: 30%;
	}

	.traction-card-icon {
		font-size: 1.75rem;
	}

	.traction-card-body {
		padding: 0.875rem 1rem;
		gap: 0.25rem;
	}

	.traction-card-name {
		font-size: 0.9375rem;
	}

	.traction-card-metric {
		font-size: 1.25rem;
	}

	.traction-card-detail {
		font-size: 0.5625rem;
	}

	.traction-stack .traction-card[data-position="2"] {
		transform: translate(5px, 5px);
	}

	.traction-stack .traction-card[data-position="3"] {
		transform: translate(10px, 10px);
	}

	.traction-stack .traction-card[data-position="4"] {
		transform: translate(15px, 15px);
	}
}

/* How We Think CTA - Prominent call to action */
.voices-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: 2rem;
	border-top: 1px solid var(--text-muted);
}

.voices-cta-lead {
	font-size: 1rem;
	color: var(--text-muted);
	margin: 0;
	font-style: italic;
}

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

.voices-cta-link:hover {
	transform: translateX(4px);
	gap: 1rem;
	background: var(--accent);
}

.voices-cta-text {
	transition: transform 0.3s ease;
}

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

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

/* ==========================================================================
   RESPONSIVE - Components
   ========================================================================== */

/* iPad Landscape / Small Laptops (769px - 1200px) */
@media (min-width: 769px) and (max-width: 1200px) {
	.section-cases,
	.section-dispatch,
	.section-voices {
		padding: 4rem 0;
	}

	.cases-grid,
	.dispatch-grid {
		gap: 1.25rem;
	}
}

/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
	.section-cases,
	.section-dispatch,
	.section-dispatch-hybrid,
	.section-voices {
		padding: 3rem 0;
	}

	.cases-layout,
	.dispatch-layout,
	.dispatch-hybrid-layout,
	.voices-layout,
	.work-layout,
	.case-studies-layout {
		padding: 0 1.5rem;
	}

	/* Hybrid Dispatch: Vertical scroll stacks on tablet */
	.dispatch-hybrid-header {
		margin-bottom: 2rem;
	}

	.dispatch-hybrid-grid {
		display: flex;
		flex-direction: row;
		gap: 1.5rem;
		justify-content: center;
	}

	/* Cases stack - Vertical scroll like Apple widget stack */
	.dispatch-hybrid-grid .cases-stack {
		position: relative;
		display: block;
		width: 280px;
		height: 350px;
		max-width: none;
		aspect-ratio: auto;
		padding: 0;
		margin: 0;
		overflow-y: auto;
		overflow-x: hidden;
		scroll-snap-type: y mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		border-radius: 4px;
	}

	.dispatch-hybrid-grid .cases-stack::-webkit-scrollbar {
		display: none;
	}

	.dispatch-hybrid-grid .case-card {
		position: relative;
		display: flex;
		flex: 0 0 auto;
		width: 100%;
		height: 100%;
		min-height: 350px;
		transform: none !important;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		box-shadow: 5px 5px 0 var(--text);
	}

	.dispatch-hybrid-grid .case-card[data-position] {
		transform: none !important;
		z-index: 1;
	}

	/* Article stacks - Vertical scroll */
	.article-stacks {
		flex-direction: row;
		gap: 1.5rem;
	}

	.article-stack {
		position: relative;
		width: 160px;
		height: 160px;
		overflow-y: auto;
		scroll-snap-type: y mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.article-stack::-webkit-scrollbar {
		display: none;
	}

	.article-stack-layer-2,
	.article-stack-layer-3 {
		display: none;
	}

	.article-stack {
		padding: 0;
	}

	.article-card {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: 100%;
		min-height: 160px;
		box-shadow: 4px 4px 0 var(--text);
		scroll-snap-align: start;
	}

	.article-card-header {
		padding: 0.5rem 0.75rem;
	}

	.article-card-header::after {
		font-size: 0.75rem;
	}

	.article-card-content {
		padding: 0.75rem;
	}

	.article-title {
		font-size: 0.9375rem;
	}

	/* Cases Stack: Adjust stacked variant for tablet */
	.cases-stack--stacked {
		max-width: 100%;
		padding-right: 40px;
		padding-bottom: 40px;
	}

	.cases-stack--stacked .case-card {
		width: calc(100% - 40px);
		height: calc(100% - 40px);
	}

	.cases-stack--stacked .case-card[data-position="1"] {
		box-shadow: 6px 6px 0 var(--text);
	}

	/* Condensed state */
	.cases-stack--stacked .case-card[data-position="2"] {
		transform: translate(5px, 5px);
	}

	.cases-stack--stacked .case-card[data-position="3"] {
		transform: translate(10px, 10px);
	}

	.cases-stack--stacked .case-card[data-position="4"] {
		transform: translate(15px, 15px);
	}

	/* Expanded on hover */
	.cases-stack--stacked:hover .case-card[data-position="2"] {
		transform: translate(12px, 12px);
	}

	.cases-stack--stacked:hover .case-card[data-position="3"] {
		transform: translate(24px, 24px);
	}

	.cases-stack--stacked:hover .case-card[data-position="4"] {
		transform: translate(36px, 36px);
	}

	/* Case Studies: Single column */
	.case-studies-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.case-study-item,
	.case-study-item-alt {
		grid-template-columns: 100px 1fr;
	}

	.case-study-frame {
		width: 100px;
		height: 100px;
	}

	.case-study-item-alt .case-study-info {
		text-align: left;
	}

	/* Dispatch: Stack cards */
	.dispatch-grid {
		grid-template-columns: 1fr;
	}

	.dispatch-card-featured {
		grid-row: auto;
		min-height: 280px;
	}

	/* Work carousel */
	.work-carousel {
		margin: 0 -1.5rem;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.work-card {
		width: clamp(240px, 75vw, 300px);
	}
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
	.section-cases,
	.section-dispatch,
	.section-dispatch-hybrid,
	.section-voices,
	.section-work,
	.section-case-studies {
		padding: 2.5rem 0;
	}

	.cases-layout,
	.dispatch-layout,
	.dispatch-hybrid-layout,
	.voices-layout,
	.work-layout,
	.case-studies-layout {
		padding: 0 1.25rem;
	}

	/* Hybrid Dispatch: Mobile - Three equal rows, single column with vertical scroll */
	.dispatch-hybrid-header {
		margin-bottom: 1.5rem;
	}

	.dispatch-hybrid-grid {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		gap: 1rem;
	}

	/* Cases stack - Full width vertical scroll */
	.dispatch-hybrid-grid .cases-stack {
		position: relative;
		display: block;
		width: 100%;
		height: 200px;
		max-width: none;
		aspect-ratio: auto;
		padding: 0;
		margin: 0;
		overflow-y: auto;
		overflow-x: hidden;
		scroll-snap-type: y mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.dispatch-hybrid-grid .cases-stack::-webkit-scrollbar {
		display: none;
	}

	/* Scroll shadow indicators for mobile - shows more content exists */
	.dispatch-hybrid-grid .cases-stack::before,
	.dispatch-hybrid-grid .cases-stack::after {
		content: '';
		position: sticky;
		left: 0;
		right: 0;
		height: 24px;
		pointer-events: none;
		z-index: 10;
		opacity: 0.6;
	}

	.dispatch-hybrid-grid .cases-stack::before {
		top: 0;
		background: linear-gradient(to bottom, var(--background), transparent);
	}

	.dispatch-hybrid-grid .cases-stack::after {
		bottom: 0;
		background: linear-gradient(to top, var(--background), transparent);
	}

	.dispatch-hybrid-grid .case-card {
		position: relative;
		display: flex;
		flex-direction: row;
		flex: 0 0 auto;
		width: 100%;
		height: 100%;
		min-height: 200px;
		transform: none !important;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		box-shadow: 4px 4px 0 var(--text);
	}

	.dispatch-hybrid-grid .case-card[data-position] {
		transform: none !important;
		z-index: 1;
	}

	.dispatch-hybrid-grid .case-card-visual {
		width: 40%;
		height: 100%;
	}

	.dispatch-hybrid-grid .case-card-body {
		width: 60%;
		padding: 1rem;
		justify-content: center;
	}

	.dispatch-hybrid-grid .case-card-title {
		font-size: 1rem;
	}

	.dispatch-hybrid-grid .case-card-desc {
		font-size: 0.75rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.dispatch-hybrid-grid .case-card-tag {
		font-size: 0.5rem;
	}

	/* Article stacks - Each becomes a row */
	.article-stacks {
		display: contents;
	}

	.article-stack {
		position: relative;
		width: 100%;
		height: 200px;
		padding: 0;
		overflow-y: auto;
		scroll-snap-type: y mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.article-stack::-webkit-scrollbar {
		display: none;
	}

	/* Scroll shadow indicators for article stacks */
	.article-stack::before,
	.article-stack::after {
		content: '';
		position: sticky;
		left: 0;
		right: 0;
		height: 20px;
		pointer-events: none;
		z-index: 10;
		opacity: 0.6;
	}

	.article-stack::before {
		top: 0;
		background: linear-gradient(to bottom, var(--background), transparent);
	}

	.article-stack::after {
		bottom: 0;
		background: linear-gradient(to top, var(--background), transparent);
	}

	.article-stack-layer-2,
	.article-stack-layer-3 {
		display: none;
	}

	.article-title {
		font-size: 1rem;
	}

	.article-card {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: 100%;
		min-height: 200px;
		box-shadow: 4px 4px 0 var(--text);
		scroll-snap-align: start;
		flex-direction: row;
		align-items: stretch;
	}

	.article-card-header {
		padding: 0.75rem;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		transform: rotate(180deg);
	}

	.article-card-header::after {
		display: none;
	}

	.article-card-content {
		flex: 1;
		padding: 1rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.5rem;
	}

	.article-category {
		font-size: 0.5rem;
	}

	.article-meta {
		font-size: 0.625rem;
	}

	.cases-header,
	.dispatch-header,
	.voices-header,
	.work-header,
	.case-studies-header {
		margin-bottom: 1.5rem;
	}

	/* Cases Stack: Mobile adjustments for stacked variant */
	.cases-stack--stacked {
		max-width: 300px;
		margin-bottom: 2rem;
		padding-right: 30px;
		padding-bottom: 30px;
	}

	.cases-stack--stacked .case-card {
		width: calc(100% - 30px);
		height: calc(100% - 30px);
	}

	.cases-stack--stacked .case-card[data-position="1"] {
		box-shadow: 4px 4px 0 var(--text);
	}

	/* Condensed state */
	.cases-stack--stacked .case-card[data-position="2"] {
		transform: translate(4px, 4px);
	}

	.cases-stack--stacked .case-card[data-position="3"] {
		transform: translate(8px, 8px);
	}

	.cases-stack--stacked .case-card[data-position="4"] {
		transform: translate(12px, 12px);
	}

	/* Expanded on hover/touch */
	.cases-stack--stacked:hover .case-card[data-position="2"] {
		transform: translate(10px, 10px);
	}

	.cases-stack--stacked:hover .case-card[data-position="3"] {
		transform: translate(20px, 20px);
	}

	.cases-stack--stacked:hover .case-card[data-position="4"] {
		transform: translate(30px, 30px);
	}

	.case-card-body {
		padding: 0.75rem 1rem;
	}

	.case-card-title {
		font-size: 1rem;
	}

	.case-card-desc {
		display: none;
	}

	/* Case studies */
	.case-study-item,
	.case-study-item-alt {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.case-study-frame {
		width: 100%;
		height: 120px;
	}

	/* Dispatch */
	.dispatch-card {
		padding: 1.25rem;
	}

	.dispatch-card-featured {
		min-height: 220px;
	}

	.dispatch-title {
		font-size: 1rem;
	}

	.dispatch-card-featured .dispatch-title {
		font-size: 1.25rem;
	}

	/* Voices CTA */
	.voices-cta {
		padding-top: 1.5rem;
	}

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

	.voices-cta-link {
		padding: 0.875rem 1.25rem;
		font-size: 1rem;
	}

	/* Work carousel */
	.work-carousel {
		margin: 0 -1.25rem;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
		gap: 1rem;
	}

	.work-card {
		width: clamp(220px, 80vw, 280px);
	}

	.work-card-content {
		padding: 1rem;
	}

}

/* Small Mobile (max-width: 360px) */
@media (max-width: 360px) {
	.cases-layout,
	.dispatch-layout,
	.voices-layout,
	.work-layout,
	.case-studies-layout {
		padding: 0 1rem;
	}

	.case-card-body,
	.dispatch-card {
		padding: 1rem;
	}

	.work-carousel {
		margin: 0 -1rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* ==========================================================================
   TOUCH DEVICE OVERRIDES (Desktop touch only - tablet/mobile use scroll)
   ========================================================================== */

/* Touch devices at desktop size - keep expanded stack */
@media (hover: none) and (min-width: 769px) {
	.cases-stack--stacked .case-card[data-position="2"] {
		transform: translate(14px, 14px);
	}

	.cases-stack--stacked .case-card[data-position="3"] {
		transform: translate(28px, 28px);
	}

	.cases-stack--stacked .case-card[data-position="4"] {
		transform: translate(42px, 42px);
	}

	.cases-stack--stacked .case-card:not([data-position="1"]) {
		box-shadow: 3px 3px 0 var(--text-muted);
	}

	.article-card {
		box-shadow: 5px 5px 0 var(--text);
	}

	.article-stack-layer-2 {
		transform: translate(6px, 6px);
	}

	.article-stack-layer-3 {
		transform: translate(14px, 14px);
	}
}