/*
Theme Name: Life Essentials
Description: Life Essentials marketing theme. Child theme of Alpha. Renders the public marketing site and links authenticated users into the Next.js dashboard configured under Life Essentials > Revalidation.
Author: Life Essentials
Version: 0.1.0
Template: alpha
Text Domain: life-essentials
*/

/* ==========================================================================
   1. LIFE ESSENTIALS DESIGN TOKENS
   Raw brand values. Everything else reads from these.
   ========================================================================== */

:root {
	/* Palette */
	--le-off-black: #1b1b1b;
	--le-surface-gray: #242424;
	--le-white: #ffffff;
	--le-red: #e42312;
	--le-muted: rgba(255, 255, 255, 0.6);
	--le-border: rgba(255, 255, 255, 0.14);

	/* Spacing */
	--le-site-margin: 4rem;
	--le-grid-gap: 1.5rem;
	--le-radius-card: 0.75rem;

	/* Buttons — Figma Onboarding Primary / secondary pair (node 6735:11294) */
	--le-button-height: 3rem;
	--le-button-padding-y: 0.75rem;
	--le-button-padding-x: 1.5rem;
	--le-button-font-size: 1rem;
	--le-button-line-height: 1.34;
	--le-button-radius: 999px;
	--le-button-gap: 0.5rem;
	--le-button-secondary-hover-bg: #5f5f5f;

	/* Play button — Figma node 6735:11334 */
	--le-play-button-size: 4rem;
	--le-play-button-padding: 9px;
	--le-play-button-border-width: 2px;
	--le-play-button-border-color: rgba(255, 255, 255, 0.6);
	--le-play-button-bg: rgba(0, 0, 0, 0.3);
	--le-play-button-bg-hover: rgba(0, 0, 0, 0.45);
	--le-play-button-icon-size: 1.5rem;
	--le-play-button-blur: 1px;

	/* Slider info cards — Figma Promo Card 4:5 / what-to-expect (node 6735:11350) */
	--le-slider-info-card-height: 31.25rem;
	--le-slider-info-card-overlay-height: 45%;
	--le-black-alpha-80: rgba(0, 0, 0, 0.8);
	--le-black-alpha-20: rgba(42, 42, 42, 0.2);
}

@media (max-width: 1024px) {
	:root {
		--le-site-margin: 2.5rem;
	}
}

@media (max-width: 720px) {
	:root {
		--le-site-margin: 1rem;
		--le-grid-gap: 1rem;
	}
}


/* ==========================================================================
   2. ALPHA TOKEN OVERRIDES
   Map LE tokens onto Alpha's CSS variable system so every block
   inherits the LE palette, spacing, radius and type scale automatically.
   Alpha assigns: h1→--text-6xl, h2→--text-5xl, h3→--text-4xl, etc.
   Each resolves via --text-Nxl--base, so overriding the --base var
   keeps all of Alpha's utility classes (.text-6xl etc.) consistent.
   ========================================================================== */

:root {
	/* Colour */
	--color-bg: var(--le-off-black);
	--color-black: var(--le-off-black);
	--color-primary: var(--le-red);
	--color-accent: var(--le-red);

	/* Spacing / grid */
	--gutter: var(--le-site-margin);
	--grid-col-gap: var(--le-grid-gap);

	/* Radius */
	--radius: var(--le-radius-card);
	--radius-sm: var(--le-radius-card);
	--radius-md: var(--le-radius-card);

	/*h1 at top of figma deisgn:*/
	--text-6xl--base: 56px;

	/*h1s throughout figma design: as h2s from theme but with matchin sizing*/
	--text-5xl--base: 56px;

	--text-4xl--base: clamp(1.5rem, 0.5rem + 2vw, 2.25rem);

	--text-md--base: 20px;

	--text-body: 20px;

	--content-width: 680px;
	--le-title-group-max-width: 72rem;
}

@media (max-width: 720px) {
	:root {
		--column-width-vw: calc((100vw - var(--gutter) * 2 - var(--grid-col-gap) * 3) / 4);
		--text-6xl--base: 36px;
		--text-5xl--base: 36px;
		--text-6xl: 36px;
		--text-5xl: 36px;
		--text-body: 16px;
		--text-md--base: 16px;

	}

	h1,
	.h1,
	h2,
	.h2 {
		font-size: 36px;
	}
}


/* ==========================================================================
   3. TYPOGRAPHY
   Font: Plus Jakarta Sans (Alpha's --font-jakarta, already loaded).
   Values from the Figma design:
     H1  — weight 800, line-height 1.1,  letter-spacing -1.5px
     H2  — weight 800, line-height 1.14, letter-spacing -1px
     Body — weight 400, line-height 1.4
   Alpha already sets the correct font family and weight via its vars.
   We only need to layer in the tracking and precise line-heights.
   ========================================================================== */

