/*
 * Section-level layout primitives + per-pattern styles.
 *
 * Order:
 *   • Generic .liv-section primitives
 *   • Hero
 *   • Categories
 *   • Featured rigs / rig grid
 *   • Editorial split + stats strip
 *   • Build teaser + stepper preview
 *   • Lifestyle gallery
 *   • Trust strip
 *   • CTA split (giveaway + newsletter)
 */

/* ─── Generic section ──────────────────────────────────────── */

.liv-section {
	padding-block: clamp(3rem, 8vw, 8rem);
}
.liv-section--dark   { background: var(--liv-ink-800); color: var(--liv-paper); }
.liv-section--darker { background: var(--liv-ink-900); color: var(--liv-paper); }
.liv-section--paper  { background: var(--liv-paper);   color: var(--liv-ink-900); }
.liv-section--soft   { background: var(--liv-paper-soft); color: var(--liv-ink-900); }
/* The original .liv-section--soft was tuned for the thin category-chips band;
 * scope that tighter padding to just .liv-categories so other sections can
 * opt into the soft background at the standard section padding. */
.liv-categories.liv-section--soft { padding-block: 1.5rem; }

.liv-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-block-end: var(--wp--preset--spacing--lg);
	flex-wrap: wrap;
}
.liv-section__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--5xl);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0;
}
.liv-section__lead {
	color: var(--liv-ink-200);
	max-width: 60ch;
}

/* ─── Section Mark — green bar + eyebrow opener ─────────────── */

/* A repeating editorial mark above each non-hero section's eyebrow.
 * The 64×2px leaf bar above the existing eyebrow establishes a green
 * rhythm down the page without competing with the headline. */
.liv-section-mark {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}
.liv-section-mark__bar {
	display: block;
	width: 64px;
	height: 2px;
	background: var(--liv-leaf-500);
	border-radius: 1px;
}

/* ─── Section Rule — half-width green divider ───────────────── */

/* Editorial chapter-break: a thin gradient line anchored at the left
 * gutter that fades out around 50% of the viewport width. Sits as the
 * first child of selected sections to mark the transition. */
.liv-section-rule {
	display: block;
	width: 50vw;
	max-width: 600px;
	height: 1px;
	margin: 0 0 clamp(2rem, 5vw, 4rem) var(--liv-gutter);
	background: linear-gradient(
		90deg,
		var(--liv-leaf-500) 0%,
		var(--liv-leaf-500) 55%,
		transparent 100%
	);
	border: 0;
}
/* When the rule is the first child of a padded .liv-section, pull it up
 * so it sits flush with the section's top edge rather than below the
 * section's top padding. */
.liv-section > .liv-section-rule:first-child {
	margin-block-start: calc(-1 * clamp(3rem, 8vw, 8rem) + clamp(2rem, 5vw, 4rem));
}

/* ─── Hero slideshow ────────────────────────────────────────── */

.liv-hero {
	position: relative;
	background: var(--liv-ink-800);
	color: var(--liv-paper);
	overflow: hidden;
	height: 100vh;         /* fallback for browsers without svh */
	height: 100svh;        /* small viewport — sits under mobile toolbars without overflow */
	min-height: 600px;     /* don't crush on very short windows */
}

/* Homepage: pull the hero up under the sticky semi-transparent header so
 * the image extends to the top of the viewport. Other pages keep their
 * normal layout (content begins below the solid header). */
body.home .liv-hero {
	margin-top: calc(-1 * var(--liv-header-h, var(--liv-header-total)));
}

.liv-hero__stage {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
	display: block;
}

/* Each slide stacks; active slide fades in over the others. */
.liv-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding-block: clamp(4rem, 10vw, 8rem);
	padding-inline: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--liv-transition-slow), visibility 0s linear var(--liv-transition-slow);
}
.liv-hero__slide[data-active="true"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--liv-transition-slow), visibility 0s;
}

/* Media — a real <picture>/<img> (emitted by render.php) covers the slide.
 * The ink base shows through while it loads and stands alone as the
 * placeholder when a slide has no photo. The decorative per-slide glow/tone
 * now live on .liv-hero__overlay (below) so the photo element stays a clean
 * <img> that can be art-directed, lazy-loaded and LCP-prioritized. Phone vs
 * desktop crop is chosen by <source media> in the markup — no CSS swap. */
