/* Hero */
.hero {
	min-height: 110vh;
	flex-direction: column;
	gap: 24px;
	text-align: center;
	justify-content: center;
	padding-top: 0;
}

.hero-tag {
	font-size: 11px;
	letter-spacing: 4px;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(30px);
	color: var(--color-label, rgba(210, 230, 160, 0.85));
	font-weight: 500;
	text-shadow: 0 1px 16px rgba(0,0,0,0.5);
	will-change: transform, opacity;
}

.hero h1 {
	font-family: 'Playfair Display', serif;
	font-size: clamp(48px, 8vw, 110px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -1px;
	opacity: 0;
	transform: translateY(40px);
	color: var(--color-heading, #f8fcf0);
	text-shadow: 0 2px 30px rgba(0,0,0,0.6), 0 0px 80px rgba(0,0,0,0.4);
	margin: 12px 0;
	will-change: transform, opacity;
}

.hero h1 em {
	font-style: italic;
	color: var(--color-accent, rgba(230, 245, 120, 0.95));
	text-shadow: 0 0 30px rgba(230, 245, 120, 0.25), 0 0 60px rgba(230, 245, 120, 0.1);
}

.hero-sub {
	font-size: clamp(14px, 1.5vw, 18px);
	line-height: 1.7;
	max-width: 520px;
	opacity: 0;
	transform: translateY(30px);
	color: var(--color-body, rgba(215, 230, 190, 0.7));
	font-weight: 300;
	will-change: transform, opacity;
}

.wind-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 24px;
	border: 1px solid rgba(180, 210, 140, 0.25);
	border-radius: 32px;
	background: rgba(15, 25, 15, 0.35);
	backdrop-filter: blur(12px);
	color: var(--color-accent, rgba(230, 245, 120, 0.9));
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.4s;
	opacity: 0;
	transform: translateY(20px);
	will-change: transform, opacity;
}

.wind-btn:hover {
	background: rgba(40, 65, 40, 0.5);
	border-color: rgba(180, 210, 140, 0.5);
	transform: translateY(-2px) !important;
}

.wind-btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.scroll-hint {
	position: absolute;
	bottom: 12vh;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	opacity: 0;
	will-change: transform, opacity;
}

.scroll-hint.revealed {
	opacity: 1 !important;
	transform: none !important;
}

.scroll-hint span {
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--color-label, rgba(230, 245, 160, 0.9));
	text-shadow: 0 1px 12px rgba(0,0,0,0.7), 0 0 24px rgba(0,0,0,0.5);
}

.scroll-line {
	width: 1px;
	height: 40px;
	background: linear-gradient(to bottom, rgba(180, 210, 160, 0.5), transparent);
	animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
	0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
	50% { opacity: 1; transform: scaleY(1); }
}

/* Manifesto / About */
.manifesto {
	flex-direction: column;
	gap: 40px;
	text-align: center;
}

.manifesto-label {
	font-size: 12px;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: rgba(230, 245, 120, 1);
	opacity: 0;
	transform: translateY(20px);
	text-shadow: 0 0 20px rgba(230, 245, 120, 0.4), 0 1px 12px rgba(0,0,0,0.5);
	font-weight: 600;
	will-change: transform, opacity;
}

.manifesto h2 {
	font-family: 'Playfair Display', serif;
	font-size: clamp(22px, 3.2vw, 44px);
	font-weight: 400;
	line-height: 1.4;
	max-width: 800px;
	opacity: 0;
	transform: translateY(40px);
	color: var(--color-heading, rgba(245, 250, 235, 0.97));
	text-shadow: 0 2px 30px rgba(0,0,0,0.7), 0 0 60px rgba(0,0,0,0.4);
}

.manifesto h2 .brand-name {
	font-size: 1.25em;
}

.manifesto h2 em {
	font-style: italic;
	color: var(--color-accent, rgba(230, 245, 120, 0.95));
	text-shadow: 0 0 25px rgba(230, 245, 120, 0.2), 0 0 50px rgba(230, 245, 120, 0.08);
}

/* Pillars / Portfolio */
.pillars {
	flex-direction: column;
	gap: 32px;
	min-height: 100vh;
	padding: 40px 40px;
	content-visibility: auto;
	contain-intrinsic-size: 0 100vh;
}

.pillars-header {
	text-align: center;
	opacity: 0;
	transform: translateY(20px);
	will-change: transform, opacity;
}

.pillars-header span {
	font-size: 12px;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: rgba(230, 245, 120, 1);
	text-shadow: 0 0 20px rgba(230, 245, 120, 0.4), 0 1px 12px rgba(0,0,0,0.5);
	font-weight: 600;
}

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 170px;
	gap: 8px;
	max-width: 704px;
	width: 100%;
}

.portfolio-item {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	opacity: 0;
	transform: translateY(40px);
	background: rgba(10, 18, 10, 0.55);
	border: 1px solid rgba(140, 180, 120, 0.12);
	contain: layout style paint;
	will-change: transform, opacity;
}

/* Rectangle collage: 4col x 3row - 6 items */
.portfolio-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
.portfolio-item:nth-child(2) { grid-column: 3; grid-row: 1 / 3; }
.portfolio-item:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
.portfolio-item:nth-child(4) { grid-column: 4; grid-row: 1 / 3; }
.portfolio-item:nth-child(5) { grid-column: 1 / 3; grid-row: 3; }
.portfolio-item:nth-child(6) { grid-column: 3 / 5; grid-row: 3; }