/* Confirm the heading font stack */
:root {
	--font-headings: var(--font-jakarta);
	--font-heading-weight: 800;
}

h1 {
	line-height: 1.1;
	letter-spacing: -0.04em;
	/* ≈ -1.5px at 40px reference size */
}

h2 {
	line-height: 1.14;
	letter-spacing: -0.025em;
	/* ≈ -1px at 40px reference size */
}

h3,
h4,
h5,
h6 {
	letter-spacing: -0.015em;
}

h6 {
	font-size: 28px;
}

@media (max-width: 720px) {
	h6 {
		font-size: 20px;
	}
}

/* Body copy line-height from design */
p,
li,
.prose {
	line-height: 1.4;
}

/* Paragraph measure — Alpha uses --content-width (680px via token override) */
@media (min-width: 1024px) {

	.block.basic.default .prose p,
	.block.basic.default .prose ul,
	.block.basic.default .prose ol,
	.block.basic.default .prose blockquote {
		max-width: var(--content-width);
	}
}

.page-header.header__fullcover .prose p {
	max-width: var(--content-width);
}

/* Eyebrow — white, sentence case (Alpha defaults to accent + uppercase) */
.eyebrow {
	color: var(--le-white);
	text-transform: none;
	/* text-align: center; */
	font-family: var(--font-jakarta);
	font-weight: 700;
	letter-spacing: 0;
	font-size: 1rem;
}

.content-group .eyebrow,
.title-group .eyebrow {
	font-size: var(--Body-Body-Md-font-size, 20px);
	line-height: 140%;

}


/* ==========================================================================
   4. GLOBAL BASE
   ========================================================================== */

body {
	background: var(--le-off-black);
	color: var(--le-white);
}

.site-main {
	background: var(--le-off-black);
}

/* All Alpha blocks default to the LE dark background */
.block {
	background-color: var(--le-off-black);
	color: var(--le-white);
}

/* ==========================================================================
   4b. LAYOUT BACKGROUND / TEXT OVERRIDES
   Alpha lets each block layout carry a custom background color, gradient,
   or custom text color (set in the page builder and often injected as inline
   styles or via --color-bg / --color-headings CSS variables on the element).
   Force every layout — regardless of what the editor has set — to the LE
   dark background with white text so the site stays on-brand.
   Using !important so these win over both inline style="" and any
   Alpha-generated utility classes with higher specificity.
   ========================================================================== */

/* Force dark bg + white text on every block and its common wrappers,
   overriding any inline background, background-color, or gradient. */
.block,
.block-inner,
.block>.block-inner,
.block>.background,
.block>.block-background,
.section,
.page-section,
.page-header,
.page-header.header__fullcover,
.page-header.header__cover {
	background-color: var(--le-off-black) !important;
	background-image: none !important;
	background: var(--le-off-black) !important;
	color: var(--le-white) !important;
}

/* Reset the Alpha CSS variable that many blocks read for their background.
   Setting it here (with specificity) means even blocks that apply it via
   var() on their own background shorthand will resolve to the dark colour. */
.block,
.block-inner {
	--color-bg: var(--le-off-black);
	--color-bg-alt: var(--le-off-black);
	--color-headings: var(--le-white);
	--color-text: var(--le-white);
}

/* Alpha gradient helpers — zero out any tint/overlay gradients that Alpha
   places over or behind block content as pseudo-elements. */
.block::before,
.block::after,
.block-inner::before,
.block-inner::after,
.block>.background::before,
.block>.background::after {
	background-image: none !important;
	background-color: transparent !important;
	opacity: 0 !important;
}

/* Text colour utilities Alpha may attach per-block.
   .has-text-color / .has-custom-text-color are standard WP/Alpha flags. */
.block.has-text-color,
.block.has-custom-text-color,
.block [class*="color-text-"],
.block [class*="text-color-"] {
	color: var(--le-white) !important;
}

/* Heading colour utilities */
.block .title-group,
.block .content-group,
.block .title-group *,
.block .content-group * {
	color: var(--le-white) !important;
	--color-headings: var(--le-white);
}

/* Restore muted / supplementary text that is intentionally dimmer */
.block .eyebrow {
	color: var(--le-white) !important;
}

/* Page-header hero — Alpha may set a background-image via inline style;
   keep the image but ensure the block wrapper itself has no opaque bg fill
   competing with it. The image container sits inside .page-header__media
   so only the wrapping element needs the reset. */
.page-header .page-header__content,
.page-header .content-group,
.page-header .title-group {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--le-white) !important;
}