.liv-hero__media {
	position: absolute;
	inset: 0;
	background-color: var(--liv-ink-800);
}
.liv-hero__picture {
	position: absolute;
	inset: 0;
	display: block;
}
.liv-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.liv-hero__slide[data-slide-bg="1"],
.liv-hero__slide[data-slide-bg="5"] {
	--slide-glow: radial-gradient(80% 60% at 20% 100%, rgba(151,196,89,0.18), transparent 60%);
	--slide-tone: linear-gradient(135deg, rgba(13,20,15,0.22) 0%, rgba(24,34,26,0.22) 35%, rgba(10,10,10,0.22) 100%);
}
.liv-hero__slide[data-slide-bg="2"],
.liv-hero__slide[data-slide-bg="6"] {
	--slide-glow: radial-gradient(100% 80% at 80% 100%, rgba(91,160,46,0.22), transparent 60%);
	--slide-tone: linear-gradient(135deg, rgba(13,20,16,0.22) 0%, rgba(26,31,21,0.22) 40%, rgba(10,10,10,0.22) 100%);
}
.liv-hero__slide[data-slide-bg="3"],
.liv-hero__slide[data-slide-bg="7"] {
	--slide-glow: radial-gradient(80% 60% at 80% 100%, rgba(151,196,89,0.15), transparent 60%);
	--slide-tone: linear-gradient(135deg, rgba(10,14,11,0.22) 0%, rgba(19,24,20,0.22) 50%, rgba(10,10,10,0.22) 100%);
}
.liv-hero__slide[data-slide-bg="4"],
.liv-hero__slide[data-slide-bg="8"] {
	--slide-glow: radial-gradient(70% 60% at 20% 100%, rgba(151,196,89,0.16), transparent 60%);
	--slide-tone: linear-gradient(135deg, rgba(10,10,10,0.22) 0%, rgba(20,20,20,0.22) 40%, rgba(10,10,10,0.22) 100%);
}

.liv-hero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Legibility scrim, then the per-slide glow/tone beneath it (relocated
	 * here from .liv-hero__media so the photo stays a clean <img>). */
	background:
		linear-gradient(180deg, rgba(10,14,18,0) 30%, rgba(10,14,18,0.42) 78%, rgba(10,14,18,0.62) 100%),
		var(--slide-glow, none),
		var(--slide-tone, none);
}

.liv-hero__inner {
	position: relative;
	width: 100%;
}

/* Ballpark price card — upper-right corner of a slide. Sits below the sticky
   header and above the overlay/copy. Hidden entirely when no price is set. */
