/* Homepage-only layout */

.ccu-hero { padding-block: var(--ccu-space-32) var(--ccu-space-24); overflow: hidden; }
.ccu-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: var(--ccu-space-16);
}
.ccu-hero h1 { color: var(--ccu-white); margin-bottom: var(--ccu-space-6); }
.ccu-hero__grid > div:first-child > p { color: var(--ccu-steel-mist); font-size: 1.125rem; }
.ccu-hero__actions { display: flex; gap: var(--ccu-space-4); margin-top: var(--ccu-space-8); flex-wrap: wrap; }
.ccu-hero__media {
	background: #000;
	border-radius: var(--ccu-radius-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ccu-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }

.ccu-valueprops {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ccu-space-6);
}
.ccu-valueprops .ccu-eyebrow { color: var(--ccu-steel); }
.ccu-valueprops p:last-child { margin-bottom: 0; }

.ccu-brands__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ccu-space-6);
	margin-top: var(--ccu-space-8);
}
.ccu-brand-card {
	display: block;
	text-decoration: none !important;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ccu-brand-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(28,26,23,0.1); }
.ccu-brand-card h3 { font-size: var(--ccu-size-h3); margin-top: var(--ccu-space-2); }
.ccu-brand-card--flagship { border-color: var(--ccu-copper); border-width: 2px; }
.ccu-link-arrow { font-weight: 600; color: var(--ccu-copper-dark); }

.ccu-brand-card__media {
	background: #000;
	border-radius: calc(var(--ccu-radius-md) - 4px);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	margin-bottom: var(--ccu-space-4);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ccu-brand-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ccu-formats__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ccu-space-12);
}
.ccu-formats__grid > div {
	padding: var(--ccu-space-8);
	border: var(--ccu-border);
	border-radius: var(--ccu-radius-md);
	background: var(--ccu-white);
}
.ccu-format-card__media {
	background: #000;
	border-radius: calc(var(--ccu-radius-md) - 4px);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--ccu-space-6);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ccu-format-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }

.ccu-cta-band__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ccu-space-8);
	flex-wrap: wrap;
}
.ccu-cta-band__row h2 { margin-bottom: var(--ccu-space-2); }
.ccu-cta-band__row p { color: var(--ccu-steel-mist); margin: 0; }

@media (max-width: 780px) {
	.ccu-valueprops,
	.ccu-brands__grid,
	.ccu-formats__grid,
	.ccu-hero__grid { grid-template-columns: 1fr; }
	.ccu-hero__grid { gap: var(--ccu-space-8); }
	.ccu-hero__media { order: -1; aspect-ratio: 16 / 10; }
}