/* Film series — on tablet/mobile (≤1024px) the series card flips to a
   stacked layout and Alpha gives the content panel background-color: var(--color-black).
   Replace that with the LE surface gray so it reads as a lifted surface
   rather than blending flat into the page background. */
@media (max-width: 1024px) {
	.block.film-series .feature-card.feature-card__series .feature-card__content {
		background-color: var(--le-surface-gray);
	}
}

/* FAQs block — restyle Alpha's <details> pill-card accordion to match the
   Next.js dashboard Mantine Accordion (variant="default"):
   · Items separated by hairline border dividers, no background card
   · Control has no horizontal padding, question is bold lg text
   · Icon is a small square (#3b3b3b), not Alpha's full circle; inverts on hover
   · Answer copy is muted white, max-width constrained
   NOTE: faqs.js hardcodes `summary.offsetHeight + 16*1.25*2` (= +40px) as the
   closed height, so we must keep padding-block: 1.25rem on .accordion-item —
   only the horizontal padding and background are stripped. */
.block.faqs .accordion-item {
	background-color: transparent;
	border-radius: 0;
	padding-inline: 0;
	margin-top: 0 !important;
	border-bottom: 1px solid var(--le-border);
	color: var(--le-white);
}

.block.faqs .accordion-item:first-child {
	border-top: 1px solid var(--le-border);
}

.block.faqs .accordion-header .heading {
	font-weight: 700;
	max-width: min(100%, 42.5rem);
	color: var(--le-white) !important;
}

.block.faqs .accordion-icon {
	border-radius: 4px;
	background: #3b3b3b;
	color: var(--le-white);
	height: 1.875rem;
	width: 1.875rem;
	min-width: 1.875rem;
}

.block.faqs .accordion-header:hover .accordion-icon {
	background: var(--le-white);
	color: var(--le-off-black);
}

.block.faqs .accordion-content {
	padding-right: 0;
	padding-block-start: 30px;
	font-size: var(--Body-Body-Md-font-size, 20px);
}

.block.faqs .accordion-content__inner {
	padding-top: 0;
	padding-bottom: 1rem;
	max-width: 42.5rem;
	color: var(--le-muted);
}

/* Feature cards — override Alpha's white light-gradient card faces with the
   LE surface gray. Alpha paints the card face via ::before (fill) and ::after
   (border gradient), both using light-gray linear-gradients. We replace those
   with a flat surface-gray fill and a matching subtle border. Text colour is
   also reset to white since Alpha defaults it to --color-black for light cards. */
.block.feature-cards .dual-feature-card {
	color: var(--le-white);
}

.block.feature-cards .dual-feature-card::before {
	background: var(--le-surface-gray);
}

.block.feature-cards .dual-feature-card::after {
	background: var(--le-surface-gray);
}

/* Slider cards (info + jumbo) — Alpha defaults both to white bg / black text.
   Override to surface gray / white text to match the LE dark theme. */
.block.slider-block .slider-card__info,
.block.slider-block .slider-card__jumbo {
	background-color: var(--le-surface-gray) !important;
	color: var(--le-white) !important;
	border: none !important;
}

.block.slider-block .slider-card__info .prose,
.block.slider-block .slider-card__info .slider-card__content,
.block.slider-block .slider-card__jumbo .prose,
.block.slider-block .slider-card__jumbo .slider-card__content {
	color: var(--le-white);
}

/* Draggable scroll label controls — Alpha renders this pill as a frosted
   light-glass control (near-white bg, black text, light-tinted active states).
   Override the whole component for the LE dark theme. */
.draggable-scroll__controls--labels {
	border: 0.5px solid var(--le-border);
	background: rgba(36, 36, 36, 0.85);
	background-blend-mode: normal;
	box-shadow: 0 -0.5px 1px 0 rgba(255, 255, 255, 0.06) inset,
		1px 1.5px 4px 0 rgba(0, 0, 0, 0.3) inset;
	color: var(--le-white);
}

/* Inactive label button — transparent on the dark pill */
.draggable-scroll__controls--labels .draggable-scroll__controls--button {
	color: var(--le-white);
	background-color: transparent;
	border-radius: 999px;
}

/* Active label button — swap alpha's white-mix for an off-black-mix so the
   accent tint reads as a lifted dark surface rather than a light pill. */
.draggable-scroll__controls--labels .draggable-scroll__controls--button.active {
	--_accent: color-mix(in srgb, var(--color-accent) 60%, var(--le-off-black));
	background: var(--_accent);
	color: var(--le-white);
}

@media (max-width: 768px) {
	.draggable-scroll__controls--labels .draggable-scroll__controls--button.active {
		background: var(--color-accent);
	}
}

