/**
 * Vigilis Hero 2026
 *
 * BEM namespace: .vig-hero-2026__*
 * Canonical source: docs/mockups/homepage-2026-05/styles.css (.vg-hero* —
 * multiple passes across the file; last-definition wins, consolidated here).
 *
 * Visual: full-bleed dark hero with video background (desktop) / poster
 * image (mobile <=640px), large bold rotating headline, sub paragraph,
 * primary + secondary CTA, 3-cell proof rail, rotation dots (when
 * multiple variants), and a vertical scroll cue.
 *
 * Hero is ABOVE the fold — no content-visibility hint here.
 */

/* ------------------------------------------------------------------ */
/* Section root                                                         */
/* ------------------------------------------------------------------ */
.vig-hero-2026 {
	position: relative;
	/* Full-viewport hero on desktop so the stat bar sits below the fold
	   on initial load. Cap raised from mockup's 880px to 1100px to leave
	   breathing room on tall (1440px+) screens without going absurd. */
	min-height: 100vh;
	height: 100vh;
	max-height: 1100px;
	color: #fff;
	display: flex;
	flex-direction: column;
	/* padding-top bumped from mockup's 140 → 180 so the locator/tagline
	   eyebrow row sits a comfortable distance below the sticky header
	   instead of crowding against it. */
	padding: 180px 32px 0;
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Background — video (desktop) + poster <img> (mobile)                 */
/* ------------------------------------------------------------------ */
.vig-hero-2026__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.vig-hero-2026__bg-poster,
.vig-hero-2026__bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.vig-hero-2026__bg-poster {
	filter: saturate(105%) contrast(102%);
}

/* Desktop: the poster stays visible UNDER the video (it's the earlier
   sibling, so the video paints over it once frames arrive). This gives
   an instant background paint while view.js attaches the mp4 src and
   the stream buffers — and IS the background under
   prefers-reduced-motion, where the video is never loaded. */

/* Mobile (<=640px): hide the video, keep the poster. view.js also never
   attaches the video src below 641px, so the mp4 is not downloaded —
   this rule is belt-and-braces for the no-JS case. */
@media (max-width: 640px) {
	.vig-hero-2026__bg-video {
		display: none;
	}
}

.vig-hero-2026__overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 80% 0%, rgba(6, 55, 21, 0.35) 0%, rgba(6, 55, 21, 0.85) 100%),
		linear-gradient(180deg, rgba(6, 28, 14, 0.55) 0%, rgba(6, 28, 14, 0.55) 50%, rgba(6, 28, 14, 0.9) 100%);
	pointer-events: none;
}

.vig-hero-2026__noise {
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
	pointer-events: none;
	mix-blend-mode: overlay;
}

/* ------------------------------------------------------------------ */
/* Inner shell                                                          */
/* ------------------------------------------------------------------ */
.vig-hero-2026__inner {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-bottom: 32px;
}

/* ------------------------------------------------------------------ */
/* Top row — locator + top-right tagline                                */
/* ------------------------------------------------------------------ */
.vig-hero-2026__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px;
	flex-wrap: wrap;
}

.vig-hero-2026__locator {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 540px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}

.vig-hero-2026__index {
	display: block;
	text-align: right;
	max-width: 220px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	font-feature-settings: "tnum";
}

.vig-hero-2026__index span {
	display: inline-block;
}

