/* ==========================================================================
   LeArtista Landing Pages — Win-Win Event single template

   Design tokens are taken from the active Elementor brand kit
   (Default Kit, post ID 9). Do not introduce new brand colors or fonts.

     Primary    #575756  (warm dark gray)         — H1, headings
     Secondary  #A18067  (warm taupe / "muted gold") — H2/H3/H4, links, accent
     Text       #000000
     Back brown #C2B1A5  (light brand accent)
     Back gray  #DADADA
     Gray nuance#EEEDED
     White      #FFFFFF
     Sale red   #E06464

     Font       Montserrat, 200/300/400
     H3/H4      uppercase
     Buttons    pill (50px) and rounded (20px) — both used on the site

   Scoped under .lalp-event to avoid leaking into theme/Elementor.
   ========================================================================== */

/* The page body behind the hero needs to match the section that the hero's
   rounded corner reveals — otherwise a white sliver shows through the curve.
   `<main class="lalp-event">` paints that color so each section's radius
   blends into the next one regardless of theme body background. */
body:has(.lalp-event) {
	background: var(--lalp-c-brown-soft, #efe9e3);
}

.lalp-event {
	/* Brand kit */
	--lalp-c-primary:    #575756;
	--lalp-c-secondary:  #A18067;
	--lalp-c-text:       #000000;
	--lalp-c-brown:      #C2B1A5;
	--lalp-c-gray:       #DADADA;
	--lalp-c-gray-soft:  #EEEDED;
	--lalp-c-white:      #FFFFFF;
	--lalp-c-sale:       #E06464;

	/* Derived utility tones (kept within brand) */
	--lalp-c-brown-soft: #efe9e3;   /* C2B1A5 @ low opacity flattened */
	--lalp-c-line:       rgba(87, 87, 86, .15);
	--lalp-c-line-light: rgba(255, 255, 255, .22);

	/* Typography */
	--lalp-font:         "Montserrat", Sans-serif;
	--lalp-fw-light:     200;
	--lalp-fw-regular:   300;
	--lalp-fw-medium:    400;
	--lalp-fw-bold:      500;

	/* Shape — site uses 20px and 50px (pill) heavily */
	--lalp-radius-sm:    10px;
	--lalp-radius-md:    20px;
	--lalp-radius-pill:  50px;

	/* Layout */
	--lalp-container:        1240px;
	--lalp-container-narrow: 800px;

	color: var(--lalp-c-text);
	/* The main wrapper is painted in the marquee section's color so the hero's
	   curved bottom-right corner reveals brown-soft (matching the marquee
	   below) rather than the white page body. Each section then paints its
	   own background over it. */
	background: var(--lalp-c-brown-soft);
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-medium);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.lalp-event *,
.lalp-event *::before,
.lalp-event *::after {
	box-sizing: border-box;
}

.lalp-event img {
	max-width: 100%;
	height: auto;
	display: block;
}

.lalp-event a {
	color: var(--lalp-c-secondary);
	text-decoration: none;
	transition: color .25s ease;
}
.lalp-event a:hover { color: var(--lalp-c-primary); }

/* ---------- Layout helpers ---------- */
.lalp-event__container {
	max-width: var(--lalp-container);
	margin: 0 auto;
	padding: 0 24px;
}
.lalp-event__container--narrow {
	max-width: var(--lalp-container-narrow);
}

.lalp-event__section {
	position: relative;
	padding: clamp(64px, 9vw, 120px) 0;
}
/* Brand signature: one rounded bottom corner + subtle drop shadow.
   Sections only show the radius when they have a background different from
   the previous one — alternated via --corner-br / --corner-bl modifiers. */
.lalp-event__section--corner-br,
.lalp-event__section--corner-bl {
	overflow: hidden;
	box-shadow: 0 30px 60px -40px rgba(87, 87, 86, .18);
}
.lalp-event__section--corner-br { border-bottom-right-radius: clamp(50px, 8vw, 100px); }
.lalp-event__section--corner-bl { border-bottom-left-radius:  clamp(50px, 8vw, 100px); }

/* ---------- Headings (mirror Elementor kit) ---------- */
.lalp-event h1,
.lalp-event h2,
.lalp-event h3,
.lalp-event h4 {
	font-family: var(--lalp-font);
	margin: 0;
}
.lalp-event h1 {
	color: var(--lalp-c-primary);
	font-weight: var(--lalp-fw-regular); /* 300 per kit */
	font-size: clamp(34px, 5vw, 50px);
	line-height: 1.15;
	letter-spacing: -.005em;
}
.lalp-event h2 {
	color: var(--lalp-c-secondary);
	font-weight: var(--lalp-fw-regular);
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.2;
}
.lalp-event h3,
.lalp-event h4 {
	color: var(--lalp-c-secondary);
	font-weight: var(--lalp-fw-regular);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.lalp-event h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.3; }
.lalp-event h4 { font-size: 18px; line-height: 1.4; }

.lalp-event__section-title {
	text-align: center;
	margin: 0 0 clamp(28px, 4vw, 56px);
}
.lalp-event__section-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 1px;
	background: var(--lalp-c-secondary);
	margin: 18px auto 0;
}

.lalp-event__eyebrow {
	font-size: 11px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--lalp-c-secondary);
	margin: 0 0 18px;
	/* `letter-spacing` adds tracking AFTER each glyph including the last,
	   which leaves a ~.28em phantom gutter on the right. Compensate via
	   padding-left so the visual center matches the geometric center. */
	padding-left: .28em;
}

/* ---------- HERO ---------- */
/* ---------- HERO (compact, light gray, image overlapping next section) ----- *
 * Short editorial stage (~50vh). Featured image sits centered and extends
 * below the section via negative bottom margin so it overlaps the marquee
 * section beneath. The light gray bg keeps focus on the image art.
 */
.lalp-event__hero {
	position: relative;
	/* Top padding (NOT child margin) sets the gap above the cover image —
	   margin would collapse through the hero and let the brown-soft <main>
	   color leak in at the top, giving a two-tone hero. */
	padding: 10% 24px 0;
	background: var(--lalp-c-gray-soft);
	color: var(--lalp-c-primary);
	overflow: visible;                                  /* allow image to spill below */
	z-index: 2;                                         /* sit above next section */
	text-align: center;
	border-bottom-right-radius: 100px;
	box-shadow:
		0 24px 50px -28px rgba(87, 87, 86, .22),
		0 6px 16px -8px rgba(87, 87, 86, .12);
}
.lalp-event__hero-bg-pattern {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 18% 25%, rgba(193,177,165,.18), transparent 45%),
		radial-gradient(circle at 82% 70%, rgba(193,177,165,.14), transparent 50%);
	pointer-events: none;
	z-index: 0;
}
.lalp-event__hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

/* Featured cover — stretches edge to edge of the container.
   Top spacing is supplied by the hero's padding-top (20%) to avoid margin
   collapse. Negative bottom margin overlaps into the marquee section below. */
.lalp-event__cover {
	margin: 0 auto -10%;
	width: 100%;
	max-width: 1240px;
	padding: 0 clamp(16px, 3vw, 40px);
	will-change: transform;
	position: relative;
	z-index: 3;
}
.lalp-event__cover-img {
	display: block;
	width: 100%;
	height: auto;
	/* No max-height + no object-fit:contain — the image stretches naturally
	   and the radius shapes the image itself, not an outer frame. */
	border-radius: clamp(18px, 2vw, 28px);
	box-shadow:
		0 40px 80px -30px rgba(20, 19, 18, .50),
		0 14px 30px -10px rgba(20, 19, 18, .32);
}

.lalp-event__title--fallback {
	color: var(--lalp-c-primary);
	max-width: 22ch;
	text-wrap: balance;
}

.lalp-event__hero .lalp-event__eyebrow {
	color: var(--lalp-c-secondary);
}
.lalp-event__hero-meta {
	display: none;                              /* meta moves to stickybar/RSVP — keeps hero clean */
}
.lalp-event__hero .lalp-event__cta--hero {
	display: none;                              /* CTA also moves down for the cover-driven layout */
}

/* When this hero variant is used, push the next section down to clear the
   overlapping cover and let the lower edge of the image sit ON the gray
   marquee background like an editorial composition. */
.lalp-event__hero + .lalp-event__stickybar + .lalp-event__marquees,
.lalp-event__hero + .lalp-event__marquees {
	padding-top: clamp(120px, 14vw, 180px);
}

.lalp-event__meta-label {
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
	font-weight: var(--lalp-fw-medium);
}
.lalp-event__meta-time {
	display: inline-block;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid rgba(255,255,255,.32);
	font-size: 14px;
	letter-spacing: .04em;
	color: rgba(255,255,255,.82);
	font-weight: var(--lalp-fw-medium);
}

/* ---------- CTA buttons ---------- *
 * Brand signature: asymmetric corner radius — three pill corners (50px) with
 * a single sharp 0px corner top-left. Selectors are bumped to .lalp-event a.x
 * to win specificity against the theme's global `a { color }` rule which
 * otherwise repaints the button label in the link color.
 */
.lalp-event a.lalp-event__cta,
.lalp-event button.lalp-event__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 36px;
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-medium);
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--lalp-c-white);
	background: var(--lalp-c-secondary);
	border: 1px solid var(--lalp-c-secondary);
	border-radius: 0 var(--lalp-radius-pill) var(--lalp-radius-pill) var(--lalp-radius-pill);
	cursor: pointer;
	transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.lalp-event a.lalp-event__cta:hover,
.lalp-event a.lalp-event__cta:focus-visible,
.lalp-event button.lalp-event__cta:hover,
.lalp-event button.lalp-event__cta:focus-visible {
	background: var(--lalp-c-primary);   /* warm dark gray */
	color: var(--lalp-c-white);
	border-color: var(--lalp-c-primary);
	transform: translateY(-1px);
}

/* Hero variant — light button on dark image */
.lalp-event a.lalp-event__cta--hero {
	background: var(--lalp-c-white);
	color: var(--lalp-c-primary);
	border-color: var(--lalp-c-white);
}
.lalp-event a.lalp-event__cta--hero:hover,
.lalp-event a.lalp-event__cta--hero:focus-visible {
	background: var(--lalp-c-secondary);
	color: var(--lalp-c-white);
	border-color: var(--lalp-c-secondary);
}

.lalp-event a.lalp-event__cta--sm {
	padding: 10px 22px;
	font-size: 11px;
	letter-spacing: .18em;
}
.lalp-event a.lalp-event__cta--lg {
	padding: 20px 48px;
	font-size: 14px;
}

/* ---------- Sticky bar ---------- */
/* Sticky meta bar — pinned to the bottom of the viewport.
   Reveals after the user scrolls past the hero (toggled by JS). */