/* Hover — slightly stronger accent tint */
.draggable-scroll__controls--labels .draggable-scroll__controls--button:hover {
	--_accent: color-mix(in srgb, var(--color-accent) 42%, var(--le-off-black));
	background: radial-gradient(63.52% 74.29% at 50.42% 51.43%,
			rgba(80, 80, 80, 0.35) 0%,
			rgba(30, 30, 30, 0) 73.85%),
		linear-gradient(0deg, var(--_accent) 0%, var(--_accent) 100%),
		rgba(27, 27, 27, 0.8);
	color: var(--le-white);
}

@media (max-width: 768px) {
	.draggable-scroll__controls--labels .draggable-scroll__controls--button:hover {
		background: var(--color-accent);
	}

	/* Mobile dot — dark inactive state */
	.draggable-scroll__controls--labels .draggable-scroll__controls--button {
		background-color: rgba(255, 255, 255, 0.25);
	}
}

/* Bento block — Alpha paints each bento-item white with black text. */
.block.bento .bento-item {
	background-color: var(--le-surface-gray) !important;
	color: var(--le-white) !important;
}

.block.bento .bento-item .prose,
.block.bento .bento-item .prose h1,
.block.bento .bento-item .prose h2,
.block.bento .bento-item .prose h3,
.block.bento .bento-item .prose h4,
.block.bento .bento-item .prose h5,
.block.bento .bento-item .prose h6,
.block.bento .bento-item .prose p {
	color: var(--le-white);
}

/* Title / content groups inside any block */
.block .title-group,
.block .content-group {
	--color-headings: var(--le-white);
	color: var(--le-white);
}

/* the_title_group() — block-level section headers only (not nested card titles),
   and only for the layouts whose headers are centered by design: centered,
   slider-block and series-trailers. Other layouts (basic, image-text, columns,
   headers, etc.) keep Alpha's left-aligned, full-width headers.
   Includes the separately-rendered body content (bare `.prose`), which
   slider-block default and centered gallery output as a sibling of the
   title-group rather than inside a .content-group — so it needs the same
   max-width + centering to line up with the eyebrow / title. */
:is(.block.centered, .block.slider-block, .block.series-trailers) .block-inner>.title-group,
:is(.block.centered, .block.slider-block, .block.series-trailers) .block-inner>.content-group.has-content,
:is(.block.centered, .block.slider-block, .block.series-trailers) .block-inner>*>.title-group {

	max-width: var(--le-title-group-max-width);
	margin-inline: auto;
	text-align: center;
}