.liv-hero__price {
	position: absolute;
	top: calc(var(--liv-header-h, var(--liv-header-total)) + clamp(0.75rem, 1.5vw, 1.5rem));
	right: clamp(1rem, 3vw, 2.5rem);
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.15rem;
	padding: 0.75rem 1.1rem;
	border: 1px solid var(--liv-leaf-500);
	border-radius: 0.5rem;
	background: rgba(10, 14, 18, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
	text-align: right;
	pointer-events: none;
}
.liv-hero__price-amount {
	color: var(--liv-paper);
	font-size: clamp(1.25rem, 2.2vw, 1.875rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.liv-hero__price-note {
	color: var(--liv-leaf-300);
	font-size: clamp(0.625rem, 0.9vw, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Slide 6: price card flips to the upper-LEFT corner (per-slide override). */
.liv-hero__slide[data-slide-bg="6"] .liv-hero__price {
	right: auto;
	left: clamp(1rem, 3vw, 2.5rem);
	align-items: flex-start;
	text-align: left;
}

.liv-hero__headline {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.575rem, 3.85vw, 2.975rem);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.06;
	margin: 0.75rem 0 1.25rem;
	max-width: 18ch;
}
.liv-hero__headline em {
	color: var(--liv-leaf-300);
	font-style: normal;
}
.liv-hero__lead {
	max-width: 52ch;
	color: var(--liv-ink-200);
	font-size: clamp(1rem, 0.9rem + 0.6vw, 1.4375rem);
	line-height: 1.5;
	margin: 0 0 1.5rem;
}
.liv-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

/* Hero primary CTA — larger, confident, ink-black on leaf-green. Tighter
 * letter-spacing (0.12em vs the base 0.18em utility tracking) reads more
 * editorial; a soft drop shadow lifts the button off the photo without the
 * heavy-handed look of a hard shadow; a 2px hover lift + shadow grow keeps
 * the interaction crisp. Scoped to the hero so other site CTAs that share
 * .liv-btn / .liv-btn--lg / .liv-btn--square (featured rigs, build teaser,
 * configurator, etc.) are untouched. inline-flex + white-space: nowrap
 * means the box grows to fit the bumped text — label can't overflow. */
.liv-hero__ctas .liv-btn--lg,
.liv-hero__caption .liv-btn--square {
	color: var(--liv-ink-900);
	letter-spacing: 0.12em;
	box-shadow:
		0 10px 28px -10px rgba(0, 0, 0, 0.55),
		0 1px 2px rgba(0, 0, 0, 0.18);
	transition:
		background-color var(--liv-transition),
		color var(--liv-transition),
		transform var(--liv-transition),
		box-shadow var(--liv-transition);
}
.liv-hero__ctas .liv-btn--lg {
	font-size: clamp(0.9375rem, 0.85rem + 0.45vw, 1.125rem);
	padding: clamp(0.875rem, 0.7rem + 0.8vw, 1.0625rem) clamp(1.5rem, 1rem + 2.4vw, 2.375rem);
	min-height: 52px;
}
.liv-hero__caption .liv-btn--square {
	font-size: 1rem;              /* +45% from 0.6875rem */
	padding: 0.9375rem 2rem;
	min-height: 52px;
}
.liv-hero__ctas .liv-btn--lg:hover,
.liv-hero__ctas .liv-btn--lg:focus-visible,
.liv-hero__caption .liv-btn--square:hover,
.liv-hero__caption .liv-btn--square:focus-visible {
	color: var(--liv-ink-900);
	transform: translateY(-2px);
	box-shadow:
		0 16px 36px -10px rgba(0, 0, 0, 0.65),
		0 2px 4px rgba(0, 0, 0, 0.22);
}
.liv-hero__ctas .liv-btn--lg:active,
.liv-hero__caption .liv-btn--square:active {
	transform: translateY(0);
	box-shadow:
		0 4px 10px -4px rgba(0, 0, 0, 0.45),
		0 1px 1px rgba(0, 0, 0, 0.2);
}

/* Spec strip on product slides. */
.liv-hero__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
	gap: 1.25rem 2.5rem;
	margin: 0 0 1.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255,255,255,0.16);
}
.liv-hero__specs > div { display: flex; flex-direction: column; gap: 0.25rem; }
.liv-hero__specs dt {
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--liv-ink-200);
}
.liv-hero__specs dd { margin: 0; font-size: 1.75rem; color: var(--liv-paper); }

/* Hero eyebrow runs larger than the base utility so it carries over photographic backgrounds. */
.liv-hero .liv-eyebrow {
	font-size: 0.875rem;
	letter-spacing: 0.2em;
}

/* Layered halo for small-text legibility over busy hero backgrounds.
 * Three stacked shadows: a tight drop for crisp edges, a soft halo for
 * separation, and a wide ambient blur that punches through bright photos. */
.liv-hero .liv-eyebrow,
.liv-hero__lead,
.liv-hero__specs dt,
.liv-hero__specs dd,
.liv-hero .liv-btn--link {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.85),
		0 0 8px rgba(0, 0, 0, 0.65),
		0 0 16px rgba(0, 0, 0, 0.4);
}

/* Variant: lifestyle slides emphasize copy. */
.liv-hero__slide--lifestyle .liv-hero__headline {
	font-size: clamp(1.75rem, 4.375vw, 3.5rem);
	max-width: 14ch;
}
.liv-hero__slide--lifestyle .liv-hero__overlay {
	background:
		linear-gradient(180deg, rgba(10,14,18,0.10) 0%, rgba(10,14,18,0) 35%, rgba(10,14,18,0.42) 78%, rgba(10,14,18,0.64) 100%),
		var(--slide-glow, none),
		var(--slide-tone, none);
}

/* Variant: product slides expose specs + use slightly lighter overlay
 * so the unit is more visible. */
.liv-hero__slide--product .liv-hero__overlay {
	background:
		linear-gradient(180deg, rgba(10,14,18,0) 35%, rgba(10,14,18,0.36) 80%, rgba(10,14,18,0.56) 100%),
		var(--slide-glow, none),
		var(--slide-tone, none);
}

/* Variant: video slides — chromeless looping video pinned to the right of
 * the safe area, with the caption taking the left half of the slide as a
 * full-height column (see .liv-hero__slide--video .liv-hero__caption below
 * and the existing .liv-hero__overlay--video horizontal gradient that
 * darkens the left side for caption legibility). */