.lalp-event__stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* High z-index to sit above third-party floating widgets (Weglot language
	   switcher, Complianz cookie banner, etc) that otherwise overlap the CTA. */
	z-index: 99990;
	/* Liquid-glass — light brand-gray tint at low opacity so the heavy blur
	   actually reads as the dominant effect (96% opacity hid all blur). */
	background: rgba(238, 237, 237, .55);
	color: var(--lalp-c-primary);
	backdrop-filter: blur(22px) saturate(160%);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	border-top: 1px solid rgba(255, 255, 255, .35);
	box-shadow:
		0 -8px 32px -12px rgba(87, 87, 86, .18),
		inset 0 1px 0 rgba(255, 255, 255, .4);     /* subtle top highlight = glass edge */
	transform: translateY(110%);                /* hidden offscreen below */
	transition: transform .35s ease;
}
/* Fallback for browsers without backdrop-filter support: more opaque so it's
   still legible (Firefox before 103, very old Safari). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lalp-event__stickybar {
		background: rgba(238, 237, 237, .94);
	}
}
.lalp-event__stickybar.is-visible {
	/* When docked at the footer, lift up by the overlap amount (set via JS) */
	transform: translateY(calc(-1 * var(--lalp-bar-lift, 0px)));
}
/* Give the page enough bottom-padding so the bar never covers the RSVP CTA */
.lalp-event:has(.lalp-event__stickybar) {
	padding-bottom: 80px;
}
.lalp-event__stickybar-inner {
	max-width: var(--lalp-container);
	margin: 0 auto;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.lalp-event__stickybar-meta {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 13px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .04em;
}
.lalp-event__stickybar-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
/* Clickable location pin variant */
.lalp-event a.lalp-event__stickybar-item--link {
	color: var(--lalp-c-primary);
	text-decoration: none !important;
	border-bottom: 0 !important;
	transition: color .25s ease;
}
.lalp-event a.lalp-event__stickybar-item--link:hover,
.lalp-event a.lalp-event__stickybar-item--link:focus-visible {
	color: var(--lalp-c-secondary);
}
.lalp-event__stickybar-item svg {
	color: var(--lalp-c-secondary);
}

/* ---------- Prose (body copy, brand font) ---------- */
.lalp-event__prose {
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-medium);
	font-size: 17px;
	line-height: 1.8;
	color: var(--lalp-c-text);
}
.lalp-event__prose p {
	margin: 0 0 1.2em;
}
.lalp-event__prose p:first-child {
	font-weight: var(--lalp-fw-regular);
	font-size: 19px;
	line-height: 1.7;
}
.lalp-event__prose strong {
	color: var(--lalp-c-primary);
	font-weight: var(--lalp-fw-bold);
}
.lalp-event__prose em { font-style: italic; color: var(--lalp-c-secondary); }
.lalp-event__prose a {
	color: var(--lalp-c-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* ---------- Invitation card (event-specific copy) ---------- */
.lalp-event__invitation {
	background: var(--lalp-c-brown-soft);          /* fallback solid */
	padding-top: clamp(72px, 9vw, 120px);
	padding-bottom: clamp(72px, 9vw, 120px);
	position: relative;
	overflow: hidden;                              /* clip motes + mesh to section */
}

/* Register the mesh's custom properties as <percentage> so the browser
   interpolates them natively (required for animating CSS vars used inside
   gradients). Falls back gracefully where @property isn't supported. */
@property --x1 { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --y1 { syntax: '<percentage>'; inherits: false; initial-value: 22%; }
@property --x2 { syntax: '<percentage>'; inherits: false; initial-value: 78%; }
@property --y2 { syntax: '<percentage>'; inherits: false; initial-value: 35%; }
@property --x3 { syntax: '<percentage>'; inherits: false; initial-value: 45%; }
@property --y3 { syntax: '<percentage>'; inherits: false; initial-value: 78%; }
@property --x4 { syntax: '<percentage>'; inherits: false; initial-value: 88%; }
@property --y4 { syntax: '<percentage>'; inherits: false; initial-value: 82%; }
@property --x5 { syntax: '<percentage>'; inherits: false; initial-value: 8%;  }
@property --y5 { syntax: '<percentage>'; inherits: false; initial-value: 65%; }

/* Liquid-metal mesh gradient — five layered radial gradients of brand
   colors. Each blob's center is driven by CSS custom properties that GSAP
   animates, so the mesh slowly morphs like polished brass under glass.
   No new assets, GPU-accelerated, brand-color-only. */
.lalp-event__invitation-mesh {
	position: absolute;
	/* Extend the mesh past the section edges so the SVG displacement's
	   ragged border falls outside the visible area on every side.
	   Section overflow:hidden clips the bleed. */
	inset: -40px;
	z-index: 0;
	pointer-events: none;
	/* Feather top/bottom so the mesh fades into the brown-soft section bg,
	   hiding any residual edge artifacts from the displacement filter. */
	/* Feather all four edges so any displacement-filter raggedness fades
	   into the solid section background. Composited via mask-composite. */
	-webkit-mask-image:
		linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%),
		linear-gradient(90deg,  transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
	mask-image:
		linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%),
		linear-gradient(90deg,  transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
	-webkit-mask-composite: source-in;
	        mask-composite: intersect;
	/* GSAP-animated positions (percentages). Defaults give a static starting layout. */
	--x1: 18%;  --y1: 22%;
	--x2: 78%;  --y2: 35%;
	--x3: 45%;  --y3: 78%;
	--x4: 88%;  --y4: 82%;
	--x5: 8%;   --y5: 65%;
	background:
		/* Bright catch-light highlights */
		radial-gradient(circle at var(--x3) var(--y3), rgba(255, 252, 247, 1) 0%, transparent 50%),
		/* Deep taupe — the "metal" base tone, maxed for contrast */
		radial-gradient(circle at var(--x2) var(--y2), rgba(161, 128, 103, 1) 0%, transparent 55%),
		radial-gradient(circle at var(--x4) var(--y4), rgba(161, 128, 103, .88) 0%, transparent 60%),
		/* True shadow accent — brand primary at low opacity for depth */
		radial-gradient(circle at calc(var(--x4) + 10%) calc(var(--y4) - 5%), rgba(87, 87, 86, .35) 0%, transparent 40%),
		/* Warm-brown mid-tones */
		radial-gradient(circle at var(--x1) var(--y1), rgba(193, 177, 165, .95) 0%, transparent 60%),
		radial-gradient(circle at var(--x5) var(--y5), rgba(193, 177, 165, .85) 0%, transparent 65%),
		/* Cool diagonal shadow note */
		linear-gradient(135deg, rgba(218, 218, 218, .30) 0%, transparent 55%),
		var(--lalp-c-brown-soft);
	will-change: background;
	/* SVG turbulence filter creates the liquid ripple distortion */
	filter: contrast(1.12) saturate(1.20) url(#lalp-liquid);
}

/* Shimmer sweep — a slow angled light pass, like reflection sliding across
   polished brass. Sits above the mesh, below the particles + card. */
.lalp-event__invitation-shimmer {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Feather all four edges so any displacement-filter raggedness fades
	   into the solid section background. Composited via mask-composite. */
	-webkit-mask-image:
		linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%),
		linear-gradient(90deg,  transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
	mask-image:
		linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%),
		linear-gradient(90deg,  transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
	-webkit-mask-composite: source-in;
	        mask-composite: intersect;
	background: linear-gradient(
		115deg,
		transparent 30%,
		rgba(255, 252, 247, 0) 45%,
		rgba(255, 252, 247, .45) 50%,
		rgba(255, 252, 247, 0) 55%,
		transparent 70%
	);
	background-size: 300% 100%;
	background-position: 100% 0;
	animation: lalp-shimmer-sweep 18s ease-in-out infinite;
	mix-blend-mode: overlay;
}
@keyframes lalp-shimmer-sweep {
	0%   { background-position: 100% 0; }
	50%  { background-position: -20% 0; }
	100% { background-position: -150% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.lalp-event__invitation-shimmer { animation: none; }
}
/* Subtle inner-glass treatment over the mesh for that "polished surface" feel */
.lalp-event__invitation-mesh::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,.06) 100%);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.lalp-event__invitation-mesh { /* stays static at default positions */ }
}
/* Floating brand-taupe dust motes drifting upward.
   Particle markup is in the template; GSAP drives the motion. */
.lalp-event__invitation-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;                                    /* above mesh, below card */
	overflow: hidden;
}
.lalp-event__invitation > .lalp-event__container { position: relative; z-index: 2; }

.lalp-event__particle {
	position: absolute;
	bottom: -20px;                                 /* start just below view */
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--lalp-c-secondary) 0%, rgba(161, 128, 103, 0) 70%);
	opacity: 0;
	will-change: transform, opacity;
	filter: blur(1px);
}
/* Mixed sizes for depth (small/medium/large rotating) */
.lalp-event__particle:nth-child(3n)   { width: 4px;  height: 4px; }
.lalp-event__particle:nth-child(3n+1) { width: 8px;  height: 8px; }
.lalp-event__particle:nth-child(3n+2) { width: 12px; height: 12px; filter: blur(2px); }

/* Hide the old orb code (kept in source for easy revert) */
.lalp-event__invitation-orbs { display: none !important; }

/* Corner ornaments — decorative webps anchored in opposite corners of the
   invitation section. Two-layer composition: the outer <span> handles
   placement + GSAP-driven entrance and scroll parallax (transform: x/y/
   rotation/opacity). The inner <img> runs an independent CSS keyframe
   "breathing" animation so the two transforms compose cleanly instead of
   fighting GSAP's scrub. */
.lalp-event__invitation-ornament {
	position: absolute;
	display: block;
	z-index: 1;
	width: clamp(120px, 16vw, 240px);               /* smaller — fits the viewport */
	pointer-events: none;
	user-select: none;
	opacity: 0;                                     /* GSAP fades in */
	will-change: transform, opacity;
}
.lalp-event__invitation-ornament-img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 10px 24px rgba(87, 87, 86, .22));
	animation: lalp-ornament-bob 4.5s ease-in-out infinite;
	will-change: transform;
}
.lalp-event__invitation-ornament--tr {
	top: clamp(12px, 1.5vw, 28px);
	right: clamp(12px, 1.5vw, 28px);
	transform-origin: top right;
}
.lalp-event__invitation-ornament--bl {
	bottom: clamp(12px, 1.5vw, 28px);
	left: clamp(12px, 1.5vw, 28px);
	transform-origin: bottom left;
}
/* Opposite-phase bob via animation-delay (faster than the previous 7.5s+
   GSAP loop so motion is clearly visible). */