.portfolio-item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.portfolio-item:hover video {
	transform: scale(1.05);
}

.portfolio-view-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 28px;
	border: 1px solid rgba(180, 210, 140, 0.25);
	border-radius: 32px;
	background: rgba(15, 25, 15, 0.35);
	backdrop-filter: blur(12px);
	color: var(--color-accent, rgba(230, 245, 120, 0.9));
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.4s;
	text-decoration: none;
	margin-top: 12px;
}

.portfolio-view-more:hover {
	background: rgba(40, 65, 40, 0.5);
	border-color: rgba(180, 210, 140, 0.5);
	transform: translateY(-2px);
}

/* Stats / Brands */
.stats-section {
	flex-direction: column;
	gap: 30px;
	text-align: center;
	content-visibility: auto;
	contain-intrinsic-size: 0 60vh;
}

.stats-label {
	font-size: 12px;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: rgba(230, 245, 120, 1);
	opacity: 0;
	transform: translateY(20px);
	text-shadow: 0 0 20px rgba(230, 245, 120, 0.4), 0 1px 12px rgba(0,0,0,0.5);
	will-change: transform, opacity;
	font-weight: 600;
}

.brands-grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	align-items: center;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.brands-track {
	display: flex;
	gap: 6px;
	align-items: center;
	animation: marqueeScroll 30s linear infinite;
	width: max-content;
	will-change: transform;
	transform: translateZ(0);
}

@keyframes marqueeScroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.brands-track:hover {
	animation-play-state: paused;
}

.brand-logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 340px;
	height: 220px;
	padding: 28px 52px;
	opacity: 0.8;
	transition: opacity 0.3s;
	will-change: transform;
	transform: translateZ(0);
}

.brand-logo-item:hover {
	opacity: 1;
}

.brand-logo-item img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: brightness(0.95) contrast(1.05);
	transition: filter 0.3s, transform 0.3s;
}

.brand-logo-item:hover img {
	filter: brightness(1.15) contrast(1.1);
	transform: scale(1.05);
}

.brands-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 28px;
	border: 1px solid rgba(180, 210, 140, 0.25);
	border-radius: 32px;
	background: rgba(15, 25, 15, 0.35);
	backdrop-filter: blur(12px);
	color: var(--color-accent, rgba(230, 245, 120, 0.9));
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.4s;
	text-decoration: none;
}

.brands-more-btn:hover {
	background: rgba(40, 65, 40, 0.5);
	border-color: rgba(180, 210, 140, 0.5);
	transform: translateY(-2px);
}

/* Quote */
.quote-section {
	flex-direction: column !important;
	gap: 20px;
	text-align: center;
	min-height: 80vh;
	content-visibility: auto;
	contain-intrinsic-size: 0 80vh;
}

.quote-section blockquote {
	font-family: 'Playfair Display', serif;
	font-size: clamp(22px, 3.5vw, 42px);
	font-weight: 400;
	font-style: italic;
	line-height: 1.4;
	max-width: 720px;
	color: var(--color-heading, rgba(250, 255, 240, 0.95));
	opacity: 0;
	transform: translateY(40px);
	text-shadow: 0 2px 30px rgba(0,0,0,0.7), 0 0 60px rgba(0,0,0,0.4);
}

.quote-attr {
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-label, rgba(210, 230, 160, 0.45));
	opacity: 0;
	transform: translateY(20px);
}

/* CTA */
.cta-section {
	flex-direction: column;
	gap: 30px;
	text-align: center;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 0 40px;
	margin-bottom: 0;
	content-visibility: auto;
	contain-intrinsic-size: 0 100vh;
}

.cta-section h2 {
	font-family: 'Playfair Display', serif;
	font-size: clamp(32px, 5vw, 60px);
	font-weight: 400;
	line-height: 1.2;
	opacity: 0;
	transform: translateY(30px);
	text-align: center;
}

.cta-section h2 em {
	font-style: italic;
	color: var(--color-accent, rgba(235, 250, 130, 1));
	text-shadow: 0 0 30px rgba(230, 245, 120, 0.3), 0 0 60px rgba(230, 245, 120, 0.12);
}

.cta-sub {
	font-size: 15px;
	color: var(--color-body, rgba(215, 230, 190, 0.6));
	max-width: 420px;
	line-height: 1.7;
	font-weight: 300;
	opacity: 0;
	transform: translateY(20px);
}

.cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 36px;
	border: 1px solid rgba(180, 210, 140, 0.35);
	border-radius: 40px;
	background: rgba(30, 50, 30, 0.4);
	color: var(--color-accent, rgba(230, 245, 120, 0.95));
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.4s;
	opacity: 0;
	transform: translateY(20px);
	backdrop-filter: blur(10px);
}

.cta-btn:hover {
	background: rgba(50, 80, 50, 0.5);
	border-color: rgba(180, 210, 140, 0.6);
	transform: translateY(-2px) !important;
}

/* Footer section (inside scroll-container, hidden) */
.footer {
	min-height: 0;
	padding: 0;
	display: none;
}