.liv-hero__media--video {
	background: var(--liv-ink-900, #0a0a0a);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-top: calc(var(--liv-header-h, var(--liv-header-total, 80px)) + 1rem);
	padding-bottom: clamp(5rem, 8vw, 7rem);
	padding-inline: var(--liv-gutter);
}
.liv-hero__video {
	/* Source is 16:9 — lock the player to that ratio so it can scale UP to
	 * fill the safe area. The browser computes height from width via
	 * aspect-ratio, then shrinks both dimensions proportionally if
	 * max-height or max-width would otherwise be exceeded.
	 *
	 * max-width: min(58%, 56rem) reserves the left ~42% of the safe area
	 * for the caption column. With the carousel's `controls` attribute
	 * removed (chromeless), `cursor: pointer` signals that the video is
	 * itself the click target for play/pause. */
	position: relative;
	inset: auto;
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	max-width: min(58%, 56rem);
	max-height: 100%;
	object-fit: contain;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.liv-hero__overlay--video {
	background: linear-gradient(90deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.10) 38%, rgba(0,0,0,0) 62%);
}
.liv-hero__caption {
	position: absolute;
	left: var(--liv-gutter, clamp(1rem, 3vw, 2.5rem));
	bottom: calc(var(--liv-gutter, 2rem) * 2 + 56px);
	width: min(30%, 420px);
	min-width: 240px;
	padding: 1.25rem 1.25rem 1.5rem;
	background: rgba(10, 10, 10, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: var(--r-lg, 8px);
	color: var(--liv-paper);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	z-index: 2;
}
.liv-hero__caption-headline {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	font-weight: 500;
	line-height: 1.15;
	margin: 0;
	color: var(--liv-paper);
}
.liv-hero__caption-body {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--liv-ink-200, rgba(255,255,255,0.85));
	margin: 0;
}
/* Video slides override the small bottom-left caption tile with a
 * full-height left column, vertically centered to match the video on the
 * right. No own backdrop — the existing .liv-hero__overlay--video
 * horizontal gradient already darkens the left side for legibility. */
.liv-hero__slide--video .liv-hero__caption {
	left: var(--liv-gutter);
	top: calc(var(--liv-header-h, var(--liv-header-total, 80px)) + 1rem);
	right: auto;
	bottom: clamp(5rem, 8vw, 7rem);
	width: min(38%, 32rem);
	min-width: 0;
	padding: 0;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-radius: 0;
	justify-content: center;
	gap: 1.25rem;
}

/* Proof-point box (left column of video slides — video is right-aligned).
   Geometric green-outlined card with leaf-bulleted list. */
.liv-hero__proof {
	position: absolute;
	top: calc(var(--liv-header-h, 0px) + 1rem);
	left: var(--liv-gutter);
	bottom: clamp(5rem, 8vw, 7rem);
	width: min(38%, 32rem);
	display: flex;
	align-items: center;
	z-index: 2;
	pointer-events: none;
}
/* Beveled-and-notched caption box. Two stacked clip-pathed layers create
   the 1.5px green outline; four small ticks accent each beveled corner. */
.liv-hero__proof-box {
	position: relative;
	width: 100%;
	height: auto;
	pointer-events: auto;
	--cb-bevel: 24px;
	--cb-clip: polygon(
		var(--cb-bevel) 0,
		calc(100% - var(--cb-bevel)) 0,
		100% var(--cb-bevel),
		100% calc(100% - var(--cb-bevel)),
		calc(100% - var(--cb-bevel)) 100%,
		var(--cb-bevel) 100%,
		0 calc(100% - var(--cb-bevel)),
		0 var(--cb-bevel)
	);
}
.liv-hero__proof-border {
	position: absolute;
	inset: 0;
	background-color: #8BC53F;
	clip-path: var(--cb-clip);
}
.liv-hero__proof-fill {
	position: absolute;
	inset: 1.5px;
	background-color: #050505;
	clip-path: var(--cb-clip);
}
.liv-hero__proof-tick {
	position: absolute;
	width: 14px;
	height: 2px;
	background-color: #8BC53F;
	z-index: 2;
}
.liv-hero__proof-tick--tl { top: 10px;    left: 10px;   transform: rotate(45deg);  }
.liv-hero__proof-tick--tr { top: 10px;    right: 10px;  transform: rotate(-45deg); }
.liv-hero__proof-tick--bl { bottom: 10px; left: 10px;   transform: rotate(-45deg); }
.liv-hero__proof-tick--br { bottom: 10px; right: 10px;  transform: rotate(45deg);  }
.liv-hero__proof-body {
	position: relative;
	box-sizing: border-box;
	height: auto;
	padding: 44px 48px;
	z-index: 3;
}
.liv-hero__proof-corner-leaf {
	position: absolute;
	top: 36px;
	right: 40px;
	width: 36px;
	height: 36px;
}
.liv-hero__proof-corner-leaf svg {
	display: block;
	width: 100%;
	height: 100%;
}
.liv-hero__proof-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, var(--wp--preset--font-family--body));
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--liv-paper);
}
.liv-hero__proof-title::after {
	content: "";
	display: block;
	width: 50%;
	height: 3px;
	margin-top: 14px;
	background-color: #8BC53F;
}
.liv-hero__proof-list {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.liv-hero__proof-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	color: var(--liv-paper);
	font-family: var(--wp--preset--font-family--body);
	font-size: 21px;
	line-height: 1.45;
	letter-spacing: normal;
}
.liv-hero__proof-dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-top: 0.55em;
	background-color: #8BC53F;
}
.liv-hero__proof-text {
	color: var(--liv-mist, #c7c7c7);
}
.liv-hero__proof-highlight {
	margin: 28px 0 0;
	font-family: var(--wp--preset--font-family--heading, var(--wp--preset--font-family--body));
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #8BC53F;
}

@media (max-width: 720px) {
	.liv-hero__caption {
		width: calc(100% - var(--liv-gutter, 2rem) * 2);
		bottom: calc(var(--liv-gutter, 2rem) + 88px);
	}
	/* On narrow viewports, the side-by-side layout cramps. Drop back to
	 * the standard bottom-left caption tile and let the video fill the
	 * width of the safe area again. */
	.liv-hero__slide--video .liv-hero__caption {
		top: auto;
		right: var(--liv-gutter);
		left: var(--liv-gutter);
		bottom: calc(var(--liv-gutter, 2rem) + 88px);
		width: auto;
		padding: 1.25rem 1.25rem 1.5rem;
		background: rgba(10, 10, 10, 0.78);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		border-radius: var(--r-lg, 8px);
		gap: 0.5rem;
	}
	.liv-hero__media--video {
		justify-content: center;
	}
	.liv-hero__slide--video .liv-hero__video {
		max-width: 100%;
	}
	/* Side-by-side layout breaks below 720px; the caption tile already crowds
	   the viewport, so collapse the proof box rather than stacking it. */
	.liv-hero__proof {
		display: none;
	}
}

/* Slide counter + progress bars (bottom-left). */
.liv-hero__controls {
	position: absolute;
	left: var(--liv-gutter);
	bottom: clamp(1rem, 3vw, 3rem);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Prev/next/pause (bottom-right). */
.liv-hero__nav {
	position: absolute;
	right: var(--liv-gutter);
	bottom: clamp(1rem, 3vw, 3rem);
	z-index: 3;
	display: flex;
	gap: 0.5rem;
}

/* Product-in-frame label (top-center, under the sticky navbar). Populated by
   JS from the active slide's data-product-name. */
.liv-hero__product-name {
	position: absolute;
	/* Sits just below the sticky header; --liv-header-h is kept in sync by JS. */
	top: calc(var(--liv-header-h, var(--liv-header-total)) + clamp(0.75rem, 1.5vw, 1.5rem));
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	height: 2.5rem;
	color: var(--liv-paper);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	letter-spacing: 0.02em;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}
.liv-hero__product-name[hidden] { display: none; }

@media (max-width: 767px) {
	.liv-hero { min-height: 500px; }
	.liv-hero__nav { right: 0.75rem; bottom: 0.75rem; gap: 0.375rem; }
	.liv-hero__controls { left: 0.75rem; bottom: 0.75rem; }
	.liv-hero__product-name {
		height: 2rem;
		font-size: 0.8125rem;
	}
	.liv-slide-indicator__bars { width: 140px; }
	.liv-hero__lead { max-width: 38ch; }
	.liv-hero__specs { gap: 0.75rem 1.5rem; }
	/* Phones: rein in the big lifestyle headline and the primary CTA — the
	   desktop sizes (plus long labels like "Find your next adventure")
	   overpowered the slide at ≤767px. */
	.liv-hero__slide--lifestyle .liv-hero__headline { font-size: clamp(1.4375rem, 5.6vw, 1.875rem); }
	.liv-hero__ctas .liv-btn--lg {
		font-size: 0.75rem;
		padding: 0.6875rem 1.25rem;
		min-height: 46px;
		letter-spacing: 0.06em;
	}
	/* Tighter top, more bottom so copy clears the bottom counter + nav. */
	.liv-hero__slide { padding-block: clamp(3.5rem, 11vw, 5rem) clamp(5rem, 16vw, 6.5rem); }
	/* Darker bottom scrim — the biggest mobile legibility win. */
	.liv-hero__slide--lifestyle .liv-hero__overlay,
	.liv-hero__slide--product .liv-hero__overlay {
		background:
			linear-gradient(180deg, rgba(10,14,18,0) 6%, rgba(10,14,18,0.34) 44%, rgba(10,14,18,0.6) 72%, rgba(10,14,18,0.84) 100%),
			var(--slide-glow, none),
			var(--slide-tone, none);
	}
	/* Autoplay is off on phones — drop the now-useless pause control and give
	   the secondary link CTA a real ≥44px tap target. */
	.liv-hero__nav [data-hero-toggle] { display: none; }
	.liv-hero .liv-btn--link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		padding-block: 0.5rem;
	}
	.liv-hero__price {
		top: calc(var(--liv-header-h, var(--liv-header-total)) + 0.5rem);
		right: 0.75rem;
		padding: 0.5rem 0.75rem;
	}
	.liv-hero__slide[data-slide-bg="6"] .liv-hero__price {
		right: auto;
		left: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.liv-hero__slide { transition: none; }
}

/* ─── Categories strip ─────────────────────────────────────── */

.liv-categories__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.liv-categories__viewall {
	color: var(--liv-leaf-700);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
}
.liv-categories__viewall svg { width: 14px; height: 10px; }
.liv-categories__viewall:hover { color: var(--liv-leaf-500); }
.liv-categories__viewall:hover svg { transform: translateX(3px); transition: transform var(--liv-transition); }

/* ─── Featured rigs grid ───────────────────────────────────── */

/* Tighten the gap between the eyebrow and the title row so the
 * "Featured Units · 2026" mark sits close to "Pick your starting point.".
 * The default .liv-section__header layout (row, space-between, align-end)
 * is preserved so the "All models" link stays on the right, aligned to
 * the h2's baseline. Eyebrow font is bumped vs other sections to give
 * the homepage opener more weight. */
.liv-featured .liv-section-mark {
	margin-block-end: 0.5rem;
}
.liv-featured .liv-eyebrow {
	font-size: 1rem;
}

.liv-rig-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(3, 1fr);
}
.liv-rig-grid .liv-card__media {
	background:
		radial-gradient(70% 80% at 50% 100%, rgba(151,196,89,0.18), transparent 70%),
		linear-gradient(135deg, #1a1f1a 0%, #0f0f0f 100%);
}
.liv-card__meta dl,
.liv-card__meta div { display: contents; }
.liv-card__meta {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 0 1.25rem;
	margin: 0;
}
.liv-card__meta dt {
	grid-row: 1;
	font-size: 0.5625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--liv-ink-300);
}
.liv-card__meta dd {
	grid-row: 2;
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	color: var(--liv-paper);
}

@media (max-width: 1023px) {
	.liv-rig-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.liv-rig-grid { grid-template-columns: 1fr; }
}

/* ─── Editorial split ──────────────────────────────────────── */

.liv-editorial__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: stretch;
}
.liv-editorial__media {
	border-radius: var(--r-md);
	background:
		radial-gradient(100% 100% at 100% 100%, rgba(151,196,89,0.20), transparent 60%),
		linear-gradient(135deg, #131a14 0%, #0a0a0a 60%, #0a0a0a 100%);
	background-size: cover;
	background-position: center;
}
.liv-editorial__copy { display: flex; flex-direction: column; gap: 1.25rem; }
.liv-editorial__copy--centered {
	align-items: center;
	justify-content: center;
	text-align: left;
	gap: 0;
}
.liv-editorial__ctas { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }

/* Stats strip (used inside editorial). */
.liv-stats-strip {
	margin-top: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--liv-ink-500);
	display: grid;
	grid-template-columns: repeat(4, auto);
	gap: 1.5rem 2.5rem;
	margin-bottom: 0;
}
.liv-stats-strip div { display: contents; }
.liv-stats-strip dt {
	grid-row: 1;
	font-size: 0.5625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--liv-ink-300);
}
.liv-stats-strip dd {
	grid-row: 2;
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem;
	color: var(--liv-paper);
}