.lalp-event__invitation-ornament--tr .lalp-event__invitation-ornament-img {
	animation-delay: 0s;
}
.lalp-event__invitation-ornament--bl .lalp-event__invitation-ornament-img {
	animation-delay: -2.25s;                        /* half-cycle offset = counter-phase */
}
@keyframes lalp-ornament-bob {
	0%, 100% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	50% {
		transform: translate3d(0, -14px, 0) rotate(1.8deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.lalp-event__invitation-ornament { opacity: .9; }
	.lalp-event__invitation-ornament-img { animation: none; }
}
.no-js .lalp-event__invitation-ornament { opacity: .9; }
@media (max-width: 600px) {
	.lalp-event__invitation-ornament--tr { width: 28vw; }
	.lalp-event__invitation-ornament--bl { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lalp-event__particle { display: none; }
}

.lalp-event__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	will-change: transform, opacity;
	opacity: .55;
}
/* Three orbs, three sizes, three tones — all within the brand palette */
.lalp-event__orb--1 {
	width: 520px; height: 520px;
	left: -120px; top: -120px;
	background: radial-gradient(circle, rgba(193, 177, 165, .85) 0%, rgba(193, 177, 165, 0) 70%);
}
.lalp-event__orb--2 {
	width: 640px; height: 640px;
	right: -180px; top: 30%;
	background: radial-gradient(circle, rgba(161, 128, 103, .55) 0%, rgba(161, 128, 103, 0) 70%);
	opacity: .42;
}
.lalp-event__orb--3 {
	width: 420px; height: 420px;
	left: 35%; bottom: -120px;
	background: radial-gradient(circle, rgba(238, 237, 237, .9) 0%, rgba(238, 237, 237, 0) 70%);
	opacity: .5;
}
@media (max-width: 900px) {
	.lalp-event__orb { filter: blur(40px); }
	.lalp-event__orb--1 { width: 360px; height: 360px; }
	.lalp-event__orb--2 { width: 420px; height: 420px; }
	.lalp-event__orb--3 { width: 300px; height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
	.lalp-event__orb { animation: none !important; }
}
.lalp-event__invitation-card {
	position: relative;
	background: var(--lalp-c-white);
	padding: clamp(36px, 5vw, 64px) clamp(28px, 5vw, 72px);
	/* Asymmetric brand radius — matches buttons */
	border-radius: 0 50px 50px 50px;
	box-shadow:
		0 30px 60px -30px rgba(87, 87, 86, .22),
		0 8px 20px -10px rgba(87, 87, 86, .12);
	text-align: center;
}
.lalp-event__invitation .lalp-event__eyebrow {
	color: var(--lalp-c-secondary);
	margin: 0 0 14px;
}
.lalp-event__invitation-title {
	margin: 0 0 clamp(20px, 3vw, 32px);
	font-size: clamp(24px, 3vw, 36px);
	font-weight: var(--lalp-fw-regular);
	color: var(--lalp-c-secondary);
	line-height: 1.2;
	text-wrap: balance;
}
.lalp-event__invitation-body {
	max-width: 64ch;
	margin: 0 auto clamp(28px, 4vw, 40px);
	text-align: left;
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.75;
	color: var(--lalp-c-text);
}
.lalp-event__invitation-body p {
	margin: 0 0 1.1em;
}
.lalp-event__invitation-body p:last-child { margin-bottom: 0; }
.lalp-event__invitation-body strong {
	color: var(--lalp-c-primary);
	font-weight: var(--lalp-fw-bold);
}
.lalp-event__invitation-body a {
	color: var(--lalp-c-secondary);
	text-decoration: none;
	border-bottom: 1px solid rgba(161, 128, 103, .35);
	transition: color .25s ease, border-color .25s ease;
}
.lalp-event__invitation-body a:hover,
.lalp-event__invitation-body a:focus-visible {
	color: var(--lalp-c-primary);
	border-bottom-color: var(--lalp-c-primary);
}
/* The "credo" line gets a slightly elevated treatment to mark the brand voice */
.lalp-event__invitation-credo {
	font-style: italic;
	color: var(--lalp-c-primary);
	font-size: 1.05em;
	padding: 8px 0;
	border-top: 1px solid rgba(87, 87, 86, .12);
	border-bottom: 1px solid rgba(87, 87, 86, .12);
}

/* ---------- Charity carousel section (Elementor template embed) ---------- *
 * Full-bleed: no horizontal padding. The Elementor template provides its own
 * title and inner spacing. Section stretches edge-to-edge for the offset
 * carousel look (cards flush to left viewport edge). */
.lalp-event__charity-carousel {
	background: var(--lalp-c-white);
	padding-top: clamp(72px, 9vw, 120px);
	padding-bottom: clamp(72px, 9vw, 120px);
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;                                  /* clip slides that overflow right */
}

/* ---------- Custom Property Showcase (editorial portrait cards) ---------- *
 * Edge-to-edge, native CSS scroll-snap carousel. 5 visible per row at
 * desktop with a peek of the 6th on the right. No Swiper.
 *
 * Layout math: 5 visible cards from 100vw, gaps between them. We add a
 * left padding so cards start aligned to the page container, and pull the
 * card width down slightly so the next card peeks past the viewport edge.
 */
.lalp-event__charity-carousel--custom {
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
}
.lalp-showcase {
	position: relative;
	margin-top: clamp(32px, 4vw, 56px);
	--lalp-sc-gap: clamp(12px, 1.4vw, 20px);
	--lalp-sc-edge: clamp(16px, 3vw, 40px);
	--lalp-sc-visible: 5;
	/* Card width = (viewport - left edge padding - 5 gaps) / 5
	   The peek comes from a slightly smaller divisor (visible + 0.2). */
	--lalp-sc-card: calc(
		(100vw - var(--lalp-sc-edge) - (var(--lalp-sc-visible) * var(--lalp-sc-gap)))
		/ (var(--lalp-sc-visible) + 0.2)
	);
}
.lalp-showcase__track {
	display: flex;
	gap: var(--lalp-sc-gap);
	overflow-x: auto;
	/* `proximity` is gentler than `mandatory` — it lets smooth-scroll glide
	   between cards without snapping mid-motion. */
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	padding: 4px var(--lalp-sc-edge) 28px;             /* edge gutter aligns w/ section title */
	scrollbar-width: thin;
	scrollbar-color: var(--lalp-c-secondary) transparent;
}
.lalp-showcase__track::-webkit-scrollbar { height: 6px; }
.lalp-showcase__track::-webkit-scrollbar-track { background: transparent; }
.lalp-showcase__track::-webkit-scrollbar-thumb {
	background: var(--lalp-c-line);
	border-radius: 3px;
}

/* The card — editorial portrait */
.lalp-event a.lalp-showcase__card {
	flex: 0 0 var(--lalp-sc-card);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--lalp-c-white);
	border: 1px solid var(--lalp-c-line) !important;
	border-radius: 0 50px 50px 50px;
	overflow: hidden;
	text-decoration: none !important;
	color: var(--lalp-c-text) !important;
	box-shadow: 0 16px 40px -24px rgba(87, 87, 86, .18);
	transition: transform .35s ease, box-shadow .35s ease;
	min-width: 0;
}
.lalp-event a.lalp-showcase__card:hover,
.lalp-event a.lalp-showcase__card:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px -28px rgba(87, 87, 86, .30);
}
@media (max-width: 1280px) {
	.lalp-showcase { --lalp-sc-visible: 4; }
}
@media (max-width: 1024px) {
	.lalp-showcase { --lalp-sc-visible: 3; }
}
@media (max-width: 768px) {
	.lalp-showcase { --lalp-sc-visible: 2; }
}
@media (max-width: 520px) {
	.lalp-showcase { --lalp-sc-visible: 1; }
	.lalp-event a.lalp-showcase__card { flex: 0 0 80vw; }
}

/* Image area — slide stack: images absolutely layered, only .is-active shown */
.lalp-showcase__image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--lalp-c-gray-soft);
}
.lalp-showcase__slides {
	position: absolute;
	inset: 0;
}
.lalp-showcase__image .lalp-showcase__img,
.lalp-showcase__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2, .8, .2, 1);
	display: block;
	will-change: opacity;
}
.lalp-showcase__image .lalp-showcase__img.is-active,
.lalp-showcase__image > img {
	opacity: 1;                                         /* fallback single-img case */
}
.lalp-event a.lalp-showcase__card:hover .lalp-showcase__img.is-active,
.lalp-event a.lalp-showcase__card:hover .lalp-showcase__image > img {
	transform: scale(1.06);
}
.lalp-showcase__image-fallback {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--lalp-c-brown-soft), var(--lalp-c-gray-soft));
}

/* Listing-type chip ("Продава" etc.) */
.lalp-showcase__chip {
	position: absolute;
	top: clamp(14px, 2vw, 20px);
	left: clamp(14px, 2vw, 20px);
	background: rgba(255, 255, 255, .92);
	color: var(--lalp-c-primary);
	padding: 6px 14px;
	border-radius: 0 16px 16px 16px;
	font-size: 11px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .22em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Card body — editorial type stack */
.lalp-showcase__body {
	padding: clamp(20px, 2.5vw, 28px) clamp(22px, 2.5vw, 32px) clamp(12px, 1.5vw, 18px);
	flex: 1 1 auto;
}
.lalp-showcase__eyebrow {
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	font-weight: var(--lalp-fw-medium);
	color: var(--lalp-c-secondary);
	margin: 0 0 10px;
}
/* Selector escalated to .lalp-event h3.lalp-showcase__title so it beats
   the generic .lalp-event h3 rule above (which was sizing it 20-24px). */
.lalp-event h3.lalp-showcase__title {
	font-family: var(--lalp-font);
	color: var(--lalp-c-primary);
	font-weight: var(--lalp-fw-regular);
	font-size: clamp(16px, 1.3vw, 21px);
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0;
	text-transform: none;                               /* override the global h3 uppercase */
	white-space: nowrap;                                /* never wrap */
	overflow: hidden;
	text-overflow: ellipsis;                            /* safety net for unusually long titles */
}

/* Card footer — metrics + arrow */
.lalp-showcase__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(14px, 1.8vw, 20px) clamp(22px, 2.5vw, 32px) clamp(20px, 2.5vw, 28px);
	border-top: 1px solid var(--lalp-c-line);
}
.lalp-showcase__metrics {
	display: flex;
	gap: clamp(18px, 2.5vw, 32px);
	align-items: baseline;
	flex-wrap: wrap;
	min-width: 0;
}
.lalp-showcase__metric {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
/* Hairline separator between adjacent metrics (v2 polish) */
.lalp-event.is-v2 .lalp-showcase__metric + .lalp-showcase__metric::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1em;
	background: var(--lalp-c-line);
	margin: 0 clamp(10px, 1.5vw, 18px) 0 0;
	align-self: center;
	transform: translateY(1px);
}
.lalp-showcase__metric-num {
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-regular);
	font-size: clamp(15px, 1.4vw, 18px);
	color: var(--lalp-c-primary);
	letter-spacing: .01em;
}
.lalp-showcase__metric-unit {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lalp-c-secondary);
	font-weight: var(--lalp-fw-medium);
}
.lalp-showcase__metric--price .lalp-showcase__metric-num {
	color: var(--lalp-c-secondary);
}
.lalp-showcase__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--lalp-c-primary);
	background: var(--lalp-c-gray-soft);
	transition: background .25s ease, color .25s ease, transform .25s ease;
	flex-shrink: 0;
}
.lalp-event a.lalp-showcase__card:hover .lalp-showcase__arrow {
	background: var(--lalp-c-secondary);
	color: var(--lalp-c-white);
	transform: translateX(2px);
}
.lalp-showcase__arrow svg { width: 18px; height: 18px; }

