/* ==========================================================================
   Motion Kit · styles
   Start states exist only under html.mk-motion (set in <head> when motion will run),
   so without JS, or under reduced motion, every element is simply visible.
   Override any token on :root (or on one section) to fit the brand.
   ========================================================================== */

:root {
	--mk-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--mk-accent: currentColor;                  /* lines, dashes */
	--mk-fill-from: #c4c4c4;                    /* fx-text-fill: words start in this colour */
	--mk-header-bg: rgba(255, 255, 255, 0.9);   /* fx-header once scrolled */
	--mk-header-line: rgba(0, 0, 0, 0.1);
	--mk-stack-top: 6rem;                       /* fx-stack: where the first card sticks */
	--mk-stack-step: 1.25rem;                   /* fx-stack: offset between stacked cards */
	--mk-lift: 3rem;                            /* fx-heights / fx-raise / fx-lower */
	--mk-scrub-h: 340vh;                        /* fx-scrub: length of the scroll run */
	--mk-fwd: 1;                                /* reading direction: arrows move "forward" */
	--mk-start: left;
}
[dir="rtl"] { --mk-fwd: -1; --mk-start: right; }
.fx-on-dark { --mk-fill-from: #4d4d4d; }

/* --- Start states ---------------------------------------------------------- */

.mk-motion .fx-lines { visibility: hidden; }
.mk-motion .fx-reveal > *,
.mk-motion .fx-up { opacity: 0; }
.mk-motion .fx-img-reveal { clip-path: inset(0 0 100% 0); }
.fx-img-reveal { overflow: hidden !important; }
.fx-text-fill .mk-word { color: var(--mk-fill-from); }
.fx-count { font-variant-numeric: tabular-nums; }

/* --- Header ----------------------------------------------------------------- */

body:not(.elementor-editor-active) .fx-header {
	position: fixed !important;
	top: 0;
	inset-inline: 0;
	z-index: 100;
}
.fx-header {
	transition: background-color 0.5s var(--mk-ease), translate 0.5s var(--mk-ease), box-shadow 0.5s var(--mk-ease), color 0.5s var(--mk-ease);
}
.fx-header.is-scrolled {
	background-color: var(--mk-header-bg) !important;
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 1px 0 var(--mk-header-line);
}
.fx-header.is-hidden { translate: 0 -100%; }
/* Two logos: light over the hero, dark once the header turns solid. */
.fx-header.is-scrolled .fx-logo-light,
.fx-header:not(.is-scrolled) .fx-logo-dark { display: none !important; }
/* Pages without a full-bleed hero: push the first section below the fixed header. */
.fx-under-header { padding-top: var(--mk-header-h, 5rem) !important; }

/* --- Hero shrink ------------------------------------------------------------- */

.fx-hero-scale { overflow: clip !important; }
.fx-hero-media { will-change: clip-path; }
.fx-hero-scale.mk-hero-sticky { height: 230vh !important; min-height: 0 !important; justify-content: flex-start !important; }
.fx-hero-scale.mk-hero-sticky > .fx-hero-media {
	position: sticky !important;
	top: 0;
	height: 100vh;
	height: 100svh;
	min-height: 0 !important;
}

/* --- Scroll-driven video ------------------------------------------------------ */

.fx-scrub.mk-scrub { height: var(--mk-scrub-h) !important; min-height: 0 !important; padding: 0 !important; justify-content: flex-start !important; }
.fx-scrub.mk-scrub > :first-child {
	position: sticky !important;
	top: 0;
	height: 100vh !important;
	height: 100svh !important;
	overflow: hidden;
}
.fx-scrub.mk-scrub video {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}
/* Overlays driven by --p: fx-scrub-fade leaves early, fx-scrub-end arrives with the last frame. */
.mk-scrub .fx-scrub-fade { opacity: clamp(0, calc(1 - var(--p, 0) * 5), 1); }
.mk-scrub .fx-scrub-end {
	opacity: clamp(0, calc((var(--p, 0) - 0.72) * 6), 1);
	translate: 0 calc((1 - clamp(0, calc((var(--p, 0) - 0.72) * 6), 1)) * 40px);
}
.mk-scrub:not(.is-end) .fx-scrub-end { pointer-events: none; }

/* --- Sticky stack -------------------------------------------------------------- */

@media (min-width: 768px) {
	.mk-motion .fx-stack > * {
		position: sticky;
		top: calc(var(--mk-stack-top) + var(--mk-stack-i, 0) * var(--mk-stack-step));
		transform-origin: 50% 0;
	}
}

/* --- Horizontal strip ------------------------------------------------------------ */

/* Every width: the strip is one row that can be swiped natively. */
.fx-horizontal > :first-child {
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.fx-horizontal > :first-child::-webkit-scrollbar { display: none; }
.fx-horizontal > :first-child > * { flex-shrink: 0 !important; scroll-snap-align: start; }

/* Desktop with motion: the section is as tall as the travel (set in JS) and the strip sticks. */
.fx-horizontal.mk-h { overflow: clip !important; }
.fx-horizontal.mk-h > :first-child {
	position: sticky !important;
	top: 0;
	width: 100% !important;
	height: 100vh;
	box-sizing: border-box;
	align-items: center !important;
	overflow-y: hidden !important;
	scroll-snap-type: none !important;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	transform: none !important;
}
.fx-horizontal.mk-h.is-pinned > :first-child { cursor: grab; }
.fx-horizontal.mk-h.is-grabbing > :first-child { cursor: grabbing; }
.fx-horizontal.mk-h img { -webkit-user-drag: none; }

/* "Play of heights": on a row, every other card sits higher or lower. */
@media (min-width: 768px) {
	.fx-heights > :nth-child(4n + 2) { translate: 0 calc(var(--mk-lift) * -1); }
	.fx-heights > :nth-child(4n + 4) { translate: 0 calc(var(--mk-lift) * 0.6); }
	.fx-raise { translate: 0 calc(var(--mk-lift) * -1); }
	.fx-lower { translate: 0 var(--mk-lift); }
}

/* --- Marquee -------------------------------------------------------------------- */

.fx-marquee { overflow: hidden !important; display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; }
.fx-marquee > * {
	display: flex !important;
	flex: 0 0 auto !important;
	flex-wrap: nowrap !important;
	width: max-content !important;
	white-space: nowrap;
	padding-inline-end: var(--mk-marquee-gap, 3rem) !important;
	will-change: transform;
}

/* --- Hover preview (mega menu style) ---------------------------------------------- */

.mk-preview-stage { position: relative !important; overflow: hidden !important; aspect-ratio: var(--mk-preview-ratio, 4 / 3); }
.mk-preview-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 0.7s var(--mk-ease), transform 1.4s var(--mk-ease);
}
.mk-preview-img.is-on { opacity: 1; transform: scale(1); }
/* Pointer devices: the item's own image is only a source. Touch devices: no hover, so show it in place. */
@media (hover: hover) {
	.fx-preview .fx-preview-item img { display: none !important; }
}
@media (hover: none) {
	.fx-preview .fx-preview-stage { display: none !important; }
}

/* ==========================================================================
   Hover utilities (pure CSS, also active in the editor)
   ========================================================================== */

/* fx-underline: a line draws in from the reading start. On a link, or on a wrapper of links / a nav menu.
   For an Elementor Nav Menu widget set its own pointer to "None". */
:is(a.fx-underline, .fx-underline a, .fx-underline .elementor-item) { position: relative !important; text-decoration: none; }
:is(a.fx-underline, .fx-underline a, .fx-underline .elementor-item)::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -0.15em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: var(--mk-start);
	transition: transform 0.6s var(--mk-ease);
}
:is(a.fx-underline, .fx-underline a, .fx-underline .elementor-item):is(:hover, :focus-visible, .is-current, .elementor-item-active, [aria-current="page"])::after {
	transform: scaleX(1);
}