:is(.block.centered, .block.slider-block, .block.series-trailers) .block-inner>*>.content-group.has-content,
:is(.block.centered, .block.slider-block, .block.series-trailers) .block-inner>*>.prose,
:is(.block.centered, .block.slider-block, .block.series-trailers) .block-inner>.prose {
	max-width: var(--le-title-group-max-width);
	margin-inline: auto;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   Matches Figma Alpha / Life Essentials onboarding buttons (6735:11295–96):
   primary — #e42312 fill, 48px pill, 16px bold; secondary — 1px white outline.
   Applies to Alpha `.cta` / `.btn` in blocks and theme `.le-button` helpers.
   ========================================================================== */

.le-button,
.le-login-button,
.cta,
.btn,
a.cta,
a.btn {
	--_border-width: 1px;
	display: inline-flex;
	min-height: var(--le-button-height);
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	border-radius: var(--le-button-radius);
	padding: var(--le-button-padding-y) var(--le-button-padding-x);
	font-size: var(--le-button-font-size);
	font-weight: 700;
	line-height: var(--le-button-line-height);
	text-decoration: none;
	transition: opacity 200ms ease;
}

/* Primary — filled red (default + bordered block CTAs) */
.le-button,
.le-login-button,
.cta:not(.cta__secondary):not(.cta__ghost):not(.cta__text):not(.cta__sm),
.btn:not(.btn__secondary):not(.btn__ghost):not(.btn__text):not(.btn__sm) {
	--_color-bg: var(--le-red);
	--_color-bg-hover: var(--le-red);
	--_color-border: transparent;
	--_color-border-hover: transparent;
	--_color-text: var(--le-white);
	--_color-text-hover: var(--le-white);
	border: 1px solid transparent;
	background: var(--le-red);
	color: var(--le-white);
}

/* Alpha bordered CTAs use gradient pseudo-elements; LE primary is a flat fill */
.cta__bordered::before,
.cta__bordered::after,
.btn__bordered::before,
.btn__bordered::after {
	content: none;
	display: none;
}

.cta__bordered,
.btn__bordered {
	position: static;
	isolation: auto;
}

/* Secondary / ghost — white outline; gray fill on hover (matches app ContentButton gray) */
.le-button--secondary,
.cta--secondary,
.cta.cta--secondary,
.cta.cta__secondary,
.cta.cta__ghost,
.btn.btn__secondary,
.btn.btn__ghost,
a.cta.cta--secondary,
a.cta.cta__secondary,
a.cta.cta__ghost,
a.btn.btn__secondary,
a.btn.btn__ghost {
	--_color-bg: transparent;
	--_color-bg-hover: var(--le-button-secondary-hover-bg);
	--_color-border: var(--le-white);
	--_color-border-hover: var(--le-white);
	--_color-text: var(--le-white);
	--_color-text-hover: var(--le-white);
	border: 1px solid var(--le-white);
	background: transparent;
	color: var(--le-white);
}

.le-button:hover,
.cta:not(.cta__secondary):not(.cta__ghost):not(.cta--secondary):hover,
.btn:not(.btn__secondary):not(.btn__ghost):hover,
a.cta:not(.cta__secondary):not(.cta__ghost):hover,
a.btn:not(.btn__secondary):not(.btn__ghost):hover {
	opacity: 0.88;
}

.le-button--secondary:hover,
.cta--secondary:hover,
.cta.cta--secondary:hover,
.cta.cta__secondary:hover,
.cta.cta__ghost:hover,
.btn.btn__secondary:hover,
.btn.btn__ghost:hover,
a.cta.cta--secondary:hover,
a.cta.cta__secondary:hover,
a.cta.cta__ghost:hover,
a.btn.btn__secondary:hover,
a.btn.btn__ghost:hover {
	opacity: 1;
	background: var(--le-button-secondary-hover-bg);
	border-color: var(--le-white);
	color: var(--le-white);
}

/* Button pairs in hero / prose — 8px gap per Figma */
.button-row,
.prose p:has(.cta + .cta) {
	gap: var(--le-button-gap);
}

@media (max-width: 480px) {

	.le-button,
	.le-login-button,
	.cta,
	.btn,
	a.cta,
	a.btn {
		padding: var(--le-button-padding-y) var(--le-button-padding-x);
	}
}

/* ==========================================================================
   5b. PLAY BUTTON
   ========================================================================== */

.play-button.btn_circle {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--le-play-button-size);
	height: var(--le-play-button-size);
	min-width: var(--le-play-button-size);
	min-height: var(--le-play-button-size);
	padding: var(--le-play-button-padding);
	border: var(--le-play-button-border-width) solid var(--le-play-button-border-color);
	border-radius: 999px;
	background-color: var(--le-play-button-bg);
	color: var(--le-white);
	backdrop-filter: blur(var(--le-play-button-blur));
	-webkit-backdrop-filter: blur(var(--le-play-button-blur));
	--_icon-size: var(--le-play-button-icon-size);
}

.block .play-button.btn_circle {
	padding: var(--le-play-button-padding);
}

.play-button.btn_circle svg {
	width: var(--_icon-size, var(--le-play-button-icon-size));
	height: var(--_icon-size, var(--le-play-button-icon-size));
	translate: 10% 0;
}

.play-button.btn_circle:hover {
	background-color: var(--le-play-button-bg-hover);
}

.play-button.btn_circle:hover svg {
	translate: 10% 0;
}

@media (max-width: 719px) {
	:root {
		--le-play-button-size: 3rem;
	}
}

/* ==========================================================================
   5c. SLIDER BLOCK — INFO CARDS
   Alpha layout: slider-block + block_layout info-cards.
   ========================================================================== */

/* Card column width tracks the visible content area. Alpha freezes
   --column-width-vw at 104rem while the viewport is still narrower until
   ~112rem, which makes a three-card row wider than the container. */
.block.slider-block.info-cards {
	--le-slider-column-width: calc((100vw - var(--gutter) * 2 - var(--grid-col-gap) * 11) / 12);
}

@media (min-width: 104rem) {
	.block.slider-block.info-cards {
		--le-slider-column-width: calc((min(100vw - var(--gutter) * 2, 104rem) - var(--grid-col-gap) * 11) / 12);
	}
}

.block.slider-block.info-cards .slider-card__title .eyebrow {
	margin-bottom: 0 !important;
}

.block.slider-block.info-cards .slider-card__info {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* 4 of 12 cols → exactly 3 cards fill the desktop grid (4 cols × 3 + 2 gaps between = content width) */
	width: calc(var(--le-slider-column-width) * 4 + var(--grid-col-gap) * 3);
	min-width: 0;
	height: var(--le-slider-info-card-height);
	border-radius: var(--le-radius-card);
	background-color: var(--le-off-black);
	color: var(--le-white);
	overflow: hidden;
}