/* Nav buttons — brand pills, vertically centered on the track */
.lalp-event button.lalp-showcase__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	padding: 0 !important;
	border: 1px solid var(--lalp-c-line) !important;
	background: var(--lalp-c-white) !important;
	color: var(--lalp-c-primary) !important;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
	outline: none !important;
	box-shadow: 0 8px 20px -10px rgba(87, 87, 86, .25);
}
.lalp-event button.lalp-showcase__nav:hover,
.lalp-event button.lalp-showcase__nav:focus-visible {
	background: var(--lalp-c-secondary) !important;
	color: var(--lalp-c-white) !important;
	border-color: var(--lalp-c-secondary) !important;
}
.lalp-event button.lalp-showcase__nav svg { width: 18px; height: 18px; }
/* Nav arrows live INSIDE the viewport — align to the same edge gutter the
   first/last card uses, so they sit comfortably visible on the gray panel. */
.lalp-showcase__nav--prev { left: var(--lalp-sc-edge, 16px); }
.lalp-showcase__nav--next { right: var(--lalp-sc-edge, 16px); }
/* Hide nav arrows only on very narrow viewports where they crowd the card.
   On most phones (≥420px) keep at least the right arrow visible as a clear
   "more →" affordance so first-time visitors discover the rest of the deck. */
@media (max-width: 420px) {
	.lalp-event button.lalp-showcase__nav { display: none; }
}

/* ---------- Privileges grid ---------- */
.lalp-event__privileges {
	background: var(--lalp-c-gray-soft);
}
.lalp-event__privileges-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(20px, 3vw, 32px);
}
.lalp-event__privileges-grid li {
	background: var(--lalp-c-white);
	padding: 40px 32px;
	border: 1px solid var(--lalp-c-line);
	border-radius: 0 var(--lalp-radius-pill) var(--lalp-radius-pill) var(--lalp-radius-pill);
	position: relative;
	transition: transform .3s ease, box-shadow .3s ease;
}
.lalp-event__privileges-grid li:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -20px rgba(87,87,86,.25);
}
.lalp-event__privilege-num {
	display: block;
	font-size: 12px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .22em;
	color: var(--lalp-c-secondary);
	margin: 0 0 16px;
}
.lalp-event__privileges-grid h3 {
	margin: 0 0 12px;
}
.lalp-event__privileges-grid p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--lalp-c-text);
}

/* ---------- Marquee gallery (4 rows × ~5 cols visible, alternating L/R) --- *
 * Each row is a horizontally-scrolling track that loops endlessly via GSAP.
 * Items are sized so ~5 are visible per row at the design viewport. Rows
 * stack with a tight gap to read as a unified grid composition.
 */
.lalp-event__marquees {
	background: var(--lalp-c-brown-soft);          /* warm light, not dark */
	color: var(--lalp-c-primary);
	padding-left: 0;
	padding-right: 0;
	padding-bottom: clamp(64px, 9vw, 120px);
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1.2vw, 14px);
	position: relative;
}
/* The first marquee row gets extra top padding via the hero-overlap rule above. */

.lalp-event__marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* Fade the edges so items appear to flow in from off-screen */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.lalp-event__marquee-track {
	display: flex;
	gap: clamp(10px, 1.4vw, 18px);
	width: max-content;
	will-change: transform;
	/* Pure-CSS infinite scroll. The track contains the row's items rendered
	   twice in PHP, so translating -50% lands on a seamless seam. */
	animation: lalp-marquee-left 60s linear infinite;
}
.lalp-event__marquee[data-lalp-direction="right"] .lalp-event__marquee-track {
	/* Right-flowing rows used to reuse the left keyframes with
	   `animation-direction: reverse`, which on narrow viewports (mobile) made
	   the row start with the track translated -50% — leaving a big visible
	   gap on the left until content scrolled in. Use a dedicated keyframe
	   that always begins with content visible at x=0. */
	animation-name: lalp-marquee-right;
}
@keyframes lalp-marquee-left {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes lalp-marquee-right {
	from { transform: translate3d(-50%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

/* Marquee items.
   Selector specificity (.lalp-event button.x) + !important on visual props
   so the Hello-Elementor reset (which sets `button { border: 1px solid #c36;
   background-color: #c36 on :hover/:focus; color: #c36 }`) can't bleed
   through and paint pink borders or pink hover fills around the tiles. */
.lalp-event button.lalp-event__marquee-item {
	flex: 0 0 auto;
	/* ~3 visible per row at common viewports, ~20% bigger than 4-up. */
	width: clamp(170px, calc((100vw - 80px) / 3), 290px);
	aspect-ratio: 4 / 3;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	color: inherit !important;
	border-radius: 18px !important;
	overflow: hidden;
	cursor: zoom-in;
	display: block;
	position: relative;
	outline: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none !important;
}
/* Lock backgrounds on EVERY interactive state — this is what kills the
   pink hover fill that was showing through the rounded corners. */
.lalp-event button.lalp-event__marquee-item:hover,
.lalp-event button.lalp-event__marquee-item:focus,
.lalp-event button.lalp-event__marquee-item:focus-visible,
.lalp-event button.lalp-event__marquee-item:active {
	background: transparent !important;
	background-color: transparent !important;
	color: inherit !important;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
/* Image: scale-zoom on its own compositor layer (will-change isolates it
   from the marquee track's transform so motion stays buttery). */
.lalp-event button.lalp-event__marquee-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
	transform: scale(1.001);                            /* prime GPU layer */
	will-change: transform;
	transition: transform 1.6s cubic-bezier(.22, .61, .36, 1);
}

/* Subtle warm veil — adds cohesion across the row in default state, fades
   on hover to reveal the image. Brand taupe tint at low opacity. */
.lalp-event__marquee-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(87, 87, 86, .25) 0%, rgba(87, 87, 86, .55) 100%),
		linear-gradient(180deg, rgba(161, 128, 103, .18), rgba(161, 128, 103, .12));
	mix-blend-mode: multiply;
	opacity: .65;
	transition: opacity .6s ease;
	border-radius: inherit;
}

/* Floating zoom hint — slides up + fades in on hover */
.lalp-event__marquee-zoom {
	position: absolute;
	bottom: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--lalp-c-primary);
	box-shadow: 0 10px 24px -10px rgba(20, 19, 18, .35);
	transform: translateY(12px) scale(.85);
	opacity: 0;
	transition:
		opacity .45s ease,
		transform .55s cubic-bezier(.22, .61, .36, 1);
	pointer-events: none;
}
.lalp-event__marquee-zoom svg { width: 16px; height: 16px; }

/* Hover orchestration — three smooth, layered transitions */
.lalp-event button.lalp-event__marquee-item:hover img,
.lalp-event button.lalp-event__marquee-item:focus-visible img {
	transform: scale(1.08);
}
.lalp-event button.lalp-event__marquee-item:hover .lalp-event__marquee-veil,
.lalp-event button.lalp-event__marquee-item:focus-visible .lalp-event__marquee-veil {
	opacity: 0;
}
.lalp-event button.lalp-event__marquee-item:hover .lalp-event__marquee-zoom,
.lalp-event button.lalp-event__marquee-item:focus-visible .lalp-event__marquee-zoom {
	opacity: 1;
	transform: translateY(0) scale(1);
}
/* Smooth out the parent button transition (vs the snappy default) */
.lalp-event button.lalp-event__marquee-item {
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.lalp-event button.lalp-event__marquee-item:hover,
.lalp-event button.lalp-event__marquee-item:focus-visible {
	transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
	.lalp-event__marquee-track { animation: none !important; }
}
@media (max-width: 900px) {
	.lalp-event button.lalp-event__marquee-item {
		width: clamp(130px, 24vw, 200px);
	}
}
@media (max-width: 600px) {
	.lalp-event button.lalp-event__marquee-item {
		width: 46vw;
		border-radius: 14px !important;
	}
}

/* ---------- Charity cause section ---------- *
 * Dark warm-gray section with two-column copy + Pavel Andreev logo card,
 * plus a "Официален партньор" sash with BNK Wines (white) logo on a deep
 * taupe panel so the white mark always stands out.
 */
.lalp-event__charity {
	background: var(--lalp-c-gray-soft);
	color: var(--lalp-c-text);
	padding-top: clamp(72px, 9vw, 120px);
	padding-bottom: clamp(56px, 7vw, 96px);
	position: relative;
	overflow: hidden;
}
/* Whisper of brand warmth in the corners (low-key on white). */
.lalp-event__charity::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 12% 18%, rgba(193, 177, 165, .14), transparent 45%),
		radial-gradient(circle at 88% 92%, rgba(193, 177, 165, .10), transparent 55%);
	pointer-events: none;
}
.lalp-event__charity > .lalp-event__container { position: relative; z-index: 1; }