/* fx-arrow: the icon nudges forward on hover; flips when its toggle is open. */
.fx-arrow :is(svg, i, .fx-arrow-icon) { transition: translate 0.5s var(--mk-ease), rotate 0.5s var(--mk-ease); }
.fx-arrow:is(:hover, :focus-visible) :is(svg, i, .fx-arrow-icon) { translate: calc(var(--mk-fwd) * 0.35em) 0; }
.fx-arrow[aria-expanded="true"] :is(svg, i, .fx-arrow-icon) { rotate: 180deg; translate: none; }

/* fx-dash: on a list wrapper, a short accent line grows before the hovered / active link. */
.fx-dash a { display: inline-flex; align-items: center; gap: 0.75rem; }
.fx-dash a::before {
	content: "";
	flex: none;
	width: 0;
	height: 1px;
	background: var(--mk-accent);
	transition: width 0.5s var(--mk-ease);
}
.fx-dash a:is(:hover, :focus-visible, .is-active)::before,
.fx-dash .is-active a::before { width: 1.5rem; }

/* fx-zoom: on an image container; the picture slowly scales inside its frame. */
.fx-zoom { overflow: hidden !important; }
.fx-zoom img { transition: scale 1.1s var(--mk-ease); }
.fx-zoom:hover img { scale: 1.06; }

/* fx-lift: a card rises a little with a soft shadow. */
.fx-lift { transition: translate 0.5s var(--mk-ease), box-shadow 0.5s var(--mk-ease) !important; }
.fx-lift:hover { translate: 0 -6px; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.12); }

@media (prefers-reduced-motion: reduce) {
	.fx-header, .mk-preview-img, .fx-zoom img, .fx-lift,
	:is(a.fx-underline, .fx-underline a, .fx-underline .elementor-item)::after,
	.fx-arrow :is(svg, i, .fx-arrow-icon), .fx-dash a::before { transition: none !important; }
}