@media (max-width: 900px) {
	.liv-editorial__inner { grid-template-columns: 1fr; }
	.liv-editorial__media { aspect-ratio: 4 / 3; }
	.liv-stats-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Build teaser ─────────────────────────────────────────── */

.liv-build-teaser__inner {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.liv-build-teaser__copy { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }

.liv-stepper-preview {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}
.liv-stepper-preview li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: var(--r-md);
	color: var(--liv-paper);
	font-size: 0.9375rem;
	font-weight: 500;
	transition: background-color var(--liv-transition), border-color var(--liv-transition);
}
.liv-stepper-preview li:hover {
	background: rgba(151,196,89,0.06);
	border-color: rgba(151,196,89,0.4);
}
.liv-stepper-preview__n {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	color: var(--liv-leaf-300);
	min-width: 2.25rem;
}

@media (max-width: 900px) {
	.liv-build-teaser__inner { grid-template-columns: 1fr; }
}

/* ─── Construction explainer ───────────────────────────────── */

.liv-construction__lead {
	margin-block: 0 clamp(2rem, 5vw, 3.5rem);
	max-width: 68ch;
	font-size: 1.0625rem;
	line-height: 1.55;
}

.liv-construction__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
}

.liv-construction__card {
	padding: clamp(1.5rem, 2.5vw, 2rem);
	background: rgba(255,255,255,0.025);
	border-left: 2px solid var(--liv-leaf-500);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.liv-construction__h {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
	color: var(--liv-paper);
}

.liv-construction__card p {
	margin: 0;
	color: var(--liv-ink-200);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.liv-construction__close {
	margin-block: clamp(2rem, 4vw, 3rem) 0;
	color: var(--liv-ink-200);
	font-size: 1rem;
	max-width: 64ch;
}
.liv-construction__close strong {
	color: var(--liv-paper);
	font-weight: 700;
}

@media (max-width: 900px) {
	.liv-construction__grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ─── Lifestyle gallery ────────────────────────────────────── */

/* Uniform 3×2 grid of square tiles — every tile carries equal weight so the
   six proof points (2 per pillar: lightweight, no-rot, affordable) read as
   peers rather than as one hero with five supporting acts. */
.liv-lifestyle__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}
.liv-lifestyle__tile {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	margin: 0;
	border-radius: var(--r-sm);
	background:
		radial-gradient(60% 60% at 50% 50%, rgba(151,196,89,0.18), transparent 70%),
		linear-gradient(135deg, #131a14, #0a0a0a);
	transition: transform var(--liv-transition);
}
.liv-lifestyle__tile:hover { transform: scale(1.02); }

.liv-lifestyle__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Caption overlay — readable on both real photos and the dark gradient placeholder. */
.liv-lifestyle__caption {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: 1.25rem 1rem 1rem;
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.15;
	letter-spacing: -0.005em;
	background: linear-gradient(to top, rgba(0,0,0,0.78) 30%, transparent);
	pointer-events: none;
}

/* Proof-point chip — corner overlay carrying the verifiable stat. The caption
   stays human; the chip carries the receipt. Solid-paper pill for max legibility
   over any photo or the dark-gradient placeholder. */
.liv-lifestyle__chip {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	z-index: 2;
	padding: 0.4rem 0.7rem;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink-900);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
	pointer-events: none;
}

/* Disclosure for the $/day claim — small, muted, doesn't compete with the grid. */
.liv-lifestyle__footnote {
	margin: 1rem 0 0;
	color: var(--wp--preset--color--ink-300);
	font-size: 0.75rem;
	line-height: 1.5;
	max-width: 64ch;
}

@media (max-width: 900px) {
	.liv-lifestyle__grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
	.liv-lifestyle__caption { font-size: 0.9375rem; padding: 1rem 0.75rem 0.75rem; }
	.liv-lifestyle__chip { top: 0.5rem; right: 0.5rem; padding: 0.3rem 0.55rem; font-size: 0.6875rem; }
}

/* ─── Trust strip ──────────────────────────────────────────── */

/* Five dark badge cards in a row. Each card has an L-bracket at every
 * corner (same vocabulary as .liv-rig-card__corner), a numbered index +
 * uppercase tag header, a large value, a hairline rule, and a short
 * descriptor. Header carries an optional UPDATED date on the right. */

.liv-trust__meta {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--liv-ink-300);
}
.liv-trust__meta-value {
	color: var(--liv-paper);
}

.liv-trust__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(0.75rem, 1.2vw, 1.25rem);
}