.lalp-event__charity-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
@media (max-width: 820px) {
	.lalp-event__charity-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

/* ---- Copy column ---- */
.lalp-event__charity-eyebrow { color: var(--lalp-c-secondary); }
.lalp-event__charity-title {
	color: var(--lalp-c-text);
	font-weight: var(--lalp-fw-regular);
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.15;
	margin: 0 0 clamp(20px, 2.5vw, 32px);
	text-wrap: balance;
}
.lalp-event__charity-body {
	max-width: 56ch;
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.8;
	color: var(--lalp-c-text);
}
@media (max-width: 820px) {
	.lalp-event__charity-body { margin-left: auto; margin-right: auto; text-align: left; }
}
.lalp-event__charity-body p { margin: 0 0 1.1em; }
.lalp-event__charity-body p:last-child { margin-bottom: 0; }
.lalp-event__charity-body strong { color: var(--lalp-c-primary); font-weight: var(--lalp-fw-bold); }
.lalp-event__charity-body a {
	color: var(--lalp-c-secondary);
	text-decoration: none;
	border-bottom: 1px solid rgba(161, 128, 103, .35);
	transition: color .25s ease, border-color .25s ease;
}
.lalp-event__charity-body a:hover,
.lalp-event__charity-body a:focus-visible {
	color: var(--lalp-c-primary);
	border-bottom-color: var(--lalp-c-primary);
}
.lalp-event__charity-actions {
	margin-top: clamp(24px, 3vw, 36px);
}

/* ---- Visual column: Pavel Andreev logo card ---- */
.lalp-event__charity-visual {
	display: flex;
	justify-content: center;
}
.lalp-event a.lalp-event__charity-logo-card {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lalp-c-white);
	padding: clamp(28px, 4vw, 48px);
	/* Brand asymmetric radius — matches buttons + invitation card */
	border-radius: 0 50px 50px 50px;
	box-shadow:
		0 30px 60px -30px rgba(87, 87, 86, .22),
		0 8px 20px -10px rgba(87, 87, 86, .14);
	max-width: 360px;
	width: 100%;
	aspect-ratio: 1 / 1;
	transition: transform .35s ease, box-shadow .35s ease;
	text-decoration: none !important;
	border: 1px solid var(--lalp-c-line) !important;
}
.lalp-event a.lalp-event__charity-logo-card:hover,
.lalp-event a.lalp-event__charity-logo-card:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		0 36px 70px -28px rgba(87, 87, 86, .28),
		0 12px 24px -10px rgba(87, 87, 86, .18);
}
.lalp-event__charity-logo-card img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ---- Official partner sash (BNK Wines) ---- */
.lalp-event__charity-partner {
	margin-top: clamp(48px, 6vw, 80px);
	padding-top: clamp(28px, 3vw, 40px);
	border-top: 1px solid var(--lalp-c-line);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 3vw, 40px);
	flex-wrap: wrap;
}
.lalp-event__charity-partner-label {
	font-size: 12px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--lalp-c-secondary);
}
.lalp-event a.lalp-event__charity-partner-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Deep taupe panel so the white BNK Wines logo always stands out,
	   framed with brand asymmetric radius. */
	background: var(--lalp-c-secondary);
	padding: 28px 56px;
	border-radius: 0 50px 50px 50px;
	transition: background .25s ease, transform .25s ease;
	text-decoration: none !important;
	border: 0 !important;
	min-height: 96px;
	box-shadow: 0 12px 32px -16px rgba(87, 87, 86, .25);
}
.lalp-event a.lalp-event__charity-partner-logo:hover,
.lalp-event a.lalp-event__charity-partner-logo:focus-visible {
	background: var(--lalp-c-primary);
	transform: translateY(-2px);
}
.lalp-event__charity-partner-logo img {
	display: block;
	height: 48px;
	width: auto;
	max-width: 320px;
	object-fit: contain;
}
@media (max-width: 600px) {
	.lalp-event a.lalp-event__charity-partner-logo {
		padding: 22px 42px;
		min-height: 80px;
	}
	.lalp-event__charity-partner-logo img { height: 38px; }
}

/* ---------- RSVP ---------- */
.lalp-event__rsvp {
	background: var(--lalp-c-brown-soft);
}
.lalp-event__rsvp-card {
	background: var(--lalp-c-white);
	border: 1px solid var(--lalp-c-line);
	border-radius: 0 var(--lalp-radius-pill) var(--lalp-radius-pill) var(--lalp-radius-pill);
	padding: clamp(36px, 6vw, 72px);
	text-align: center;
	box-shadow: 0 30px 60px -30px rgba(87,87,86,.25);
}
.lalp-event__rsvp h2 {
	margin: 0 0 18px;
}
.lalp-event__rsvp-sub {
	margin: 0 auto 36px;
	max-width: 50ch;
	font-size: 16px;
	line-height: 1.7;
	color: var(--lalp-c-text);
}
.lalp-event__rsvp-fallback {
	margin-top: 24px;
}
.lalp-event__rsvp-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
}
.lalp-event__rsvp-altcontact {
	margin: 0;
	font-size: 13px;
	color: rgba(87, 87, 86, .72);
	letter-spacing: .01em;
}
.lalp-event__rsvp-altcontact a {
	color: var(--lalp-c-secondary);
	border-bottom: 1px solid rgba(161, 128, 103, .35);
	text-decoration: none;
}
.lalp-event__rsvp-altcontact a:hover { color: var(--lalp-c-primary); }
.lalp-event__rsvp-card form,
.lalp-event__rsvp-card .wpforms-container,
.lalp-event__rsvp-card .bit-form {
	text-align: left;
	margin: 0 auto;
	max-width: 520px;
}

/* ---------- Lightbox carousel ---------- */
.lalp-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(20, 19, 18, .96);
	display: none;
	z-index: 9999;
	color: var(--lalp-c-white);
	font-family: var(--lalp-font);
}
.lalp-lightbox.is-open { display: block; }
.lalp-lightbox__stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: pan-y;
}
.lalp-lightbox__track {
	display: flex;
	width: 100%;
	height: 100%;
	will-change: transform;
}
.lalp-lightbox__slide {
	flex: 0 0 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vh 6vw;
}
.lalp-lightbox__slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--lalp-radius-sm);
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
	user-select: none;
	-webkit-user-drag: none;
}
/* Buttons are scoped with `.lalp-lightbox button.x` so theme/Elementor link
   and button hover rules can't bleed through. All colors locked to brand. */
.lalp-lightbox button {
	font-family: var(--lalp-font);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.lalp-lightbox button:focus { outline: none; }
.lalp-lightbox button:focus-visible {
	outline: 2px solid var(--lalp-c-brown);
	outline-offset: 3px;
}

.lalp-lightbox button.lalp-lightbox__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid rgba(161, 128, 103, .55) !important;   /* taupe border default */
	background: rgba(161, 128, 103, .18) !important;         /* taupe wash default */
	background-color: rgba(161, 128, 103, .18) !important;
	color: var(--lalp-c-white) !important;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
	z-index: 2;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.lalp-lightbox button.lalp-lightbox__btn:hover,
.lalp-lightbox button.lalp-lightbox__btn:focus-visible {
	background: var(--lalp-c-white) !important;              /* white on hover */
	background-color: var(--lalp-c-white) !important;
	color: var(--lalp-c-secondary) !important;               /* taupe arrow */
	border-color: var(--lalp-c-white) !important;
}
.lalp-lightbox button.lalp-lightbox__btn:active {
	transform: translateY(-50%) scale(.96);
}
.lalp-lightbox__btn--prev { left: clamp(16px, 3vw, 40px); }
.lalp-lightbox__btn--next { right: clamp(16px, 3vw, 40px); }
.lalp-lightbox button.lalp-lightbox__btn svg {
	width: 22px;
	height: 22px;
	color: currentColor;                          /* inherits from button color */
}

.lalp-lightbox button.lalp-lightbox__close {
	position: absolute;
	top: clamp(16px, 2.5vw, 28px);
	right: clamp(16px, 2.5vw, 28px);
	background: rgba(161, 128, 103, .18) !important;
	background-color: rgba(161, 128, 103, .18) !important;
	border: 1px solid rgba(161, 128, 103, .55) !important;
	color: var(--lalp-c-white) !important;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--lalp-fw-light);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.lalp-lightbox button.lalp-lightbox__close:hover,
.lalp-lightbox button.lalp-lightbox__close:focus-visible {
	background: var(--lalp-c-white) !important;
	background-color: var(--lalp-c-white) !important;
	color: var(--lalp-c-secondary) !important;
	border-color: var(--lalp-c-white) !important;
}

.lalp-lightbox__counter {
	position: absolute;
	bottom: clamp(16px, 2.5vw, 32px);
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
	z-index: 2;
}

@media (max-width: 600px) {
	.lalp-lightbox__btn { width: 44px; height: 44px; }
	.lalp-lightbox__btn svg { width: 18px; height: 18px; }
	.lalp-lightbox__slide { padding: 6vh 4vw; }
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 600px) {
	.lalp-event__hero {
		min-height: 78vh;
	}
	.lalp-event__hero-meta {
		gap: 16px;
		flex-direction: column;
	}
	.lalp-event__stickybar-inner {
		padding: 10px 16px;
	}
	.lalp-event__stickybar-meta {
		gap: 12px;
		font-size: 12px;
	}
}

/* ============================================================================
   Registration popup (RSVP)
   Brand-language modal: dark scrim, off-white card with asymmetric pill
   corner, taupe accents, gentle scale-in entry, success state with a
   drawing checkmark.
   ========================================================================== */
.lalp-rsvp-popup {
	position: fixed;
	inset: 0;
	/* Must outrank the sticky bar (99990) so the modal sits ON TOP of the
	   fixed bottom CTA bar when open. */
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 40px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility 0s linear .35s;
}
.lalp-rsvp-popup[hidden] { display: none; }
.lalp-rsvp-popup.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .35s ease, visibility 0s linear 0s;
}
.lalp-rsvp-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 19, 18, .55);
	backdrop-filter: blur(8px) saturate(140%);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
}
.lalp-rsvp-popup__dialog {
	position: relative;
	z-index: 1;
	width: min(560px, 100%);
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	background: var(--lalp-c-white);
	color: var(--lalp-c-text);
	padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 48px);
	border-radius: 0 50px 50px 50px;                  /* brand signature */
	box-shadow:
		0 50px 100px -40px rgba(20, 19, 18, .50),
		0 20px 40px -20px rgba(20, 19, 18, .25);
	transform: translateY(20px) scale(.96);
	opacity: 0;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .35s ease;
}
.lalp-rsvp-popup.is-open .lalp-rsvp-popup__dialog {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* Close (X) button — top-right of dialog */
.lalp-rsvp-popup button.lalp-rsvp-popup__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid var(--lalp-c-line) !important;
	color: var(--lalp-c-primary) !important;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
	outline: none !important;
	box-shadow: none !important;
	z-index: 2;
}
.lalp-rsvp-popup button.lalp-rsvp-popup__close:hover,
.lalp-rsvp-popup button.lalp-rsvp-popup__close:focus-visible {
	background: var(--lalp-c-secondary) !important;
	color: var(--lalp-c-white) !important;
	border-color: var(--lalp-c-secondary) !important;
}
.lalp-rsvp-popup__close svg { width: 16px; height: 16px; }

/* Heading area */
.lalp-rsvp-popup__title {
	font-family: var(--lalp-font);
	color: var(--lalp-c-primary);
	font-weight: var(--lalp-fw-regular);
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.15;
	margin: 0 0 12px;
	text-wrap: balance;
}
.lalp-rsvp-popup__sub {
	margin: 0 0 28px;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(0, 0, 0, .68);
}

