/* ==========================================================================
 * FlowKit widgets.
 *
 * Loaded only when a page actually contains one, via each widget's
 * get_style_depends(). The gradient ring these widgets wear lives in
 * flowkit.css — here they only mark their host element .fk-ring.
 *
 * Two custom properties are written by JavaScript and nothing else:
 * --fk-mx / --fk-my (the button's magnetic offset) and --fk-sx / --fk-sy
 * (the card's spotlight position). They are deliberately named apart, since a
 * card containing a button would otherwise inherit its coordinates into it.
 *
 * A doubled class — .fk-gal__close.fk-gal__close — is not a typo. Every
 * control FlowKit renders is a native <button>, and a site's global element
 * skin outranks a lone class: Elementor's kit writes
 * `.elementor-kit-N button { background-color … padding … border-radius … }`
 * at (0,1,1), which repainted every arrow, close and toggle in the theme's
 * fill and swelled it to the theme's padding. Doubling clears that bar at
 * (0,2,0) without !important, and stays level with the (0,2,0) a widget's own
 * style controls write from a later stylesheet — so the panel still wins.
 * Where a rule already carries its block root (.fk-mm .fk-mm__burger) that
 * does the same job and is written that way instead. Any later rule that
 * overrides one of these properties has to clear the same bar, which is why
 * the Button's fill modifiers are doubled alongside its base.
 * ========================================================================== */

/* Elementor sets this globally, but a card with height:100% and padding
   overflows its row without it, so the widgets do not rely on the theme. */