.block.slider-block.info-cards .slider-card__info .slider-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin-top: 0;
	pointer-events: none;
}

.block.slider-block.info-cards .slider-card__info .slider-card__media::after {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--le-black-alpha-20);
	content: "";
	opacity: 0.25;
	pointer-events: none;
}

.block.slider-block.info-cards .slider-card__info .slider-card__media img,
.block.slider-block.info-cards .slider-card__info .slider-card__media video,
.block.slider-block.info-cards .slider-card__info .slider-card__media .mdl-video,
.block.slider-block.info-cards .slider-card__info .slider-card__media iframe {
	width: 100%;
	height: 100%;
	aspect-ratio: unset;
	object-fit: cover;
}

.block.slider-block.info-cards .slider-card__info .slider-card__media .mdl-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.block.slider-block.info-cards .slider-card__info .slider-card__content {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	box-sizing: border-box;
	align-items: flex-end;
	height: var(--le-slider-info-card-overlay-height);
	padding: 3rem 2rem 1.5rem 1.5rem;
}

.block.slider-block.info-cards .slider-card__info .slider-card__content::before {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	background: linear-gradient(to bottom,
			transparent 0%,
			var(--le-black-alpha-80) 75.937%);
	content: "";
	pointer-events: none;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
	.block.slider-block.info-cards .slider-card__info .slider-card__content::before {
		-webkit-mask-image: linear-gradient(to bottom,
				transparent 0%,
				black 34%,
				black 100%);
		mask-image: linear-gradient(to bottom,
				transparent 0%,
				black 34%,
				black 100%);
		-webkit-backdrop-filter: blur(9px);
		backdrop-filter: blur(9px);
	}
}

.block.slider-block.info-cards .slider-card__info .slider-card__title {
	position: relative;
	z-index: 1;
	width: 100%;
}

.block.slider-block.info-cards .slider-card__info .slider-card__title .prose {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	color: var(--le-white);
	font-size: 1rem;
	line-height: 1.4;
}

.block.slider-block.info-cards .slider-card__info .slider-card__title .prose> :first-child {
	margin-top: 0;
}

.block.slider-block.info-cards .slider-card__info .slider-card__title .prose> :last-child {
	margin-bottom: 0;
}

.block.slider-block.info-cards .slider-card__info .slider-card__title .prose h1,
.block.slider-block.info-cards .slider-card__info .slider-card__title .prose h2,
.block.slider-block.info-cards .slider-card__info .slider-card__title .prose h3,
.block.slider-block.info-cards .slider-card__info .slider-card__title .prose h4 {
	margin: 0;
	color: var(--le-white);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.025em;
}

.block.slider-block.info-cards .slider-card__info .slider-card__title .prose p {
	margin: 0;
	color: var(--le-white);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
}

.block.slider-block.info-cards .slider-card__info .slider-card__link.btn_circle {
	display: none;
}

/* Tablet: 4 of 6 cols → ~1.5 cards visible, good scroll preview */
@media (max-width: 1024px) {
	.block.slider-block.info-cards {
		--le-slider-column-width: calc((100vw - var(--gutter) * 2 - var(--grid-col-gap) * 5) / 6);
	}

	.block.slider-block.info-cards .slider-card__info {
		width: calc(var(--le-slider-column-width) * 6 + var(--grid-col-gap) * 5);
	}
}

/* Mobile: 3 of 4 cols → one card plus a peek of the next */
@media (max-width: 719px) {
	.block.slider-block.info-cards {
		--le-slider-column-width: calc((100vw - var(--gutter) * 2 - var(--grid-col-gap) * 3) / 4);
	}

	.block.slider-block.info-cards .slider-card__info {
		width: calc(var(--le-slider-column-width) * 3 + var(--grid-col-gap) * 2);
	}

	.block.slider-block.info-cards .slider-card__info .slider-card__content {
		padding: 2.5rem 1.5rem 1.5rem;
	}

	.block.slider-block.info-cards .slider-card__info .slider-card__title .prose h1,
	.block.slider-block.info-cards .slider-card__info .slider-card__title .prose h2,
	.block.slider-block.info-cards .slider-card__info .slider-card__title .prose h3,
	.block.slider-block.info-cards .slider-card__info .slider-card__title .prose h4 {
		font-size: 2.25rem;
	}
}

/* ==========================================================================
   6. SITE CHROME — HEADER
   Fixed gradient header that fades into the hero below it.
   ========================================================================== */

.le-site-header {
	position: fixed;
	z-index: 100;
	inset: 0 0 auto;
	background: linear-gradient(180deg,
			rgba(0, 0, 0, 0.72) 0%,
			rgba(0, 0, 0, 0.32) 60%,
			rgba(0, 0, 0, 0) 100%);
	color: var(--le-white);
}