/* Form layout */
.lalp-rsvp-popup__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.lalp-rsvp-popup__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 480px) {
	.lalp-rsvp-popup__row { grid-template-columns: 1fr; }
}
.lalp-rsvp-popup__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.lalp-rsvp-popup__field label {
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: var(--lalp-fw-medium);
	color: var(--lalp-c-secondary);
}
/* Specificity-boosted selector chain: hello-elementor's reset.css targets
   input[type=text] etc. at higher specificity than a class-descendant
   selector, AND it loads AFTER our plugin CSS, so it wins ties. Stacking
   `[type=...]` here matches Hello's specificity and lands later (because
   we're a longer chain), letting us cleanly own the popup field styling. */
.lalp-rsvp-popup__field input[type="text"],
.lalp-rsvp-popup__field input[type="email"],
.lalp-rsvp-popup__field input[type="tel"] {
	font-family: var(--lalp-font);
	font-size: 15px;
	color: var(--lalp-c-text);
	background: var(--lalp-c-white);
	border: 1px solid var(--lalp-c-line);
	border-bottom: 1px solid var(--lalp-c-line);
	border-radius: 50px;
	padding: 14px 22px;
	width: 100%;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.lalp-rsvp-popup__field input[type="text"]:focus,
.lalp-rsvp-popup__field input[type="email"]:focus,
.lalp-rsvp-popup__field input[type="tel"]:focus {
	outline: none;
	border-color: var(--lalp-c-secondary);
	box-shadow: 0 0 0 4px rgba(161, 128, 103, .15);
	background: #fffefb;
}
.lalp-rsvp-popup__field input::placeholder { color: rgba(0, 0, 0, .35); }
/* Suppress the browser's auto-invalid styling on required fields before the
   user has even interacted (otherwise `required` makes fields red on load).
   We only style the user-action invalid state via :user-invalid (modern)
   or the .has-error class added by JS. */
.lalp-rsvp-popup__field input:user-invalid {
	border-color: var(--lalp-c-secondary);
}
.lalp-rsvp-popup__field.has-error input {
	border-color: var(--lalp-c-secondary);
	background: rgba(161, 128, 103, .04);
}

/* Honeypot — visually hidden but available to bots */
.lalp-rsvp-popup__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Submit button — uses the brand CTA, with spinner state */
.lalp-rsvp-popup button.lalp-rsvp-popup__submit,
.lalp-rsvp-popup__view a.lalp-rsvp-popup__close-btn,
.lalp-rsvp-popup__view button.lalp-rsvp-popup__close-btn {
	margin-top: 8px;
	width: 100%;
	position: relative;
}
.lalp-rsvp-popup__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: var(--lalp-c-white);
	border-radius: 50%;
	animation: lalp-spin .8s linear infinite;
	margin-left: 10px;
}
.lalp-rsvp-popup.is-loading .lalp-rsvp-popup__spinner { display: inline-block; }
.lalp-rsvp-popup.is-loading .lalp-rsvp-popup__submit-label { opacity: .7; }
.lalp-rsvp-popup.is-loading button.lalp-rsvp-popup__submit { pointer-events: none; }
@keyframes lalp-spin { to { transform: rotate(360deg); } }

/* Error message */
.lalp-rsvp-popup__error {
	color: #b8443f;
	font-size: 13px;
	line-height: 1.45;
	margin: 4px 0 0;
	min-height: 1em;
}
.lalp-rsvp-popup__error:empty { margin: 0; min-height: 0; }

/* Fine print */
.lalp-rsvp-popup__fineprint {
	font-size: 11px;
	letter-spacing: .02em;
	line-height: 1.5;
	color: rgba(0, 0, 0, .55);
	margin: 12px 0 0;
	text-align: center;
}
.lalp-rsvp-popup__fineprint a {
	color: var(--lalp-c-secondary);
	border-bottom: 1px solid rgba(161, 128, 103, .35);
	text-decoration: none;
}
.lalp-rsvp-popup__fineprint a:hover { color: var(--lalp-c-primary); }

/* View swap (form ↔ success) */
.lalp-rsvp-popup__view[hidden] { display: none; }
.lalp-rsvp-popup__view--success {
	text-align: center;
	padding: 8px 0;
}

/* Success checkmark — drawn on-the-fly */
.lalp-rsvp-popup__check {
	width: 88px;
	height: 88px;
	margin: 0 auto 20px;
	color: var(--lalp-c-secondary);
}
.lalp-rsvp-popup__check svg {
	width: 100%;
	height: 100%;
}
.lalp-rsvp-popup__check circle,
.lalp-rsvp-popup__check path {
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	transform-origin: center;
}
.lalp-rsvp-popup.is-success .lalp-rsvp-popup__check circle {
	animation: lalp-check-draw .9s cubic-bezier(.22, .61, .36, 1) .1s forwards;
}
.lalp-rsvp-popup.is-success .lalp-rsvp-popup__check path {
	animation: lalp-check-draw .6s cubic-bezier(.22, .61, .36, 1) .7s forwards;
	stroke-dasharray: 50;
	stroke-dashoffset: 50;
}
@keyframes lalp-check-draw {
	to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.lalp-rsvp-popup,
	.lalp-rsvp-popup__dialog {
		transition: opacity .15s ease, visibility 0s linear 0s !important;
		transform: none !important;
	}
	.lalp-rsvp-popup__check circle,
	.lalp-rsvp-popup__check path {
		stroke-dashoffset: 0 !important;
		animation: none !important;
	}
}

/* ============================================================================
   v2 — gated UX improvements. Active only when <main class="lalp-event is-v2">.
   ========================================================================== */

/* Hero tagline under the cover image */
.lalp-event.is-v2 .lalp-event__hero-tagline {
	margin: clamp(18px, 2vw, 28px) 0 0;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
	font-family: var(--lalp-font);
	color: var(--lalp-c-primary);
}
.lalp-event.is-v2 .lalp-event__hero-tagline-eyebrow {
	font-size: 11px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--lalp-c-secondary);
}
.lalp-event.is-v2 .lalp-event__hero-tagline-dot {
	color: var(--lalp-c-line);
	font-size: 14px;
}
.lalp-event.is-v2 .lalp-event__hero-tagline time {
	font-size: clamp(13px, 1vw, 15px);
	font-weight: var(--lalp-fw-regular);
	letter-spacing: .02em;
}

/* Countdown chip in sticky bar */
.lalp-event.is-v2 .lalp-event__stickybar-countdown {
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}

/* Section reveals — start invisible, become visible when .is-revealed added.
   The RSVP card is intentionally NOT hidden: it's the last section before
   the footer and was occasionally getting stuck invisible when the IO
   missed it (anchor jumps, hash navigation, etc). Reliability > flourish. */
.lalp-event.is-v2 .lalp-event__story .lalp-event__prose,
.lalp-event.is-v2 .lalp-event__invitation-card,
.lalp-event.is-v2 .lalp-event__charity-grid,
.lalp-event.is-v2 .lalp-event__charity-partner {
	opacity: 0;
	transform: translateY(40px);
	transition:
		opacity .9s cubic-bezier(.22, .61, .36, 1),
		transform .9s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
.lalp-event.is-v2 .is-revealed {
	opacity: 1 !important;
	transform: translateY(0) !important;
}
@media (prefers-reduced-motion: reduce) {
	.lalp-event.is-v2 .lalp-event__story .lalp-event__prose,
	.lalp-event.is-v2 .lalp-event__invitation-card,
	.lalp-event.is-v2 .lalp-event__charity-grid,
	.lalp-event.is-v2 .lalp-event__charity-partner {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Autoplay progress bar on the property showcase.
   Composed of a faint taupe track (the bar itself) + a brand-taupe fill
   that animates from 0 → 100% over the 4s auto-advance cycle. JS resets
   the animation each tick by removing + reattaching it. Hover/touch
   adds .is-paused on the showcase root, which pauses the animation. */
.lalp-event.is-v2 .lalp-showcase__progress {
	position: absolute;
	left: var(--lalp-sc-edge, 16px);
	right: var(--lalp-sc-edge, 16px);
	bottom: 12px;
	height: 2px;
	background: var(--lalp-c-line);
	border-radius: 2px;
	overflow: hidden;
	z-index: 5;
	pointer-events: none;
}
.lalp-event.is-v2 .lalp-showcase__progress-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--lalp-c-secondary);
	border-radius: 2px;
	transform-origin: left center;
	transform: scaleX(0);
	animation: lalp-showcase-fill 4s linear forwards;
	will-change: transform;
}
@keyframes lalp-showcase-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
/* Paused state — toggled by JS on hover, touch, wheel, keyboard, or
   while the carousel is off-screen. */
.lalp-event.is-v2 [data-lalp-showcase].is-paused .lalp-showcase__progress-fill {
	animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
	.lalp-event.is-v2 .lalp-showcase__progress-fill {
		animation: none;
		transform: scaleX(0);
	}
}

/* Floating ToC sidebar (recommendation #7) — desktop only */
.lalp-event.is-v2 .lalp-event__toc {
	position: fixed;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 30;
	display: none;
	flex-direction: column;
	gap: 14px;
	padding: 18px 14px;
	background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--lalp-c-line);
	border-radius: 0 32px 32px 32px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}
.lalp-event.is-v2 .lalp-event__toc.is-visible {
	opacity: 1;
	pointer-events: auto;
}
@media (min-width: 1280px) {
	.lalp-event.is-v2 .lalp-event__toc { display: flex; }
}
.lalp-event.is-v2 .lalp-event__toc a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--lalp-c-primary);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none !important;
	border-bottom: 0 !important;
	transition: color .25s ease;
}
.lalp-event.is-v2 .lalp-event__toc a::before {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--lalp-c-line);
	transition: width .35s ease, background .25s ease;
}
.lalp-event.is-v2 .lalp-event__toc a.is-current::before {
	width: 32px;
	background: var(--lalp-c-secondary);
}
.lalp-event.is-v2 .lalp-event__toc a.is-current { color: var(--lalp-c-secondary); }
.lalp-event.is-v2 .lalp-event__toc a:hover { color: var(--lalp-c-secondary); }

/* v2: Soften the visual transition from the polished landing into the
   global site footer. Slight desaturation + brand-tinted top edge. */
.lalp-event.is-v2 + footer,
.lalp-event.is-v2 ~ footer {
	position: relative;
}
.lalp-event.is-v2 + footer::before,
.lalp-event.is-v2 ~ footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 80px;
	background: linear-gradient(180deg, var(--lalp-c-brown-soft), transparent);
	pointer-events: none;
	z-index: 1;
}

/* ============================================================================
   v2 — Editorial hero with Ken Burns slideshow background.
   ========================================================================== */
.lalp-event.is-v2 .lalp-event__hero--editorial {
	position: relative;
	min-height: 100vh;
	padding: clamp(80px, 12vw, 140px) clamp(20px, 4vw, 60px) clamp(48px, 6vw, 80px);
	color: var(--lalp-c-white);
	background: var(--lalp-c-primary);
	overflow: hidden;
	display: flex;
	align-items: center;
	border-bottom-right-radius: 100px;
}