.liv-trust__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 1.2vw, 1rem);
	padding: clamp(1.25rem, 1.6vw, 1.75rem);
	background: var(--liv-ink-900);
	color: var(--liv-paper);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--r-lg);
}

/* L-shaped corner brackets — scaled-down sibling of .liv-rig-card__corner. */
.liv-trust__corner {
	position: absolute;
	width: 22px;
	height: 22px;
	pointer-events: none;
	box-sizing: border-box;
	z-index: 2;
}
.liv-trust__corner--tl {
	top: -1px;
	left: -1px;
	border-top: 2px solid var(--liv-leaf-500);
	border-left: 2px solid var(--liv-leaf-500);
	border-top-left-radius: calc(var(--r-lg) + 2px);
}
.liv-trust__corner--tr {
	top: -1px;
	right: -1px;
	border-top: 2px solid var(--liv-leaf-500);
	border-right: 2px solid var(--liv-leaf-500);
	border-top-right-radius: calc(var(--r-lg) + 2px);
}
.liv-trust__corner--bl {
	bottom: -1px;
	left: -1px;
	border-bottom: 2px solid var(--liv-leaf-500);
	border-left: 2px solid var(--liv-leaf-500);
	border-bottom-left-radius: calc(var(--r-lg) + 2px);
}
.liv-trust__corner--br {
	bottom: -1px;
	right: -1px;
	border-bottom: 2px solid var(--liv-leaf-500);
	border-right: 2px solid var(--liv-leaf-500);
	border-bottom-right-radius: calc(var(--r-lg) + 2px);
}