.fk-btn,
.fk-card,
.fk-marquee,
.fk-marquee__group,
.fk-marquee__item,
.fk-acc,
.fk-tabs,
.fk-feat,
.fk-price {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Button -- */

.fk-btn.fk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	background-color: var( --fk-btn-bg, #6d5efc );
	border: 0;
	cursor: pointer;
	/* The transform exists only for the optional magnetic pull (--fk-mx/--fk-my
	   written by JS); hover never touches it. Hover answers with a shadow and
	   light instead — the shadow size is a 0–10 elevation dial. */
	transform: translate3d( var( --fk-mx, 0 ), var( --fk-my, 0 ), 0 );
	transition: transform 0.25s cubic-bezier( 0.2, 0.7, 0.3, 1 ), color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.fk-btn:hover {
	box-shadow: 0 calc( var( --fk-btn-shadow, 0 ) * 2px ) calc( var( --fk-btn-shadow, 0 ) * 6px ) calc( var( --fk-btn-shadow, 0 ) * -1px ) var( --fk-btn-shadow-c, rgba( 0, 0, 0, 0.3 ) );
	filter: brightness( 1.03 );
}

.fk-btn--grad.fk-btn--grad {
	background-color: transparent;
	background-image: linear-gradient( var( --fk-btn-ang, 90deg ), var( --fk-btn-c1, #6d5efc ), var( --fk-btn-c2, #ec4899 ) );
}

/* A three-stop gradient and a 220% canvas, so the drift returns to where it
   started instead of snapping back at the end of the cycle. */
.fk-btn--drift.fk-btn--drift {
	background-image: linear-gradient(
		var( --fk-btn-ang, 90deg ),
		var( --fk-btn-c1, #6d5efc ),
		var( --fk-btn-c2, #ec4899 ),
		var( --fk-btn-c1, #6d5efc )
	);
	background-size: 220% 100%;
	animation: fk-btn-drift var( --fk-btn-drift, 5s ) ease-in-out infinite alternate;
}

@keyframes fk-btn-drift {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

.fk-btn--bare.fk-btn--bare {
	background-color: transparent;
	background-image: none;
}

.fk-btn__inner {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.fk-btn__icon {
	display: inline-flex;
	align-items: center;
	transition: color 0.25s ease, opacity 0.25s ease;
}

.fk-btn__icon svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

/* The sweep is clipped by its own wrapper rather than by the button, so the
   button keeps overflow visible and the ring's outer glow is not cut off. */
.fk-btn__sheenwrap {
	position: absolute;
	z-index: 1;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.fk-btn__sheen {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	background: linear-gradient( 100deg, transparent, var( --fk-btn-sheen, rgba(255,255,255,0.35) ), transparent );
	transform: skewX( -18deg );
}

.fk-btn:hover .fk-btn__sheen {
	animation: fk-btn-sheen 0.7s ease-out;
}

@keyframes fk-btn-sheen {
	from { left: -60%; }
	to   { left: 130%; }
}

/* ------------------------------------------------------------------ Card -- */

/* Cards sitting side by side in a stretched container should end level, so
   the height is handed down from the widget rather than set by the text. */
.elementor-widget-flowkit-card,
.elementor-widget-flowkit-card > .elementor-widget-container {
	height: 100%;
}

.fk-card {
	position: relative;
	display: block;
	height: 100%;
	background: var( --fk-card-bg, #12121c );
	border: 1px solid var( --fk-card-line, rgba(255,255,255,0.1) );
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* The shadow size is a 0–10 elevation dial; the hairline and the spotlight
   carry the rest of the hover emphasis. No transform, ever. */
.fk-card:hover {
	box-shadow: 0 calc( var( --fk-card-shadow, 0 ) * 2px ) calc( var( --fk-card-shadow, 0 ) * 6px ) calc( var( --fk-card-shadow, 0 ) * -1px ) var( --fk-card-shadow-c, rgba( 0, 0, 0, 0.35 ) );
}

.fk-card--glass {
	background: var( --fk-card-bg, rgba(255,255,255,0.06) );
	backdrop-filter: blur( var( --fk-card-blur, 20px ) ) saturate( 160% );
	-webkit-backdrop-filter: blur( var( --fk-card-blur, 20px ) ) saturate( 160% );
}

/* A radial gradient never paints outside its own box, so the spotlight needs
   no overflow clipping — which is what keeps the ring's glow intact. */
.fk-card__spot {
	position: absolute;
	z-index: 0;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		var( --fk-spot-size, 260px ) circle at var( --fk-sx, 50% ) var( --fk-sy, 0% ),
		var( --fk-spot-color, rgba(109,94,252,0.28) ),
		transparent 70%
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.fk-card:hover .fk-card__spot {
	opacity: 1;
}

.fk-card__icon,
.fk-card__title,
.fk-card__text {
	position: relative;
	z-index: 1;
}

.fk-card__icon {
	display: inline-flex;
	align-items: center;
	margin-bottom: 16px;
	color: #6d5efc;
}

.fk-card__icon svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

.fk-card__title.fk-card__title {
	margin: 0 0 10px;
	color: #fff;
}

.fk-card__text.fk-card__text {
	margin: 0;
	color: rgba(255,255,255,0.62);
}

.fk-card__cover.fk-card__cover {
	position: absolute;
	z-index: 2;
	inset: 0;
	border-radius: inherit;
}

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

.fk-marquee {
	--fk-mq-dur: 30s;
	--fk-mq-gap: 48px;
	--fk-mq-fade: 12%;

	overflow: hidden;
}

.fk-marquee--fade {
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 var( --fk-mq-fade ), #000 calc( 100% - var( --fk-mq-fade ) ), transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 var( --fk-mq-fade ), #000 calc( 100% - var( --fk-mq-fade ) ), transparent );
}

/* The track holds the items twice, so sliding exactly half its width lands
   the copy where the original began — a seam with nothing to measure. */
.fk-marquee__track {
	display: flex;
	width: max-content;
	animation: fk-mq-slide var( --fk-mq-dur ) linear infinite;
}

.fk-marquee[data-fk-dir="right"] .fk-marquee__track {
	animation-direction: reverse;
}

.fk-marquee--pause:hover .fk-marquee__track {
	animation-play-state: paused;
}

.fk-marquee__group {
	display: flex;
	align-items: center;
	gap: var( --fk-mq-gap );
	padding-right: var( --fk-mq-gap );
}

.fk-marquee__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	color: rgba(255,255,255,0.72);
}

.fk-marquee__item img {
	display: block;
	width: auto;
	height: 32px;
	transition: opacity 0.3s ease;
}

.fk-marquee__sep {
	color: rgba(255,255,255,0.25);
}

@keyframes fk-mq-slide {
	to { transform: translateX( -50% ); }
}

/* --------------------------------------------------------------- Counter -- */

.fk-count__number {
	display: flex;
	align-items: baseline;
	justify-content: inherit;
	line-height: 1.05;
	color: #fff;
}

.fk-count__number--grad {
	background-image: linear-gradient( var( --fk-count-ang, 90deg ), var( --fk-count-c1, #6d5efc ), var( --fk-count-c2, #ec4899 ) );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.fk-count__value {
	display: inline-flex;
	align-items: flex-start;
}

/* One column per digit: a window exactly one digit tall, with the 0–9 strip
   sliding behind it. JS measures the digit height rather than guessing from
   line-height, which is the only part of this that has to be a script. */
.fk-count__col {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.fk-count__strip {
	display: block;
	transform: translateY( 0 );
}

.fk-count__d {
	display: block;
}

/* A thousands separator is often a space, which a flex row would collapse
   to nothing. */
.fk-count__gap {
	white-space: pre;
}

/* Each column repaints the gradient for itself — see the comment in
   widgets.js: a clipped column cannot receive the number's own text clip. */
.fk-count__number--grad .fk-count__col {
	background-image: linear-gradient( var( --fk-count-ang, 90deg ), var( --fk-count-c1, #6d5efc ), var( --fk-count-c2, #ec4899 ) );
	background-size: var( --fk-count-w, 100% ) 100%;
	background-position: calc( -1 * var( --fk-col-x, 0px ) ) 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.fk-count__label {
	color: rgba(255,255,255,0.55);
}

/* ------------------------------------------------------------- Mask Text -- */

/* The colour is declared before the clip, so a browser that ignores
   background-clip:text still paints readable type. */
.fk-mask.fk-mask {
	margin: 0;
	color: #6d5efc;
}

.fk-mask--filled {
	background-image: var( --fk-mask-img );
	background-position: center;
	background-size: var( --fk-mask-size, cover );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.fk-mask--drift {
	background-size: auto 160%;
	animation: fk-mask-drift var( --fk-mask-dur, 18s ) ease-in-out infinite alternate;
}

@keyframes fk-mask-drift {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

/* ----------------------------------------------------------- Image Card -- */

/* Cards in a stretched container end level, like the feature Card. */
.elementor-widget-flowkit-image-card,
.elementor-widget-flowkit-image-card > .elementor-widget-container,
.fk-imgcard {
	height: 100%;
}

.fk-imgcard {
	position: relative;
	overflow: hidden;
	border-radius: var( --fk-ic-radius, 20px );
}

.fk-imgcard__media {
	height: 100%;
	aspect-ratio: var( --fk-ic-ratio, 4/3 );
	overflow: hidden;
}

/* Hover emphasis is light: the picture brightens (or dims, for negative
   values) with a brightness filter — no zoom, no geometry change. */
.fk-imgcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.8s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-imgcard:hover .fk-imgcard__media img {
	filter: brightness( calc( 1 + var( --fk-ic-light, 0 ) / 100 ) );
}

.fk-imgcard__caption {
	position: absolute;
	inset: auto 0 0;
	padding: 48px 24px 20px;
	background: linear-gradient( to top, color-mix( in srgb, var( --fk-ic-scrim-c, #05050a ) calc( var( --fk-ic-scrim, 0.7 ) * 100% ), transparent ), transparent );
}

.fk-imgcard__title.fk-imgcard__title {
	margin: 0 0 4px;
	color: #fff;
}

.fk-imgcard__text.fk-imgcard__text {
	margin: 0;
	color: rgba(255,255,255,0.68);
}

/* Peek mode: the caption waits invisible until hovered, then fades in —
   opacity only. */
.fk-imgcard--peek .fk-imgcard__caption {
	opacity: 0;
	transition: opacity 0.45s ease;
}

.fk-imgcard--peek:hover .fk-imgcard__caption {
	opacity: 1;
}

.fk-imgcard__cover.fk-imgcard__cover {
	position: absolute;
	z-index: 2;
	inset: 0;
	border-radius: inherit;
}

/* --------------------------------------------------------------- Divider -- */

.fk-divider {
	padding-block: 24px;
}

/* An inline-block, so the wrapper's text-align places it at any width. */
.fk-divider__line {
	display: inline-block;
	vertical-align: middle;
	width: var( --fk-div-w, 100% );
	height: var( --fk-div-h, 2px );
	border-radius: 999px;
	background: linear-gradient( 90deg, var( --fk-div-c1, #6d5efc ), var( --fk-div-c2, #ec4899) );
	transform-origin: left center;
}

/* Hairlines look mechanical with blunt ends; fade them out instead. */
.fk-divider--fade .fk-divider__line {
	mask-image: linear-gradient( 90deg, transparent, #000 12%, #000 88%, transparent );
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 12%, #000 88%, transparent );
}

/* Scroll-driven draw, zero JavaScript. Where animation-timeline is unknown
   the keyframes never run and the line simply rests fully drawn. */
@supports ( animation-timeline: view() ) {
	.fk-divider--draw .fk-divider__line {
		animation: fk-divider-draw linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 60%;
	}
}

@keyframes fk-divider-draw {
	from { transform: scaleX( 0 ); }
	to   { transform: scaleX( 1 ); }
}

/* ----------------------------------------------------------------- Badge -- */

.fk-badge-wrap {
	line-height: 0; /* the pill sizes itself; the wrapper must not add leading */
}

.fk-badge-link.fk-badge-link {
	display: inline-block;
	text-decoration: none;
}

.fk-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var( --fk-badge-bg, rgba(255,255,255,0.06) );
	border: 1px solid var( --fk-badge-line, rgba(255,255,255,0.14) );
	color: var( --fk-badge-color, rgba(255,255,255,0.88) );
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.fk-badge--glass {
	backdrop-filter: blur( 12px ) saturate( 160% );
	-webkit-backdrop-filter: blur( 12px ) saturate( 160% );
}

.fk-badge__dot {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --fk-badge-dot, #4ade80 );
}

/* The pulse is an expanding ring of the dot's own colour. */
.fk-badge__dot--pulse {
	animation: fk-badge-pulse 2s cubic-bezier( 0.4, 0, 0.6, 1 ) infinite;
}

@keyframes fk-badge-pulse {
	0%   { box-shadow: 0 0 0 0 var( --fk-badge-dot, #4ade80 ); }
	70%  { box-shadow: 0 0 0 6px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

.fk-badge__icon {
	display: inline-flex;
	align-items: center;
	font-size: 1em;
}

.fk-badge__icon svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

/* ------------------------------------------------------------ Media Steps --

/* Two columns; the media one is sticky, the steps scroll past it. */
.fk-steps {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --fk-steps-gap, 48px );
	align-items: start;
}

.fk-steps--right .fk-steps__media {
	order: 2;
}

.fk-steps__media {
	position: sticky;
	top: var( --fk-steps-top, 100px );
}

.fk-steps__frame {
	position: relative;
	height: var( --fk-steps-h, 70vh );
	border-radius: var( --fk-steps-radius, 20px );
	overflow: hidden;
	background: var( --fk-steps-frame, rgba(255,255,255,0.04) );
}

/* All frames stacked; the active one crossfades in. */
.fk-steps__img.fk-steps__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var( --fk-steps-speed, 0.6s ) ease;
}

.fk-steps__img.is-active {
	opacity: 1;
}

/* The scrub film fills the frame exactly like a frame image — it IS the
   frame, with the scroll as its playhead. */
.fk-steps__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* Each step is a tall stop on the way down; the center hairline in widgets.js
   decides which one owns the frame. */
.fk-steps__step {
	min-height: var( --fk-steps-step-h, 60vh );
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: var( --fk-steps-dim, 0.35 );
	transition: opacity var( --fk-steps-speed, 0.6s ) ease;
}

.fk-steps__step.is-active {
	opacity: 1;
}

.fk-steps__num {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: #6d5efc;
	margin-bottom: 12px;
}

.fk-steps__title.fk-steps__title {
	margin: 0 0 10px;
	color: #fff;
}

.fk-steps__text.fk-steps__text {
	margin: 0;
	color: rgba(255,255,255,0.62);
}

/* Narrow screens: the media becomes a plain block on top, the steps flow
   under it and still drive the frame as they pass the middle. */
@media ( width <= 767px ) {
	.fk-steps {
		grid-template-columns: 1fr;
	}

	.fk-steps--right .fk-steps__media {
		order: 0;
	}

	.fk-steps__media {
		position: relative;
		top: 0;
	}

	.fk-steps__frame {
		height: 50vh;
	}

	.fk-steps__step {
		min-height: 40vh;
	}
}

/* ------------------------------------------------------------ Accordion --

/* A native button carries the header, so focus and screen readers work before
   any JavaScript. The panel is collapsed with grid-template-rows 0fr and
   opens instantly — animating the height is off the table — while the fade of
   the content carries the transition. */
.fk-acc {
	display: flex;
	flex-direction: column;
}

.fk-acc__item {
	border-bottom: 1px solid var( --fk-acc-line, rgba(255,255,255,0.1) );
}

.fk-acc--solid .fk-acc__item,
.fk-acc--glass .fk-acc__item {
	border: 1px solid var( --fk-acc-line, rgba(255,255,255,0.1) );
}

.fk-acc--solid .fk-acc__item {
	background: var( --fk-acc-bg, #12121c );
}

.fk-acc--glass .fk-acc__item {
	background: var( --fk-acc-bg, rgba(255,255,255,0.06) );
	backdrop-filter: blur( var( --fk-acc-blur, 20px ) ) saturate( 160% );
	-webkit-backdrop-filter: blur( var( --fk-acc-blur, 20px ) ) saturate( 160% );
}

.fk-acc__heading.fk-acc__heading {
	margin: 0;
}

/* The title text sits on the left and never moves; the chevron lives on the
   right and opens light up in the accent colour — it does not rotate. */
.fk-acc__head.fk-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 0;
	background: none;
	border: 0;
	color: #fff;
	text-align: left;
	font: inherit;
	/* A <button> is `white-space: nowrap` in the browser reset every theme
	   ships, so a question longer than the row could not wrap: it ran straight
	   off the right edge, taking the chevron with it and giving the page a
	   sideways scroll on a phone. */
	white-space: normal;
	cursor: pointer;
}

/* A flex item will not shrink below its own content unless told to, which is
   the other half of the same overflow. */
.fk-acc__head.fk-acc__head .fk-acc__title {
	min-width: 0;
	overflow-wrap: anywhere;
}

.fk-acc--solid .fk-acc__head,
.fk-acc--glass .fk-acc__head {
	padding: 20px 24px;
}

.fk-acc__icon {
	--fk-mark: 18px;

	display: inline-flex;
	flex-shrink: 0;
	transition: color 0.3s ease;
}

.fk-acc__icon svg {
	width: var( --fk-mark );
	height: var( --fk-mark );
}

.fk-acc__item.is-open .fk-acc__icon {
	color: var( --fk-acc-accent, #6d5efc );
}

.fk-acc__panel {
	display: grid;
	grid-template-rows: 0fr;
}

.fk-acc__item.is-open .fk-acc__panel {
	grid-template-rows: 1fr;
}

.fk-acc__inner {
	overflow: hidden;
	min-height: 0;
}

.fk-acc__content {
	padding: 0 0 18px;
	color: rgba(255,255,255,0.62);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fk-acc--solid .fk-acc__content,
.fk-acc--glass .fk-acc__content {
	padding: 0 24px 20px;
}

.fk-acc__item.is-open .fk-acc__content {
	opacity: 1;
}

/* ----------------------------------------------------------------- Tabs --

/* Panels are stacked in one grid cell, so the container is always as tall as
   the tallest panel — switching tabs never moves the content below. */
.fk-tabs__list {
	display: flex;
	gap: 28px;
	border-bottom: 1px solid var( --fk-tabs-line, rgba(255,255,255,0.1) );

	/* The strip scrolls itself rather than widening the page. A tab is a
	   <button>, which every browser reset makes `white-space: nowrap`, so
	   three ordinary labels on a phone used to push past the viewport and give
	   the whole document a horizontal scrollbar. The bar is dragged or swiped,
	   so the scrollbar itself is hidden; `overflow-y: visible` is not an option
	   next to `overflow-x: auto` (the pair computes to auto/auto), and the
	   active indicator sits inside its tab, so nothing needs to escape. */
	overflow: auto hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.fk-tabs__list::-webkit-scrollbar { display: none; }

.fk-tabs--vertical {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 32px;
}

/* Upright, the column has nothing to scroll sideways and the indicator sits
   on the right edge, which an overflow box would clip. */
.fk-tabs--vertical .fk-tabs__list {
	flex-direction: column;
	gap: 8px;
	overflow: visible;
	border-bottom: 0;
	border-right: 1px solid var( --fk-tabs-line, rgba(255,255,255,0.1) );
}

.fk-tabs__tab.fk-tabs__tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 2px;
	background: none;
	border: 0;
	color: rgba(255,255,255,0.55);
	font: inherit;
	cursor: pointer;
	transition: color 0.25s ease;
}

.fk-tabs--vertical .fk-tabs__tab {
	padding: 10px 20px 10px 2px;
}

/* The active indicator is a static accent bar on the active tab — it does not
   grow or slide; the colour itself is the emphasis. */
.fk-tabs__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
}

.fk-tabs--vertical .fk-tabs__tab::after {
	inset: 0 -1px 0 auto;
	width: 2px;
	height: auto;
}

.fk-tabs__tab.is-active::after {
	background: var( --fk-tabs-accent, #6d5efc );
}

.fk-tabs__icon {
	display: inline-flex;
	align-items: center;
}

.fk-tabs__icon svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

.fk-tabs__panels {
	display: grid;
}

.fk-tabs--panel-solid .fk-tabs__panels {
	background: var( --fk-tabs-bg, #12121c );
	border: 1px solid var( --fk-tabs-line, rgba(255,255,255,0.1) );
}

.fk-tabs--panel-glass .fk-tabs__panels {
	background: var( --fk-tabs-bg, rgba(255,255,255,0.06) );
	backdrop-filter: blur( var( --fk-tabs-blur, 20px ) ) saturate( 160% );
	-webkit-backdrop-filter: blur( var( --fk-tabs-blur, 20px ) ) saturate( 160% );
	border: 1px solid var( --fk-tabs-line, rgba(255,255,255,0.1) );
}

/* Inactive panels keep their cell but are transparent, unclickable and
   invisible — visibility is delayed so the fade-out finishes first. The swap
   is an opacity fade only; no panel ever moves. */
.fk-tabs__panel {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease,
	            visibility 0s linear 0.3s;
}

.fk-tabs__panel.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.3s ease;
}

/* --------------------------------------------------------- Feature List --

/* Pure CSS — this widget loads no JavaScript at all. */
.fk-feat {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 32px;
}

.fk-feat__item {
	display: flex;
}

.fk-feat--top .fk-feat__item {
	flex-direction: column;
	align-items: flex-start;
}

.fk-feat--left .fk-feat__item {
	flex-direction: row;
	align-items: flex-start;
	gap: 18px;
}

.fk-feat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: 16px;
	color: #a78bfa;
}

.fk-feat--left .fk-feat__icon {
	margin-bottom: 0;
}

.fk-feat__icon svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

/* The glass chip: a frosted tile with a hairline and a soft accent glow —
   the same glass vocabulary as the cards. */
.fk-feat--chip .fk-feat__icon {
	width: var( --fk-feat-chip, 52px );
	height: var( --fk-feat-chip, 52px );
	border-radius: 14px;
	background: var( --fk-feat-chip-bg, rgba(255,255,255,0.06) );
	backdrop-filter: blur( 12px ) saturate( 160% );
	-webkit-backdrop-filter: blur( 12px ) saturate( 160% );
	border: 1px solid var( --fk-feat-chip-line, rgba(255,255,255,0.12) );
	box-shadow: inset 0 1px 0 var( --fk-feat-chip-line, rgba(255,255,255,0.1) ),
	            0 0 24px var( --fk-feat-glow, rgba(109,94,252,0.35) );
}

.fk-feat__title.fk-feat__title {
	margin: 0 0 8px;
	color: #fff;
}

.fk-feat__text.fk-feat__text {
	margin: 0;
	color: rgba(255,255,255,0.62);
}

@media ( width <= 767px ) {
	.fk-feat {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------- Pricing --

/* Tier cards sit side by side in a stretched container and should end level,
   so the height is handed down from the widget, like the feature Card. */
.elementor-widget-flowkit-pricing,
.elementor-widget-flowkit-pricing > .elementor-widget-container {
	height: 100%;
}

.fk-price {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var( --fk-price-bg, #12121c );
	border: 1px solid var( --fk-price-line, rgba(255,255,255,0.12) );
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.fk-price:hover {
	box-shadow: 0 calc( var( --fk-price-shadow, 0 ) * 2px ) calc( var( --fk-price-shadow, 0 ) * 6px ) calc( var( --fk-price-shadow, 0 ) * -1px ) var( --fk-price-shadow-c, rgba( 0, 0, 0, 0.35 ) );
}

.fk-price--glass {
	background: var( --fk-price-bg, rgba(255,255,255,0.06) );
	backdrop-filter: blur( var( --fk-price-blur, 24px ) ) saturate( 160% );
	-webkit-backdrop-filter: blur( var( --fk-price-blur, 24px ) ) saturate( 160% );
	box-shadow: inset 0 1px 0 var( --fk-price-line, rgba(255,255,255,0.12) ),
	            0 24px 48px -24px rgba(0,0,0,0.5);
}

/* The glow is a static blurred aura painted behind the card — light, not
   motion, so no layout property is ever animated. The featured plan burns
   brighter. */
.fk-price::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: calc( -0.4 * var( --fk-price-glow-size, 48px ) );
	border-radius: inherit;
	background: radial-gradient(
		60% 60% at 50% 50%,
		var( --fk-price-glow, rgba(109,94,252,0.35) ),
		transparent 70%
	);
	filter: blur( var( --fk-price-glow-size, 48px ) );
	pointer-events: none;
}

.fk-price--featured::after {
	inset: calc( -0.6 * var( --fk-price-glow-size, 48px ) );
	filter: blur( calc( var( --fk-price-glow-size, 48px ) * 1.3 ) );
}

/* Same spotlight pattern as the feature Card — the radial gradient paints
   inside its own box, so no overflow clipping is needed and the glow stays. */
.fk-price__spot {
	position: absolute;
	z-index: 0;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		var( --fk-spot-size, 300px ) circle at var( --fk-sx, 50% ) var( --fk-sy, 0% ),
		var( --fk-spot-color, rgba(255,255,255,0.1) ),
		transparent 70%
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.fk-price:hover .fk-price__spot {
	opacity: 1;
}

.fk-price__name,
.fk-price__row,
.fk-price__features,
.fk-price__cta,
.fk-price__badge {
	position: relative;
	z-index: 1;
}

.fk-price__badge {
	align-self: flex-start;
	margin-bottom: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --fk-price-on-accent, #fff );
	background-image: linear-gradient( 90deg, var( --fk-price-c1, #6d5efc ), var( --fk-price-c2, #ec4899 ) );
	box-shadow: 0 8px 24px -8px var( --fk-price-glow, rgba(109,94,252,0.35) );
}

.fk-price__name.fk-price__name {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.62);
}

.fk-price__row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.fk-price__cur {
	font-size: 24px;
	font-weight: 600;
	color: var( --fk-price-cur, rgba(255,255,255,0.75) );
}

.fk-price__value {
	font-size: 56px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
}

.fk-price__old {
	font-size: 20px;
}

.fk-price__features.fk-price__features {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 28px;
	padding: 24px 0 0;
	list-style: none;
	border-top: 1px solid var( --fk-price-line, rgba(255,255,255,0.12) );
}

.fk-price__feature.fk-price__feature {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fk-price__fi {
	--fk-mark: 16px;

	display: inline-flex;
	flex-shrink: 0;
}

.fk-price__fi svg {
	width: var( --fk-mark );
	height: var( --fk-mark );
}

/* The CTA answers the pointer with a gradient slide — light, not motion;
   the card around it owns the hover shadow. */
.fk-price__cta.fk-price__cta {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border-radius: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: var( --fk-price-cta-ink, var( --fk-price-on-accent, #fff ) );
	text-decoration: none;
	background-image: linear-gradient( 90deg, var( --fk-price-c1, #6d5efc ), var( --fk-price-c2, #ec4899 ), var( --fk-price-c1, #6d5efc ) );
	background-size: 220% 100%;
	background-position: 0% 50%;
	box-shadow: 0 8px 24px -8px var( --fk-price-glow, rgba(109,94,252,0.35) );
	transition: background-position 0.4s ease, box-shadow 0.3s ease;
}

.fk-price__cta:hover {
	background-position: 100% 50%;
}

/* ==========================================================================
 * 0.12 widgets: Button Outline, Kicker, Stats, Numbered Rows, Card Grid,
 * Logo Grid, Quote Form.
 *
 * Same vocabulary as the rest of the file: box-sizing per widget, colors as
 * custom properties written by the panel, hover on light/colour/shadow only.
 * ========================================================================== */

/* ------------------------------------------------- Button: outline mode -- */

.fk-btn--outline.fk-btn--outline {
	background-color: transparent;
	background-image: none;
	border: var( --fk-btn-bw, 1px ) solid var( --fk-btn-bc, currentColor );
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.fk-btn--outline:hover {
	border-color: var( --fk-btn-bch, var( --fk-btn-bc, currentColor ) );
}

.fk-btn--outline-fill:hover {
	background-color: var( --fk-btn-bfill, #6d5efc );
}

.fk-btn--plain.fk-btn--plain {
	background-color: var( --fk-btn-bg, #6d5efc );
	background-image: none;
}

/* ---------------------------------------------------------------- Kicker -- */

.fk-kicker.fk-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 11.5px;
	font-weight: 500;
	text-transform: uppercase;
}

.fk-kicker__dot {
	width: 7px;
	height: 7px;
	flex: none;
	background: currentcolor;
	transform: rotate( 45deg );
}

.fk-kicker__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	flex: none;
}

.fk-kicker__ico svg {
	width: 100%;
	height: 100%;
	fill: currentcolor;
	stroke: none;
}

.fk-kicker__num {
	flex: none;
	font-family: var( --fk-kicker-mono, inherit );
	font-weight: 600;
}

/* ----------------------------------------------------------------- Stats -- */

.fk-stats,
.fk-stats__cell {
	box-sizing: border-box;
}

.fk-stats {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	margin: 0;
}

.fk-stats--dividers {
	border-top: 1px solid var( --fk-stats-line, rgba(237, 238, 240, 0.09) );
}

.fk-stats__cell {
	position: relative;
	padding: 22px 28px 4px 0;
}

.fk-stats--dividers .fk-stats__cell + .fk-stats__cell {
	padding-left: 28px;
	border-left: 1px solid var( --fk-stats-line, rgba(237, 238, 240, 0.09) );
}

.fk-stats dt {
	display: flex;
	align-items: baseline;
	margin: 0 0 10px;
	font-variant-numeric: tabular-nums;
}

.fk-stats__value {
	font-size: clamp( 26px, 3vw, 38px );
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: #edeef0;
}

.fk-stats__affix {
	font-style: normal;
	font-size: 0.62em;
	color: #f2661c;
	margin-left: 2px;
}

.fk-stats__affix--pre {
	margin-left: 0;
	margin-right: 2px;
}

.fk-stats__label {
	margin: 0;
	font-size: 12.5px;
	letter-spacing: 0.02em;
	color: #7c8188;
}

/* --------------------------------------------------------- Numbered Rows -- */

.fk-rows,
.fk-rows__row {
	box-sizing: border-box;
}

.fk-rows__row {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 30px 8px;
	border-top: 1px solid var( --fk-rows-line, rgba(16, 19, 24, 0.13) );
	text-decoration: none;
	color: inherit;
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.fk-rows__row:last-child {
	border-bottom: 1px solid var( --fk-rows-line, rgba(16, 19, 24, 0.13) );
}

/* Hover = a wash of background plus a short accent bar on the left edge —
   colour and light, nothing on the row ever moves. */
.fk-rows__row:hover {
	background: var( --fk-rows-hbg, transparent );
	box-shadow: inset 3px 0 0 var( --fk-rows-hedge, var( --fk-rows-fill, #F2661C ) );
}

.fk-rows__num {
	flex: none;
	padding-top: 3px;
	font-family: var( --fk-rows-mono, inherit );
	font-size: 12px;
	letter-spacing: 0.1em;
	color: #9ba0a7;
}

.fk-rows__body {
	flex: 1;
}

.fk-rows__title.fk-rows__title {
	margin: 0;
	font-size: 19px;
	font-weight: 650;
	letter-spacing: -0.015em;
	color: #101318;
}

.fk-rows__text.fk-rows__text {
	margin: 6px 0 0;
	max-width: 520px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #5a5f66;
}

.fk-rows__arr {
	--fk-mark: 20px;

	flex: none;
	width: var( --fk-mark );
	height: var( --fk-mark );
	color: #f2661c;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.fk-rows__arr svg {
	width: 100%;
	height: 100%;
}

.fk-rows--static-arr .fk-rows__arr,
.fk-rows__row:hover .fk-rows__arr {
	opacity: 1;
}

/* -------------------------------------------------------------- Card Grid -- */

.fk-cgrid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fk-cgrid__cell.fk-cgrid__cell {
	box-sizing: border-box;
	height: 100%;
}

.fk-cgrid__link.fk-cgrid__link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	height: 100%;
	min-height: 210px;
	padding: 26px 26px 24px;
	background: var( --fk-cgrid-bg, #0f1113 );
	border: 1px solid var( --fk-cgrid-border, rgba(237, 238, 240, 0.09) );
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.fk-cgrid--cards .fk-cgrid__link:hover {
	background: var( --fk-cgrid-bg-h, #15181c );
	border-color: var( --fk-cgrid-border-h, rgba(242, 102, 28, 0.45) );
	box-shadow: 0 18px 40px -22px var( --fk-cgrid-shadow, rgba(0, 0, 0, 0.55) );
}

/* Divided: one hairline grid, cells share 1px separators. */
.fk-cgrid--divided {
	gap: 1px;
	background: var( --fk-cgrid-border, rgba(237, 238, 240, 0.09) );
	border: 1px solid var( --fk-cgrid-border, rgba(237, 238, 240, 0.09) );
	border-radius: 8px;
	overflow: hidden;
}

.fk-cgrid--divided .fk-cgrid__link {
	border: 0;
	border-radius: 0;
	transition: background-color 0.35s ease;
}

.fk-cgrid--divided .fk-cgrid__link:hover {
	background: var( --fk-cgrid-bg-h, #15181c );
}

.fk-cgrid__num {
	position: absolute;
	top: 14px;
	right: 16px;
	font-family: var( --fk-cgrid-mono, inherit );
	font-size: 11px;
	letter-spacing: 0.12em;
	opacity: 0.7;
}

.fk-cgrid__ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	font-size: 22px;
	background: rgba(242, 102, 28, 0.13);
	color: #ff7d36;
	border-radius: 10px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.fk-cgrid__ico svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
	stroke: none;
}

.fk-cgrid__link:hover .fk-cgrid__ico {
	background: var( --fk-cgrid-chip-h, #f2661c );
	color: #fff;
}

.fk-cgrid__name {
	font-size: 17.5px;
	font-weight: 650;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: #edeef0;
	transition: color 0.3s ease;
}

.fk-cgrid__meta {
	margin-top: auto;
	font-family: var( --fk-cgrid-mono, inherit );
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: #7c8188;
}

.fk-cgrid__arr {
	--fk-mark: 18px;

	position: absolute;
	top: 22px;
	right: 22px;
	width: var( --fk-mark );
	height: var( --fk-mark );
	color: #ff7d36;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fk-cgrid__arr svg {
	width: 100%;
	height: 100%;
}

.fk-cgrid__link:hover .fk-cgrid__arr {
	opacity: 1;
}

/* -------------------------------------------------------------- Logo Grid -- */

.fk-lgrid {
	display: grid;
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fk-lgrid__cell.fk-lgrid__cell {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 86px;
	padding: 12px 18px;
	background: #fbfaf8;
	border: 1px solid var( --fk-lgrid-border, rgba(16, 19, 24, 0.13) );
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.fk-lgrid--cards .fk-lgrid__cell:hover {
	background: var( --fk-lgrid-bg-h, #fff );
	border-color: var( --fk-lgrid-border-h, rgba(242, 102, 28, 0.5) );
	box-shadow: 0 14px 30px -16px var( --fk-lgrid-shadow, rgba(16, 19, 24, 0.3) );
}

.fk-lgrid--hairline {
	gap: 1px;
	background: var( --fk-lgrid-border, rgba(16, 19, 24, 0.13) );
	border-radius: 12px;
	overflow: hidden;
}

.fk-lgrid--hairline .fk-lgrid__cell {
	border: 0;
	border-radius: 0;
	transition: background-color 0.35s ease;
}

.fk-lgrid--hairline .fk-lgrid__cell:hover {
	background: var( --fk-lgrid-bg-h, #fff );
}

.fk-lgrid__num {
	position: absolute;
	top: 13px;
	left: 17px;
	font-family: var( --fk-lgrid-mono, inherit );
	font-size: 9.5px;
	letter-spacing: 0.16em;
	color: #6a6f76;
	opacity: 0.5;
	transition: opacity 0.35s ease;
}

.fk-lgrid__cell:hover .fk-lgrid__num {
	opacity: 0.9;
}

.fk-lgrid__logo.fk-lgrid__logo {
	display: block;
	max-height: 30px;
	max-width: 78%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: var( --fk-lgrid-opacity, 84% );
	transition: opacity 0.3s ease;
}

.fk-lgrid__cell:hover .fk-lgrid__logo {
	opacity: 1;
}

/* Heterogeneous logos into one ink mass; hover restores a little density. */
.fk-lgrid--mono .fk-lgrid__logo {
	filter: grayscale( 1 ) brightness( var( --fk-lgrid-ink, 62% ) ) contrast( 1.06 );
	mix-blend-mode: multiply;
}

.fk-lgrid--mono .fk-lgrid__cell:hover .fk-lgrid__logo {
	filter: grayscale( 1 ) brightness( calc( var( --fk-lgrid-ink, 62% ) + 16% ) ) contrast( 1.04 );
}

.fk-lgrid__txt {
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #101318;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* ------------------------------------------------------------- Quote Form -- */

.fk-qform,
.fk-qform__form,
.fk-qfield {
	box-sizing: border-box;
}

.fk-qform {
	background: #0f1113;
	color: #edeef0;
	padding: 40px;
	border-radius: 8px;
}

.fk-qform--light input::placeholder,
.fk-qform--light textarea::placeholder {
	color: var( --fk-qf-placeholder, rgba(16, 19, 24, 0.35) );
}

.fk-qform--light select option {
	background: var( --fk-qf-option-bg, #fff );
	color: var( --fk-qf-option-ink, #101318 );
}

.fk-qform__title.fk-qform__title {
	margin: 0 0 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var( --fk-qf-line, rgba(237, 238, 240, 0.09) );
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Honeypot: visible to bots, invisible and unreachable for everyone else. */
.fk-qform__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.fk-qform__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 14px;
	margin-bottom: 4px;
}

.fk-qfield.fk-qfield {
	display: block;
	margin-bottom: 14px;
}

.fk-qfield--full {
	grid-column: 1 / -1;
}

.fk-qfield__label {
	display: block;
	margin-bottom: 8px;
	font-family: var( --fk-qform-mono, inherit );
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #7c8188;
}

.fk-qfield input,
.fk-qfield textarea,
.fk-qfield select {
	width: 100%;
	background: var( --fk-qf-field-bg, rgba(237, 238, 240, 0.045) );
	border: 1px solid var( --fk-qf-field-border, rgba(237, 238, 240, 0.09) );
	color: var( --fk-qf-field-text, #edeef0 );
	font: inherit;
	font-size: 15px;
	padding: 13px 16px;
	border-radius: var( --fk-qf-radius, 8px );
	transition: border-color 0.3s ease, background-color 0.3s ease;
	appearance: none;
}

.fk-qfield textarea {
	min-height: 84px;
	resize: vertical;
	scrollbar-width: thin;
	scrollbar-color: var( --fk-qf-line, rgba(237, 238, 240, 0.22) ) transparent;
}

.fk-qfield input:focus,
.fk-qfield textarea:focus,
.fk-qfield select:focus {
	outline: none;
	border-color: var( --fk-qf-accent, #f2661c );
}

.fk-qfield input::placeholder,
.fk-qfield textarea::placeholder {
	color: var( --fk-qf-placeholder, rgba(237, 238, 240, 0.32) );
}

.fk-qfield input.is-error,
.fk-qfield textarea.is-error {
	border-color: var( --fk-qf-error, #e5484d ) !important;
}

.fk-qselect {
	position: relative;
	display: block;
}

.fk-qselect select {
	cursor: pointer;
	padding-right: 40px;
}

.fk-qselect select option {
	background: var( --fk-qf-option-bg, #14171b );
	color: var( --fk-qf-option-ink, #edeef0 );
}

.fk-qselect::after {
	content: '';
	position: absolute;
	right: 18px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentcolor;
	border-bottom: 1.5px solid currentcolor;
	transform: rotate( 45deg ) translateY( -2px );
	opacity: 0.55;
	pointer-events: none;
}

.fk-qagree.fk-qagree {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 24px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.fk-qagree input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.fk-qagree__box {
	--fk-mark: 12px;

	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: none;
	border: 1px solid var( --fk-qf-field-border, rgba(237, 238, 240, 0.3) );
	border-radius: 5px;
	color: transparent;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.fk-qagree__box svg {
	width: var( --fk-mark );
	height: var( --fk-mark );
}

.fk-qagree input:checked + .fk-qagree__box {
	background: var( --fk-qf-accent, #f2661c );
	border-color: var( --fk-qf-accent, #f2661c );
	color: var( --fk-qf-on-accent, #fff );
}

.fk-qagree input:focus-visible + .fk-qagree__box {
	outline: 2px solid var( --fk-qf-accent, #f2661c );
	outline-offset: 2px;
}

.fk-qagree__text {
	font-size: 13px;
	color: var( --fk-qf-muted, #7c8188 );
}

.fk-qform__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin-top: 8px;
}

.fk-qform__submit.fk-qform__submit {
	min-width: 240px;
	justify-content: center;
	padding: 16px 30px;
}

.fk-qform__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.fk-qform__status.fk-qform__status {
	margin: 0;
	min-height: 20px;
	font-size: 13.5px;
	flex: 1 1 200px;
}

.fk-qform__status.is-ok {
	color: var( --fk-qf-ok, #6bcb77 );
}

.fk-qform__status.is-bad {
	color: var( --fk-qf-error, #e5484d );
}

/* Narrow screens: the form grid collapses via the responsive Columns control,
   the foot stacks, full-width submit. */
@media ( width <= 640px ) {
	.fk-qform {
		padding: 28px 20px;
	}

	.fk-qform__foot {
		flex-direction: column;
		align-items: stretch;
	}

	.fk-qform__submit.fk-qform__submit {
		min-width: 0;
		width: 100%;
	}
}

/* ==========================================================================
 * 0.13: design presets.
 *
 * One preset control per widget switches a curated version — layout, hover
 * behavior and decoration together. Colors stay overridable: presets consume
 * the same custom properties the regular controls write.
 * ========================================================================== */

/* --------------------------------------------------- Numbered Rows presets */

.fk-rows--design-card .fk-rows__row {
	border: 1px solid var( --fk-rows-line, rgba(16, 19, 24, 0.13) );
	border-radius: 10px;
	background: var( --fk-rows-bg, #fff );
	margin-bottom: 12px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.fk-rows--design-card .fk-rows__row:hover {
	background: var( --fk-rows-hbg, #FBFAF8 );
	border-color: var( --fk-rows-fill, #F2661C );
	box-shadow: 0 14px 30px -16px var( --fk-rows-shadow, rgba(16, 19, 24, 0.25) );
}

.fk-rows--design-card .fk-rows__num {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding-top: 0;
	border: 1px solid var( --fk-rows-line, rgba(16, 19, 24, 0.13) );
	border-radius: 9px;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.fk-rows--design-card .fk-rows__row:hover .fk-rows__num {
	background: var( --fk-rows-fill, #F2661C );
	border-color: var( --fk-rows-fill, #F2661C );
	color: var( --fk-rows-on-fill, #fff );
}

.fk-rows--design-card .fk-rows__arr {
	width: 34px;
	height: 34px;
	box-sizing: border-box;
	padding: 8px;
	border: 1px solid var( --fk-rows-line, rgba(16, 19, 24, 0.13) );
	border-radius: 50%;
}

.fk-rows--design-card .fk-rows__row:hover .fk-rows__arr {
	border-color: var( --fk-rows-fill, #F2661C );
}

.fk-rows--design-timeline {
	position: relative;
}

.fk-rows--design-timeline::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 14px;
	bottom: 14px;
	width: 1px;
	background: var( --fk-rows-line, rgba(16, 19, 24, 0.13) );
}

.fk-rows--design-timeline .fk-rows__row {
	position: relative;
	border: 0;
	padding: 24px 8px 24px 44px;
}

.fk-rows--design-timeline .fk-rows__row::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 33px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var( --fk-rows-fill, #F2661C );
	transition: box-shadow 0.3s var( --ease, ease ), filter 0.3s var( --ease, ease );
}

/* Hover lights the dot up — a glow in the dot's own colour, no pop. The
   base row's hover edge stays off here: the rail owns the left side. */
.fk-rows--design-timeline .fk-rows__row:hover {
	box-shadow: none;
}

.fk-rows--design-timeline .fk-rows__row:hover::before {
	box-shadow: 0 0 10px 2px var( --fk-rows-fill, #F2661C );
	filter: brightness( 1.15 );
}

.fk-rows--design-timeline .fk-rows__num {
	display: none;
}

.fk-rows--design-ghost .fk-rows__row {
	border: 0;
	align-items: center;
	padding: 26px 8px;
}

.fk-rows--design-ghost .fk-rows__num {
	font-size: clamp( 34px, 4vw, 54px );
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	padding-top: 0;
	min-width: clamp( 58px, 6vw, 90px );
	transition: color 0.3s ease;
}

.fk-rows--design-ghost .fk-rows__row:hover .fk-rows__num {
	color: var( --fk-rows-fill, #F2661C );
}

.fk-rows--design-ghost .fk-rows__title {
	font-size: 21px;
}

.fk-rows--design-accent .fk-rows__row {
	border: 0;
	border-radius: 10px;
	padding: 24px 22px;
	transition: background-color 0.35s var( --ease, ease );
}

.fk-rows--design-accent .fk-rows__row:hover {
	background: var( --fk-rows-fill, #F2661C );
}

.fk-rows--design-accent .fk-rows__row:hover .fk-rows__title,
.fk-rows--design-accent .fk-rows__row:hover .fk-rows__text,
.fk-rows--design-accent .fk-rows__row:hover .fk-rows__num {
	color: #fff;
}

.fk-rows--design-accent .fk-rows__row:hover .fk-rows__arr {
	opacity: 1;
	color: #fff;
}

/* ------------------------------------------------------ Card Grid presets */

.fk-cgrid--glass .fk-cgrid__link {
	background: var( --fk-cgrid-bg, rgba( 255, 255, 255, 0.055 ) );
	border-color: var( --fk-cgrid-border, rgba( 255, 255, 255, 0.13 ) );
	-webkit-backdrop-filter: blur( 14px ) saturate( 1.35 );
	backdrop-filter: blur( 14px ) saturate( 1.35 );
}

.fk-cgrid--glass .fk-cgrid__link:hover {
	background: var( --fk-cgrid-bg-h, rgba( 255, 255, 255, 0.09 ) );
	border-color: var( --fk-cgrid-border-h, rgba( 242, 102, 28, 0.45 ) );
}

.fk-cgrid--spotlight .fk-cgrid__link {
	overflow: hidden;
}

.fk-cgrid--spotlight .fk-cgrid__link::after {
	content: '';
	position: absolute;
	z-index: 0;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient( 240px circle at var( --fk-sx, 50% ) var( --fk-sy, 50% ), var( --fk-cgrid-spot, rgba( 242, 102, 28, 0.18 ) ), transparent 65% );
	transition: opacity 0.3s ease;
}

.fk-cgrid--spotlight .fk-cgrid__link:hover::after {
	opacity: 1;
}

.fk-cgrid--spotlight .fk-cgrid__ico,
.fk-cgrid--spotlight .fk-cgrid__name,
.fk-cgrid--spotlight .fk-cgrid__meta,
.fk-cgrid--spotlight .fk-cgrid__num,
.fk-cgrid--spotlight .fk-cgrid__arr {
	position: relative;
	z-index: 1;
}

.fk-cgrid--outline .fk-cgrid__link {
	background: transparent;
	box-shadow: none;
}

.fk-cgrid--outline .fk-cgrid__link:hover {
	background: var( --fk-cgrid-bg-h, #15181c );
}

/* ------------------------------------------------------ Logo Grid presets */

.fk-lgrid--ghost .fk-lgrid__cell {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.fk-lgrid--ghost .fk-lgrid__cell:hover {
	background: var( --fk-lgrid-bg-h, #fff );
	border-color: var( --fk-lgrid-border-h, rgba( 242, 102, 28, 0.4 ) );
}

.fk-lgrid--glass .fk-lgrid__cell {
	background: rgba( 255, 255, 255, 0.05 );
	border-color: var( --fk-lgrid-border, rgba( 255, 255, 255, 0.12 ) );
	-webkit-backdrop-filter: blur( 12px ) saturate( 1.3 );
	backdrop-filter: blur( 12px ) saturate( 1.3 );
}

.fk-lgrid--glass .fk-lgrid__cell:hover {
	background: var( --fk-lgrid-bg-h, rgba( 255, 255, 255, 0.09 ) );
}

.fk-lgrid--glass .fk-lgrid__logo {
	/* multiply collapses logos into the dark tile — glass swaps to light glyphs */
	mix-blend-mode: normal;
	filter: grayscale( 1 ) brightness( 2.4 ) contrast( 1.05 );
	opacity: 0.9;
}

.fk-lgrid--glass .fk-lgrid__num {
	color: rgba( 255, 255, 255, 0.5 );
}

/* --------------------------------------------------------- Kicker presets */

.fk-kicker--design-line::before {
	content: '';
	width: 44px;
	height: 1px;
	flex: none;
	background: var( --fk-kicker-accent, currentcolor );
	opacity: 0.55;
}

.fk-kicker--design-bracket .fk-kicker__text::before {
	content: '[ ';
	opacity: 0.45;
}

.fk-kicker--design-bracket .fk-kicker__text::after {
	content: ' ]';
	opacity: 0.45;
}

.fk-kicker--design-pill {
	border: 1px solid var( --fk-kicker-accent, rgba( 242, 102, 28, 0.4 ) );
	padding: 8px 16px;
	border-radius: 999px;
}

.fk-kicker--design-tag {
	background: var( --fk-kicker-accent, #f2661c );
	padding: 8px 16px;
	border-radius: 6px;
	color: var( --fk-kicker-on-tag, #fff );
}

.fk-kicker--design-tag.fk-kicker--design-tag .fk-kicker__num,
.fk-kicker--design-tag.fk-kicker--design-tag .fk-kicker__text {
	color: var( --fk-kicker-on-tag, #fff ) !important;
}

.fk-kicker--design-tag.fk-kicker--design-tag .fk-kicker__dot {
	background: var( --fk-kicker-on-tag, #fff ) !important;
}

.fk-kicker--design-tag.fk-kicker--design-tag .fk-kicker__ico {
	color: var( --fk-kicker-on-tag, #fff ) !important;
}

/* ---------------------------------------------------------- Stats presets */

.fk-stats--design-cards .fk-stats__cell {
	background: var( --fk-stats-card, #0f1113 );
	border: 1px solid var( --fk-stats-line, rgba( 237, 238, 240, 0.09 ) );
	border-radius: 10px;
}

.fk-stats--design-bare .fk-stats__cell {
	padding-left: 0 !important;
}

.fk-stats--design-bare .fk-stats__cell + .fk-stats__cell {
	border-left: 0;
}

/* ==========================================================================
 * 0.16 widgets: Bento Grid, Testimonial Wall.
 * ========================================================================== */

/* ------------------------------------------------------------ Bento Grid --
 * An asymmetric tile wall. Each cell carries its own --fk-bento-w / -h as a
 * track span; a span wider than the grid is clamped by the browser to the
 * column count, which is what lets one setting survive three breakpoints.
 *
 * Hover changes border, light and shadow. Nothing translates, nothing scales,
 * nothing reflows - the grid geometry is identical in every state.
 */

.fk-bento {
	--fk-bento-bg: rgba( 255, 255, 255, 0.04 );
	--fk-bento-border: rgba( 255, 255, 255, 0.10 );
	--fk-bento-border-h: rgba( 147, 130, 255, 0.55 );
	--fk-bento-accent: #9382ff;
	--fk-bento-radius: 18px;
	--fk-bento-blur: 14px;
	--fk-bento-glow: 5;
	--fk-bento-scrim: 0.65;
	--fk-bento-spot: rgba( 147, 130, 255, 0.18 );
	--fk-bento-cols: 4;

	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	grid-auto-rows: minmax( 150px, auto );
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The width span is clamped to the column count, and that clamp is the whole
   reason --fk-bento-cols exists.
   
   A span wider than the grid does not collapse to full width: it expands the
   implicit grid, and the single-span cells after it are then auto-placed into
   those new columns. One four-wide cell therefore turns a two-column phone
   layout back into four columns and the Columns control stops meaning
   anything. Measured on a real grid set to three: four tracks, the fourth
   343px wide, cells at 544 / 623 / 265 / 344 instead of a clean 3-up.
   
   The unclamped declaration is left in front as the fallback for an engine
   without min() in a grid line; a modern one takes the second. */
.fk-bento__cell {
	display: flex;
	grid-column: span var( --fk-bento-w, 1 );
	grid-column: span min( var( --fk-bento-w, 1 ), var( --fk-bento-cols, 4 ) );
	grid-row: span var( --fk-bento-h, 1 );
	min-width: 0;
}

.fk-bento__face.fk-bento__face {
	position: relative;
	z-index: 0;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	width: 100%;
	padding: 24px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background: var( --fk-bento-bg );
	border: 1px solid var( --fk-bento-border );
	border-radius: var( --fk-bento-radius );
	transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.fk-bento--glass .fk-bento__face {
	-webkit-backdrop-filter: blur( var( --fk-bento-blur ) ) saturate( 160% );
	backdrop-filter: blur( var( --fk-bento-blur ) ) saturate( 160% );
}

/* The diagonal sheen is what stops a translucent panel reading as flat grey.
   It sits under the content and never repaints on hover. */
.fk-bento--glass .fk-bento__face::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
	content: "";
	background: linear-gradient( 135deg, var( --fk-bento-sheen, rgba( 255, 255, 255, 0.10 ) ) 0%, color-mix( in srgb, var( --fk-bento-sheen, rgba( 255, 255, 255, 0.10 ) ) 30%, transparent ) 32%, transparent 60% );
}

.fk-bento--outline .fk-bento__face {
	background: transparent;
}

.fk-bento--outline .fk-bento__face:hover {
	background: var( --fk-bento-bg );
}

.fk-bento__face:hover {
	border-color: var( --fk-bento-border-h );
}

/* Spotlight: --fk-sx / --fk-sy are written by widgets.js, one style write per
   frame. The highlight is its own layer, so the card background never has to
   repaint with it. */
.fk-bento--spotlight .fk-bento__face::after {
	position: absolute;
	z-index: 0;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	content: "";
	background: radial-gradient( 300px circle at var( --fk-sx, 50% ) var( --fk-sy, 50% ), var( --fk-bento-spot ), transparent 70% );
	transition: opacity 0.3s ease;
}

.fk-bento--spotlight .fk-bento__face:hover::after {
	opacity: 1;
}

/* The accent cell gets a ring and a glow in the accent colour - the one cell
   per section that carries the claim. */
.fk-bento__face.is-featured {
	border-color: color-mix( in srgb, var( --fk-bento-accent ) 45%, transparent );
	box-shadow: 0 0 calc( var( --fk-bento-glow ) * 6px ) calc( var( --fk-bento-glow ) * -2px ) color-mix( in srgb, var( --fk-bento-accent ) 60%, transparent );
}

.fk-bento__face.is-featured:hover {
	border-color: var( --fk-bento-accent );
}

.fk-bento__media.fk-bento__media {
	position: absolute;
	z-index: -1;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A scrim rather than a filter on the picture: the text needs the contrast,
   the photograph does not need dimming where nothing sits on it. */
.fk-bento__face.has-media::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
	content: "";
	background: linear-gradient( to top, color-mix( in srgb, var( --fk-bento-scrim-c, #000 ) calc( var( --fk-bento-scrim ) * 100% ), transparent ) 0%, color-mix( in srgb, var( --fk-bento-scrim-c, #000 ) calc( var( --fk-bento-scrim ) * 45% ), transparent ) 45%, transparent 100% );
}

.fk-bento__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.fk-bento__num {
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", menlo, consolas, monospace;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	color: var( --fk-bento-accent );
	opacity: 0.7;
}

.fk-bento__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2px;
	font-size: 26px;
	line-height: 1;
	color: var( --fk-bento-accent );
}

.fk-bento__ico svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

.fk-bento__kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --fk-bento-accent );
}

.fk-bento__title {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: #f5f5f7;
	text-wrap: balance;
}

.fk-bento__text {
	font-size: 14px;
	line-height: 1.55;
	color: rgba( 245, 245, 247, 0.62 );
	text-wrap: pretty;
}

/* A cell spanning two rows has room for a bigger claim, and saying so here
   beats adding a size control nobody would keep consistent. */
.fk-bento__cell[style*="--fk-bento-h:2"] .fk-bento__title,
.fk-bento__cell[style*="--fk-bento-h:3"] .fk-bento__title {
	font-size: 25px;
}

.fk-bento__arr {
	--fk-mark: 18px;

	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 1;
	display: inline-flex;
	width: var( --fk-mark );
	height: var( --fk-mark );
	color: var( --fk-bento-accent );
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fk-bento__arr svg {
	width: 100%;
	height: 100%;
}

.fk-bento__face:hover .fk-bento__arr {
	opacity: 1;
}

/* ------------------------------------------------------- Testimonial Wall --
 * Columns of review cards drifting past each other, and not one line of
 * JavaScript. Each lane holds its cards twice and travels exactly half its own
 * height, so the copy lands where the original began: a loop with no seam to
 * measure, and nothing to re-arm after an AJAX re-render.
 */

.fk-wall {
	--fk-wall-bg: rgba( 255, 255, 255, 0.04 );
	--fk-wall-border: rgba( 255, 255, 255, 0.09 );
	--fk-wall-radius: 14px;
	--fk-wall-gap: 14px;
	--fk-wall-fade: 14%;
	--fk-wall-avatar: 38px;

	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --fk-wall-gap );
	height: 620px;
	overflow: hidden;

	/* A mask rather than two gradient overlays, so the fade works over any
	   section background instead of only the one it was matched to. */
	-webkit-mask-image: linear-gradient( to bottom, transparent, #000 var( --fk-wall-fade ), #000 calc( 100% - var( --fk-wall-fade ) ), transparent );
	mask-image: linear-gradient( to bottom, transparent, #000 var( --fk-wall-fade ), #000 calc( 100% - var( --fk-wall-fade ) ), transparent );
}

.fk-wall__col {
	--fk-wall-dur: 70s;

	min-width: 0;
	overflow: hidden;
}

/* No gap on the track, deliberately. The separation between the two copies is
   the group's own trailing padding, so the track is exactly twice a group tall
   and translateY(-50%) lands the copy where the original began. A gap here as
   well would add half of it to the travel and every loop would jump by that
   much - measured at 7px before this was fixed. */
.fk-wall__track {
	display: flex;
	flex-direction: column;
	will-change: transform;
	animation: fk-wall-up var( --fk-wall-dur ) linear infinite;
}

/* Every other lane runs the other way. Lanes moving together read as one
   sliding block and the eye stops seeing individual cards. */
.fk-wall__col--down .fk-wall__track {
	animation-direction: reverse;
}

.fk-wall--pause:hover .fk-wall__track {
	animation-play-state: paused;
}

.fk-wall__group {
	display: flex;
	flex-direction: column;
	gap: var( --fk-wall-gap );
	padding-bottom: var( --fk-wall-gap );
}

.fk-wall__card.fk-wall__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 22px;
	background: var( --fk-wall-bg );
	border: 1px solid var( --fk-wall-border );
	border-radius: var( --fk-wall-radius );
}

/* The sprite is a definition, not a picture: it must occupy nothing and
   never be announced. */
.fk-wall__sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.fk-wall__stars {
	--fk-mark: 14px;

	display: inline-flex;
	gap: 3px;
	color: #9382ff;
}

.fk-wall__stars svg {
	width: var( --fk-mark );
	height: var( --fk-mark );
	fill: currentcolor;
}

.fk-wall__quote.fk-wall__quote {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba( 245, 245, 247, 0.86 );
	text-wrap: pretty;
}

.fk-wall__by.fk-wall__by {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.fk-wall__avatar.fk-wall__avatar {
	flex: none;
	width: var( --fk-wall-avatar );
	height: var( --fk-wall-avatar );
	object-fit: cover;
	border-radius: 50%;
}

.fk-wall__who {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.fk-wall__author {
	font-size: 13.5px;
	font-weight: 600;
	color: #f5f5f7;
}

.fk-wall__role {
	font-size: 12px;
	color: rgba( 245, 245, 247, 0.48 );
}

@keyframes fk-wall-up {
	to { transform: translateY( -50% ); }
}

/* ==========================================================================
 * 0.17 widgets: Compare, Timeline, Countdown.
 * ========================================================================== */

/* --------------------------------------------------------------- Compare --
 * The reveal is a clip-path on the "after" layer, driven by one custom
 * property. The control underneath it is a real range input, stretched over
 * the whole picture and made invisible - which is where the keyboard, the
 * touch behaviour and the screen-reader value come from.
 */

.fk-cmp {
	--fk-cmp-pos: 50%;
	--fk-cmp-bar: #fff;
	--fk-cmp-bar-w: 2px;
	--fk-cmp-grip: 46px;
	--fk-cmp-grip-bg: rgba( 255, 255, 255, 0.16 );

	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
	isolation: isolate;
}

/* The first picture is what gives the widget its height when the ratio is
   left on "From the image", so it must be allowed its natural size. Inside
   .fk-cmp__after the box is already definite (inset: 0), and there the copy
   fills it so a mismatched pair crops instead of stacking. */
.fk-cmp__img.fk-cmp__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.fk-cmp__after .fk-cmp__img {
	height: 100%;
}

/* The two pictures share one box, so a mismatched pair crops rather than
   stacking. The clip is the reveal: no width animation, no reflow. */
.fk-cmp__after {
	position: absolute;
	inset: 0;
}

.fk-cmp--h .fk-cmp__after {
	clip-path: inset( 0 0 0 var( --fk-cmp-pos ) );
}

.fk-cmp--v .fk-cmp__after {
	clip-path: inset( var( --fk-cmp-pos ) 0 0 0 );
}

.fk-cmp__bar {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	background: var( --fk-cmp-bar );
}

.fk-cmp--h .fk-cmp__bar {
	top: 0;
	bottom: 0;
	left: var( --fk-cmp-pos );
	width: var( --fk-cmp-bar-w );
	margin-left: calc( var( --fk-cmp-bar-w ) / -2 );
}

.fk-cmp--v .fk-cmp__bar {
	right: 0;
	left: 0;
	top: var( --fk-cmp-pos );
	height: var( --fk-cmp-bar-w );
	margin-top: calc( var( --fk-cmp-bar-w ) / -2 );
}

.fk-cmp__grip {
	--fk-mark: calc( var( --fk-cmp-grip ) * 0.55 );

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --fk-cmp-grip );
	height: var( --fk-cmp-grip );
	color: var( --fk-cmp-bar );
	background: var( --fk-cmp-grip-bg );
	border: var( --fk-cmp-bar-w ) solid var( --fk-cmp-bar );
	border-radius: 50%;
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
}

.fk-cmp__grip svg {
	width: var( --fk-mark );
	height: var( --fk-mark );
}

.fk-cmp--v .fk-cmp__grip {
	transform: rotate( 90deg );
}

.fk-cmp__label {
	position: absolute;
	z-index: 2;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	pointer-events: none;
	background: rgba( 10, 10, 14, 0.55 );
	border-radius: 999px;
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
}

.fk-cmp__label--before {
	top: 14px;
	left: 14px;
}

.fk-cmp--h .fk-cmp__label--after {
	top: 14px;
	right: 14px;
}

.fk-cmp--v .fk-cmp__label--after {
	bottom: 14px;
	left: 14px;
}

/* The input is invisible but fully present: it keeps its own hit area, its
   focus ring and everything the platform gives a slider. The thumb is sized
   to the whole cross axis so a drag can start anywhere on the picture. */
.fk-cmp__range.fk-cmp__range {
	position: absolute;
	z-index: 3;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
}

.fk-cmp--v .fk-cmp__range {
	writing-mode: vertical-lr;
	cursor: ns-resize;
}

.fk-cmp__range::-webkit-slider-runnable-track {
	height: 100%;
	background: transparent;
}

.fk-cmp__range::-moz-range-track {
	height: 100%;
	background: transparent;
}

.fk-cmp__range::-webkit-slider-thumb {
	width: var( --fk-cmp-grip );
	height: var( --fk-cmp-grip );
	background: transparent;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
}

.fk-cmp__range::-moz-range-thumb {
	width: var( --fk-cmp-grip );
	height: var( --fk-cmp-grip );
	background: transparent;
	border: 0;
}

/* Focus has to be visible on the handle, because the input itself is not. */
.fk-cmp__range:focus-visible {
	outline: none;
}

.fk-cmp__range:focus-visible ~ .fk-cmp__bar .fk-cmp__grip,
.fk-cmp:has( .fk-cmp__range:focus-visible ) .fk-cmp__grip {
	outline: 2px solid var( --fk-cmp-bar );
	outline-offset: 3px;
}

/* -------------------------------------------------------------- Timeline --
 * One rail, owned segment by segment. Each entry carries the piece of rail
 * that runs down past it and fills it on arrival, so the line grows at
 * reading speed instead of appearing whole.
 */

.fk-tl {
	--fk-tl-gap: 34px;
	--fk-tl-dot: 34px;
	--fk-tl-rail-w: 2px;
	--fk-tl-rail: rgba( 255, 255, 255, 0.12 );
	--fk-tl-accent: #9382ff;
	--fk-tl-dot-bg: #0b0b10;
	--fk-tl-glow: 4;
	--fk-tl-draw: 0.7s;
	--fk-tl-card-bg: rgba( 255, 255, 255, 0.04 );
	--fk-tl-card-border: rgba( 255, 255, 255, 0.09 );
	--fk-tl-card-radius: 14px;

	display: flex;
	flex-direction: column;
	gap: var( --fk-tl-gap );
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fk-tl;
}

.fk-tl__item.fk-tl__item {
	position: relative;
	display: grid;
	grid-template-columns: var( --fk-tl-dot ) minmax( 0, 1fr );
	align-items: start;
	column-gap: 18px;
}

/* The rail runs from the middle of this entry's marker to the middle of the
   next one, which is the gap plus whatever this entry is tall. Anchoring it
   to the marker rather than the row is what keeps the line unbroken when the
   entries have different heights. */
.fk-tl__rail {
	position: absolute;
	top: calc( var( --fk-tl-dot ) / 2 );
	bottom: calc( var( --fk-tl-gap ) * -1 );
	left: calc( var( --fk-tl-dot ) / 2 );
	width: var( --fk-tl-rail-w );
	margin-left: calc( var( --fk-tl-rail-w ) / -2 );
	background: var( --fk-tl-rail );
}

.fk-tl__item:last-child .fk-tl__rail {
	display: none;
}

/* scaleY on an element that already occupies its space: the rail growing
   moves nothing, and the transform runs on the compositor. */
.fk-tl__fill {
	position: absolute;
	inset: 0;
	background: var( --fk-tl-accent );
	transform: scaleY( 0 );
	transform-origin: top center;
	transition: transform var( --fk-tl-draw ) cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-tl__item.is-in .fk-tl__fill {
	transform: scaleY( 1 );
}

.fk-tl__dot {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --fk-tl-dot );
	height: var( --fk-tl-dot );
	font-size: calc( var( --fk-tl-dot ) * 0.42 );
	color: var( --fk-tl-accent );
	background: var( --fk-tl-dot-bg );
	border: var( --fk-tl-rail-w ) solid var( --fk-tl-rail );
	border-radius: 50%;
	transition: border-color var( --fk-tl-draw ) ease, box-shadow var( --fk-tl-draw ) ease;
}

.fk-tl__dot svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

/* An entry with no icon still needs a marker, so the dot draws its own. */
.fk-tl__dot:empty::after {
	width: calc( var( --fk-tl-dot ) * 0.3 );
	height: calc( var( --fk-tl-dot ) * 0.3 );
	content: "";
	background: currentcolor;
	border-radius: 50%;
	opacity: 0.35;
	transition: opacity var( --fk-tl-draw ) ease;
}

.fk-tl__item.is-in .fk-tl__dot {
	border-color: var( --fk-tl-accent );
	box-shadow: 0 0 calc( var( --fk-tl-glow ) * 3px ) color-mix( in srgb, var( --fk-tl-accent ) 60%, transparent );
}

.fk-tl__item.is-in .fk-tl__dot:empty::after {
	opacity: 1;
}

.fk-tl__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
	padding-bottom: 2px;
}

.fk-tl--cards .fk-tl__card {
	padding: 18px 20px;
	background: var( --fk-tl-card-bg );
	border: 1px solid var( --fk-tl-card-border );
	border-radius: var( --fk-tl-card-radius );
}

.fk-tl__date {
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", menlo, consolas, monospace;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --fk-tl-accent );
}

.fk-tl__title.fk-tl__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: #f5f5f7;
	text-wrap: balance;
}

.fk-tl__text.fk-tl__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: rgba( 245, 245, 247, 0.62 );
	text-wrap: pretty;
}

/* Alternate: the rail moves to the centre and entries take turns either side.
   Below the tablet edge it goes back to the single column, because a 320px
   screen has no second side to put anything on. */
@media ( width > 767px ) {
	.fk-tl--alternate .fk-tl__item {
		grid-template-columns: minmax( 0, 1fr ) var( --fk-tl-dot ) minmax( 0, 1fr );
	}

	.fk-tl--alternate .fk-tl__rail {
		left: 50%;
	}

	.fk-tl--alternate .fk-tl__dot {
		grid-column: 2;
	}

	.fk-tl--alternate .fk-tl__item:nth-child( odd ) .fk-tl__card {
		grid-row: 1;
		grid-column: 1;
		align-items: flex-end;
		text-align: right;
	}

	.fk-tl--alternate .fk-tl__item:nth-child( even ) .fk-tl__card {
		grid-row: 1;
		grid-column: 3;
	}
}

/* ------------------------------------------------------------- Countdown --
 * Monospaced, tabular digits: a proportional 1 is narrower than a 0, so a
 * countdown set in the body face twitches the whole row once a second.
 */

.fk-cd {
	--fk-cd-gap: 12px;
	--fk-cd-box: 96px;
	--fk-cd-bg: rgba( 255, 255, 255, 0.04 );
	--fk-cd-border: rgba( 255, 255, 255, 0.10 );
	--fk-cd-radius: 14px;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --fk-cd-gap );
}

.fk-cd__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	min-width: var( --fk-cd-box );
	padding: 16px 12px;
}

.fk-cd--boxed .fk-cd__unit,
.fk-cd--glass .fk-cd__unit {
	background: var( --fk-cd-bg );
	border: 1px solid var( --fk-cd-border );
	border-radius: var( --fk-cd-radius );
}

.fk-cd--glass .fk-cd__unit {
	-webkit-backdrop-filter: blur( 14px ) saturate( 160% );
	backdrop-filter: blur( 14px ) saturate( 160% );
}

.fk-cd--bare .fk-cd__unit,
.fk-cd--inline .fk-cd__unit {
	min-width: 0;
	padding: 0;
}

.fk-cd--inline {
	flex-wrap: nowrap;
	gap: calc( var( --fk-cd-gap ) / 2 );
}

.fk-cd--inline .fk-cd__unit {
	flex-direction: row;
	align-items: baseline;
	gap: 6px;
}

.fk-cd__num {
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", menlo, consolas, monospace;
	font-size: 34px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.05;
	color: #f5f5f7;
}

.fk-cd__sep {
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", menlo, consolas, monospace;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.05;
	color: var( --fk-cd-sep, rgba( 245, 245, 247, 0.3 ) );
}

.fk-cd__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba( 245, 245, 247, 0.48 );
}

.fk-cd__done {
	font-size: 16px;
	font-weight: 600;
	color: #f5f5f7;
}

/* --------------------------------------------------------------- Stories --
 * A rail of ringed avatars, and a native <dialog> viewer behind them.
 *
 * The progress bars are the clock: the live bar runs one scaleX over the frame
 * duration and its animationend advances the frame. Pausing is
 * animation-play-state on the stage, which reaches the ring, the bar and
 * nothing else.
 */

.fk-st {
	--fk-st-avatar: 86px;
	--fk-st-gap: 16px;
	--fk-st-ring-a: #9382ff;
	--fk-st-ring-b: #f0468a;
	--fk-st-ring-w: 3px;
	--fk-st-dur: 5s;
	--fk-st-backdrop: rgba( 6, 6, 10, 0.82 );
	--fk-st-backdrop-blur: 18px;
}

.fk-st__rail.fk-st__rail {
	display: flex;
	flex-wrap: wrap;
	gap: var( --fk-st-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

.fk-st__open.fk-st__open {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

/* The ring is a conic gradient behind a padded disc, so its width is one
   variable and the avatar never has to know about it. */
.fk-st__ring {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: var( --fk-st-avatar );
	height: var( --fk-st-avatar );
	padding: var( --fk-st-ring-w );
	background: conic-gradient( from 0deg, var( --fk-st-ring-a ), var( --fk-st-ring-b ), var( --fk-st-ring-a ) );
	border-radius: 50%;
}

.fk-st--spin .fk-st__ring {
	animation: fk-st-spin 6s linear infinite;
}

/* A story already watched keeps its ring but loses the colour — the same
   signal the phone apps use, and it costs no layout. */
.fk-st__open.is-seen .fk-st__ring {
	background: var( --fk-st-ring-seen, rgba( 255, 255, 255, 0.16 ) );
	animation: none;
}

.fk-st__avatar {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var( --fk-st-avatar-bg, #0b0b10 );
	border: 2px solid var( --fk-st-avatar-line, var( --fk-st-avatar-bg, #0b0b10 ) );
	border-radius: 50%;
	box-sizing: border-box;
}

/* The avatar counter-rotates, so a spinning ring does not spin the face
   inside it. */
.fk-st--spin .fk-st__avatar {
	animation: fk-st-spin 6s linear infinite reverse;
}

.fk-st__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fk-st__name {
	max-width: calc( var( --fk-st-avatar ) + 16px );
	overflow: hidden;
	font-size: 12px;
	font-weight: 600;
	color: rgba( 245, 245, 247, 0.72 );
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@keyframes fk-st-spin {
	to { transform: rotate( 360deg ); }
}

/* ------------------------------------------------------------- the viewer */

.fk-st__viewer {
	/* ::backdrop resolves custom properties against the dialog, not against an
	   ancestor, so the two it needs are declared here as well as on .fk-st. */
	--fk-st-backdrop: rgba( 6, 6, 10, 0.82 );
	--fk-st-backdrop-blur: 18px;

	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: transparent;
	border: 0;
}

.fk-st__viewer::backdrop {
	background: var( --fk-st-backdrop );
	-webkit-backdrop-filter: blur( var( --fk-st-backdrop-blur ) );
	backdrop-filter: blur( var( --fk-st-backdrop-blur ) );
}

.fk-st__stage {
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 9 / 16;
	width: auto;
	max-width: min( 96vw, 460px );
	height: min( 92dvh, 860px );
	overflow: hidden;
	background: var( --fk-st-stage, #0b0b10 );
	border-radius: 22px;
	box-shadow: 0 40px 120px -20px var( --fk-st-stage-shadow, rgba( 0, 0, 0, 0.8 ) );
	transform: translate( -50%, -50% );
}

.fk-st__story {
	position: absolute;
	inset: 0;
}

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

/* A scrim at each end so the bars, the name and the caption stay legible over
   any photograph. */
.fk-st__story::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	content: "";
	background:
		linear-gradient( to bottom, rgba( 0, 0, 0, 0.55 ) 0%, rgba( 0, 0, 0, 0 ) 22% ),
		linear-gradient( to top, rgba( 0, 0, 0, 0.65 ) 0%, rgba( 0, 0, 0, 0 ) 34% );
}

.fk-st__bars {
	position: absolute;
	top: 10px;
	right: 10px;
	left: 10px;
	z-index: 3;
	display: flex;
	gap: 4px;
}

.fk-st__bar {
	position: relative;
	flex: 1;
	height: 3px;
	overflow: hidden;
	background: var( --fk-st-bar, rgba( 255, 255, 255, 0.28 ) );
	border-radius: 999px;
}

.fk-st__barfill {
	position: absolute;
	inset: 0;
	background: var( --fk-st-barfill, #fff );
	transform: scaleX( 0 );
	transform-origin: left center;
}

/* Frames already watched read as full without animating. */
.fk-st__bar.is-done .fk-st__barfill {
	transform: scaleX( 1 );
}

.fk-st__bar.is-live .fk-st__barfill {
	animation: fk-st-fill var( --fk-st-dur, 5s ) linear forwards;
}

.fk-st__stage.is-paused .fk-st__bar.is-live .fk-st__barfill {
	animation-play-state: paused;
}

@keyframes fk-st-fill {
	from { transform: scaleX( 0 ); }
	to   { transform: scaleX( 1 ); }
}

.fk-st__head {
	position: absolute;
	top: 24px;
	right: 14px;
	left: 14px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
}

.fk-st__headpic.fk-st__headpic {
	width: 30px;
	height: 30px;
	object-fit: cover;
	border: 1px solid var( --fk-st-headpic-line, rgba( 255, 255, 255, 0.5 ) );
	border-radius: 50%;
}

.fk-st__headname {
	font-size: 13px;
	font-weight: 600;
	color: var( --fk-st-headname, #fff );
	text-shadow: 0 1px 3px var( --fk-st-text-shadow, rgba( 0, 0, 0, 0.5 ) );
}

.fk-st__foot {
	position: absolute;
	right: 18px;
	bottom: 18px;
	left: 18px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.fk-st__caption.fk-st__caption {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: #fff;
	text-shadow: 0 1px 4px var( --fk-st-text-shadow, rgba( 0, 0, 0, 0.55 ) );
	text-wrap: pretty;
}

.fk-st__cta.fk-st__cta {
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 700;
	color: #0b0b10;
	text-decoration: none;
	background: #fff;
	border-radius: 999px;
	transition: filter 0.25s ease;
}

.fk-st__cta:hover {
	filter: brightness( 0.92 );
}

/* The tap zones sit under the caption and the close button but over the
   picture: a third of the width goes back, the rest goes on. */
.fk-st__tap.fk-st__tap {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	appearance: none;
}

.fk-st__tap--prev {
	left: 0;
	width: 33%;
}

.fk-st__tap--next {
	right: 0;
	width: 67%;
}

.fk-st__close.fk-st__close {
	--fk-mark: 18px;

	position: absolute;
	top: 22px;
	right: 12px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var( --fk-st-close-ui, #fff );
	background: var( --fk-st-close-bg, rgba( 0, 0, 0, 0.28 ) );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.fk-st__close:hover {
	background: var( --fk-st-close-bg-h, rgba( 0, 0, 0, 0.5 ) );
}

.fk-st__close svg {
	width: var( --fk-mark );
	height: var( --fk-mark );
}

/* On a phone the frame is the screen: no rounding, no margin, nothing to
   miss with a thumb. */
@media ( width <= 640px ) {
	.fk-st__stage {
		max-width: 100vw;
		width: 100vw;
		height: 100dvh;
		aspect-ratio: auto;
		border-radius: 0;
	}
}

/* -------------------------------------------------------------- Showcase --
 * The track is an overflow scroller with scroll snapping, so the swipe, its
 * momentum, the trackpad and keyboard scrolling are all the browser's. There
 * is no transform being driven and no position being tracked: the scroll
 * offset IS the position, which is why a finger and an arrow button can never
 * disagree about where the slider is.
 */

.fk-sl {
	--fk-sl-h: 62vh;
	--fk-sl-w: 100%;
	--fk-sl-gap: 0px;
	--fk-sl-radius: 20px;
	--fk-sl-pad: 56px;
	--fk-sl-scrim: 0.62;
	--fk-sl-panel: #0b0b10;
	--fk-sl-accent: #9382ff;
	--fk-sl-ui: #fff;
	--fk-sl-ui-bg: rgba( 255, 255, 255, 0.12 );
	--fk-sl-ui-size: 46px;
	--fk-sl-auto: 7s;

	position: relative;
	isolation: isolate;
}

.fk-sl__track {
	display: flex;
	gap: var( --fk-sl-gap );
	height: var( --fk-sl-h );
	overflow: auto hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	border-radius: var( --fk-sl-radius );

	/* The scrollbar is the browser's answer to "how long is this", and the
	   dots already say it. Scrolling itself is untouched. */
	scrollbar-width: none;
}

.fk-sl__track::-webkit-scrollbar {
	display: none;
}

.fk-sl__track:focus-visible {
	outline: 2px solid var( --fk-sl-accent );
	outline-offset: 3px;
}

.fk-sl__slide {
	position: relative;
	display: grid;
	flex: 0 0 var( --fk-sl-w );
	align-content: end;
	justify-items: var( --fk-sl-align, start );
	width: var( --fk-sl-w );
	height: 100%;
	overflow: hidden;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	border-radius: var( --fk-sl-radius );
}

.fk-sl__frame {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.fk-sl__media.fk-sl__media {
	/* Parallax cover scale. Declared here rather than in a second
	   .fk-sl__media block further down, so the selector has one home. */
	--fk-sl-pxs: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The drift is a scale on the picture inside a clipping frame, so the slide's
   own box never changes and nothing around it can be pushed. */
.fk-sl--drift .fk-sl__slide.is-active .fk-sl__media {
	animation: fk-sl-drift 14s ease-out forwards;
}

@keyframes fk-sl-drift {
	from { transform: scale( 1 ); }
	to   { transform: scale( 1.07 ); }
}

/* Parallax: the image drifts against the swipe by the ratio the JavaScript
   writes per frame (--fk-sl-d, distance from the track's middle). The move
   is on the `translate` property, deliberately beside the drift's `scale` —
   the two compose instead of fighting for `transform` — and the extra base
   scale is what keeps the edges of the frame full while the image slides
   under it. The drift keyframes get a cover-aware twin so an active slide
   never scales below the parallax cover. */

.fk-sl--parallax .fk-sl__media {
	--fk-sl-pxs: 1.18;
	translate: calc( var( --fk-sl-d, 0 ) * -11% ) 0;
	scale: var( --fk-sl-pxs );
}

.fk-sl--parallax.fk-sl--drift .fk-sl__slide.is-active .fk-sl__media {
	animation-name: fk-sl-drift-px;
}

@keyframes fk-sl-drift-px {
	from { scale: calc( var( --fk-sl-pxs, 1.18 ) * 0.92 ); }
	to   { scale: var( --fk-sl-pxs, 1.18 ); }
}

/* Liquid skew: the pictures lean by the scroll velocity the loop writes,
   and spring back when it settles. `transform` is the one transform channel
   the drift and the parallax leave free. */
.fk-sl--skew .fk-sl__media {
	transform: skewX( var( --fk-sl-skew, 0deg ) );
}

/* Coverflow: each slide turns away and recedes by its distance from the
   middle, in its own perspective, and the centre slide stacks above its
   neighbours. The values are per-frame continuums, so no transition —
   the snap settle is just the last frame. */
.fk-sl--coverflow .fk-sl__slide {
	z-index: var( --fk-sl-z, 0 );
	transform: perspective( 1100px ) rotateY( var( --fk-sl-ry, 0deg ) ) scale( var( --fk-sl-sc, 1 ) );
}

.fk-sl__slide::after {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	content: "";
	background: linear-gradient(
		to top,
		rgba( 0, 0, 0, var( --fk-sl-scrim ) ) 0%,
		rgba( 0, 0, 0, calc( var( --fk-sl-scrim ) * 0.35 ) ) 45%,
		rgba( 0, 0, 0, 0 ) 80%
	);
}

.fk-sl__layers {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: var( --fk-sl-align, start );
	gap: 14px;
	box-sizing: border-box;
	max-width: 640px;
	padding: var( --fk-sl-pad );
	text-align: left;
}

.fk-sl__slide[style*="center"] .fk-sl__layers { text-align: center; }
.fk-sl__slide[style*="end"] .fk-sl__layers { text-align: right; }

/* Every layer carries --fk-sl-i, which becomes its delay — so the copy lands
   in reading order and the markup never has to count the layers. */
.fk-sl--reveal .fk-sl__layers > * {
	opacity: 0;
	transform: translate3d( 0, 18px, 0 );
	transition:
		opacity 0.6s cubic-bezier( 0.22, 1, 0.36, 1 ) calc( var( --fk-sl-i, 0 ) * 0.09s ),
		transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 ) calc( var( --fk-sl-i, 0 ) * 0.09s );
}

.fk-sl--reveal .fk-sl__slide.is-active .fk-sl__layers > * {
	opacity: 1;
	transform: translate3d( 0, 0, 0 );
}

.fk-sl__kicker {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --fk-sl-accent );
}

.fk-sl__title.fk-sl__title {
	margin: 0;
	font-size: clamp( 26px, 4vw, 52px );
	font-weight: 700;
	line-height: 1.08;
	color: #fff;
	text-wrap: balance;
}

.fk-sl__text.fk-sl__text {
	margin: 0;
	font-size: clamp( 14px, 1.3vw, 17px );
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.72 );
	text-wrap: pretty;
}

.fk-sl__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.fk-sl__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 24px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 999px;
	transition: filter 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.fk-sl__btn--solid {
	color: var( --fk-sl-btn1-ink, #0b0b10 );
	background: var( --fk-sl-btn1-bg, #fff );
}

.fk-sl__btn--solid:hover {
	filter: brightness( 0.92 );
}

.fk-sl__btn--ghost {
	color: var( --fk-sl-btn2-ink, #fff );
	background: var( --fk-sl-btn2-bg, transparent );
	border: 1px solid var( --fk-sl-btn2-line, rgba( 255, 255, 255, 0.4 ) );
}

.fk-sl__btn--ghost:hover {
	border-color: var( --fk-sl-btn2-line-h, var( --fk-sl-btn2-ink, #fff ) );
	background: var( --fk-sl-btn2-bg-h, rgba( 255, 255, 255, 0.08 ) );
}

/* ------------------------------------------------------------- the designs */

/* Editorial: picture one half, copy the other, on a solid panel. */
.fk-sl--editorial .fk-sl__slide {
	grid-template-columns: 1fr 1fr;
	align-content: stretch;
	background: var( --fk-sl-panel );
}

.fk-sl--editorial .fk-sl__frame {
	position: relative;
	z-index: 0;
	grid-column: 1;
	inset: auto;
}

.fk-sl--editorial .fk-sl__layers {
	grid-row: 1;
	grid-column: 2;
	align-self: center;
	max-width: none;
}

.fk-sl--editorial .fk-sl__slide::after {
	grid-row: 1;
	grid-column: 1;
	inset: auto;
	background: none;
}

/* Cards: the next slide peeks, so the row reads as a set rather than a page. */
.fk-sl--cards .fk-sl__track {
	padding-inline: calc( ( 100% - var( --fk-sl-w ) ) / 2 );
	scroll-padding-inline: calc( ( 100% - var( --fk-sl-w ) ) / 2 );
	border-radius: 0;
}

.fk-sl--cards .fk-sl__slide {
	transition: opacity 0.4s ease;
	opacity: 0.42;
}

.fk-sl--cards .fk-sl__slide.is-active {
	opacity: 1;
}

/* Frame: the picture is inset and the copy sits beneath it. */
.fk-sl--frame .fk-sl__slide {
	grid-template-rows: 1fr auto;
	align-content: stretch;
	background: var( --fk-sl-panel );
}

.fk-sl--frame .fk-sl__frame {
	position: relative;
	inset: auto;
	z-index: 0;
	grid-row: 1;
	border-radius: calc( var( --fk-sl-radius ) - 6px );
	margin: var( --fk-sl-gap );
}

.fk-sl--frame .fk-sl__layers {
	grid-row: 2;
	max-width: none;
	padding-top: 0;
}

.fk-sl--frame .fk-sl__slide::after {
	display: none;
}

/* ------------------------------------------------------------- the controls */

/* The drag cursor: a white disc in mix-blend difference, so it inverts
   whatever picture is under it and reads on any slide. It is positioned by
   two custom properties the pointer writes, scaled by its state classes,
   and it exists only where a pointer exists. */
.fk-sl__cursor {
	position: absolute;
	top: 0;
	left: 0;
	/* Above the slides, whose coverflow stacking the JS raises to 10. */
	z-index: 20;
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	pointer-events: none;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --fk-sl-cursor-ink, #0b0b10 );
	background: var( --fk-sl-cursor-bg, #fff );
	mix-blend-mode: difference;
	transform: translate3d( var( --fk-sl-cx, -200px ), var( --fk-sl-cy, -200px ), 0 ) translate( -50%, -50% );
	scale: 0;
	transition: scale 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-sl__cursor.is-on { scale: 1; }
.fk-sl__cursor.is-down { scale: 0.78; }
.fk-sl__cursor.is-off { scale: 0; }

@media ( hover: hover ) {
	.fk-sl--drag .fk-sl__track { cursor: none; }

	.fk-sl--drag .fk-sl__track a,
	.fk-sl--drag .fk-sl__track button { cursor: pointer; }
}

@media ( hover: none ) {
	.fk-sl--drag .fk-sl__cursor { display: none; }
}

.fk-sl__arrow.fk-sl__arrow {
	--fk-mark: calc( var( --fk-sl-ui-size ) * 0.45 );

	position: absolute;
	top: 50%;
	/* Above the coverflow stacking, whose centre slide the JS raises to 10. */
	z-index: 11;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --fk-sl-ui-size );
	height: var( --fk-sl-ui-size );
	padding: 0;
	color: var( --fk-sl-ui );
	background: var( --fk-sl-ui-bg );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transform: translateY( -50% );
	transition: background-color 0.25s ease, opacity 0.25s ease;
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
}

.fk-sl__arrow:hover {
	background: var( --fk-sl-ui-bg-h, color-mix( in srgb, var( --fk-sl-ui-bg ) 60%, #fff ) );
}

.fk-sl__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

.fk-sl__arrow svg {
	width: var( --fk-mark );
	height: var( --fk-mark );
}

.fk-sl__arrow--prev { left: 16px; }
.fk-sl__arrow--next { right: 16px; }

.fk-sl__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

.fk-sl__count {
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", menlo, consolas, monospace;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var( --fk-sl-ui );
}

/* The counter's current number is a two-cell column in a clipping box: the
   visible value above, the incoming one parked below, swapped by a roll the
   JS drives with two classes. */
.fk-sl__nowroll {
	display: inline-flex;
	flex-direction: column;
	overflow: hidden;
	height: 1.3em;
}

.fk-sl__nowroll > span {
	display: block;
	line-height: 1.3;
	transition: transform 0.32s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-sl__nowroll.is-rolling > span { transform: translateY( -100% ); }

.fk-sl__nowroll.is-snap > span { transition: none; }

.fk-sl__of {
	opacity: 0.45;
}

.fk-sl__dots {
	display: flex;
	gap: 8px;
}

/* The dot grows sideways rather than swelling, so the row's height never
   changes and nothing next to it is nudged. */
.fk-sl__dot.fk-sl__dot {
	width: 22px;
	height: 6px;
	padding: 0;
	background: var( --fk-sl-ui-bg );
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: width 0.3s cubic-bezier( 0.22, 1, 0.36, 1 ), background-color 0.3s ease;
}

.fk-sl__dot.is-on {
	width: 44px;
	background: var( --fk-sl-accent );
}

.fk-sl__progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 11;
	height: 3px;
	overflow: hidden;
	background: var( --fk-sl-progress-bg, rgba( 255, 255, 255, 0.16 ) );
	border-end-end-radius: var( --fk-sl-radius );
	border-end-start-radius: var( --fk-sl-radius );
}

.fk-sl__progressfill {
	display: block;
	height: 100%;
	background: var( --fk-sl-accent );
	transform: scaleX( 0 );
	transform-origin: left center;
}

.fk-sl__progressfill.is-live {
	animation: fk-sl-progress var( --fk-sl-auto, 7s ) linear forwards;
}

.fk-sl__progressfill.is-held {
	animation-play-state: paused;
}

@keyframes fk-sl-progress {
	from { transform: scaleX( 0 ); }
	to   { transform: scaleX( 1 ); }
}

/* A phone has no room for a peek or a split, and an arrow over a half-width
   picture covers the thing it is next to. */
@media ( width <= 767px ) {
	.fk-sl--editorial .fk-sl__slide {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto;
	}

	.fk-sl--editorial .fk-sl__frame {
		grid-row: 1;
		grid-column: 1;
	}

	.fk-sl--editorial .fk-sl__layers {
		grid-row: 2;
		grid-column: 1;
	}

	.fk-sl--cards {
		--fk-sl-w: 92%;
	}

	.fk-sl__arrow.fk-sl__arrow {
		display: none;
	}
}

/* Reduced motion: the scroll-linked effects are continuous motion, so they
   all land at rest — flat pictures, upright slides, no drift, no cursor. */
@media ( prefers-reduced-motion: reduce ) {
	[data-fk-rm] .fk-sl--skew .fk-sl__media { transform: none; }
	[data-fk-rm] .fk-sl--parallax .fk-sl__media { translate: none; scale: 1; }
	[data-fk-rm] .fk-sl--coverflow .fk-sl__slide { transform: none; }
	[data-fk-rm] .fk-sl--drift .fk-sl__slide.is-active .fk-sl__media { animation: none; }
	[data-fk-rm] .fk-sl__cursor { display: none; }
}


/* ---------------------------------------------------------------------- */
/* Mobile Menu — the burger that becomes the whole screen.                  */
/* The panel is a native <dialog>: the top layer lifts it above every       */
/* sticky header at once. Reveal is clip-path (circle from the trigger's    */
/* own coordinates, curtain, rise, fade); the rows arrive in reading        */
/* order through an overflow-hidden mask, each delayed by its `--i`. The    */
/* in-panel close is a copy of the burger fixed to the trigger's point,     */
/* so the button that opened the panel is the one that closes it.           */
/* -                                                                       */
/* Every rule that lands on a native <button>, <a>, <ul> or <p> is written  */
/* with the block root in front of it. A site's global element skin         */
/* outranks a lone FlowKit class — Elementor's kit writes                   */
/* `.elementor-kit-N button { background … padding … border-radius … }` and */
/* `.elementor-kit-N a { color … }`, both (0,1,1) — so a bare               */
/* `.fk-mm__burger` lost, and the trigger came out as the theme's filled    */
/* button with the theme's link colour on the rows. `.fk-mm .fk-mm__burger` */
/* is (0,2,0): over the kit, still under the (0,2,0) this widget's own      */
/* style controls write from a later stylesheet, so the panel keeps the     */
/* last word.                                                              */
/* ---------------------------------------------------------------------- */

.fk-mm {
	--fk-mm-h: 100%;
	--fk-mm-speed: 0.6s;
	--fk-mm-size: 30px;
	--fk-mm-gap: 7px;
	--fk-mm-thick: 2px;
	--fk-mm-m: calc( ( var( --fk-mm-gap ) + var( --fk-mm-thick ) ) / 2 );
	--fk-mm-x: 50%;
	--fk-mm-y: 26px;
	--fk-mm-bg: #0b0b10;
	--fk-mm-backdrop: rgba( 6, 6, 10, 0.6 );
	--fk-mm-radius: 0px;
	--fk-mm-color: #f5f5f7;
	--fk-mm-accent: #9382ff;
	--fk-mm-sub: rgba( 245, 245, 247, 0.62 );
	--fk-mm-burger: #f5f5f7;
	--fk-mm-ghost: rgba( 245, 245, 247, 0.1 );
	--fk-mm-a: #9382ff;
	--fk-mm-b: #f0468a;
	--fk-mm-ctabg: #f5f5f7;
	--fk-mm-ctacolor: #0b0b10;

	/* The trigger's own skin. Transparent by default: the burger is lines,
	   not a button, until somebody asks for a button. */
	--fk-mm-tbg: transparent;
	--fk-mm-tpad: 12px;
	--fk-mm-tradius: 0px;
	--fk-mm-tbw: 0px;
	--fk-mm-tbc: transparent;
	--fk-mm-tlabelgap: 14px;
	--fk-mm-isize: 26px;
	--fk-mm-coff: 18px;

	/* The rest resolve through fallbacks rather than defaults, so an empty
	   control means "follow the colour this used to borrow" instead of
	   "paint nothing": --fk-mm-hover falls back to the accent, the close
	   button's colours to the trigger's, the sub-item hover to the item
	   colour. A default written here would break that chain. */

	display: flex;
}

@media ( width >= 1025px ) {
	.fk-mm--max-1024 { display: none; }
}

@media ( width >= 768px ) {
	.fk-mm--max-767 { display: none; }
}

/* The visually-hidden strings (the open/close names, the toggle labels)
   must not depend on the theme shipping .screen-reader-text — the widget
   carries its own, scoped to itself, so a theme without the class sees the
   same widget a theme with it does. */
.fk-mm .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------- trigger -- */

/* The trigger and its in-panel clone share one skin. Both are native
   buttons, so both start by undoing whatever the site dresses buttons in —
   the shorthands are deliberate, a global skin sets `padding` and
   `border-radius` as four values and a longhand reset would leave three of
   them standing. */

.fk-mm .fk-mm__burger,
.fk-mm .fk-mm__close {
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	gap: var( --fk-mm-tlabelgap );
	width: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: var( --fk-mm-tpad );
	font: inherit;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: var( --fk-mm-burger );
	background: var( --fk-mm-tbg );
	border: var( --fk-mm-tbw ) solid var( --fk-mm-tbc );
	border-radius: var( --fk-mm-tradius );
	box-shadow: none;
	appearance: none;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.fk-mm .fk-mm__burger:hover,
.fk-mm .fk-mm__burger:focus-visible {
	color: var( --fk-mm-burger-h, var( --fk-mm-burger ) );
	background: var( --fk-mm-tbg-h, var( --fk-mm-tbg ) );
}

.fk-mm .fk-mm__burger-box {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: center;
	gap: var( --fk-mm-gap );
	width: var( --fk-mm-size );
}

.fk-mm .fk-mm__line {
	display: block;
	width: 100%;
	height: var( --fk-mm-thick );
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 ), opacity 0.3s ease;
}

/* An icon instead of the lines. Sized in `font-size` so one control covers
   both shapes an icon can arrive in: a font glyph inherits it, and the SVG
   below is written in `em`. Neither is allowed to stretch — an icon library's
   own sheet sizes `svg` by width alone and leaves the height to the aspect
   ratio, which a flex row then pulls out of square. */

.fk-mm .fk-mm__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	font-size: var( --fk-mm-isize );
	font-style: normal;
	line-height: 1;
	color: inherit;
}

.fk-mm .fk-mm__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

.fk-mm .fk-mm__icon i,
.fk-mm .fk-mm__icon i::before {
	font-size: inherit;
	line-height: 1;
}

/* The label rolls from the word to "Close" as the panel opens — part of the
   open choreography, like the cross itself, not a hover. */

.fk-mm .fk-mm__label {
	display: inline-block;
	overflow: hidden;
	height: 1.3em; /* one line of the 1.3 line-height roll below */
}

.fk-mm .fk-mm__labelroll {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	transition: transform 0.45s cubic-bezier( 0.76, 0, 0.24, 1 );
}

.fk-mm.is-open .fk-mm__labelroll { transform: translateY( -50% ); }

/* -------------------------------------------------------------- panel -- */

.fk-mm .fk-mm__panel {
	/* ::backdrop resolves custom properties against the dialog, not against
	   an ancestor, so the ones it needs are declared here as well as on
	   .fk-mm. */
	--fk-mm-backdrop: rgba( 6, 6, 10, 0.6 );
	--fk-mm-blur: 0px;

	/* The user-agent sheet styles a dialog like a centred card — margins,
	   a max-width under 100%, a border. The reset is what makes it a panel. */
	position: fixed;
	inset: auto 0 0;
	width: auto;
	max-width: none;
	height: var( --fk-mm-h );
	max-height: 100vh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var( --fk-mm-color );
	background: var( --fk-mm-bg );
	border: 0;
	border-radius: var( --fk-mm-radius ) var( --fk-mm-radius ) 0 0;
	transition:
		clip-path var( --fk-mm-speed ) cubic-bezier( 0.32, 0.72, 0, 1 ),
		transform var( --fk-mm-speed ) cubic-bezier( 0.32, 0.72, 0, 1 ),
		opacity calc( var( --fk-mm-speed ) * 0.5 ) ease;
}

/* The panel's subtree measures against its own boxes — the theme's box
   sizing (or absence of one) stops at the dialog edge. */
.fk-mm__panel,
.fk-mm__panel *,
.fk-mm__panel ::before,
.fk-mm__panel ::after {
	box-sizing: border-box;
}

.fk-mm__panel::backdrop {
	background: var( --fk-mm-backdrop );
	-webkit-backdrop-filter: blur( var( --fk-mm-blur ) );
	backdrop-filter: blur( var( --fk-mm-blur ) );
	/* The veil fades with the panel. Without this the ::backdrop is static:
	   it paints at full strength while the panel's own reveal is leaving, so
	   a coloured backdrop survives everything the user watched disappear and
	   then pops — a solid full-screen wash after the close. Chrome 122+
	   transitions ::backdrop; older browsers keep the snap, which is the
	   behaviour this fixes, not worse than it. */
	opacity: 0;
	transition: opacity calc( var( --fk-mm-speed ) * 0.6 ) ease;
}

.fk-mm__panel.is-open::backdrop { opacity: 1; }

/* The four reveals: the closed pose is the base rule, the open pose the
   .is-open rule added two frames after showModal() — the transition needs a
   rendered frame to move from. Both poses read the same variables, so the
   interpolation is between two of the same shape. */

.fk-mm--circle .fk-mm__panel {
	clip-path: circle( 0 at var( --fk-mm-x ) var( --fk-mm-y ) );
}

.fk-mm--circle .fk-mm__panel.is-open {
	clip-path: circle( 140% at var( --fk-mm-x ) var( --fk-mm-y ) );
}

.fk-mm--curtain .fk-mm__panel {
	clip-path: inset( 0 0 100% 0 );
}

.fk-mm--curtain .fk-mm__panel.is-open {
	clip-path: inset( 0 0 0% 0 );
}

.fk-mm--rise .fk-mm__panel { transform: translateY( 102% ); }
.fk-mm--rise .fk-mm__panel.is-open { transform: translateY( 0 ); }

.fk-mm--fade .fk-mm__panel { opacity: 0; transform: translateY( 14px ) scale( 0.985 ); }
.fk-mm--fade .fk-mm__panel.is-open { opacity: 1; transform: none; }

/* ------------------------------------------------------ panel chrome -- */

/* The clone takes the trigger's skin from the shared rule above; only its
   placement and its own optional colours are its own. */

.fk-mm .fk-mm__close {
	position: absolute;
	z-index: 3;
	gap: var( --fk-mm-clabelgap, var( --fk-mm-tlabelgap ) );
	padding: var( --fk-mm-cpad, var( --fk-mm-tpad ) );
	color: var( --fk-mm-cui, var( --fk-mm-burger ) );
	background: var( --fk-mm-cbg, var( --fk-mm-tbg ) );
	border: var( --fk-mm-cbw, var( --fk-mm-tbw ) ) solid var( --fk-mm-cbc, var( --fk-mm-tbc ) );
	border-radius: var( --fk-mm-cradius, var( --fk-mm-tradius ) );
}

/* The clone's icon is sized on its own dial when it has one — a cross pinned
   to a corner is rarely the size of the burger that opened the panel — and
   falls back to the trigger's, which is also what a lines trigger with an icon
   close reads: that widget never showed the trigger's Icon Size control, so
   the default behind it is the only value there is. */

.fk-mm .fk-mm__close .fk-mm__icon {
	font-size: var( --fk-mm-cisize, var( --fk-mm-isize ) );
}

.fk-mm .fk-mm__close:hover,
.fk-mm .fk-mm__close:focus-visible {
	color: var( --fk-mm-cui-h, var( --fk-mm-cui, var( --fk-mm-burger ) ) );
	background: var( --fk-mm-cbg-h, var( --fk-mm-cbg, var( --fk-mm-tbg ) ) );
}

/* Where the clone sits. On the trigger's own point it reads as the same
   button; pinned to a corner it reads as a panel control. The reveal still
   grows out of the trigger either way — that is the finger's coordinate,
   not the button's. */

.fk-mm--close-at .fk-mm__close {
	top: var( --fk-mm-y );
	left: var( --fk-mm-x );
	transform: translate( -50%, -50% );
}

.fk-mm--close-tr .fk-mm__close {
	top: var( --fk-mm-coff );
	right: var( --fk-mm-coff );
}

.fk-mm--close-tl .fk-mm__close {
	top: var( --fk-mm-coff );
	left: var( --fk-mm-coff );
}

/* The clone mounts in the cross pose, so its lines animate in from the
   burger's: one keyframe each, delayed until the reveal has cleared the
   button. `both` keeps the pose until the dialog closes. */

.fk-mm__panel[open] .fk-mm__close .fk-mm__line {
	animation-duration: 0.45s;
	animation-timing-function: cubic-bezier( 0.22, 1, 0.36, 1 );
	animation-fill-mode: both;
	animation-delay: calc( var( --fk-mm-speed ) * 0.3 );
}

.fk-mm__panel[open] .fk-mm__close .fk-mm__line--a { animation-name: fk-mm-x-a; }
.fk-mm__panel[open] .fk-mm__close .fk-mm__line--b { animation-name: fk-mm-x-b; }
.fk-mm__panel[open] .fk-mm__close .fk-mm__line--c { animation-name: fk-mm-x-c; }

/* The clone's label sits on the second line of the roll permanently — unless
   there is no first line to roll from, which is a close label on a trigger
   that carries none. That one is printed as a single line and the pin would
   push it clean out of the mask. */
.fk-mm .fk-mm__panel .fk-mm__labelroll { transform: translateY( -50% ); }
.fk-mm .fk-mm__panel .fk-mm__labelroll--solo { transform: none; }

@keyframes fk-mm-x-a {
	to { transform: translateY( var( --fk-mm-m ) ) rotate( 45deg ); }
}

@keyframes fk-mm-x-b {
	to { opacity: 0; }
}

@keyframes fk-mm-x-c {
	to { transform: translateY( calc( -1 * var( --fk-mm-m ) ) ) rotate( -45deg ); }
}

.fk-mm__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
}

.fk-mm__blob {
	position: absolute;
	width: 65vmax;
	height: 65vmax;
	border-radius: 50%;
}

/* Radial gradients are already soft; the drift is transform-only, so the
   blobs cost compositing, not paint. */

.fk-mm__blob--a {
	top: -22vmax;
	left: -18vmax;
	opacity: 0.55;
	background: radial-gradient( closest-side, var( --fk-mm-a ), transparent 72% );
	animation: fk-mm-blob-a 16s ease-in-out infinite alternate;
}

.fk-mm__blob--b {
	right: -24vmax;
	bottom: -26vmax;
	opacity: 0.45;
	background: radial-gradient( closest-side, var( --fk-mm-b ), transparent 72% );
	animation: fk-mm-blob-b 21s ease-in-out infinite alternate;
}

@keyframes fk-mm-blob-a {
	from { transform: translate3d( 0, 0, 0 ) scale( 1 ); }
	to { transform: translate3d( 6vmax, 4vmax, 0 ) scale( 1.12 ); }
}

@keyframes fk-mm-blob-b {
	from { transform: translate3d( 0, 0, 0 ) scale( 1 ); }
	to { transform: translate3d( -5vmax, -3vmax, 0 ) scale( 1.08 ); }
}

.fk-mm__ghost {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: clamp( 120px, 34vw, 380px );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.5px var( --fk-mm-ghost );
	transform: translate( -50%, -50% );
	user-select: none;
	animation: fk-mm-ghost 11s ease-in-out infinite alternate;
}

@keyframes fk-mm-ghost {
	from { transform: translate( -52%, -50% ); }
	to { transform: translate( -48%, -50% ); }
}

.fk-mm__noise {
	position: absolute;
	inset: 0;
	opacity: 0.06;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E" );
}

.fk-mm__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var( --fk-mm-pad, clamp( 72px, 12vh, 110px ) clamp( 22px, 7vw, 90px ) max( 30px, calc( env( safe-area-inset-bottom ) + 22px ) ) );
	overflow-y: auto;
	overscroll-behavior: contain;
}

.fk-mm--center .fk-mm__inner {
	align-items: center;
	text-align: center;
}

.fk-mm--right .fk-mm__inner {
	align-items: flex-end;
	text-align: right;
}

.fk-mm .fk-mm__kicker,
.fk-mm .fk-mm__foot {
	opacity: 0;
	transform: translateY( 10px );
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-mm .fk-mm__kicker {
	margin: 0 0 clamp( 14px, 2.4vh, 26px );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var( --fk-mm-kicker, var( --fk-mm-accent ) );
}

.fk-mm .fk-mm__foot {
	flex: 0 0 auto;
	padding-top: clamp( 18px, 3.4vh, 34px );
}

.fk-mm.is-open .fk-mm__kicker {
	opacity: 1;
	transform: none;
	transition-delay: calc( var( --fk-mm-speed ) * 0.4 );
}

.fk-mm.is-open .fk-mm__foot {
	opacity: 1;
	transform: none;
	transition-delay: calc( var( --fk-mm-speed ) * 0.75 );
}

.fk-mm__nav {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.fk-mm--center .fk-mm__nav { align-items: center; }
.fk-mm--right .fk-mm__nav { align-items: flex-end; }

/* --------------------------------------------------------------- rows -- */

.fk-mm .fk-mm__list {
	display: flex;
	flex-direction: column;
	gap: var( --fk-mm-rowgap, clamp( 2px, 1vh, 12px ) );
	margin: 0;
	padding: 0;
	list-style: none;
}

.fk-mm .fk-mm__item { margin: 0; }

.fk-mm__mask { overflow: hidden; }

.fk-mm__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var( --fk-mm-numgap, clamp( 10px, 2.4vw, 22px ) );
	transform: translateY( 120% );
	transition: transform 0.7s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-mm--center .fk-mm__row { justify-content: center; }
.fk-mm--right .fk-mm__row { justify-content: flex-end; }

/* Reading order: the index the walker stamped on the row becomes the
   delay, measured off the panel's own duration. On the way out there is
   no delay — the panel is leaving, nothing waits behind it. */

.fk-mm.is-open .fk-mm__row {
	transform: none;
	transition-delay: calc( var( --fk-mm-speed ) * 0.55 + var( --i, 0 ) * 55ms );
}

/* Stagger off: the rows still rise, they just arrive together. The switcher
   used to set nothing at all and the reading order ran either way. */
.fk-mm--nostagger.is-open .fk-mm__row {
	transition-delay: calc( var( --fk-mm-speed ) * 0.55 );
}

.fk-mm .fk-mm__link {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0.42em;
	padding: 0.08em 0;
	font-size: clamp( 28px, min( 9vw, 7vh ), 58px );
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var( --fk-mm-color );
	text-decoration: none;
	transition: color 0.3s ease;
}

.fk-mm .fk-mm__link.is-current { color: var( --fk-mm-current, var( --fk-mm-accent ) ); }

/* Hover emphasis is colour, per the pack's own rule — the row never
   moves for a pointer. */
.fk-mm .fk-mm__link:hover,
.fk-mm .fk-mm__link:focus-visible { color: var( --fk-mm-hover, var( --fk-mm-accent ) ); }

.fk-mm .fk-mm__num {
	min-width: 2.2em;
	font-size: var( --fk-mm-numsize, clamp( 11px, 1.8vh, 14px ) );
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	color: var( --fk-mm-num, var( --fk-mm-accent ) );
	opacity: 0.85;
}

.fk-mm--nonum .fk-mm__num { display: none; }

.fk-mm__txt { display: block; }

.fk-mm .fk-mm__toggle {
	--fk-mark: calc( var( --fk-mm-togsize, clamp( 42px, 6vh, 56px ) ) * 0.44 );

	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --fk-mm-togsize, clamp( 42px, 6vh, 56px ) );
	height: var( --fk-mm-togsize, clamp( 42px, 6vh, 56px ) );
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: var( --fk-mm-tog, currentColor );
	cursor: pointer;
	background: var( --fk-mm-togbg, transparent );
	border: 1px solid var( --fk-mm-togbd, color-mix( in srgb, currentColor 26%, transparent ) );
	border-radius: var( --fk-mm-togradius, 50% );
	box-shadow: none;
	appearance: none;
	transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
	-webkit-appearance: none;
}

.fk-mm .fk-mm__toggle svg {
	width: var( --fk-mark );
	height: var( --fk-mark );
}

/* The chevron holds still when the sub-panel opens, like the accordion's:
   the accent says "open", the movement stays with the panel itself. */
.fk-mm .fk-mm__toggle[aria-expanded="true"] {
	color: var( --fk-mm-togon, var( --fk-mm-accent ) );
	border-color: color-mix( in srgb, var( --fk-mm-togon, var( --fk-mm-accent ) ) 45%, transparent );
}

/* The expanding sub-panel: one grid row animated between 0fr and 1fr, so
   there is no measured height to go stale. */

.fk-mm__sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-mm__sub.is-open { grid-template-rows: 1fr; }

.fk-mm__subclip {
	overflow: hidden;
	min-height: 0;
}

.fk-mm .fk-mm__sublist {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 6px 0 12px;
	list-style: none;
}

.fk-mm .fk-mm__subitem { margin: 0; }

.fk-mm .fk-mm__sublink {
	display: inline-block;
	padding: 4px 0;
	font-size: clamp( 16px, 2.8vh, 21px );
	font-weight: 400;
	color: var( --fk-mm-sub );
	text-decoration: none;
	transition: color 0.25s ease;
}

.fk-mm .fk-mm__sublink.is-current { color: var( --fk-mm-current, var( --fk-mm-accent ) ); }

.fk-mm .fk-mm__sublink:hover,
.fk-mm .fk-mm__sublink:focus-visible {
	color: var( --fk-mm-sub-h, var( --fk-mm-color ) );
}

.fk-mm .fk-mm__cta {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: var( --fk-mm-ctapad, 15px 34px );
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var( --fk-mm-ctacolor );
	text-decoration: none;
	background: var( --fk-mm-ctabg );
	border-radius: var( --fk-mm-ctaradius, 999px );
	transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

/* The shadow carries the hover emphasis, as the Card's does — no lift. */
.fk-mm .fk-mm__cta:hover,
.fk-mm .fk-mm__cta:focus-visible {
	color: var( --fk-mm-ctacolor-h, var( --fk-mm-ctacolor ) );
	background: var( --fk-mm-ctabg-h, var( --fk-mm-ctabg ) );
	box-shadow: 0 14px 34px var( --fk-mm-ctashadow, rgba( 0, 0, 0, 0.35 ) );
}

/* The dialog's own display rules belong to the browser; this only guards
   against a stray `open`-less dialog ever painting above the page. */
.fk-mm .fk-mm__panel:not([open]) { display: none; }

/* Reduced motion: everything lands at once, and the close button's lines
   must rest in the cross pose the keyframes can no longer carry them to. */
@media ( prefers-reduced-motion: reduce ) {
	[data-fk-rm] .fk-mm__panel,
	[data-fk-rm] .fk-mm__panel::backdrop,
	[data-fk-rm] .fk-mm__row,
	[data-fk-rm] .fk-mm__sub,
	[data-fk-rm] .fk-mm__labelroll,
	[data-fk-rm] .fk-mm__line,
	[data-fk-rm] .fk-mm__txt,
	[data-fk-rm] .fk-mm__toggle svg,
	[data-fk-rm] .fk-mm__kicker,
	[data-fk-rm] .fk-mm__foot,
	[data-fk-rm] .fk-mm__cta,
	[data-fk-rm] .fk-mm__sublink {
		transition: none !important;
	}

	[data-fk-rm] .fk-mm__blob,
	[data-fk-rm] .fk-mm__ghost,
	[data-fk-rm] .fk-mm__close .fk-mm__line {
		animation: none !important;
	}

	[data-fk-rm] .fk-mm__close .fk-mm__line--a { transform: translateY( var( --fk-mm-m ) ) rotate( 45deg ); }
	[data-fk-rm] .fk-mm__close .fk-mm__line--b { opacity: 0; }
	[data-fk-rm] .fk-mm__close .fk-mm__line--c { transform: translateY( calc( -1 * var( --fk-mm-m ) ) ) rotate( -45deg ); }
}


/* ---------------------------------------------------------------------- */
/* Custom Cursor — a dot that tracks the pointer closely and a ring that    */
/* follows with inertia. Two lerp factors, one pointer. The swell and the   */
/* label are the individual `scale` property, so the eased state change     */
/* never fights the per-frame transform write. Touch and reduced motion     */
/* never see it: the binder stands down and the block stays display:none.   */
/* ---------------------------------------------------------------------- */

.fk-cursor {
	display: none;
	pointer-events: none;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.fk-cursor {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		display: block;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.fk-cursor.is-on { opacity: 1; }

	.fk-cursor__dot {
		position: fixed;
		top: 0;
		left: 0;
		width: 8px;
		height: 8px;
		margin: -4px;
		border-radius: 50%;
		background: var( --fk-cur-dot, #fff );
		transform: translate3d( var( --fk-cur-dx, -100px ), var( --fk-cur-dy, -100px ), 0 );
	}

	.fk-cursor__ring {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: var( --fk-cur-size, 40px );
		height: var( --fk-cur-size, 40px );
		margin: calc( var( --fk-cur-size, 40px ) / -2 );
		border: 1.5px solid var( --fk-cur-ring, #fff );
		border-radius: 50%;
		transform: translate3d( var( --fk-cur-rx, -100px ), var( --fk-cur-ry, -100px ), 0 );
		scale: 1;
		transition: scale 0.3s cubic-bezier( 0.22, 1, 0.36, 1 ), background-color 0.25s ease;
	}

	.fk-cursor.is-big .fk-cursor__ring { scale: 1.7; }

	/* Label mode: the ring fills and grows; the label lives inside the scaled
	   box, so its font size is set small and lands at the dial's size. */
	.fk-cursor.has-label .fk-cursor__ring {
		scale: 2.6;
		background: var( --fk-cur-ring, #fff );
		border-color: transparent;
	}

	.fk-cursor__label {
		font-size: calc( var( --fk-cur-label, 11px ) / 2.6 );
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var( --fk-cur-dot, #fff );
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.fk-cursor.has-label .fk-cursor__label { opacity: 1; }

	.fk-cursor--blend .fk-cursor__dot,
	.fk-cursor--blend .fk-cursor__ring { mix-blend-mode: difference; }

	.fk-cursor-hide,
	.fk-cursor-hide * { cursor: none !important; }
}

/* ---------------------------------------------------------------------- */
/* Word Rotator — the rotating word is a two-cell column in a clipping      */
/* mask, exactly the counter roll's mechanics: incoming word parked below   */
/* the fold, one line of travel, refilled and snapped back invisibly.       */
/* ---------------------------------------------------------------------- */

.fk-wr__mask {
	display: inline-block;
	overflow: hidden;
	height: 1.25em;
	vertical-align: bottom;
}

.fk-wr__roll {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.25;
	vertical-align: top;
}

.fk-wr__roll > span {
	display: block;
	text-align: inherit;
}

.fk-wr__roll.is-rolling > span {
	transform: translateY( -100% );
	transition: transform 0.38s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-wr__roll.is-snap > span { transition: none; }

@media ( prefers-reduced-motion: reduce ) {
	[data-fk-rm] .fk-wr__roll.is-rolling > span { transition: none; }
}

/* ---------------------------------------------------------------------- */
/* Video Lightbox — a native dialog as the theatre. The dialog reset is     */
/* what turns the user-agent card into a screen; the backdrop vars resolve  */
/* against the dialog itself, as with Mobile Menu.                          */
/* ---------------------------------------------------------------------- */

.fk-vl { display: block; }

.fk-vl__open.fk-vl__open {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.fk-vl__poster.fk-vl__poster {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var( --fk-vl-radius, 18px );
}

.fk-vl__disc {
	--fk-mark: calc( var( --fk-vl-disc, 84px ) * 0.42 );

	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --fk-vl-disc, 84px );
	height: var( --fk-vl-disc, 84px );
	margin: calc( var( --fk-vl-disc, 84px ) / -2 ) 0 0 calc( var( --fk-vl-disc, 84px ) / -2 );
	color: var( --fk-vl-icon, #0b0b10 );
	background: var( --fk-vl-accent, #f5f5f7 );
	border-radius: 50%;
	box-shadow: 0 12px 40px var( --fk-vl-disc-shadow, rgba( 0, 0, 0, 0.35 ) );
}

/* The nudge is the triangle's optical centre, not the box's: a play glyph
   put in its place brings its own balance and is left where it lands. */
.fk-vl__disc svg {
	width: var( --fk-mark );
	height: var( --fk-mark );
	margin-left: 6%;
}

.fk-vl__label {
	font-size: 14px;
	font-weight: 600;
}

.fk-vl__panel {
	/* ::backdrop resolves custom properties against the dialog itself, not
	   against an ancestor, so the one it needs lives here. */
	--fk-vl-backdrop: rgba( 6, 6, 10, 0.82 );

	width: min( 92vw, 1160px );
	height: auto;
	margin: auto;
	padding: 0;
	overflow: visible;
	background: transparent;
	border: 0;
	border-radius: var( --fk-vl-radius, 18px );
}

.fk-vl__panel::backdrop {
	background: var( --fk-vl-backdrop );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
}

.fk-vl__panel video {
	display: block;
	width: 100%;
	max-height: 86vh;
	border-radius: var( --fk-vl-radius, 18px );
	background: var( --fk-vl-letterbox, #000 );
}

.fk-vl__close.fk-vl__close {
	--fk-mark: 36px;

	position: absolute;
	top: -46px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var( --fk-vl-close-ui, #fff );
	background: none;
	border: 0;
	cursor: pointer;
}

.fk-vl__close svg { width: var( --fk-mark ); height: var( --fk-mark ); }

/* ---------------------------------------------------------------------- */
/* Slider Remote — standalone chrome that drives a named Showcase.          */
/* ---------------------------------------------------------------------- */

.fk-slrm {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.fk-slrm__btn.fk-slrm__btn {
	--fk-mark: calc( var( --fk-slrm-size, 46px ) * 0.45 );

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --fk-slrm-size, 46px );
	height: var( --fk-slrm-size, 46px );
	padding: 0;
	color: var( --fk-slrm-ui, #fff );
	background: var( --fk-slrm-bg, rgba( 255, 255, 255, 0.12 ) );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.25s ease;
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
}

.fk-slrm__btn:hover {
	background: var( --fk-slrm-bg-h, color-mix( in srgb, var( --fk-slrm-bg, rgba( 255, 255, 255, 0.12 ) ) 60%, #fff ) );
}

.fk-slrm__btn svg {
	width: var( --fk-mark );
	height: var( --fk-mark );
}

.fk-slrm__count {
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", menlo, consolas, monospace;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var( --fk-slrm-ui, #fff );
}

/* ---------------------------------------------------------------------- */
/* Back to Top — hidden until the page earns it; the ring is a              */
/* pathLength="100" circle whose dashoffset is the scroll fraction.         */
/* ---------------------------------------------------------------------- */

.fk-top.fk-top {
	--fk-mark: calc( var( --fk-top-size, 48px ) * 0.4 );

	position: fixed;
	bottom: var( --fk-top-offset, 24px );
	z-index: 60;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --fk-top-size, 48px );
	height: var( --fk-top-size, 48px );
	/* The size is the whole button, so the padding has to be stated: a global
	   button skin that sets one wins a property this rule never declared, and
	   the ring ended up inside 18px of inherited air. */
	padding: 0;
	font: inherit;
	color: var( --fk-top-ui, #f5f5f7 );
	background: var( --fk-top-bg, #0b0b10 );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 10px 30px var( --fk-top-shadow, rgba( 0, 0, 0, 0.25 ) );
	opacity: 0;
	scale: 0.6;
	pointer-events: none;
	transition: opacity 0.3s ease, scale 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-top--right { right: var( --fk-top-offset, 24px ); }
.fk-top--left { left: var( --fk-top-offset, 24px ); }

.fk-top.is-on {
	opacity: 1;
	scale: 1;
	pointer-events: auto;
}

.fk-top__ring {
	position: absolute;
	inset: -5px;
	width: calc( 100% + 10px );
	height: calc( 100% + 10px );
	transform: rotate( -90deg );
}

.fk-top__track,
.fk-top__fill {
	fill: none;
	stroke-width: 2;
}

.fk-top__track { stroke: rgba( 255, 255, 255, 0.14 ); }

.fk-top__fill {
	stroke: var( --fk-top-ring, #9382ff );
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

.fk-top__chev {
	width: var( --fk-mark );
	height: var( --fk-mark );
}

/* ---------------------------------------------------------------------- */
/* Scroll Progress — one fixed hairline, one scaleX.                        */
/* ---------------------------------------------------------------------- */

.fk-prog {
	position: fixed;
	right: 0;
	left: 0;
	z-index: 9998;
	height: var( --fk-prog-h, 3px );
	pointer-events: none;
}

.fk-prog--top { top: 0; }
.fk-prog--bottom { bottom: 0; }

.fk-prog__fill {
	display: block;
	height: 100%;
	background: var( --fk-prog-fill, #6d5efc );
	transform: scaleX( 0 );
	transform-origin: left center;
}

/* ---------------------------------------------------------------------- */
/* Pointer Tilt — a card that leans with the pointer. The transition only   */
/* runs while the pointer is away (the spring back); during tracking the    */
/* per-frame writes land with no transition at all.                         */
/* ---------------------------------------------------------------------- */

[data-fk-tilt] {
	transform: perspective( 900px ) rotateX( var( --fk-tilt-x, 0deg ) ) rotateY( var( --fk-tilt-y, 0deg ) );
	transition: transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
}

[data-fk-tilt].is-tilting { transition: none; }

@media ( prefers-reduced-motion: reduce ) {
	[data-fk-rm] [data-fk-tilt] { transform: none; }
}


/* ---------------------------------------------------------------------- */
/* Popup — any Elementor template over the page, in four shapes. The        */
/* closed pose is the base rule, the open pose the .is-open rule added two  */
/* frames after showModal(); each shape owns its closed transform.          */
/* ---------------------------------------------------------------------- */

.fk-pop { display: inline-block; }

.fk-pop__btn.fk-pop__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 32px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var( --fk-pop-btn-ui, #fff );
	background: var( --fk-pop-btn, #6d5efc );
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: filter 0.25s ease, box-shadow 0.25s ease;
}

.fk-pop__btn:hover {
	filter: brightness( 1.12 );
	box-shadow: 0 10px 30px color-mix( in srgb, var( --fk-pop-btn, #6d5efc ) 45%, transparent );
}

.fk-pop__panel {
	/* ::backdrop resolves custom properties against the dialog itself. */
	--fk-pop-backdrop: rgba( 6, 6, 10, 0.7 );

	position: fixed;
	margin: 0;
	padding: 0;
	overflow: visible;
	color: inherit;
	background: transparent;
	border: 0;
	opacity: 0;
	transition:
		opacity 0.35s ease,
		transform 0.45s cubic-bezier( 0.32, 0.72, 0, 1 );
}

.fk-pop__panel.is-open { opacity: 1; }

.fk-pop__panel::backdrop {
	background: var( --fk-pop-backdrop );
}

/* Modal: centred, rises and settles. */
.fk-pop--modal {
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	transform: scale( 0.96 );
	background: none;
}

.fk-pop--modal.is-open { transform: scale( 1 ); }

/* Drawers: full-height sheets pinned to an edge. */
.fk-pop--right,
.fk-pop--left {
	top: 0;
	bottom: 0;
	width: min( var( --fk-pop-w, 520px ), 92vw );
	max-width: none;
	max-height: none;
	border-radius: 0;
	background: var( --fk-pop-bg, #fff );
}

.fk-pop--right { right: 0; transform: translateX( 103% ); border-radius: 0; }
.fk-pop--left { left: 0; transform: translateX( -103% ); }

.fk-pop--right.is-open,
.fk-pop--left.is-open { transform: translateX( 0 ); }

/* Bottom sheet. */
.fk-pop--bottom {
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	max-width: none;
	max-height: 88vh;
	transform: translateY( 103% );
	background: var( --fk-pop-bg, #fff );
	border-radius: var( --fk-pop-radius, 20px ) var( --fk-pop-radius, 20px ) 0 0;
}

.fk-pop--bottom.is-open { transform: translateY( 0 ); }

.fk-pop--modal .fk-pop__content {
	width: min( var( --fk-pop-w, 520px ), 92vw );
	max-height: 86vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 34px;
	background: var( --fk-pop-bg, #fff );
	color: var( --fk-pop-ink, #14141c );
	border-radius: var( --fk-pop-radius, 20px );
}

.fk-pop--right .fk-pop__content,
.fk-pop--left .fk-pop__content {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 34px;
	background: var( --fk-pop-bg, #fff );
	color: var( --fk-pop-ink, #14141c );
}

.fk-pop--bottom .fk-pop__content {
	max-height: 88vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 34px;
	background: var( --fk-pop-bg, #fff );
	color: var( --fk-pop-ink, #14141c );
}

.fk-pop__close.fk-pop__close {
	--fk-mark: 20px;

	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var( --fk-pop-close-ui, #14141c );
	background: var( --fk-pop-close-bg, rgba( 20, 20, 28, 0.06 ) );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

/* The hover is a lift off whatever the background is, so a chosen colour is
   still the one being lifted. */
.fk-pop__close:hover {
	background: var( --fk-pop-close-bg-h, rgba( 20, 20, 28, 0.12 ) );
}

.fk-pop__close svg { width: var( --fk-mark ); height: var( --fk-mark ); }

.fk-pop__notice {
	padding: 14px 18px;
	font-size: 13px;
	color: var( --fk-pop-notice, #6d5efc );
	background: var( --fk-pop-notice-bg, rgba( 109, 94, 252, 0.1 ) );
	border-radius: 10px;
}

@media ( prefers-reduced-motion: reduce ) {
	[data-fk-rm] .fk-pop__panel,
	[data-fk-rm] .fk-pop__btn { transition: none !important; }
}

/* ---------------------------------------------------------------------- */
/* Gallery — the grid, and the theatre behind it. The lightbox is one       */
/* dialog: the server rendered every figure inside, the JavaScript moves a  */
/* class between them, and the zoom is a scale on the live image with the   */
/* click point as its transform origin.                                     */
/* ---------------------------------------------------------------------- */

.fk-gal__grid.fk-gal__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fk-gal__open.fk-gal__open {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	background: var( --fk-gal-tile, rgba( 20, 20, 28, 0.05 ) );
	border: 0;
	cursor: zoom-in;
	border-radius: 14px;
}

.fk-gal__open img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s ease, transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.fk-gal__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	padding: 18px 14px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var( --fk-gal-cap, #fff );
	text-align: left;
	background: linear-gradient( to top, var( --fk-gal-cap-scrim, rgba( 0, 0, 0, 0.55 ) ), transparent );
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fk-gal--caps .fk-gal__cap {
	position: static;
	padding: 8px 2px 0;
	color: inherit;
	background: none;
	opacity: 1;
}

@media ( hover: hover ) {
	.fk-gal--hover-dim .fk-gal__open:hover img { opacity: 0.72; }
	.fk-gal--hover-zoom .fk-gal__open:hover img { transform: scale( 1.06 ); }

	.fk-gal--hover-dim .fk-gal__open:hover .fk-gal__cap,
	.fk-gal--hover-zoom .fk-gal__open:hover .fk-gal__cap { opacity: 1; }
}

.fk-gal__box {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var( --fk-gal-cap, rgba( 245, 245, 247, 0.72 ) );
	background: transparent;
	border: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fk-gal__box.is-open { opacity: 1; }

.fk-gal__box::backdrop {
	background: var( --fk-gal-backdrop, rgba( 6, 6, 10, 0.9 ) );
}

.fk-gal__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.fk-gal__view.fk-gal__view {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
	max-width: 100%;
}

.fk-gal__view img {
	display: block;
	max-width: 92vw;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 10px;
	scale: 1;
	transition: scale 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
	cursor: default;
}

.fk-gal[data-fk-gal-zoom="yes"] .fk-gal__view.is-live img { cursor: zoom-in; }

.fk-gal__view.is-zoom img {
	scale: 2.4;
	cursor: zoom-out;
}

.fk-gal__view figcaption {
	font-size: 14px;
	text-align: center;
}

.fk-gal__nav.fk-gal__nav {
	--fk-mark: 21px;

	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	color: var( --fk-gal-ui, #fff );
	background: var( --fk-gal-ui-bg, rgba( 255, 255, 255, 0.1 ) );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transform: translateY( -50% );
	transition: background-color 0.25s ease;
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
}

.fk-gal__nav:hover { background: var( --fk-gal-ui-bg-h, rgba( 255, 255, 255, 0.22 ) ); }

.fk-gal__nav svg { width: var( --fk-mark ); height: var( --fk-mark ); }

.fk-gal__nav--prev { left: 16px; }
.fk-gal__nav--next { right: 16px; }

.fk-gal__close.fk-gal__close {
	--fk-mark: 20px;

	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var( --fk-gal-ui, #fff );
	background: var( --fk-gal-ui-bg, rgba( 255, 255, 255, 0.1 ) );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.fk-gal__close:hover { background: var( --fk-gal-ui-bg-h, rgba( 255, 255, 255, 0.22 ) ); }

.fk-gal__close svg { width: var( --fk-mark ); height: var( --fk-mark ); }

.fk-gal__count {
	position: absolute;
	top: 28px;
	left: 24px;
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", menlo, consolas, monospace;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var( --fk-gal-ui, #fff );
}

@media ( width <= 767px ) {
	.fk-gal__nav.fk-gal__nav { display: none; }
	.fk-gal__count { top: 20px; left: 18px; }
	.fk-gal__close.fk-gal__close { top: 12px; right: 12px; }
}

@media ( prefers-reduced-motion: reduce ) {
	[data-fk-rm] .fk-gal__box,
	[data-fk-rm] .fk-gal__open img,
	[data-fk-rm] .fk-gal__view img { transition: none !important; }
	[data-fk-rm] .fk-gal__view.is-zoom img { scale: 1; }
}


/* ---------------------------------------------------------------------- */
/* The mark wrapper — a library icon standing where one of the pack's own   */
/* shapes would be: a close cross, a chevron, a play triangle, a star.      */
/* -                                                                       */
/* An icon arrives in one of two shapes and they size by different          */
/* properties: a font glyph by font-size, an SVG by its box. One variable   */
/* drives both — the wrapper takes --fk-mark as its font-size, the glyph    */
/* inherits it, and the SVG is written in `em` against it — which is the    */
/* same variable the built-in shape reads from the block around it. So the  */
/* widget's Icon Size dial moves whichever of the three is on screen.       */
/* -                                                                       */
/* Doubled and last in the file on purpose: the block this lands in sizes   */
/* its own <svg> by percentage at (0,1,1) or (0,2,1), and that rule must    */
/* not reach an icon that is not the built-in one.                          */
/* ---------------------------------------------------------------------- */

.fk-mark.fk-mark {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	font-size: var( --fk-mark, 1em );
	font-style: normal;
	line-height: 1;
	color: inherit;
}

.fk-mark.fk-mark svg {
	display: block;
	width: 1em;
	height: 1em;
	margin: 0;
	fill: currentcolor;
}

/* An icon library sizes its own <i> from a class the glyph carries; inside
   the wrapper the wrapper decides. */
.fk-mark.fk-mark i,
.fk-mark.fk-mark i::before {
	font-size: inherit;
	line-height: 1;
}


/* ---------------------------------------------------------------------- */
/* Inline furniture — a menu trigger, a slider's remote — sized to itself.  */
/* -                                                                       */
/* Elementor gives a widget the width of its column, which is right for a   */
/* heading and wrong for a button: a trigger that claims the whole header   */
/* row pushes the logo and the search off it, and in the editor the box you */
/* have to click is a band across the screen rather than the thing you can  */
/* see. The Width control writes `width: fit-content` onto the wrapper, so  */
/* the widget's box is the control it draws.                               */
/* -                                                                       */
/* Which leaves the alignment nowhere to work: there is no space inside the */
/* widget to distribute any more, so what has to move is the box, and the   */
/* box is Elementor's own element — the one thing the widget cannot put a   */
/* class on. It is selected through the class the widget does print, which  */
/* is safe here because only that widget's wrapper carries the widget's own */
/* name: no column or container can match it. Across the whole row the same */
/* rule has no free space to absorb and does nothing, and justify-content   */
/* moves the trigger inside the row instead.                               */
/* -                                                                       */
/* Logical margins, so a right-to-left site aligns to the right edge        */
/* without a second rule.                                                   */
/* ---------------------------------------------------------------------- */

.elementor-widget-flowkit-mobile-menu:has( .fk-mm--t-center ),
.elementor-widget-flowkit-slider-remote:has( .fk-slrm--t-center ) {
	margin-inline: auto;
}

.elementor-widget-flowkit-mobile-menu:has( .fk-mm--t-end ),
.elementor-widget-flowkit-slider-remote:has( .fk-slrm--t-end ) {
	margin-inline-start: auto;
}