/* Slideshow stack — absolutely positioned, only .is-active shows + Ken Burns */
.lalp-event__hero-kb {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.lalp-event__hero-kb-slide {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 2s ease;
	transform: scale(1.1);
	will-change: opacity, transform;
}
.lalp-event__hero-kb-slide.is-active {
	opacity: 1;
	animation: lalp-kb-pan 14s ease-out forwards;
}
@keyframes lalp-kb-pan {
	0%   { transform: scale(1.10) translate3d(0, 0, 0); }
	100% { transform: scale(1.18) translate3d(-2%, -1.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.lalp-event__hero-kb-slide.is-active {
		animation: none;
		transform: scale(1.1);
	}
}

/* Brown left-to-right scrim. Anchored on the left in the brand primary
   (deep) + secondary (taupe) so the editorial column stays readable, fading
   to a thin photo-visible band on the right edge. A soft radial bloom on
   the left adds the "spotlight" / glow effect on the title. */
.lalp-event__hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;                                       /* above mesh + particles, below content */
	background:
		/* Left-edge glow: warm taupe spotlight lighting the title */
		radial-gradient(
			ellipse 65% 85% at 10% 45%,
			rgba(161, 128, 103, .35) 0%,
			rgba(161, 128, 103, 0)  60%
		),
		/* Bottom lift so the meta row + facts remain solidly readable */
		linear-gradient(
			180deg,
			rgba(48, 41, 37, 0) 50%,
			rgba(48, 41, 37, .60) 100%
		),
		/* Primary left→right gradient — heavy left, transition pushed right */
		linear-gradient(
			95deg,
			rgba(38, 32, 28, .98) 0%,
			rgba(48, 41, 37, .96) 30%,
			rgba(60, 52, 46, .92) 50%,
			rgba(87, 77, 66, .82) 68%,
			rgba(120, 100, 84, .58) 82%,
			rgba(161, 128, 103, .28) 94%,
			rgba(161, 128, 103, .15) 100%
		);
	mix-blend-mode: normal;
}

/* Content inner — left-aligned editorial column. z-index above the full
   FX stack: mesh (0), shimmer (0), scrim (1), particles (2). */
.lalp-event__hero-inner--editorial {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.5vw, 36px);
}

/* ---- Hero FX: subtler echoes of the invitation section ---- */
/* Mesh: brand-brown radial blobs, much lower contrast than the invitation
   version so photo detail still reads through. Same @property-driven CSS
   variables so the same GSAP function animates it. */
.lalp-event__hero--editorial .lalp-event__hero-mesh {
	position: absolute;
	inset: -30px;
	z-index: 0;
	pointer-events: none;
	--x1: 12%;  --y1: 25%;
	--x2: 70%;  --y2: 30%;
	--x3: 40%;  --y3: 80%;
	--x4: 88%;  --y4: 75%;
	--x5: 5%;   --y5: 60%;
	background:
		radial-gradient(circle at var(--x1) var(--y1), rgba(193, 177, 165, .22) 0%, transparent 55%),
		radial-gradient(circle at var(--x2) var(--y2), rgba(161, 128, 103, .26) 0%, transparent 60%),
		radial-gradient(circle at var(--x3) var(--y3), rgba(255, 252, 247, .12) 0%, transparent 50%),
		radial-gradient(circle at var(--x4) var(--y4), rgba(161, 128, 103, .18) 0%, transparent 60%),
		radial-gradient(circle at var(--x5) var(--y5), rgba(193, 177, 165, .15) 0%, transparent 65%);
	filter: contrast(1.02) saturate(1.05) url(#lalp-hero-liquid);
	mix-blend-mode: soft-light;        /* lets photos breathe through */
	opacity: .85;
	will-change: background;
}

/* Shimmer: a single slow light sweep, lighter than the invitation version */
.lalp-event__hero--editorial .lalp-event__hero-shimmer {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		115deg,
		transparent 30%,
		rgba(255, 252, 247, 0) 47%,
		rgba(255, 252, 247, .18) 50%,
		rgba(255, 252, 247, 0) 53%,
		transparent 70%
	);
	background-size: 300% 100%;
	background-position: 100% 0;
	animation: lalp-shimmer-sweep 22s ease-in-out infinite;
	mix-blend-mode: overlay;
	opacity: .55;
}
@media (prefers-reduced-motion: reduce) {
	.lalp-event__hero--editorial .lalp-event__hero-shimmer { animation: none; }
}

/* Particles: same dust motes, lower density (18 vs 28), positioned over
   the scrim so they don't get dimmed by the gradient. */
.lalp-event__hero--editorial .lalp-event__hero-particles {
	position: absolute;
	inset: 0;
	/* Float above the scrim (z:1) so the warm-white motes read clearly,
	   but below the content stack (z:2) so they don't sparkle over text. */
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}
.lalp-event__hero--editorial .lalp-event__particle {
	position: absolute;
	bottom: -20px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	/* Soft warm-white motes — readable against the dark brown overlay, with
	   a stronger glow halo so they cut through the densest 98% scrim on
	   the far-left side of the hero. */
	background: radial-gradient(circle, rgba(255, 250, 242, 1) 0%, rgba(255, 250, 242, 0) 75%);
	box-shadow: 0 0 10px rgba(255, 250, 242, .55), 0 0 3px rgba(255, 250, 242, .8);
	opacity: 0;
	will-change: transform, opacity;
	filter: blur(.4px);
}
.lalp-event__hero--editorial .lalp-event__particle:nth-child(3n)   { width: 3px;  height: 3px; }
.lalp-event__hero--editorial .lalp-event__particle:nth-child(3n+1) { width: 6px;  height: 6px; }
.lalp-event__hero--editorial .lalp-event__particle:nth-child(3n+2) {
	width: 11px;
	height: 11px;
	filter: blur(2.5px);
	background: radial-gradient(circle, rgba(255, 250, 242, .85) 0%, rgba(255, 250, 242, 0) 70%);
}
@media (prefers-reduced-motion: reduce) {
	.lalp-event__hero--editorial .lalp-event__particle { display: none; }
}

/* Brand mark line ("L'Artista") above the title */
.lalp-event__hero-brand {
	margin: 0;
	font-family: var(--lalp-font);
	font-size: 13px;
	letter-spacing: .42em;
	text-transform: uppercase;
	color: var(--lalp-c-brown);
	font-weight: var(--lalp-fw-medium);
}

/* Main headline */
.lalp-event__hero-headline {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	line-height: 1;
}
.lalp-event__hero-headline-main {
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-light);
	font-size: clamp(40px, 6vw, 88px);
	letter-spacing: -.01em;
	line-height: 1.02;
	color: var(--lalp-c-white);
	text-wrap: balance;
}
.lalp-event__hero-headline-by {
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-regular);
	font-size: clamp(16px, 1.6vw, 22px);
	letter-spacing: .04em;
	color: var(--lalp-c-brown);
	font-style: italic;
	/* Keep the row inline so its width hugs content and the logo can't
	   stretch to fill the parent column flex line. */
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 10px;
	line-height: 1;
}
.lalp-event__hero-headline-by-text {
	display: inline-block;
}
.lalp-event__hero-headline-by-logo {
	display: block;
	height: clamp(22px, 2vw, 32px);
	max-height: 32px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
	flex-shrink: 0;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35));
}

/* Slogan — event tagline, sized like a section title */
.lalp-event__hero-slogan {
	margin: 0;
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-light);
	font-size: clamp(22px, 2.6vw, 36px);
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .92);
	max-width: 22ch;
	text-wrap: balance;
}

/* Facts row: date + location chip */
.lalp-event__hero-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2vw, 28px);
}
.lalp-event__hero-facts li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--lalp-font);
	font-size: clamp(14px, 1.1vw, 16px);
	color: rgba(255, 255, 255, .92);
	letter-spacing: .01em;
}
.lalp-event__hero-facts svg { color: var(--lalp-c-brown); flex-shrink: 0; }
.lalp-event__hero-facts time { font-weight: var(--lalp-fw-medium); }
.lalp-event__hero-facts-time { opacity: .7; }
.lalp-event a.lalp-event__hero-facts-loc.is-link {
	color: rgba(255, 255, 255, .92);
	text-decoration: none;
	border-bottom: 1px solid rgba(193, 177, 165, .45);
	transition: border-color .25s ease, color .25s ease;
}
.lalp-event a.lalp-event__hero-facts-loc.is-link:hover {
	color: var(--lalp-c-white);
	border-bottom-color: var(--lalp-c-white);
}

/* CTAs row */
.lalp-event__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 6px;
}
.lalp-event__hero--editorial .lalp-event__cta--hero {
	background: var(--lalp-c-secondary) !important;
	color: var(--lalp-c-white) !important;
	border-color: var(--lalp-c-secondary) !important;
}
.lalp-event__hero--editorial .lalp-event__cta--hero:hover,
.lalp-event__hero--editorial .lalp-event__cta--hero:focus-visible {
	background: var(--lalp-c-white) !important;
	color: var(--lalp-c-primary) !important;
	border-color: var(--lalp-c-white) !important;
}
.lalp-event a.lalp-event__cta--ghost,
.lalp-event button.lalp-event__cta--ghost {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--lalp-c-white) !important;
	border: 1px solid rgba(255, 255, 255, .55) !important;
}
.lalp-event a.lalp-event__cta--ghost:hover,
.lalp-event a.lalp-event__cta--ghost:focus-visible {
	background: rgba(255, 255, 255, .12) !important;
	background-color: rgba(255, 255, 255, .12) !important;
	border-color: var(--lalp-c-white) !important;
}

/* Meta grid: official partner + cause */
.lalp-event__hero-meta-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, max-content));
	gap: clamp(24px, 4vw, 48px);
	margin-top: clamp(24px, 3vw, 36px);
	padding-top: clamp(20px, 2.5vw, 28px);
	border-top: 1px solid rgba(255, 255, 255, .14);
}
@media (max-width: 600px) {
	.lalp-event__hero-meta-grid { grid-template-columns: 1fr; gap: 18px; }
}
.lalp-event__hero-meta-block { display: flex; flex-direction: column; gap: 4px; }
.lalp-event__hero-meta-label {
	margin: 0;
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(193, 177, 165, .85);
	font-weight: var(--lalp-fw-medium);
}
.lalp-event a.lalp-event__hero-meta-link {
	color: var(--lalp-c-white);
	text-decoration: none;
	font-size: clamp(13px, 1vw, 15px);
	letter-spacing: .02em;
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease;
}
.lalp-event a.lalp-event__hero-meta-link:hover,
.lalp-event a.lalp-event__hero-meta-link:focus-visible {
	border-bottom-color: var(--lalp-c-brown);
}
/* Icon variant: tiny partner/cause logo inline before the label. Sized
   to roughly match the cap-height of the link text so it reads as an
   icon, not a logo. */