@media (max-width: 900px) {
	.vig-hero-2026__index {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Center — per-element stacks (headlines / subs / proofs) + static CTA */
/* ------------------------------------------------------------------ */
.vig-hero-2026__center {
	position: relative;
	display: block;
	margin-top: auto;
	/* Explicit gap between the locator/eyebrow row and the headline so
	   the headline isn't visually crowded against the top regardless of
	   how much spare space `margin-top: auto` ends up distributing. */
	padding-top: 80px;
	padding-bottom: 56px;
}

/* Container sizes to the active variant only — inactive variants are
   removed from layout entirely via display:none. */
.vig-hero-2026__headlines,
.vig-hero-2026__subs,
.vig-hero-2026__proofs {
	display: block;
	position: relative;
}

.vig-hero-2026__headline,
.vig-hero-2026__sub,
.vig-hero-2026__proof {
	display: none;
}

.vig-hero-2026__headline.is-active,
.vig-hero-2026__sub.is-active {
	display: block;
}

/* Proof rail needs its own grid layout when active. */
.vig-hero-2026__proof.is-active {
	display: grid;
}

.vig-hero-2026__headlines {
	/* This wrapper is the page's single H1; the per-variant spans inside it
	   are the visible headlines. Reset UA heading styles so the wrapper adds no
	   font sizing/weight/margins of its own. */
	margin: 0 0 28px;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.vig-hero-2026__headline {
	/* Headline uses system-ui at 800 weight to match the canonical mockup's
	   rendering (mockup tries Lexend 800, errors, falls back to system-ui).
	   Theme self-hosts Lexend at 300/400/500/700 only (no 800). If we used
	   the inherited Lexend stack, the browser would faux-bold Lexend 700
	   into 800 with wider character widths, breaking the 2-line wrap that
	   the mockup achieves at 1440px (compresses to 3 lines + overflows the
	   88vh hero, killing the flex space-between bottom-push layout). */
	font-family: system-ui, -apple-system, sans-serif;
	font-synthesis: none;
	/* Mockup uses clamp(48px, 8.2vw, 132px) which gives 118px at 1440px
	   viewport — too large for the 4-line headline of variant 2 once the
	   hero is locked to 100vh, pushing the proof rail + CTAs into the
	   clipped zone. Capped at 100px @ 1440 (industry-standard display
	   scale) so all 3 variants fit cleanly. Mobile min keeps a 44px
	   floor so small phones don't get a tiny headline. */
	font-size: clamp(44px, 7vw, 100px);
	font-weight: 800;
	/* Bumped from mockup's 0.92 to 1.05. On multi-line headlines like
	   variant 2 ("Soil biodegradable / protection that works."), the dot
	   on the "i" in the lower line was clipping the descenders of the
	   line above. 1.05 is a typographic-safe display headline value. */
	line-height: 1.05;
	letter-spacing: -0.035em;
	margin: 0;
	max-width: 1100px;
	text-wrap: balance;
	color: #fff;
}

.vig-hero-2026__headline em {
	color: var(--color-secondary-500);
	font-style: italic;
	font-weight: 800;
}

.vig-hero-2026__bottom {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: end;
	gap: 48px;
}

.vig-hero-2026__bottom-lead {
	min-width: 0;
}

.vig-hero-2026__sub {
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 300;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	max-width: 540px;
	margin: 0;
}

.vig-hero-2026__sub p {
	margin: 0 0 0.6em;
}

.vig-hero-2026__sub p:last-child {
	margin-bottom: 0;
}

.vig-hero-2026__sub strong {
	color: #fff;
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* CTA row — rendered ONCE outside the slide loop (constant across      */
/* variants per mockup). Sits in normal flow under the slide stack;     */
/* slides reserve space via __bottom-lead padding-bottom so the visual  */
/* relationship matches the mockup (sub above CTAs above-ish proof row).*/
/* ------------------------------------------------------------------ */
.vig-hero-2026__cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 28px;
}

.vig-hero-2026__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 14px 26px;
	min-height: 48px;
	border-radius: 999px;
	text-decoration: none;
	transition: background 180ms ease-out, color 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}

.vig-hero-2026__btn--primary {
	background: var(--color-secondary-500);
	color: #1a0d05;
}

.vig-hero-2026__btn--primary:hover,
.vig-hero-2026__btn--primary:focus-visible {
	background: var(--color-secondary-700, #c66509);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.vig-hero-2026__btn--outline-light {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.vig-hero-2026__btn--outline-light:hover,
.vig-hero-2026__btn--outline-light:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------------ */
/* Proof rail                                                           */
/* ------------------------------------------------------------------ */
/* Inactive proofs keep `display: none` from the toggle rules above;    */
/* only the .is-active proof becomes a grid (set higher in the file).   */
/* This block sets ONLY the grid template + decoration so it doesn't    */
/* override the display toggle via same-specificity later-wins cascade. */
.vig-hero-2026__proof {
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 36px;
	/* Note: `min-width: 0` is intentionally NOT set here on desktop so the
	   grid's default `min-content` sizing lets cells grow to fit long
	   numbers like "Complete" or "Worldwide". Matches the canonical mockup,
	   which only adds `min-width: 0` at <=700px to allow mobile reflow. */
}

.vig-hero-2026__proof-cell {
	padding-right: 32px;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.vig-hero-2026__proof-cell + .vig-hero-2026__proof-cell {
	padding-left: 32px;
}

.vig-hero-2026__proof-cell:last-child {
	border-right: 0;
	padding-right: 0;
}

.vig-hero-2026__proof-num {
	font-size: 36px;
	font-weight: 700;
	color: var(--color-secondary-500);
	line-height: 1;
	letter-spacing: -0.02em;
	font-feature-settings: "tnum";
}

.vig-hero-2026__proof-label {
	font-size: 12px;
	font-weight: 500;
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.86);
	letter-spacing: 0.04em;
}

.vig-hero-2026__proof-sub {
	font-size: 11px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 4px;
}

/* Clamp proof cells at narrow widths so text never crops. */
@media (max-width: 1100px) {
	.vig-hero-2026__proof-num   { font-size: clamp(22px, 3.4vw, 32px); }
	.vig-hero-2026__proof-label { font-size: 11px; }
	.vig-hero-2026__proof-sub   { font-size: 10px; }
	.vig-hero-2026__proof-cell  { padding-right: 18px; }
	.vig-hero-2026__proof-cell + .vig-hero-2026__proof-cell { padding-left: 18px; }
}

@media (max-width: 760px) {
	.vig-hero-2026__proof {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.vig-hero-2026__proof-cell {
		padding: 14px 0 0 0;
		border-right: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.vig-hero-2026__proof-cell + .vig-hero-2026__proof-cell {
		padding-left: 0;
	}

	.vig-hero-2026__proof-cell:first-child {
		border-top: 0;
		padding-top: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Rotation dots                                                        */
/* ------------------------------------------------------------------ */
.vig-hero-2026__rotate-dots {
	position: absolute;
	bottom: 36px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 12px;
}

.vig-hero-2026__rotate-dot {
	width: 24px;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.28);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background 280ms ease-out, width 320ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

.vig-hero-2026__rotate-dot:hover {
	background: rgba(255, 255, 255, 0.5);
}

.vig-hero-2026__rotate-dot:focus-visible {
	outline: 2px solid var(--color-secondary-500);
	outline-offset: 4px;
}

.vig-hero-2026__rotate-dot.is-active {
	background: var(--color-secondary-500);
	width: 40px;
}

/* ------------------------------------------------------------------ */
/* Responsive (overall)                                                 */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.vig-hero-2026 {
		min-height: 92vh;
		height: auto;
		max-height: none;
		padding-top: 160px;
	}

	.vig-hero-2026__bottom {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.vig-hero-2026 {
		padding: 150px 20px 0;
	}

	.vig-hero-2026__top {
		margin-bottom: 32px;
	}

	.vig-hero-2026__center {
		padding-bottom: 32px;
		min-width: 0;
	}

	.vig-hero-2026__headlines {
		margin-bottom: 8px;
	}

	.vig-hero-2026__headline {
		margin: 0;
		line-height: 1;
	}

	.vig-hero-2026__bottom {
		gap: 24px;
		min-width: 0;
	}

	.vig-hero-2026__bottom-lead {
		min-width: 0;
	}

	.vig-hero-2026__cta {
		margin-top: 16px;
		flex-direction: column;
		align-items: stretch;
	}

	.vig-hero-2026__cta .vig-hero-2026__btn {
		width: 100%;
		justify-content: center;
	}

	.vig-hero-2026__proof,
	.vig-hero-2026__proof-cell {
		min-width: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Slide-in animation (only when motion is allowed)                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.vig-hero-2026__headline.is-active,
	.vig-hero-2026__sub.is-active,
	.vig-hero-2026__proof.is-active {
		animation: vig-hero-2026-slide 600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.vig-hero-2026__sub.is-active {
		animation-delay: 80ms;
	}

	.vig-hero-2026__proof.is-active {
		animation-delay: 160ms;
	}

	@keyframes vig-hero-2026-slide {
		0%   { opacity: 0; transform: translateX(48px); }
		100% { opacity: 1; transform: translateX(0); }
	}
}