.liv-trust__card-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.liv-trust__index {
	color: var(--liv-leaf-300);
}
.liv-trust__tag {
	color: var(--liv-ink-300);
	text-align: right;
}

.liv-trust__value {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.75rem, 2.4vw, 2.5rem);
	font-weight: 300;
	line-height: 1.1;
	color: var(--liv-paper);
}

.liv-trust__rule {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	margin: 0;
}

.liv-trust__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--liv-ink-200);
}

@media (max-width: 1023px) {
	.liv-trust__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	.liv-trust__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
	.liv-trust__grid { grid-template-columns: 1fr; }
}

/* ─── CTA split (giveaway + newsletter) ────────────────────── */

.liv-cta-split__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.liv-cta-card {
	padding: clamp(2rem, 4vw, 3rem);
	border-radius: var(--r-md);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.liv-cta-card--leaf {
	background: linear-gradient(135deg, var(--liv-leaf-700) 0%, var(--liv-leaf-500) 100%);
	color: var(--liv-paper);
}
.liv-cta-card--leaf .liv-eyebrow { color: rgba(255,255,255,0.85); }
.liv-cta-card--ink {
	background: var(--liv-ink-800);
	border: 1px solid var(--liv-ink-500);
}
.liv-cta-card__form {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.liv-cta-card__form input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 1rem;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: var(--r-sm);
	color: var(--liv-paper);
	font-size: 0.9375rem;
}
.liv-cta-card__form input::placeholder { color: var(--liv-ink-300); }
.liv-cta-card__form input:focus { outline: none; border-color: var(--liv-leaf-500); }
.liv-cta-card__form .liv-btn { height: 48px; }
.liv-cta-card__fineprint {
	font-size: 0.75rem;
	color: var(--liv-ink-300);
	margin: 0;
}
/* Single-column newsletter section — centered card on the homepage. */
.liv-cta-newsletter__card {
	max-width: 640px;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.liv-cta-split__inner { grid-template-columns: 1fr; }
}

/* ─── Exploreliv intro ─────────────────────────────────────── */

/* Cancel the theme.json block-gap that WP injects between the header
 * template-part and <main>, so the intro photo sits flush against the
 * bottom edge of the navbar header instead of leaving a 1.5rem band. */
.liv-main--exploreliv {
	margin-block-start: 0;
}

/* Page opener for /exploreliv — solid-dark fallback under a photo
 * media layer with a bottom-darkening gradient for legibility. */
.liv-exploreliv-intro {
	position: relative;
	overflow: hidden;
	min-height: 50vh;
	display: flex;
	align-items: flex-end;
	padding-block: clamp(4rem, 9vw, 7rem);
}
.liv-exploreliv-intro__media {
	position: absolute;
	inset: 0;
	background-color: var(--liv-ink-900);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* background-image is set inline by patterns/exploreliv-intro.php — either
	 * the editor-uploaded photo (Settings → LiV Settings → Explore LiV · Intro)
	 * or the shipped fallback at /assets/img/exploreliv/intro.avif. */
}
.liv-exploreliv-intro__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%);
}
.liv-exploreliv-intro > .liv-container {
	position: relative;
	width: 100%;
}
.liv-exploreliv-intro .liv-eyebrow,
.liv-exploreliv-intro .liv-section__lead {
	text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.5);
}
.liv-exploreliv-intro .liv-section__title {
	text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

/* ─── Optional bg on construction + lookbook sections ────────
 *
 * Both sections default to a flat dark color (.liv-section--darker).
 * When an editor uploads a background image in LiV Settings, the
 * pattern adds `.has-bg` to the section and renders __media + __overlay
 * sibling divs before the .liv-container. The rules below activate only
 * with `.has-bg` so the no-image case stays untouched.
 *
 * Gradient + text-shadow values mirror .liv-exploreliv-intro so all three
 * /exploreliv sections feel consistent when photos are used. */
.liv-construction.has-bg,
.liv-lifestyle.has-bg {
	position: relative;
	overflow: hidden;
}
.liv-construction__media,
.liv-lifestyle__media {
	position: absolute;
	inset: 0;
	background-color: var(--liv-ink-900);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.liv-construction__overlay,
.liv-lifestyle__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.78) 100%);
}
.liv-construction.has-bg > .liv-container,
.liv-lifestyle.has-bg > .liv-container {
	position: relative;
}
/* Lift small type over busy photos with a soft halo (same recipe as intro). */
.liv-construction.has-bg .liv-eyebrow,
.liv-construction.has-bg .liv-section__lead,
.liv-construction.has-bg .liv-construction__lead,
.liv-construction.has-bg .liv-construction__close,
.liv-lifestyle.has-bg .liv-eyebrow,
.liv-lifestyle.has-bg .liv-lifestyle__footnote {
	text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.5);
}
.liv-construction.has-bg .liv-section__title,
.liv-lifestyle.has-bg .liv-section__title {
	text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}