.lalp-event a.lalp-event__hero-meta-link--icon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-bottom: none;
}
.lalp-event a.lalp-event__hero-meta-link--icon > span {
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease;
	padding-bottom: 1px;
}
.lalp-event a.lalp-event__hero-meta-link--icon:hover > span,
.lalp-event a.lalp-event__hero-meta-link--icon:focus-visible > span {
	border-bottom-color: var(--lalp-c-brown);
}
.lalp-event__hero-meta-icon {
	display: block;
	width: auto;
	height: 22px;
	max-width: 80px;
	object-fit: contain;
	flex-shrink: 0;
}
/* BNK Wines logo is wide (~3:1) — give it extra horizontal room so the
   wordmark actually reads, vs the round PA icon below which stays square. */
.lalp-event__hero-meta-link--icon .lalp-event__hero-meta-icon:not(.lalp-event__hero-meta-icon--pa) {
	height: 20px;
	max-width: 110px;
}
/* Pavel Andreev logo is a JPG with a white background — give it a small
   white chip so it sits cleanly on the dark hero at icon size. */
.lalp-event__hero-meta-icon--pa {
	background: #ffffff;
	border-radius: 3px;
	padding: 1px;
	width: 22px;
	height: 22px;
}

/* Mobile: tighten + reduce min-height. The headline size is now owned by
   the dedicated mobile-tuning block below (≤520px) so it doesn't compete. */
@media (max-width: 600px) {
	.lalp-event.is-v2 .lalp-event__hero--editorial {
		min-height: 92vh;
		padding-top: 100px;
		border-bottom-right-radius: 60px;
	}
	.lalp-event__hero-meta-grid { padding-top: 18px; }
}

/* Stagger each row's animation by a negative delay so they don't all sit
   frozen at the same x-offset on first paint. Negative delays make the
   animation behave as if it's been running for that long — gets content
   visible immediately at varied positions. */
.lalp-event__marquee:nth-of-type(1) .lalp-event__marquee-track { animation-delay: -8s; }
.lalp-event__marquee:nth-of-type(2) .lalp-event__marquee-track { animation-delay: -22s; }
.lalp-event__marquee:nth-of-type(3) .lalp-event__marquee-track { animation-delay: -38s; }
.lalp-event__marquee:nth-of-type(4) .lalp-event__marquee-track { animation-delay: -50s; }
.lalp-event__marquee:nth-of-type(5) .lalp-event__marquee-track { animation-delay: -14s; }

/* ============================================================================
   Mobile tuning — consolidated rules for narrow viewports.
   Applies under 520px (most phones in portrait). Ultra-narrow safety net
   inside for ≤380px (iPhone SE 2nd gen, older Androids).
   ========================================================================== */
@media (max-width: 520px) {
	/* ---- Hero headline & slogan ---- */
	/* Sized for impact on phones — headline scales aggressively with viewport
	   so it stays the dominant element even on narrow widths. */
	.lalp-event__hero-headline-main {
		font-size: clamp(40px, 11.5vw, 58px);
		letter-spacing: -.015em;
		line-height: 1.05;
	}
	.lalp-event__hero-headline-by {
		font-size: 16px;
		gap: 10px;
	}
	.lalp-event__hero-headline-by-logo {
		height: 24px;
	}
	/* Slogan: still uppercase + tracked, just bigger + more breathing room */
	.lalp-event__hero-slogan {
		font-size: clamp(20px, 5.8vw, 28px);
		letter-spacing: .04em;
		max-width: 18ch;
		line-height: 1.25;
	}
	.lalp-event__hero-brand {
		font-size: 12px;
		letter-spacing: .34em;
	}
	/* Meta-grid (partners): make labels readable + names larger so the
	   official-partner & cause attribution feels intentional on phones. */
	.lalp-event__hero-meta-label {
		font-size: 11px;
		letter-spacing: .28em;
	}
	.lalp-event a.lalp-event__hero-meta-link {
		font-size: 15px;
	}
	.lalp-event__hero-meta-icon {
		height: 24px;
		max-width: 130px;
	}
	.lalp-event__hero-meta-link--icon .lalp-event__hero-meta-icon:not(.lalp-event__hero-meta-icon--pa) {
		height: 24px;
		max-width: 130px;
	}
	.lalp-event__hero-meta-icon--pa {
		width: 26px;
		height: 26px;
	}
	/* Hero: pull padding tighter still so the content stack starts higher */
	.lalp-event.is-v2 .lalp-event__hero--editorial {
		padding: 84px 18px 56px;
	}

	/* ---- Sticky bar ---- */
	/* Two-row layout on phones: meta items stack on the first row (wrapping
	   when needed), CTA sits full-width on the second row. Much more usable
	   than the cramped single-row ellipsis-everything approach. */
	.lalp-event__stickybar-inner {
		flex-direction: column;
		align-items: stretch;
		padding: 10px 14px;
		gap: 8px;
	}
	.lalp-event__stickybar-meta {
		gap: 12px;
		font-size: 11px;
		letter-spacing: .02em;
		flex-wrap: wrap;              /* let items flow to a second line if needed */
		justify-content: center;
	}
	.lalp-event__stickybar-item {
		white-space: nowrap;
	}
	.lalp-event__stickybar-item svg { width: 13px; height: 13px; }
	/* CTA on its own row, full-width pill */
	.lalp-event__stickybar-inner .lalp-event__cta--sm {
		width: 100%;
		text-align: center;
	}

	/* ---- Marquee gallery ---- */
	/* Smaller tiles on mobile (was clamp(140, 52vw, 200) — 52vw was too big
	   and made the row take forever to scroll past). Faster animation too,
	   so each tile traverses the viewport in a comfortable ~15s instead of 40. */
	.lalp-event button.lalp-event__marquee-item {
		width: clamp(120px, 38vw, 160px);
	}
	.lalp-event__marquee-track {
		animation-duration: 35s;
	}

	/* ---- Property showcase carousel ---- */
	/* More left/right padding so the first card breathes; smaller peek of
	   the next card so it reads as "there's more →" rather than "did this
	   render half-cropped?". Override the calc divisor for visible+0.10. */
	.lalp-showcase {
		--lalp-sc-edge: 44px;
		--lalp-sc-card: calc(
			(100vw - var(--lalp-sc-edge) - (var(--lalp-sc-visible) * var(--lalp-sc-gap)))
			/ (var(--lalp-sc-visible) + 0.10)
		);
	}
	/* Tighter, slightly translucent nav button: 40px circle hugging the
	   right edge, half-overlapping the card's outer edge. Keeps the swipe
	   gesture intuitive while still showing the affordance. */
	.lalp-event button.lalp-showcase__nav {
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, .92) !important;
	}
	.lalp-event button.lalp-showcase__nav svg { width: 16px; height: 16px; }
	.lalp-showcase__nav--prev { left: 6px; }
	.lalp-showcase__nav--next { right: 6px; }
	/* On most phones the left card is at the start anyway — hide prev so it
	   doesn't sit looking unusable. Right arrow stays as the discovery cue. */
	.lalp-showcase__nav--prev { display: none; }

	/* ---- RSVP card ---- */
	.lalp-event__rsvp-card {
		padding: 32px 22px;
	}
	.lalp-event__rsvp-sub {
		font-size: 15px;
		line-height: 1.6;
	}

	/* ---- Invitation section ---- */
	/* Need `.lalp-event` prefix to beat `.lalp-event h2`'s class+element
	   specificity (0,1,1) — a plain `.lalp-event__invitation-title` (0,1,0)
	   loses regardless of source order. */
	.lalp-event h2.lalp-event__invitation-title {
		font-size: clamp(20px, 5vw, 24px);
		margin-bottom: clamp(28px, 6vw, 40px);
		line-height: 1.25;
	}

	/* Ornament: convert to a sticky element so it stays pinned to the top
	   of the viewport while the user scrolls through the invitation section
	   (the desktop corner-anchored absolute positioning lands off-screen on
	   mobile and is never visible once the user begins reading). The CSS
	   keyframe bob keeps it alive; GSAP's transform-based scroll parallax
	   is disabled here so it doesn't fight `position: sticky`. */
	.lalp-event__invitation-ornament--tr {
		position: sticky;
		position: -webkit-sticky;
		top: 70px;                        /* clears the global sticky bar */
		float: right;
		width: 30vw;
		max-width: 140px;
		margin: 8px 8px -32vw 0;          /* negative bottom margin: don't reserve flow space */
		opacity: 1 !important;            /* override GSAP's initial opacity: 0 */
		transform: none !important;       /* override GSAP transforms */
	}

	/* ---- Floating ToC: horizontal pill at the top of the viewport ----
	   Desktop uses a vertical sidebar at left:24px; on mobile that doesn't
	   work (no horizontal room), so we re-style it as a slim segmented pill
	   pinned to the top so the user can jump between sections one-handed. */
	.lalp-event.is-v2 .lalp-event__toc {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 0;
		left: 12px;
		right: 12px;
		/* Sit just below the global site header (Hello Elementor sticky
		   header is ~64–72px tall on mobile). */
		top: 64px;
		bottom: auto;
		transform: none;                  /* override the desktop translateY(-50%) */
		padding: 6px 6px;
		border-radius: 999px;
		box-shadow: 0 8px 24px -12px rgba(87, 87, 86, .25);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.lalp-event.is-v2 .lalp-event__toc::-webkit-scrollbar { display: none; }
	.lalp-event.is-v2 .lalp-event__toc a {
		padding: 6px 12px;
		font-size: 10px;
		letter-spacing: .18em;
		flex-shrink: 0;
	}
	/* Hide the desktop's leading dash before each link — wastes horizontal
	   space on a small pill. Underline the current link instead. */
	.lalp-event.is-v2 .lalp-event__toc a::before {
		display: none;
	}
	.lalp-event.is-v2 .lalp-event__toc a.is-current {
		background: var(--lalp-c-secondary);
		color: var(--lalp-c-white);
		border-radius: 999px;
	}
}

/* Ultra-narrow safety net — iPhone SE (375px) and below */
@media (max-width: 380px) {
	/* Headline: even on the smallest phones keep it impactful; the clamp at
	   ≤520px scales by vw so this is just a hard floor. */
	.lalp-event__hero-headline-main {
		font-size: 38px;
	}
	/* Hide the top-right ornament entirely on the smallest phones —
	   on a tight viewport it pulls attention from the card copy. */
	.lalp-event__invitation-ornament--tr {
		display: none;
	}
}