.le-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.le-site-header__logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
	color: var(--le-white);
}

.le-site-header__logo-image {
	width: 151px;
	height: auto;
}

.le-site-header .le-login-button {
	min-height: 2.25rem;
	padding: 0.625rem 1.125rem;
	border: 1px solid var(--le-white);
	background: var(--le-white);
	color: var(--le-off-black);
	font-size: 0.875rem;
	font-weight: 700;
}

.le-site-header .le-login-button:hover {
	opacity: 0.88;
	background: var(--le-white);
	color: var(--le-off-black);
}

@media (min-width: 720px) {
	.le-site-header__logo-image {
		width: 200px;
	}
}

@media (min-width: 1024px) {
	.le-site-header__logo-image {
		width: 235px;
	}
}

.le-site-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.le-site-header .menu {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Override Alpha's pill nav — Alpha wraps the entire #header-menu in a frosted-glass
   pill (border-radius, backdrop-filter, complex background) at ≥1025px, and also
   styles each item as a sub-pill. Strip both here. */
@media screen and (min-width: 1025px) {
	#header-menu {
		border-radius: 0 !important;
		background: none !important;
		background-blend-mode: unset !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		box-shadow: none !important;
		padding: 0 !important;
	}
}

#header-menu {
	gap: 20px;
	margin-left: 20px;
}


#header-menu>li.menu-item>a,
#header-menu>li.menu-item>.no-link,
.le-site-header .menu a {
	color: #fff;
	font-family: "Plus Jakarta Sans", var(--font-jakarta, system-ui, sans-serif);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 134%;
	text-decoration: none;
	background: none !important;
	background-blend-mode: unset !important;
	padding: 0;
	border: none !important;
	border-radius: 0;
	box-shadow: none !important;
	/* opacity: 0.88; */
	transition: opacity 150ms ease;
	position: relative;
}

#header-menu>li.menu-item>a::after,
#header-menu>li.menu-item>.no-link::after,
.le-site-header .menu a::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	right: 0;
	height: 2px;
	border-radius: 999px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 150ms ease;
}

#header-menu>li.menu-item>a:hover,
#header-menu>li.menu-item>.no-link:hover,
.le-site-header .menu a:hover {
	opacity: 1;
	background: none !important;
	box-shadow: none !important;
}

#header-menu>li.menu-item>a:hover::after,
#header-menu>li.menu-item>.no-link:hover::after,
.le-site-header .menu a:hover::after {
	transform: scaleX(0.2);
}

/* Active/current menu item — full opacity + full-width white bar underline */
#header-menu>li.menu-item.current-menu-item>a,
#header-menu>li.menu-item.is-active>a,
.le-site-header .menu .current-menu-item>a,
.le-site-header .menu .current_page_item>a,
.le-site-header .menu .current-menu-ancestor>a,
.le-site-header .menu .current-menu-parent>a {
	opacity: 1;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

#header-menu>li.menu-item.current-menu-item>a::after,
#header-menu>li.menu-item.is-active>a::after,
.le-site-header .menu .current-menu-item>a::after,
.le-site-header .menu .current_page_item>a::after,
.le-site-header .menu .current-menu-ancestor>a::after,
.le-site-header .menu .current-menu-parent>a::after,
#header-menu>li.menu-item.current-menu-item>a:hover::after,
#header-menu>li.menu-item.is-active>a:hover::after,
.le-site-header .menu .current-menu-item>a:hover::after,
.le-site-header .menu .current_page_item>a:hover::after,
.le-site-header .menu .current-menu-ancestor>a:hover::after,
.le-site-header .menu .current-menu-parent>a:hover::after {
	transform: scaleX(1);
}


/* ==========================================================================
   7. SITE CHROME — FOOTER (matches site-footer.module.css)
   ========================================================================== */

.le-site-footer {
	position: relative;
	z-index: 2;
	margin-top: auto;
	background: var(--le-off-black);
}

.le-site-footer__inner {
	padding: 0 1rem 2.5rem;
}

@media (min-width: 720px) {
	.le-site-footer__inner {
		padding: 0 clamp(1rem, 5vw, 4rem) 2.5rem;
	}
}

.le-site-footer__rule {
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 720px) {
	.le-site-footer__rule {
		padding-top: 2rem;
	}
}

.le-site-footer__grid {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2.5rem;
}

@media (min-width: 900px) {
	.le-site-footer__grid {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2.5fr);
		align-items: center;
		gap: 1.5rem;
	}
}

.le-site-footer__logo-col {
	min-width: 0;
}

.le-site-footer__logo-link {
	display: inline-block;
	line-height: 0;
	color: var(--le-white);
}

.le-site-footer__logo-image {
	width: 186px;
	height: auto;
}

.le-site-footer__logo-placeholder {
	display: inline-block;
	width: 186px;
	height: 22px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.12);
}

@media (min-width: 1024px) {
	.le-site-footer__logo-image {
		width: 235px;
	}

	.le-site-footer__logo-placeholder {
		width: 235px;
		height: 28px;
	}
}

.le-site-footer__legal {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	font-family: var(--font-jakarta, system-ui, sans-serif);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.34;
	color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 720px) {
	.le-site-footer__legal {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
}

.le-site-footer__legal-item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.le-site-footer__dot {
	display: none;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	flex-shrink: 0;
}

@media (min-width: 720px) {
	.le-site-footer__dot {
		display: block;
	}
}

.le-site-footer__legal a {
	color: inherit;
	text-decoration: none;
}

.le-site-footer__legal a:hover {
	color: var(--le-white);
}

.le-site-footer__social-col {
	display: flex;
	justify-content: flex-start;
}

.le-site-footer__social-row {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	width: 100%;
}

@media (min-width: 720px) {
	.le-site-footer__social-row {
		align-items: center;
		justify-content: flex-end;
		gap: 2rem;
	}

	.le-site-footer__social-col {
		justify-content: flex-end;
	}
}

.le-site-footer__social-group {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	min-width: 0;
}

@media (min-width: 720px) {
	.le-site-footer__social-group {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
	}
}

.le-site-footer__group-label {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.34;
	color: rgba(255, 255, 255, 0.7);
	white-space: nowrap;
}

.le-site-footer__icon-row {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.le-site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--le-white);
	opacity: 0.9;
	text-decoration: none;
}

.le-site-footer__social-link img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.le-site-footer__social-link:hover {
	opacity: 1;
}


/* ==========================================================================
   8. RESPONSIVE OVERRIDES — BURGER / ALPHA MOBILE PANEL
   ========================================================================== */

/* Burger (.menu-button.menu-toggle) — strip Alpha's frosted-glass pill */
.menu-button.menu-toggle {
	background: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	color: #fff !important;
}

/* Hide desktop nav on mobile — Alpha's slide panel handles it */
@media (max-width: 1024px) {
	.le-site-header__menu {
		display: none;
	}
}

/* Hide mobile panel on desktop */
@media (min-width: 1025px) {
	#mainNavigation {
		display: none !important;
	}

	.menu-button.menu-toggle {
		display: none !important;
	}
}

/* Hide desktop login button on mobile — it lives inside the panel instead */
@media (max-width: 1024px) {
	.le-site-header__login-desktop {
		display: none;
	}
}

/* ── Alpha's #mainNavigation slide panel — dark colour overrides ── */
@media (max-width: 1024px) {
	#mainNavigation {
		background-color: var(--le-off-black) !important;
		color: var(--le-white) !important;
		padding-top: 20px;
	}

	#mainNavigation .menu {
		border-top-color: var(--le-border) !important;
		padding-top: 20px;
		align-items: flex-start;
		padding-left: 20px;
	}

	#mainNavigation .menu .slide-menu__link {
		color: var(--le-white) !important;
		border-bottom-color: var(--le-border) !important;
		font-family: "Plus Jakarta Sans", var(--font-jakarta, system-ui, sans-serif);
		font-size: 1rem;
		font-weight: 400;
	}

	/* Remove Alpha's light pink/blue hover tints */
	#mainNavigation .menu .slide-menu__link:hover,
	#mainNavigation .menu>li:nth-child(odd) .slide-menu__link:hover {
		background: rgba(255, 255, 255, 0.06) !important;
		color: var(--le-white) !important;
	}

	/* Close button */
	#mainNavigation .menu-button.menu-close {
		color: var(--le-white) !important;
		background: rgba(255, 255, 255, 0.1) !important;
		border: none !important;
		box-shadow: none !important;
	}

	/* Panel header row */
	#mainNavigation .main-navigation__mobile--header {
		border-bottom: 1px solid var(--le-border);
	}

	/* More vertical padding on each nav item */
	#mainNavigation .menu .menu-item {
		padding-block: 0.75rem !important;
	}

	/* Full-width Dashboard button in panel footer */
	#mainNavigation .le-mobile-footer {
		padding-inline: var(--gutter);
		padding-top: 2rem;
	}

	#mainNavigation .le-mobile-footer .le-login-button {
		display: flex;
		width: 100%;
		justify-content: center;
	}

	/* Scrim backdrop */
	#masthead::after {
		background-color: rgba(0, 0, 0, 0.7) !important;
	}
}