/* ============================================================
   Figma Landing Kit — landing design (Figma frame 294:2, 1728px wide)
   Desktop/tablet: exact Figma geometry, fully fluid — every value is
   calc(var(--u) * N) where --u = 100vw / 1728, so proportions hold
   at any viewport width. ≤900px: responsive stacked layout.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700;900&family=Montserrat+Subrayada:wght@400;700&display=swap');

:root {
	/* Headings ride the served Tel Aviv Brutalist — one family carrying all
	   three weights, so font-weight alone picks light / regular / bold.
	   The running text has its own cut, Tel Aviv Modernist; Rubik stays behind
	   both as the fallback until the files load. */
	--flk-brut: 'Tel Aviv Brutalist', 'Rubik', sans-serif;
	--flk-brut-light: 'Tel Aviv Brutalist', 'Rubik', sans-serif;
	--flk-modern: 'Tel Aviv Modernist', 'Rubik', sans-serif;
	--flk-blue: #3b88d8;
	/* Brand blue for the nav pill and the FAQ bars — overridable per page
	   from the content editor (nav.cta_color) via an inline style. */
	--flk-cta: #3b7cf6;
	--flk-chip-grad: linear-gradient(123.5deg, #3b88d8 0%, #737373 95.6%);
	/* One design pixel (the Figma frame is 1728 wide) — everything scales off
	   this, so the page keeps its exact proportions at every viewport width.
	   The cap normalizes the oversized Figma canvas: on large screens the
	   whole design renders at 75% (max content width 1296px, centered) so
	   type and sections sit at comfortable web sizes. */
	--u: calc(min(100vw, 1296px) / 1728);
	/* Hero unit: the hero is specced pixel-perfect off the 1918×1080 mockup.
	   It scales to FIT the window — width AND height — so the full mockup
	   composition is always visible, never cut by a short browser window.
	   --vo centers the composition when height is the limiting side. */
	--v: min(calc(100vw / 1918), calc(100vh / 1080));
	--vo: calc((100vw - var(--v) * 1918) / 2);
}

html { scroll-behavior: smooth; }

.flk-page {
	background: #000;
	/* clip, not hidden: `hidden` would turn these wrappers into scroll
	   containers and break position:sticky for the parallax gallery. */
	overflow-x: clip;
	direction: rtl;
}

.flk-viewport { overflow: clip; }

.flk-stage {
	position: relative;
	width: 100%;
	background: #000;
	font-family: var(--flk-modern);
	color: #fff;
	line-height: normal;
}

.flk-sec { position: relative; width: calc(var(--u) * 1728); margin-inline: auto; }
.flk-abs { position: absolute; }

.flk-s1 { height: calc(var(--u) * 1117); }
.flk-s2 { height: calc(var(--u) * 986); }
.flk-s3 { height: calc(var(--u) * 620); }
.flk-s4 { height: calc(var(--u) * 1987); }
/* Sized to what the section actually holds — the collage, the mock-up and
   the channel button — with a margin under the button and nothing after it.
   (Taller than the Figma frame, because the covers are spaced now.) */
.flk-s5 { height: calc(var(--u) * 1000); }
.flk-s6 { height: calc(var(--u) * 920); }
.flk-s7 { height: calc(var(--u) * 1188); }
.flk-s8 { height: calc(var(--u) * 817); }

/* ---- Shared pieces ---- */

.flk-glow {
	position: absolute;
	border-radius: 50%;
	background: rgba(59, 136, 216, 0.45);
	filter: blur(calc(var(--u) * 90));
	pointer-events: none;
}
.flk-glow-lg { width: calc(var(--u) * 471); height: calc(var(--u) * 397); }
.flk-glow-sm { width: calc(var(--u) * 330); height: calc(var(--u) * 274); }

/* ---- Scroll-reveal ----------------------------------------------------
   Applies only when JS is present (.flk-js), so content is never hidden
   without it. Movement uses the standalone `translate`/`scale` properties
   rather than `transform`: half the page is positioned or rotated with
   transform, and several pieces are driven frame by frame by the scroll
   scripts, so writing to `transform` here would fight them. The standalone
   properties compose with whatever `transform` the element already carries.

   Variants are chosen per element with data-flk-in:
     (none)/up  rise + focus-in — the default for blocks and photos
     fade       focus-in only, for panes that must not shift (glass, cards)
     pop        rise + a small swell, for chips, tiles and covers
     mask       an upward wipe, for headlines (stays crisp, no blur) */
.flk-js .flk-reveal,
.flk-js [data-flk-in] {
	opacity: 0;
	filter: blur(8px);
	translate: 0 clamp(16px, 2vw, 34px);
	transition:
		opacity 0.8s ease,
		filter 0.8s ease,
		translate 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
		scale 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
		clip-path 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--flk-d, 0s);
}
.flk-js .flk-reveal.is-in,
.flk-js [data-flk-in].is-in {
	opacity: 1;
	filter: none;
	translate: 0 0;
}

.flk-js [data-flk-in="fade"] { translate: none; }

.flk-js [data-flk-in="pop"] {
	translate: 0 clamp(14px, 1.6vw, 26px);
	scale: 0.94;
}
.flk-js [data-flk-in="pop"].is-in { scale: 1; }

/* The wipe clips well past the sides so nothing that legitimately overhangs
   the box (letter shapes, glows) is cut once the reveal has finished. */
.flk-js [data-flk-in="mask"] {
	filter: none;
	translate: 0 0.32em;
	clip-path: inset(0 -30% 110% -30%);
}
.flk-js [data-flk-in="mask"].is-in {
	clip-path: inset(-30%);
}

@media (prefers-reduced-motion: reduce) {
	.flk-js .flk-reveal,
	.flk-js [data-flk-in] {
		opacity: 1;
		filter: none;
		translate: none;
		scale: none;
		clip-path: none;
		transition: none;
	}
}

/* Image hover zoom inside clipped containers */
.flk-studio img {
	transition: transform 0.5s ease;
}
.flk-tile > img { transition: transform 0.5s ease; }
.flk-tile:hover > img { transform: scale(1.05); }

.flk-hit { transition: filter 0.4s ease; }
.flk-hit:hover { filter: brightness(1.15) drop-shadow(0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(59, 136, 216, 0.35)); }

/* The shared arrow mark. It fills its badge and takes the badge's color;
   .flk-ar-down turns the same mark downward. */
.flk-ar {
	display: block;
	width: 62%;
	height: 62%;
	overflow: visible;
}
.flk-ar-down .flk-ar { transform: rotate(-90deg); }

/* Gradient-fill headline text (Figma bg-clip-text) */
.flk-gt {
	background-image: linear-gradient(183deg, #fff 26%, #e3ebf5 62%, #9fb4cc 100%);
	background-size: 100% 1.2em;
	background-repeat: repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.flk-h {
	position: absolute;
	margin: 0;
	width: max-content;
	max-width: calc(var(--u) * 1600);
	transform: translateX(-50%);
	font-family: var(--flk-brut);
	font-weight: 700;
	font-size: calc(var(--u) * 50);
	text-align: center;
	white-space: pre-wrap;
}

.flk-chip {
	display: inline-block;
	padding: 2px calc(var(--u) * 20) calc(var(--u) * 6);
	border-radius: calc(var(--u) * 6);
	background: var(--flk-chip-grad);
	color: #fff;
	-webkit-text-fill-color: #fff;
}

.flk-h-s2 { left: 50%; top: calc(var(--u) * 93); }
.flk-h-s3 { left: 50%; top: 0; }
.flk-h-s4 { left: 50%; top: calc(var(--u) * 334); }
.flk-h-s5 { left: 50%; top: 0; }
.flk-h-s6 { left: 50%; top: 0; }
.flk-h-s7 { left: 50%; top: 0; }
.flk-h-s8 { left: calc(var(--u) * 759); top: calc(var(--u) * 99); }

/* ---- Section 1: Hero — full-bleed, mapped 1:1 from the 1918×1080 mockup ---- */

/* The hero is a scroll track: the composition pins while the portrait grows
   and dissolves and the round CTA shrinks away — the title never moves. */
.flk-s1 {
	position: relative;
	width: 100%;
	margin-inline: 0;
	height: calc(100vh + 760px);
}
/* The stage fills the window edge to edge — the backdrop layer covers all of
   it, so no strip of page shows through under the hero. */
.flk-hsticky {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
/* The composition keeps the mockup's 1918×1080 frame, centred in the stage,
   so every element stays at its exact designed coordinate. */
.flk-hcomp {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: calc(var(--v) * 1080);
}

/* Depth layers: each wrapper spans the hero, so its children keep their exact
   mockup coordinates, and hero-parallax.js slides the wrappers at different
   rates as the hero scrolls past — the deepest lags most. */
.flk-plx {
	position: absolute;
	inset: 0;
	will-change: transform;
}
.flk-plx1 { z-index: 0; }
.flk-plx2 { z-index: 1; }
.flk-plx3 { z-index: 2; }
.flk-plx4 { z-index: 3; }

/* Extra bleed on top: the backdrop layer drifts down during the hero
   timeline, and this keeps it covering the stage the whole way. */
.flk-hero-bg { left: 0; top: -16%; transform: none; width: 100%; height: 116%; overflow: hidden; }
.flk-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.flk-hero-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(59, 136, 216, 0.45) 0%, rgba(59, 136, 216, 0) 32%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.65) 100%);
}

/* Box is exactly centered; --flk-hs (set from the content editor) nudges
   it when the subject is off-center INSIDE the uploaded image
   (e.g. the Yossi cutout needs 82 because his face sits at 36% of frame). */
.flk-hero-photo { left: calc(50% + var(--v) * var(--flk-hs, 0)); transform: translateX(-50%); top: calc(var(--v) * 150); width: calc(var(--v) * 585); height: calc(var(--v) * 930); overflow: hidden; z-index: 1; }
/* The exported asset is ALREADY the design's crop — display it plainly.
   (Re-applying crop percentages double-cropped it: zoomed + stretched.) */
.flk-hero-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.flk-big-dj {
	left: calc(50% + var(--v) * -819);
	top: calc(var(--v) * 350);
	margin: 0;
	font-family: 'Montserrat Subrayada', sans-serif;
	font-weight: 700;
	font-size: calc(var(--v) * 78);
	background-position: center;
	background-size: cover;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.flk-big-left,
.flk-big-right {
	margin: 0;
	font-family: var(--flk-brut);
	font-weight: 700;
	text-transform: uppercase;
	background-image: linear-gradient(183deg, #fff 40.8%, #999 61.5%, rgba(153, 153, 153, 0) 81.1%);
}
.flk-big-left { left: calc(50% + var(--v) * -822); top: calc(var(--v) * 415); font-size: calc(var(--v) * 152); }
.flk-big-right { left: calc(50% + var(--v) * 741); transform: translateX(-100%); top: calc(var(--v) * 398); font-size: calc(var(--v) * 168); }

/* Texts sit ABOVE the hero photo (as in the mockup) — only the giant
   YOSSI/HEN letters pass behind the portrait. */
/* The page's <h1>. The weight is pinned because a heading would otherwise
   come out bold, and this line is set light in the design. */
.flk-hero-name { left: calc(50% + var(--v) * 201); top: calc(var(--v) * 360); width: calc(var(--v) * 540); margin: 0; font-weight: 300; font-size: calc(var(--v) * 52); text-align: right; z-index: 2; }
/* The hero's running text is set at 22px flat — the one place on the page
   that holds a fixed size instead of scaling with the frame. */
/* Flush right, ending on the same edge as the word above it — hero-parallax.js
   lines the box up with YOSSI, whose width depends on the font that loads. */
.flk-hero-tag1 { left: calc(50% + var(--v) * -794); top: calc(var(--v) * 585); width: calc(var(--v) * 540); margin: 0; font-size: 22px; line-height: 1.4; text-align: right; z-index: 2; }
.flk-hero-tag2 { left: calc(50% + var(--v) * 201); top: calc(var(--v) * 598); width: calc(var(--v) * 540); margin: 0; font-size: 22px; line-height: 1.4; text-align: right; z-index: 2; }

.flk-nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(var(--v) * 40);
	width: min(calc(100% - 20px), max(calc(var(--v) * 1574), 1080px));
	height: max(56px, calc(var(--v) * 97));
	border-radius: 999px;
	background: rgba(14, 22, 34, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(calc(var(--v) * 50));
	-webkit-backdrop-filter: blur(calc(var(--v) * 50));
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0 max(22px, calc(var(--v) * 38)) 0 max(8px, calc(var(--v) * 12));
	box-sizing: border-box;
	z-index: 4;
}
/* Logo at the right end, CTA pill at the left end (pushed there by the auto
   margin), and the link row centred on the bar's own axis so the buttons sit
   exactly in the middle whatever the logo and CTA widths are. */
.flk-nav-links {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	min-width: 0;
	gap: max(16px, calc(var(--v) * 36));
}
.flk-nav-a {
	position: relative;
	font-family: var(--flk-modern);
	font-weight: 500;
	font-size: max(15px, calc(var(--v) * 27));
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
}
.flk-nav-a::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: calc(var(--v) * -8);
	width: 100%;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, #3b88d8, #9fd0ff);
	box-shadow: 0 0 calc(var(--v) * 14) rgba(92, 172, 255, 0.9);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.flk-nav-a:hover,
.flk-nav-a:focus-visible {
	color: #9fd0ff;
	text-shadow: 0 0 calc(var(--v) * 18) rgba(92, 172, 255, 0.85);
	transform: translateY(-2px);
}
.flk-nav-a:hover::after,
.flk-nav-a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}
.flk-nav-logo {
	flex: 0 0 auto;
	width: max(150px, calc(var(--v) * 260));
	height: max(34px, calc(var(--v) * 60));
	margin: 0;
}
.flk-nav-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Nav CTA pill ("בואו נדבר") — flat brand blue, badge on its left; the
   color comes from the editor (nav.cta_color) via --flk-cta. */
.flk-nav-cta {
	flex: 0 0 auto;
	margin-inline-start: auto;
	height: max(42px, calc(var(--v) * 64));
	display: inline-flex;
	align-items: center;
	gap: max(9px, calc(var(--v) * 14));
	padding: 0 max(14px, calc(var(--v) * 22)) 0 max(6px, calc(var(--v) * 10));
	border-radius: 999px;
	background: var(--flk-cta);
	font-family: var(--flk-modern);
	font-weight: 700;
	font-size: max(14px, calc(var(--v) * 25));
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 calc(var(--v) * 6) calc(var(--v) * 20) rgba(20, 60, 110, 0.45);
	transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.flk-nav-cta:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
	box-shadow: 0 calc(var(--v) * 10) calc(var(--v) * 28) rgba(59, 136, 216, 0.55);
}
.flk-nav-cta-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max(30px, calc(var(--v) * 46));
	height: max(30px, calc(var(--v) * 46));
	border-radius: 50%;
	background: #fff;
	color: var(--flk-cta);
	font-size: max(16px, calc(var(--v) * 24));
	line-height: 1;
	transition: transform 0.3s ease;
}
.flk-nav-cta:hover .flk-nav-cta-arrow { transform: translateX(calc(var(--v) * -4)); }

/* Hero circle CTA ("כאן מתחילים") */
.flk-hero-circle {
	position: absolute;
	left: 50%;
	top: calc(var(--v) * 753);
	transform: translateX(-50%);
	width: calc(var(--v) * 258);
	height: calc(var(--v) * 258);
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--v) * 10);
	text-align: center;
	text-decoration: none;
	background: linear-gradient(180deg, rgba(233, 244, 255, 0.96) 0%, rgba(163, 208, 255, 0.9) 100%);
	border: calc(var(--v) * 2) solid rgba(255, 255, 255, 0.9);
	outline: calc(var(--v) * 2) solid rgba(255, 255, 255, 0.45);
	outline-offset: calc(var(--v) * 7);
	box-shadow: 0 calc(var(--v) * 14) calc(var(--v) * 44) rgba(20, 60, 110, 0.5), inset 0 0 calc(var(--v) * 26) rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 3;
	transform-origin: 50% 50%;
	transition: box-shadow 0.35s ease;
}
.flk-hero-circle:hover {
	transform: translateX(-50%) scale(1.05);
	box-shadow: 0 calc(var(--v) * 18) calc(var(--v) * 60) rgba(59, 136, 216, 0.6), inset 0 0 calc(var(--v) * 26) rgba(255, 255, 255, 0.55);
}
.flk-hc-text {
	font-family: var(--flk-brut);
	font-weight: 700;
	font-size: calc(var(--v) * 36);
	line-height: 1.2;
	color: #16416f;
	max-width: 72%;
}
.flk-hc-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--v) * 46);
	height: calc(var(--v) * 46);
	color: #16416f;
	margin-top: calc(var(--v) * 6);
	animation: flk-bob 1.8s ease-in-out infinite;
}
.flk-hc-arrow .flk-ar { width: 100%; height: 100%; }
@keyframes flk-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(calc(var(--v) * 8)); }
}
@media (prefers-reduced-motion: reduce) {
	.flk-hc-arrow { animation: none; }
}

.flk-line { position: absolute; top: calc(var(--v) * 1041); height: 2px; border-radius: 2px; }
.flk-line-r { left: calc(50% + var(--v) * -909); width: calc(var(--v) * 590); background: linear-gradient(270deg, #3b88d8, rgba(59, 136, 216, 0.15)); }
.flk-line-l { left: calc(50% + var(--v) * 201); width: calc(var(--v) * 700); background: linear-gradient(90deg, #3b88d8, rgba(59, 136, 216, 0.15)); }

/* ---- Section 2: Video ---- */

/* Scroll-driven circular mask reveal: the stage pins and a round hole in
   the middle of the video grows until it clears the screen, while the glass
   layer above it shrinks away. Sizes are driven from JS (--flk-mask). */
.flk-s2 {
	width: 100%;
	margin-inline: 0;
	height: auto;
	padding-top: calc(var(--u) * 26);
}
/* The heading rides inside the pinned stage, so the video always sits
   directly under its title instead of drifting off alone. */
.flk-h-s2 {
	position: relative;
	left: auto;
	top: auto;
	transform: none;
	margin: 0 auto;
}
.flk-vtrack {
	position: relative;
	width: 100%;
	height: calc(56vh + 520px);
}
.flk-vsticky {
	position: sticky;
	top: clamp(8px, 2.5vh, 28px);
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* The title starts near the top of the pinned stage instead of being
	   centred in it: centring left a screenful of black above the heading. */
	justify-content: flex-start;
	padding-top: clamp(28px, 7vh, 90px);
	padding-bottom: 0;
	box-sizing: border-box;
	gap: calc(var(--u) * 34);
	overflow: hidden;
	background: #000;
}
/* The video keeps the design's proportions and always fits the window —
   width capped by the content column, height capped by the viewport. */
.flk-vbox {
	position: relative;
	width: min(calc(var(--u) * 1500), calc((100vh - calc(var(--u) * 330)) * 1185 / 623));
	aspect-ratio: 1185 / 623;
	background: transparent;
}
.flk-vmask {
	--flk-mask: 25%;
	position: absolute;
	inset: 0;
	display: block;
	border-radius: calc(var(--u) * 44);
	overflow: hidden;
	-webkit-mask-image: radial-gradient(circle var(--flk-mask) at 50% 50%, #000 0, #000 50%, transparent 50%, transparent 100%);
	mask-image: radial-gradient(circle var(--flk-mask) at 50% 50%, #000 0, #000 50%, transparent 50%, transparent 100%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}
.flk-vmask img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flk-vmask[data-embed] { cursor: pointer; }
.flk-vplay {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--u) * 140);
	height: calc(var(--u) * 140);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0, 0, 0, 0.45);
	transition: transform 0.3s ease, background 0.3s ease;
	pointer-events: none;
	z-index: 2;
}
.flk-vmask:hover .flk-vplay { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.flk-vplay-tri {
	width: 0;
	height: 0;
	margin-inline-start: calc(var(--u) * 10);
	border-top: calc(var(--u) * 26) solid transparent;
	border-bottom: calc(var(--u) * 26) solid transparent;
	border-left: calc(var(--u) * 44) solid var(--flk-cta);
}
/* Playing: the mask, the glass and the badge all step out of the way. */
.flk-vbox.is-playing .flk-vmask {
	-webkit-mask-image: none;
	mask-image: none;
}
.flk-vbox.is-playing .flk-vplay { display: none; }
.flk-vbox.is-playing iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ---- Section 3: Couples — coverflow carousel of testimonial shots ----
   Every shot keeps its own proportions (fixed height, width follows the
   image); the centred one grows to full height while its neighbours shrink
   and dim. Positions are recomputed per frame in couples.js. */

.flk-s3 {
	height: auto;
	padding: calc(var(--u) * 40) 0 calc(var(--u) * 70);
}
.flk-h-s3 {
	position: relative;
	left: auto;
	top: auto;
	transform: none;
	margin: 0 auto calc(var(--u) * 60);
}
.flk-cwrap { position: relative; width: 100%; }
.flk-cview {
	position: relative;
	width: 100%;
	height: calc(var(--u) * 520);
	overflow: hidden;
	direction: ltr;
	touch-action: pan-y;
	cursor: grab;
}
.flk-cview.flk-cv-drag { cursor: grabbing; }
.flk-ccarousel {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 34);
	will-change: transform;
}
.flk-mcard {
	flex: 0 0 auto;
	height: 62%;
	margin: 0;
	border-radius: calc(var(--u) * 14);
	background: #fff;
	overflow: hidden;
	opacity: 0.5;
	box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 34) rgba(0, 0, 0, 0.5);
	transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
/* The active card grows to full height; its width follows automatically
   because the image keeps its own aspect ratio. */
.flk-mcard.is-mid {
	height: 100%;
	opacity: 1;
}
.flk-mcard img {
	height: 100%;
	width: auto;
	display: block;
	background: #fff;
	-webkit-user-drag: none;
}
/* Soft edges instead of a hard cut */
.flk-cfade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: calc(var(--u) * 260);
	pointer-events: none;
	z-index: 2;
}
.flk-cfade-s { left: 0; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 100%); }
.flk-cfade-e { right: 0; background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0) 100%); }

.flk-cnav {
	display: flex;
	/* ltr so the back arrow lands on the left and the forward one on the
	   right, matching the reference. */
	direction: ltr;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 26);
	margin-top: calc(var(--u) * 44);
}
.flk-cbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(48px, calc(var(--u) * 84));
	height: max(48px, calc(var(--u) * 84));
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--flk-cta);
	color: #fff;
	cursor: pointer;
	transition: filter 0.25s ease, transform 0.25s ease;
}
.flk-cbtn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.flk-cbtn:focus-visible { outline: 2px solid #9fd0ff; outline-offset: 3px; }
.flk-cnext .flk-ar { transform: rotate(180deg); }

/* ---- Section 4: About ---- */

/* Full-bleed backdrop: the section is capped at the content column, so the
   crowd shot breaks out to the window's full width instead of ending in bars
   of black. Safe against the scrollbar because .flk-page clips (never
   scrolls) horizontally. */
.flk-crowd {
	left: 50%;
	transform: translateX(-50%);
	top: calc(var(--u) * 117);
	width: 100vw;
	height: calc(var(--u) * 1520);
	overflow: hidden;
	opacity: 0.55;
}
.flk-crowd img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }

.flk-about-photo { left: calc(var(--u) * 1173); top: calc(var(--u) * 396); width: calc(var(--u) * 537); height: calc(var(--u) * 806); }
.flk-about-photo img { width: 100%; height: 100%; object-fit: cover; }

.flk-about-t { font-size: calc(var(--u) * 26); text-align: right; }
.flk-about-t p { margin: 0; }
.flk-about-t1 { left: calc(var(--u) * 177); top: calc(var(--u) * 572); width: calc(var(--u) * 921); }
.flk-about-t2 { left: calc(var(--u) * 825); top: calc(var(--u) * 1287); width: calc(var(--u) * 824); }

/* Small enough to sit beside the photograph rather than on top of it, and
   never quite still. The float rides on `transform`; the reveal uses the
   standalone `translate`/`scale`, so the two never overwrite each other. */
.flk-stat {
	width: calc(var(--u) * 232);
	height: calc(var(--u) * 104);
	animation: flk-stat-float 7s ease-in-out infinite;
	border: 1px solid #fffefe;
	border-radius: calc(var(--u) * 44);
	background: linear-gradient(180.65deg, rgba(0, 85, 174, 0.6) 1.16%, rgba(83, 85, 87, 0.6) 98.74%);
	backdrop-filter: blur(calc(var(--u) * 10));
	-webkit-backdrop-filter: blur(calc(var(--u) * 10));
}
.flk-stat1 { left: calc(var(--u) * 1098); top: calc(var(--u) * 1044); }
.flk-stat2 { left: calc(var(--u) * 648); top: calc(var(--u) * 1758); animation-duration: 8.4s; animation-delay: -2.6s; }
@keyframes flk-stat-float {
	0%, 100% { transform: translateY(0) rotate(-0.5deg); }
	50%      { transform: translateY(calc(var(--u) * -16)) rotate(0.5deg); }
}
.flk-stat-num {
	position: absolute;
	left: 50%;
	top: calc(var(--u) * 16);
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--flk-brut);
	font-weight: 700;
	font-size: calc(var(--u) * 35);
	background-image: linear-gradient(181deg, #5cacff 37.7%, #fff 71.8%, #5cacff 103.9%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	white-space: nowrap;
}
.flk-stat-label {
	position: absolute;
	left: 50%;
	top: calc(var(--u) * 57);
	transform: translateX(-50%);
	margin: 0;
	font-size: calc(var(--u) * 23);
	text-align: center;
	white-space: nowrap;
}
.flk-stat-label2 { font-size: calc(var(--u) * 21); }

.flk-sax { left: calc(var(--u) * 83); top: calc(var(--u) * 1104); width: calc(var(--u) * 689); height: calc(var(--u) * 865); }
.flk-sax img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }

/* ---- Section 5: Hits ---- */

.flk-glass {
	left: calc(var(--u) * 102);
	top: calc(var(--u) * 119);
	width: calc(var(--u) * 1506);
	height: calc(var(--u) * 705);
	border-radius: calc(var(--u) * 44);
	background: linear-gradient(269.2deg, rgba(0, 0, 0, 0.28) 0.35%, rgba(59, 136, 216, 0.067) 98.8%);
	backdrop-filter: blur(calc(var(--u) * 60));
	-webkit-backdrop-filter: blur(calc(var(--u) * 60));
}

.flk-studio { left: calc(var(--u) * 787); top: calc(var(--u) * 117); width: calc(var(--u) * 1001); height: calc(var(--u) * 707); overflow: hidden; border-radius: 0 calc(var(--u) * 44) calc(var(--u) * 44) 0; }
/* A phone-specific mock-up wraps the picture in <picture>; the wrapper must
   not add an inline box of its own inside the frame. */
.flk-studio picture { display: block; }
.flk-studio img { position: absolute; left: 0; top: 0; width: 100%; height: 176.8%; max-width: none; }

/* Two overlapping columns of framed press shots — the supplied component,
   kept at its own pixel values so it renders exactly as in the reference.
   Only the block's width scales with the design. */
.flk-press {
	left: calc(var(--u) * 170);
	top: calc(var(--u) * 150);
	width: min(560px, calc(var(--u) * 760));
	direction: rtl;
	line-height: 0;
	font-size: 0;
}
.flk-press * { box-sizing: border-box; margin: 0; padding: 0; }
.flk-press-cols {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.flk-press-col {
	display: flex;
	flex-direction: column;
	width: 50%;
}
.flk-press-col1 { padding-top: 34px; }
.flk-press-col2 { margin-inline-start: 2%; }
.flk-press-f { position: relative; line-height: 0; }
.flk-press-col .flk-press-f + .flk-press-f { margin-top: 5%; }
.flk-press-c {
	display: block;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background: transparent;
	box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.75), 0 3px 8px -5px rgba(0, 0, 0, 0.55);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.flk-press img { display: block; width: 100%; height: auto; }
.flk-press-col .flk-press-f:nth-child(1) .flk-press-c { transform: rotate(-2deg); }
.flk-press-col .flk-press-f:nth-child(2) .flk-press-c { transform: rotate(1.6deg); }
.flk-press-col .flk-press-f:nth-child(3) .flk-press-c { transform: rotate(-1deg); }
.flk-press-col .flk-press-f:nth-child(4) .flk-press-c { transform: rotate(2.2deg); }
/* Weighted past the per-cover tilt rules above (four classes each) — a plain
   .flk-press-c:hover loses to them, which is why the cover never grew. Kept
   behind (hover: hover) so a tap on a phone cannot leave a cover stuck out. */
@media (hover: hover) {
	.flk-press-f:hover { z-index: 60; }
	.flk-press .flk-press-col .flk-press-f .flk-press-c:hover,
	.flk-press .flk-press-col .flk-press-f .flk-press-c:focus-visible {
		transform: translateY(-12px) scale(1.14) rotate(0deg);
		z-index: 60;
		box-shadow:
			0 34px 50px -20px rgba(0, 0, 0, 0.72),
			0 0 0 2px rgba(59, 136, 216, 0.55),
			0 0 40px -6px rgba(59, 136, 216, 0.55);
	}
}

/* ---- Section 6: Photos — 3D parallax unfurling gallery ----
   Ported from the React/framer-motion component: a tall scroll track with a
   pinned banner that grows to full bleed, then a 3D matrix of four parallax
   columns that unfurls toward the viewer. All widths are percentages of the
   full-width section (never vw) so the scrollbar can't shift the page. */

.flk-s6 {
	width: 100%;
	margin-inline: 0;
	height: auto;
	padding-top: calc(var(--u) * 90);
}
.flk-h-s6 {
	position: relative;
	left: auto;
	top: auto;
	transform: none;
	margin: 0 auto calc(var(--u) * 50);
}
.flk-pgal {
	position: relative;
	width: 100%;
	height: 600vh;
	background: #050505;
}
.flk-pgal-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.flk-pgal-banner {
	position: relative;
	width: 90%;
	height: 80vh;
	max-width: 1920px;
	margin: 0 auto;
	border-radius: 48px;
	border: 4px solid #2c2738;
	background: #000;
	overflow: hidden;
	box-sizing: border-box;
	will-change: width, height;
}
.flk-pgal-scene {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	perspective: 1000px;
}
/* Ambient shadow box masking */
.flk-pgal-vig { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.flk-pgal-vig-y { box-shadow: inset 0 100px 150px -50px #000, inset 0 -100px 150px -50px #000; }
.flk-pgal-vig-x { box-shadow: inset 150px 0 150px -50px #000, inset -150px 0 150px -50px #000; }

.flk-pgal-matrix {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 120%;
	height: 150vh;
	transform-origin: center;
	transform-style: preserve-3d;
	will-change: transform;
	backface-visibility: hidden;
	transform: translateZ(-800px) rotateX(25deg) rotateY(-45deg) rotateZ(15deg);
}
.flk-pgal-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 22%;
	min-width: 200px;
	pointer-events: auto;
	will-change: transform;
}
.flk-pgal-col1 { transform: translateY(0); }
.flk-pgal-col2 { transform: translateY(-40%); }
.flk-pgal-col3 { transform: translateY(0); }
.flk-pgal-col4 { transform: translateY(-30%); }
.flk-pgal-card {
	position: relative;
	width: 100%;
	height: 200px;
	flex-shrink: 0;
	background: #111;
	cursor: pointer;
	will-change: transform;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	transition: transform 0.3s;
}
.flk-pgal-card:hover { transform: scale(1.02); }
.flk-pgal-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
	transition: opacity 0.3s;
	display: block;
}
.flk-pgal-card:hover img { opacity: 1; }
@media (min-width: 640px) { .flk-pgal-card { height: 300px; } }
@media (min-width: 768px) {
	.flk-pgal-card { height: 400px; }
	.flk-pgal-matrix, .flk-pgal-col { gap: 24px; }
}

/* ---- Section 7: Testimonial videos ---- */

/* Circular testimonials gallery: tiles ride an arc (center high, edges
   drooping + tilted), infinite, draggable, auto-drifting. Geometry is
   computed per-frame in gallery.js; this is layout + fallback. */
.flk-carousel {
	position: absolute;
	left: 0;
	transform: none;
	top: calc(var(--u) * 224);
	width: 100%;
	height: calc(var(--u) * 790);
	overflow: hidden;
}
.flk-cgallery {
	position: relative;
	width: 100%;
	height: 100%;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}
.flk-cgallery.flk-cg-drag { cursor: grabbing; }
/* No-JS fallback: a plain centered row */
.flk-cgallery:not(.flk-cg-on) { display: flex; gap: calc(var(--u) * 51); justify-content: center; }

.flk-tile {
	position: relative;
	flex: 0 0 auto;
	width: calc(var(--u) * 383);
	height: calc(var(--u) * 623);
	border-radius: calc(var(--u) * 18);
	overflow: hidden;
	display: block;
}
.flk-cg-on .flk-tile {
	position: absolute;
	left: 0;
	top: 0;
	will-change: transform;
	transform-origin: 50% 50%;
}
.flk-tile img { -webkit-user-drag: none; }
.flk-tile > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: none;
}
.flk-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(var(--u) * 184);
	height: calc(var(--u) * 178);
	border-radius: 50%;
	background: #e9e9e9;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.flk-tile:hover .flk-play {
	transform: translate(-50%, -50%) scale(1.08);
	box-shadow: 0 0 calc(var(--u) * 40) rgba(92, 172, 255, 0.7);
}
.flk-play-tri {
	position: absolute;
	left: 56%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-top: calc(var(--u) * 44) solid transparent;
	border-bottom: calc(var(--u) * 44) solid transparent;
	border-left: calc(var(--u) * 76) solid #275f98;
}
a.flk-tile:hover .flk-play { background: #fff; }

/* ---- Section 9: FAQ accordion ---- */

/* Sits under the contact form, straight on the page — no card, no panel. */
.flk-sfaq {
	padding: calc(var(--u) * 96) 0 calc(var(--u) * 176);
	background: transparent;
	overflow: hidden;
}
.flk-faq-h {
	position: relative;
	z-index: 1;
	margin: 0 0 calc(var(--u) * 70);
	font-family: var(--flk-brut);
	font-weight: 700;
	font-size: calc(var(--u) * 62);
	text-align: center;
}
.flk-faq-list {
	position: relative;
	z-index: 1;
	width: calc(var(--u) * 1230);
	max-width: calc(100% - 32px);
	margin-inline: auto;
}
.flk-faq-item + .flk-faq-item { margin-top: calc(var(--u) * 22); }
.flk-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--u) * 20);
	width: 100%;
	min-height: calc(var(--u) * 76);
	margin: 0;
	padding: calc(var(--u) * 12) calc(var(--u) * 26) calc(var(--u) * 12) calc(var(--u) * 12);
	border: 0;
	border-radius: calc(var(--u) * 14);
	background: var(--flk-cta, #3b7cf6);
	font-family: var(--flk-modern);
	font-weight: 600;
	font-size: max(15px, calc(var(--u) * 26));
	color: #fff;
	text-align: right;
	cursor: pointer;
	transition: filter 0.25s ease, transform 0.25s ease;
}
.flk-faq-q:hover { filter: brightness(1.08); }
.flk-faq-q:focus-visible { outline: 2px solid #9fd0ff; outline-offset: 3px; }
.flk-faq-qt { flex: 1 1 auto; }
.flk-faq-ic {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max(32px, calc(var(--u) * 54));
	height: max(32px, calc(var(--u) * 54));
	border-radius: 50%;
	background: #14375f;
	color: #fff;
	font-size: max(16px, calc(var(--u) * 26));
	line-height: 1;
	transition: transform 0.3s ease;
}
.flk-faq-item.is-open .flk-faq-ic { transform: rotate(-45deg); }
/* 0fr → 1fr animates the panel open without measuring heights in JS. */
.flk-faq-a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease, margin-top 0.35s ease;
	margin-top: 0;
}
.flk-faq-item.is-open .flk-faq-a {
	grid-template-rows: 1fr;
	margin-top: calc(var(--u) * 12);
}
.flk-faq-clip { overflow: hidden; }
.flk-faq-body {
	padding: calc(var(--u) * 26) calc(var(--u) * 30);
	border-radius: calc(var(--u) * 14);
	background: #12233a;
	font-family: var(--flk-modern);
	font-size: max(14px, calc(var(--u) * 24));
	line-height: 1.7;
	color: #e6eefb;
	text-align: right;
	white-space: pre-wrap;
}

/* ---- Section 8: Contact ---- */

.flk-contact-card {
	left: calc(var(--u) * 138);
	top: 0;
	width: calc(var(--u) * 1506);
	height: calc(var(--u) * 705);
	border-radius: calc(var(--u) * 44);
	background: linear-gradient(269.2deg, #000 0.35%, #275f98 98.8%);
	overflow: hidden;
}
.flk-contact-noise {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.2;
}

.flk-console { left: calc(var(--u) * 1147); top: calc(var(--u) * 5); width: calc(var(--u) * 497); height: calc(var(--u) * 700); overflow: hidden; border-radius: 0 calc(var(--u) * 44) calc(var(--u) * 44) 0; }
.flk-console img { position: absolute; left: 0; top: -0.03%; width: 100%; height: 106.68%; max-width: none; }

.flk-contact-sub {
	left: calc(var(--u) * 400);
	top: calc(var(--u) * 176);
	width: calc(var(--u) * 655);
	margin: 0;
	font-family: var(--flk-brut-light);
	font-weight: 300;
	font-size: calc(var(--u) * 23);
	text-align: right;
	color: #fff;
}

.flk-contact-form { position: absolute; inset: 0; margin: 0; }

.flk-hp { position: absolute !important; left: calc(var(--u) * -9999) !important; }

.flk-in {
	position: absolute;
	height: calc(var(--u) * 78);
	border: 0;
	border-radius: calc(var(--u) * 9);
	background: #e9e9e9;
	font-family: var(--flk-brut);
	font-weight: 700;
	font-size: calc(var(--u) * 23);
	color: #000;
	text-align: right;
	padding: 0 calc(var(--u) * 20);
	box-sizing: border-box;
}
.flk-in::placeholder { color: #000; opacity: 1; }
.flk-in:focus { outline: 3px solid var(--flk-blue); }
.flk-in-name { left: calc(var(--u) * 793); top: calc(var(--u) * 276); width: calc(var(--u) * 354); }
.flk-in-phone { left: calc(var(--u) * 412); top: calc(var(--u) * 276); width: calc(var(--u) * 340); }
.flk-in-date { left: calc(var(--u) * 793); top: calc(var(--u) * 373); width: calc(var(--u) * 354); }
.flk-in-venue { left: calc(var(--u) * 412); top: calc(var(--u) * 373); width: calc(var(--u) * 340); }

.flk-submit {
	position: absolute;
	left: calc(var(--u) * 609);
	top: calc(var(--u) * 497);
	width: calc(var(--u) * 340);
	height: calc(var(--u) * 60);
	border: 0;
	border-radius: calc(var(--u) * 9);
	background: var(--flk-chip-grad);
	font-family: var(--flk-brut);
	font-weight: 700;
	font-size: calc(var(--u) * 26);
	color: #fff;
	cursor: pointer;
}
.flk-submit:hover { filter: brightness(1.15); }
.flk-submit:disabled { opacity: 0.6; cursor: wait; }

.flk-form-status {
	position: absolute;
	left: calc(var(--u) * 609);
	top: calc(var(--u) * 645);
	width: calc(var(--u) * 340);
	margin: 0;
	font-size: calc(var(--u) * 18);
	text-align: center;
	color: #fff;
	min-height: 1em;
}

/* ============================================================
   Mobile (≤calc(var(--u) * 768)): stacked responsive layout, same content.
   ============================================================ */

@media (max-width: 900px) {
	.flk-stage { width: 100%; transform: none !important; }
	.flk-viewport { height: auto !important; }
	.flk-sec { height: auto; overflow: visible; }
	.flk-glow, .flk-line { display: none; }

	.flk-h {
		position: static;
		transform: none;
		width: auto;
		max-width: none;
		font-size: 30px;
		line-height: 1.35;
		padding: 36px 16px 20px;
	}
	.flk-chip { padding: 0 10px 3px; border-radius: 4px; }

	/* ---- Mobile hero — measured off the 440x944 phone mockup ----
	   --m is one mockup pixel, fitted to the real viewport in both directions,
	   so the composition holds its ratios on any phone. The stage is a grid:
	   the nav, then DJ and the name sharing one line, then the big words, the
	   paragraph, and the portrait taking whatever height is left. */
	.flk-s1 {
		--m: min(calc(100vw / 440), calc(100svh / 944));
		position: relative;
		display: block;
		width: auto;
		margin-inline: 0;
		height: calc(100svh + var(--m) * 460);
		padding: 0;
		text-align: right;
	}
	.flk-hsticky {
		position: sticky;
		top: 0;
		display: grid;
		direction: ltr;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto auto 1fr;
		align-content: start;
		width: 100%;
		height: 100svh;
		overflow: hidden;
	}
	.flk-plx,
	.flk-hcomp { position: static; height: auto; transform: none; display: contents; }

	.flk-hero-bg {
		position: absolute;
		inset: 0;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		transform: none;
		z-index: 0;
	}
	.flk-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }

	/* Row 1 — the bar: logo at the right end, CTA pill at the left. */
	.flk-nav {
		grid-row: 1;
		grid-column: 1 / -1;
		direction: rtl;
		position: static;
		transform: none;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: 0;
		width: auto;
		height: max(52px, calc(var(--m) * 68));
		margin: calc(var(--m) * 12);
		padding: 0 calc(var(--m) * 14) 0 calc(var(--m) * 9);
		border-radius: calc(var(--m) * 22);
		z-index: 3;
	}
	.flk-nav-links { display: none; }
	.flk-nav-logo {
		position: static;
		transform: none;
		order: 0;
		flex: 0 0 auto;
		width: max(148px, calc(var(--m) * 192));
		height: max(34px, calc(var(--m) * 44));
		margin: 0 0 0 auto;
	}
	.flk-nav-logo img { width: 100%; height: 100%; object-fit: contain; }
	.flk-nav-cta {
		position: static;
		order: 1;
		margin: 0;
		height: max(38px, calc(var(--m) * 50));
		gap: calc(var(--m) * 9);
		padding: 0 calc(var(--m) * 16) 0 calc(var(--m) * 6);
		font-size: max(13px, calc(var(--m) * 16));
	}
	.flk-nav-cta-arrow {
		width: max(30px, calc(var(--m) * 38));
		height: max(30px, calc(var(--m) * 38));
		font-size: max(14px, calc(var(--m) * 17));
	}

	/* Row 2 — DJ at the left margin, the name opposite it at the right. */
	.flk-big-dj {
		grid-row: 2;
		grid-column: 1;
		justify-self: start;
		align-self: end;
		position: static;
		direction: ltr;
		text-align: left;
		margin: calc(var(--m) * 40) 0 0 calc(var(--m) * 50);
		font-size: max(20px, calc(var(--m) * 30));
		z-index: 2;
	}
	.flk-hero-name {
		grid-row: 2;
		grid-column: 2;
		justify-self: end;
		align-self: end;
		direction: rtl;
		position: static;
		width: auto;
		margin: calc(var(--m) * 40) calc(var(--m) * 50) 0 0;
		font-size: max(15px, calc(var(--m) * 22));
		text-align: right;
		z-index: 2;
	}

	/* Row 3 — the two giant words on one line, against the left margin. */
	.flk-big-pair {
		grid-row: 3;
		grid-column: 1 / -1;
		justify-self: start;
		display: flex;
		direction: ltr;
		align-items: baseline;
		gap: calc(var(--m) * 12);
		margin: calc(var(--m) * 2) 0 0 calc(var(--m) * 48);
		z-index: 2;
	}
	/* The size lives on the pair so hero-parallax.js can fit the two words to
	   a set share of the screen — the exact width depends on which font ends
	   up loading, and this makes that irrelevant. */
	.flk-big-pair { font-size: calc(var(--m) * 52); }
	.flk-big-left,
	.flk-big-right {
		position: static;
		transform: none;
		left: auto;
		top: auto;
		font-size: inherit;
		line-height: 1.05;
		white-space: nowrap;
	}

	/* Row 4 — one paragraph, centred in the frame and centred line by line. */
	.flk-hero-tag1 { display: none; }
	.flk-hero-tag2 {
		grid-row: 4;
		grid-column: 1 / -1;
		direction: rtl;
		position: static;
		width: auto;
		/* Exactly the span of the two giant words above it: the same left
		   margin they start from, ending on the same edge the name ends on.
		   Set here rather than left to the editor, because a size chosen there
		   grows the type block and takes the room from the portrait below. */
		max-width: none;
		margin: calc(var(--m) * 16) calc(var(--m) * 50) 0 calc(var(--m) * 48);
		padding: 0;
		font-size: 21px;
		line-height: 1.65;
		text-align: center;
		z-index: 2;
	}

	/* Row 5 — the portrait takes every pixel left over. */
	.flk-hero-photo {
		grid-row: 5;
		grid-column: 1 / -1;
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: 100%;
		height: auto;
		min-height: 0;
		margin: calc(var(--m) * 46) 0 0;
		overflow: hidden;
		z-index: 1;
	}
	/* Sized by height with its own aspect ratio — cover on a full-width box
	   blew the portrait up until only the head was left. */
	.flk-hero-photo img {
		position: absolute;
		inset: auto;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		height: 100%;
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}

	/* The round CTA rides over the portrait, centred near the bottom edge. */
	.flk-hero-circle {
		position: absolute;
		left: 50%;
		top: auto;
		bottom: calc(var(--m) * 19);
		transform: translateX(-50%);
		width: max(100px, calc(var(--m) * 135));
		height: max(100px, calc(var(--m) * 135));
		margin: 0;
		gap: calc(var(--m) * 4);
		border-width: 2px;
		outline-width: 2px;
		outline-offset: calc(var(--m) * 5);
		z-index: 4;
	}
	.flk-hero-circle:hover { transform: translateX(-50%) scale(1.04); }
	.flk-hc-text { font-size: max(14px, calc(var(--m) * 19)); }
	.flk-hc-arrow { width: max(22px, calc(var(--m) * 27)); height: max(22px, calc(var(--m) * 27)); }

	/* Video */
	.flk-s2 { padding-bottom: 16px; }
	.flk-s2 { padding-top: 0; }
	.flk-vsticky { gap: 18px; }
	.flk-vtrack { height: calc(40vh + 420px); }
	.flk-vbox { width: min(calc(100% - 24px), calc((100vh - 180px) * 1185 / 623)); }
	.flk-vmask { border-radius: 20px; }
	.flk-vsticky { padding-top: clamp(18px, 4vh, 46px); padding-bottom: 0; }
	.flk-vplay { width: 74px; height: 74px; }
	.flk-vplay-tri { margin-inline-start: 5px; border-top-width: 14px; border-bottom-width: 14px; border-left-width: 23px; }

	/* Couples carousel */
	.flk-s3 { padding: 18px 0 28px; }
	.flk-h-s3 { margin-bottom: 20px; }
	.flk-cview { height: 330px; }
	.flk-ccarousel { gap: 14px; }
	.flk-mcard { border-radius: 10px; }
	.flk-cfade { width: 60px; }
	.flk-cnav { margin-top: 18px; gap: 16px; }

	/* About */
	.flk-s4 {
		padding-bottom: 40px;
		display: grid;
		grid-template-columns: 1fr;
	}
	/* Every one of them in the single column: two items sharing a row with no
	   column named would auto-place side by side and invent a second column. */
	.flk-h-s4,
	.flk-about-photo,
	.flk-about-t1,
	.flk-about-t2,
	.flk-sax,
	.flk-stat1,
	.flk-stat2 { grid-column: 1; }
	.flk-h-s4 { grid-row: 1; }
	/* start, not stretch: a stretched cell would fight the photo's own ratio
	   and squeeze it to a sliver. */
	/* Photographs of a person are shown whole on a phone. The desktop frames
	   are cut to the Figma composition (537:806, 689:865); forcing a picture
	   into a shape that is not its own is what was slicing him off. Here the
	   frame takes the picture's proportions instead. */
	.flk-about-photo,
	.flk-sax {
		align-self: start;
		justify-self: center;
		width: 80%;
		max-width: 420px;
		height: auto;
		aspect-ratio: auto;
	}
	.flk-about-photo img,
	.flk-sax img { position: static; width: 100%; height: auto; object-fit: contain; }
	.flk-about-photo { grid-row: 2; }
	.flk-stat1 { grid-row: 2; }
	.flk-about-t1 { grid-row: 3; }
	.flk-sax { grid-row: 4; }
	.flk-stat2 { grid-row: 4; }
	.flk-about-t2 { grid-row: 5; }
	/* Each counter shares its photo's cell and settles near the bottom of it. */
	.flk-stat1,
	.flk-stat2 {
		align-self: end;
		justify-self: center;
		margin: 0 0 26px;
		z-index: 3;
		box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.85);
	}
	/* The photo behind the section is the photograph, not a ghost of it —
	   under a dark wash, so the words on top of it stay readable. */
	.flk-crowd { width: 100%; height: 100%; left: 0; top: 0; transform: none; opacity: 1; }
	.flk-crowd::after {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
	}
	/* Which puts the words on a busy picture, so they carry their own shadow. */
	.flk-about-t { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 0, 0, 0.8); }
	.flk-about-photo { position: static; margin: 0 auto 20px; }
	.flk-about-t { position: static; width: auto; font-size: 17px; padding: 0 20px 20px; }
	.flk-stat {
		position: relative;
		left: auto;
		top: auto;
		width: 250px;
		height: auto;
		margin: 0 auto 24px;
		padding: 18px 14px;
		border-radius: 26px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}
	.flk-stat-num { position: static; transform: none; font-size: 36px; }
	.flk-stat-label { position: static; transform: none; font-size: 19px; white-space: normal; }
	.flk-stat-label2 { font-size: 17px; }
	.flk-sax { position: static; margin: 0 auto 20px; }

	/* ---- Hits, built to the phone mock (440 wide) ------------------------
	   The covers become a two-across grid of wide cards, each tilted a little
	   and lapping over its neighbour, with the phone shot centred underneath.
	   --g is one unit of the mock, so the block scales as one piece. */
	.flk-s5 {
		--g: min(100vw, 440px) / 440;
		height: auto;
		padding: 0 0 calc(var(--g) * 34);
		display: flex;
		flex-direction: column;
	}
	.flk-glass { display: none; }
	.flk-h-s5 { order: 1; }

	.flk-press {
		order: 2;
		position: static;
		width: auto;
		margin: calc(var(--g) * 30) calc(var(--g) * 34) 0;
		line-height: 0;
	}
	.flk-press-cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
	/* The two columns stop being columns: every cover becomes a cell of the
	   grid above, so the order reads across the rows like the mock. */
	.flk-press-col { display: contents; }
	.flk-press-col1 { padding-top: 0; }
	.flk-press-col2 { margin-inline-start: 0; }
	.flk-press-f {
		aspect-ratio: 16 / 9;
		margin: 0;
	}
	/* Rows overlap slightly, and every second cover sits a touch lower — the
	   staggered look of the mock rather than a plain table. */
	.flk-press-col .flk-press-f + .flk-press-f { margin-top: calc(var(--g) * -14); }
	.flk-press-col2 .flk-press-f { margin-top: calc(var(--g) * 22); }
	.flk-press-col2 .flk-press-f + .flk-press-f { margin-top: calc(var(--g) * 8); }
	.flk-press-c,
	button.flk-press-c {
		width: 100%;
		height: 100%;
		border: 0;
		border-radius: calc(var(--g) * 10);
		box-shadow: 0 calc(var(--g) * 14) calc(var(--g) * 26) calc(var(--g) * -10) rgba(0, 0, 0, 0.85);
	}
	.flk-press-c img { width: 100%; height: 100%; object-fit: cover; }
	/* Tilts alternate, so no two neighbours lean the same way. */
	.flk-press-col .flk-press-f:nth-child(1) .flk-press-c { transform: rotate(-2.4deg); }
	.flk-press-col .flk-press-f:nth-child(2) .flk-press-c { transform: rotate(1.8deg); }
	.flk-press-col .flk-press-f:nth-child(3) .flk-press-c { transform: rotate(-1.4deg); }
	.flk-press-col2 .flk-press-f:nth-child(1) .flk-press-c { transform: rotate(2.2deg); }
	.flk-press-col2 .flk-press-f:nth-child(2) .flk-press-c { transform: rotate(-1.8deg); }
	.flk-press-col2 .flk-press-f:nth-child(3) .flk-press-c { transform: rotate(1.2deg); }
	/* Touch has no hover: the lift would stick after a tap. */
	button.flk-press-c:hover { transform: none; box-shadow: 0 calc(var(--g) * 14) calc(var(--g) * 26) calc(var(--g) * -10) rgba(0, 0, 0, 0.85); }

	/* The desktop crop (a tall image pulled up inside its frame) has nothing to
	   crop on a phone, where the frame is the picture's own shape. */
	.flk-studio img { position: static; width: 100%; height: auto; object-fit: contain; }
	.flk-studio {
		order: 3;
		overflow: hidden;
		/* relative, not static: the picture inside is absolutely placed, and a
		   static frame would let it escape and cover the page. Relative also
		   means the desktop coordinates still count, so they are cleared. */
		position: relative;
		left: auto;
		top: auto;
		width: calc(100% - var(--g) * 96);
		height: auto;
		height: auto;
		aspect-ratio: auto;
		margin: calc(var(--g) * 34) auto 0;
		border-radius: calc(var(--g) * 16);
	}

	/* Photos: shorter scroll track and smaller cards on phones */
	.flk-s6 { padding-top: 24px; }
	.flk-h-s6 { margin-bottom: 18px; }
	.flk-pgal { height: 320vh; }
	.flk-pgal-banner { border-radius: 24px; border-width: 2px; }
	.flk-pgal-col { min-width: 120px; }
	.flk-pgal-card { height: 150px; }

	/* Testimonials: the circular gallery flows in the page on mobile */
	.flk-s7 { padding-bottom: 28px; }
	.flk-carousel { position: relative; top: auto; left: auto; transform: none; width: 100%; height: 460px; }
	.flk-tile { width: 240px; height: 390px; border-radius: 12px; }
	.flk-play { top: 50%; transform: translate(-50%, -50%); width: 90px; height: 87px; }
	.flk-tile:hover .flk-play { transform: translate(-50%, -50%) scale(1.08); }
	.flk-play-tri { border-top-width: 21px; border-bottom-width: 21px; border-left-width: 37px; }

	/* FAQ */
	.flk-sfaq { padding: 46px 0 62px; }
	.flk-faq-h { font-size: 30px; margin-bottom: 22px; }
	.flk-faq-list { width: auto; max-width: none; margin: 0 12px; }
	.flk-faq-item + .flk-faq-item { margin-top: 10px; }
	.flk-faq-q { min-height: 54px; padding: 10px 16px 10px 8px; border-radius: 12px; font-size: 16px; gap: 10px; }
	.flk-faq-ic { width: 34px; height: 34px; font-size: 17px; }
	.flk-faq-item.is-open .flk-faq-a { margin-top: 8px; }
	.flk-faq-body { padding: 16px 18px; border-radius: 12px; font-size: 15px; }

	/* ---- Contact, built to the phone mock (440 wide) ----------------------
	   --f is one unit of that mock, so every measurement below is the number
	   from the reference and the whole card scales as one piece: on a 360 the
	   card, the type, the fields and the gaps all shrink together, and past
	   440 it stops growing instead of stretching. */
	.flk-s8 {
		--f: min(100vw, 440px) / 440;
		display: grid;
		grid-template-columns: 1fr;
		width: auto;
		margin: 0 calc(var(--f) * 28);
		padding: 0;
		border-radius: calc(var(--f) * 30);
		overflow: hidden;
		background:
			linear-gradient(180deg, rgba(96, 140, 196, 0.5) 0%, rgba(38, 78, 138, 0.72) 34%, rgba(14, 34, 66, 0.9) 62%, rgba(8, 20, 40, 0.96) 100%),
			#0a1526;
		box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.14);
	}
	/* The card is drawn by the section itself now, so its stand-in layer and
	   the desktop-only glow step aside. */
	.flk-contact-card { display: none; }
	.flk-s8 > .flk-glow { display: none; }

	.flk-h-s8 {
		grid-row: 1;
		grid-column: 1;
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: auto;
		max-width: none;
		margin: 0;
		padding: calc(var(--f) * 44) calc(var(--f) * 30) 0;
		font-size: calc(var(--f) * 25);
		line-height: 1.25;
		text-align: center;
	}
	.flk-contact-sub {
		grid-row: 2;
		grid-column: 1;
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		margin: 0;
		padding: calc(var(--f) * 12) calc(var(--f) * 44) 0;
		font-size: calc(var(--f) * 15.5);
		line-height: 1.55;
		text-align: center;
	}
	.flk-contact-form {
		grid-row: 3;
		grid-column: 1;
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(var(--f) * 14);
		/* 296 of the mock's 384-wide card: the fields sit inside it, not on
		   its edges. */
		padding: calc(var(--f) * 32) calc(var(--f) * 44) calc(var(--f) * 34);
	}
	.flk-in {
		position: static;
		width: 100%;
		height: calc(var(--f) * 52);
		margin: 0;
		border-radius: calc(var(--f) * 12);
		background: rgba(214, 223, 234, 0.82);
		font-size: calc(var(--f) * 15.5);
		color: #0d1c33;
		padding: 0 calc(var(--f) * 18);
	}
	.flk-in::placeholder { color: #0d1c33; opacity: 0.92; }
	.flk-submit {
		position: static;
		width: 100%;
		height: calc(var(--f) * 54);
		margin: calc(var(--f) * 6) 0 0;
		border-radius: calc(var(--f) * 12);
		background: var(--flk-cta, #3b7cf6);
		font-size: calc(var(--f) * 17);
		box-shadow: 0 calc(var(--f) * 10) calc(var(--f) * 24) rgba(20, 60, 110, 0.55);
	}
	.flk-form-status { position: static; width: 100%; margin: calc(var(--f) * 8) 0 0; text-align: center; }

	/* The photograph closes the card: full width, flush to the bottom edge,
	   its corners taken by the card's own radius. */
	.flk-console {
		display: block;
		grid-row: 4;
		grid-column: 1;
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		height: auto;
		aspect-ratio: auto;
		border-radius: 0;
		overflow: hidden;
	}
	.flk-console img { position: static; width: 100%; height: auto; object-fit: contain; }
}

/* Photo gallery lightbox: tap or click a card to see it full size. */
.flk-pgal-card { cursor: zoom-in; }
.flk-pgal-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: rgba(0, 0, 0, 0.88);
	cursor: zoom-out;
	animation: flk-lb-in 0.25s ease-out;
}
.flk-pgal-lightbox[hidden] { display: none; }
.flk-pgal-lightbox img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.flk-pgal-close {
	position: absolute;
	top: 3vmin;
	inset-inline-end: 3vmin;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	cursor: pointer;
}
.flk-pgal-close:hover { background: rgba(255, 255, 255, 0.3); }
@keyframes flk-lb-in { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   Footer — the curtain reveal.

   The wrapper holds one screen of height in the flow and clips to its own
   box; the footer inside is fixed to the window, so scrolling the wrapper up
   uncovers the footer strip by strip instead of dragging it along. Ported
   from the React/GSAP original to plain CSS and JS, on this page's own
   colours and fonts.
   ============================================================ */

.flk-fwrap {
	position: relative;
	width: 100%;
	height: 100vh;
	/* This is what turns the wrapper into a window onto the fixed footer. */
	clip-path: inset(0);
}

/* The page has no global border-box, so every padded full-width box in the
   footer sets its own — otherwise the padding is added to the 100% and the
   row hangs off the screen. */
/* Background photo — the lowest layer of the footer, at 30% so the type and
   the pills over it keep their contrast. */
.flk-fphoto {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.flk-fphoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
}

.flk-footer,
.flk-footer *,
.flk-footer *::before,
.flk-footer *::after { box-sizing: border-box; }

.flk-footer {
	position: fixed;
	inset: auto 0 0 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	background: #000;
	color: #fff;
	font-family: var(--flk-modern);
}

/* Ambient light that slowly breathes behind everything. */
.flk-faurora {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 80vw;
	height: 60vh;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(59, 136, 216, 0.45) 0%, rgba(59, 136, 216, 0.18) 42%, transparent 70%);
	filter: blur(90px);
	transform: translate(-50%, -50%);
	animation: flk-fbreathe 8s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 0;
}
@keyframes flk-fbreathe {
	from { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
	to { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

.flk-fgrid {
	position: absolute;
	inset: 0;
	background-size: 60px 60px;
	background-image:
		linear-gradient(to right, rgba(59, 136, 216, 0.13) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(59, 136, 216, 0.13) 1px, transparent 1px);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
	pointer-events: none;
	z-index: 0;
}

/* The name, blown up behind the content as an outline that fades downward.
   It is far wider than the screen, so it travels one way without end: two
   copies ride a track that slides by exactly half its own width. */
.flk-fgiant {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(88px, 14vh, 180px);
	user-select: none;
	pointer-events: none;
	z-index: 0;
}
.flk-fgiant-track {
	display: flex;
	width: max-content;
	/* Reversed: the name travels the opposite way to the ribbon above it.
	   The track is two identical halves, so playing the same cycle backwards
	   wraps just as invisibly as playing it forwards. */
	animation: flk-fgiant-run 34s linear infinite reverse;
}
.flk-fgiant-w {
	display: block;
	padding-inline: 0.14em;
	font-family: var(--flk-brut);
	font-weight: 900;
	font-size: 26vw;
	line-height: 0.75;
	letter-spacing: -0.05em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px rgba(59, 136, 216, 0.5);
	background-image: linear-gradient(183deg, rgba(255, 255, 255, 0.32) 40.8%, rgba(160, 190, 225, 0.2) 61.5%, rgba(153, 153, 153, 0.07) 81.1%);
	-webkit-background-clip: text;
	background-clip: text;
}
/* Same right-to-left row as the ribbon, so the same direction keeps it seamless. */
@keyframes flk-fgiant-run {
	from { transform: translateX(0); }
	to { transform: translateX(50%); }
}

/* The tilted ribbon across the top. */
.flk-fmq {
	position: absolute;
	left: 0;
	top: clamp(48px, 9vh, 92px);
	width: 100%;
	padding: 14px 0;
	overflow: hidden;
	border-top: 1px solid rgba(59, 136, 216, 0.35);
	border-bottom: 1px solid rgba(59, 136, 216, 0.35);
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transform: rotate(-2deg) scale(1.1);
	box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.9);
	z-index: 1;
}
.flk-fmq-track {
	display: flex;
	width: max-content;
	animation: flk-fmarquee 40s linear infinite;
}
.flk-fmq-run {
	display: flex;
	align-items: center;
	gap: 34px;
	padding-inline: 17px;
	font-size: clamp(11px, 1vw, 14px);
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	white-space: nowrap;
}
/* The record between the phrases: it turns as the ribbon travels. */
.flk-fmq-s {
	display: block;
	flex: 0 0 auto;
	width: 2.1em;
	height: 2.1em;
	color: var(--flk-blue);
	animation: flk-fdisc 3.4s linear infinite;
}
.flk-fmq-s svg { display: block; width: 100%; height: 100%; }
@keyframes flk-fdisc {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
/* The row is laid out right-to-left, so the second copy of the run sits to the
   LEFT of the first. Sliding right is therefore what pulls it into view —
   sliding left would drag both copies off and leave the ribbon empty. */
@keyframes flk-fmarquee {
	from { transform: translateX(0); }
	to { transform: translateX(50%); }
}

.flk-fmid {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(26px, 4vh, 48px);
	width: min(100% - 32px, 1000px);
	margin-inline: auto;
	padding-top: 80px;
}

/* Metallic heading — bright at the top, dissolving toward the baseline. */
.flk-fh {
	margin: 0;
	text-align: center;
	font-family: var(--flk-brut);
	font-weight: 700;
	font-size: clamp(34px, 6.1vw, 92px);
	line-height: 1.08;
	letter-spacing: -0.03em;
	/* The page's heading gradient is drawn for a single line; tiled one line
	   high it repeats down a wrapped heading, so a second line reads exactly
	   like the first instead of dissolving into the transparent tail. */
	background-image: linear-gradient(183deg, #fff 40.8%, #999 61.5%, rgba(153, 153, 153, 0) 81.1%);
	background-size: 100% 1.08em;
	background-repeat: repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 22px rgba(59, 136, 216, 0.35));
}

.flk-fbtns {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
}
.flk-frow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	width: 100%;
}
.flk-frow-sm { gap: 12px; }

/* Glass pill — the one button shape the whole footer is built from. */
.flk-fpill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
	border: 1px solid rgba(59, 136, 216, 0.28);
	border-radius: 999px;
	background: linear-gradient(145deg, rgba(18, 35, 58, 0.9) 0%, rgba(9, 17, 30, 0.75) 100%);
	box-shadow:
		0 10px 30px -10px rgba(20, 60, 110, 0.55),
		inset 0 1px 1px rgba(255, 255, 255, 0.1),
		inset 0 -1px 2px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--flk-modern);
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.flk-fpill:hover,
.flk-fpill:focus-visible {
	background: linear-gradient(145deg, rgba(30, 58, 95, 0.95) 0%, rgba(14, 27, 46, 0.85) 100%);
	border-color: var(--flk-blue);
	box-shadow: 0 20px 40px -10px rgba(20, 60, 110, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.18);
	color: #fff;
}
.flk-fpill-lg {
	padding: 19px 42px;
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 700;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.28);
	background: var(--flk-cta);
	box-shadow: 0 14px 34px -12px rgba(20, 60, 110, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.24);
}
.flk-fpill-lg:hover,
.flk-fpill-lg:focus-visible {
	background: var(--flk-cta);
	border-color: #fff;
	filter: brightness(1.08);
	box-shadow: 0 22px 46px -12px rgba(20, 60, 110, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.flk-fpill-ar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	color: var(--flk-cta);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.flk-fpill-lg:hover .flk-fpill-ar { transform: translateX(-4px); }

/* Social buttons — the same glass pill, squared off into a circle. */
.flk-fsocial { gap: 14px; }
/* The whole button is sized in em off its own font-size, so setting a size
   for it in the editor scales the circle and the mark together. */
.flk-fsoc {
	font-size: clamp(13px, 1vw, 15px);
	width: 3.6em;
	height: 3.6em;
	padding: 0;
	justify-content: center;
	color: rgba(255, 255, 255, 0.86);
}
.flk-fsoc svg {
	width: 1.45em;
	height: 1.45em;
	display: block;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.flk-fsoc:hover svg { transform: scale(1.12); }

/* The small print: its own band, below the travelling name. */
.flk-flinks {
	position: relative;
	z-index: 3;
	width: min(100% - 32px, 1000px);
	margin: 0 auto clamp(12px, 2.4vh, 24px);
}

/* Bottom bar: rights, the credit badge, and the way back up. */
.flk-fbot {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	padding: 0 clamp(16px, 3vw, 48px) clamp(20px, 4vh, 34px);
}
.flk-fcopy {
	order: 2;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: clamp(10px, 0.8vw, 12px);
	font-weight: 600;
	letter-spacing: 0.16em;
}
.flk-fcredit {
	order: 1;
	gap: 8px;
	padding: 11px 22px;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(10px, 0.8vw, 12px);
	font-weight: 700;
	letter-spacing: 0.14em;
	cursor: default;
}
.flk-fcredit[href] { cursor: pointer; }
.flk-fcredit-img {
	display: block;
	height: 22px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
}
.flk-fcredit-n {
	color: #fff;
	font-weight: 800;
	letter-spacing: 0;
	font-size: clamp(12px, 0.95vw, 14px);
}
.flk-fheart {
	color: #ff4d5e;
	font-size: 14px;
	animation: flk-fheart 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes flk-fheart {
	0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255, 77, 94, 0.5)); }
	15%, 45% { transform: scale(1.2); filter: drop-shadow(0 0 10px rgba(255, 77, 94, 0.8)); }
	30% { transform: scale(1); }
}
.flk-ftop {
	order: 3;
	width: 50px;
	height: 50px;
	padding: 0;
	justify-content: center;
}
.flk-ftop-ar {
	display: flex;
	width: 22px;
	height: 22px;
	color: inherit;
	transform: rotate(90deg);
	transition: transform 0.3s ease;
}
.flk-ftop:hover .flk-ftop-ar { transform: rotate(90deg) translateX(5px); }

/* The pieces the script animates start hidden only when it is there to
   reveal them — without JS the footer is simply present. */
.flk-js .flk-fgiant,
.flk-js .flk-fh,
.flk-js .flk-fbtns { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
	.flk-faurora,
	.flk-fmq-track,
	.flk-fheart,
	.flk-fmq-s,
	.flk-fgiant-track { animation: none; }
}

@media (max-width: 900px) {
	/* Phones get the footer as a plain block: fixed positioning inside a
	   clipped wrapper is the one thing mobile browsers handle unevenly, and a
	   footer that fails to appear is worse than one that does not slide. */
	.flk-fwrap { height: auto; clip-path: none; }
	.flk-footer { position: static; height: auto; min-height: 100svh; }
	.flk-fmq { position: static; transform: rotate(-2deg); margin: 14vh 0 0; }
	.flk-fmid { padding-top: 6vh; gap: 24px; }
	/* In the phone's flow the name simply takes its own band, which puts it
	   above the small print without any positioning arithmetic. */
	.flk-fgiant { position: static; bottom: auto; margin: clamp(14px, 3vh, 34px) 0; }
	.flk-fgiant-w { font-size: 34vw; }
	.flk-fsocial { gap: 10px; }
	.flk-fsoc { font-size: 13px; }
	.flk-fbot { justify-content: center; text-align: center; padding-top: 8vh; }
	.flk-fcopy { order: 3; width: 100%; text-align: center; }
	.flk-fcredit { order: 1; }
	.flk-ftop { order: 2; }
}

/* ============================================================
   Hero smoke — what happens once the portrait has faded back.

   Banks of haze roll across the stage, drifting and swelling, the way smoke
   hangs in a hall after the machines have run. The layer opens on one custom
   property (--p) written by hero-parallax.js, so a scroll frame touches a
   single element and every bank follows.
   ============================================================ */

.flk-party {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
	opacity: var(--p, 0);
}

.flk-smoke {
	position: absolute;
	left: var(--x, 50%);
	top: var(--y, 60%);
	width: var(--w, 60vw);
	height: var(--h, 46vh);
	border-radius: 50%;
	background: radial-gradient(circle, var(--c, rgba(150, 190, 240, 0.34)) 0%, var(--c2, rgba(90, 130, 190, 0.16)) 42%, transparent 70%);
	filter: blur(var(--b, 26px));
	translate: -50% -50%;
	/* The scroll opens each bank; the animation keeps it moving on its own. */
	transform: scale(calc(0.72 + 0.45 * var(--p, 0)));
	animation: flk-smoke-roll var(--t, 18s) ease-in-out var(--d, 0s) infinite alternate;
	will-change: translate;
}
@keyframes flk-smoke-roll {
	from {
		translate: calc(-50% - var(--dx, 40px)) calc(-50% + var(--dy, 16px));
		opacity: 0.45;
	}
	to {
		translate: calc(-50% + var(--dx, 40px)) calc(-50% - var(--dy, 16px));
		opacity: 1;
	}
}

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

/* ============================================================
   Hit covers — the collage keeps its arrangement and comes alive:
   each cover drifts on its own clock, lifts under the cursor, and opens its
   video over the page instead of sending anyone to YouTube.
   ============================================================ */

.flk-press-f {
	/* Staggered so the six never breathe together. */
	animation: flk-cover-drift calc(6s + var(--i, 0) * 0.9s) ease-in-out calc(var(--i, 0) * -1.1s) infinite alternate;
	will-change: transform;
}
@keyframes flk-cover-drift {
	from { transform: translateY(-7px) rotate(-0.5deg); }
	to { transform: translateY(9px) rotate(0.5deg); }
}

button.flk-press-c {
	display: block;
	padding: 0;
	border: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
}
button.flk-press-c:hover,
button.flk-press-c:focus-visible {
	transform: translateY(-8px) scale(1.045);
	box-shadow: 0 26px 44px -16px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(92, 172, 255, 0.65);
	z-index: 4;
}
.flk-press-f:has(button:hover) { animation-play-state: paused; }

.flk-press-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.34) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	color: #fff;
}
/* A disc of frosted glass: it takes its colour from the cover behind it
   rather than covering the cover with white paint. */
.flk-press-play svg {
	width: 26%;
	max-width: 74px;
	height: auto;
	padding: 7.5%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow:
		0 12px 30px rgba(0, 0, 0, 0.45),
		inset 0 1px 2px rgba(255, 255, 255, 0.6);
	transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
	scale: 0.82;
}
button.flk-press-c:hover .flk-press-play svg,
button.flk-press-c:focus-visible .flk-press-play svg { scale: 1; }
button.flk-press-c:hover .flk-press-play,
button.flk-press-c:focus-visible .flk-press-play { opacity: 1; }

/* ---- the pop-up itself ---- */

.flk-vpop-lock { overflow: hidden; }
.flk-vpop-back {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(14px, 4vw, 40px);
	background: rgba(0, 0, 0, 0.88);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.flk-vpop-back.is-on { display: flex; }
/* The width is capped by what fits vertically as well, so the player is as
   large as the screen allows and never taller than it — in portrait on a
   phone just as much as on a desktop. */
.flk-vpop-box {
	position: relative;
	width: min(100%, 1020px, calc((100vh - 150px) * 16 / 9));
	max-width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 44px 90px -22px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(59, 136, 216, 0.4);
}
/* The slot has to fill the box: a percentage height inside an auto-height
   wrapper resolves to auto, which left the player at its default 150px in
   the top corner. */
.flk-vpop-slot { position: absolute; inset: 0; }
.flk-vpop-box iframe { width: 100%; height: 100%; border: 0; display: block; }
@supports (height: 100svh) {
	.flk-vpop-box { width: min(100%, 1020px, calc((100svh - 150px) * 16 / 9)); }
}
/* Pinned to the corner of the screen, clear of the player. */
.flk-vpop-x {
	position: absolute;
	left: clamp(10px, 3vw, 26px);
	top: clamp(10px, 3vw, 26px);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}
/* Room for the corner button above the player on a small screen. */
@media (max-width: 700px) {
	.flk-vpop-back { padding-top: 68px; }
}

@media (prefers-reduced-motion: reduce) {
	.flk-press-f { animation: none; }
}

/* ---- Page entrance ----------------------------------------------------
   The hero assembles itself on load: the bar drops in, the type rises, the
   photo lifts, and the rules draw outwards. .flk-boot is set by the page
   script and dropped again once the last piece has landed, so the scroll
   scripts get the hero back untouched.

   Every keyframe animates `translate`/`scale`/`opacity` and finishes on the
   element's own resting values, with `backwards` fill only — nothing is left
   pinned to an animated value afterwards. */

@keyframes flk-in-down {
	from { opacity: 0; translate: 0 -22px; }
	to   { opacity: 1; translate: 0 0; }
}
@keyframes flk-in-up {
	from { opacity: 0; translate: 0 44px; }
	to   { opacity: 1; translate: 0 0; }
}
@keyframes flk-in-rise {
	from { opacity: 0; translate: 0 26px; }
	to   { opacity: 1; translate: 0 0; }
}
@keyframes flk-in-soft {
	from { opacity: 0; filter: blur(16px); scale: 1.05; }
	to   { opacity: 1; filter: blur(0); scale: 1; }
}
@keyframes flk-in-line {
	from { opacity: 0; scale: 0 1; }
	to   { opacity: 1; scale: 1 1; }
}

.flk-js.flk-boot .flk-nav        { animation: flk-in-down 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s backwards; }
.flk-js.flk-boot .flk-big-dj     { animation: flk-in-soft 1.3s ease 0.1s backwards; }
.flk-js.flk-boot .flk-big-pair   { animation: flk-in-up 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s backwards; }
.flk-js.flk-boot .flk-hero-photo { animation: flk-in-up 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s backwards; }
.flk-js.flk-boot .flk-hero-name  { animation: flk-in-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s backwards; }
.flk-js.flk-boot .flk-hero-tag1  { animation: flk-in-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.68s backwards; }
.flk-js.flk-boot .flk-hero-tag2  { animation: flk-in-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.74s backwards; }
.flk-js.flk-boot .flk-hero-circle{ animation: flk-in-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.82s backwards; }
.flk-js.flk-boot .flk-line-r     { animation: flk-in-line 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s backwards; transform-origin: right center; }
.flk-js.flk-boot .flk-line-l     { animation: flk-in-line 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s backwards; transform-origin: left center; }

@media (prefers-reduced-motion: reduce) {
	.flk-js.flk-boot .flk-nav,
	.flk-js.flk-boot .flk-big-dj,
	.flk-js.flk-boot .flk-big-pair,
	.flk-js.flk-boot .flk-hero-photo,
	.flk-js.flk-boot .flk-hero-name,
	.flk-js.flk-boot .flk-hero-tag1,
	.flk-js.flk-boot .flk-hero-tag2,
	.flk-js.flk-boot .flk-hero-circle,
	.flk-js.flk-boot .flk-line-r,
	.flk-js.flk-boot .flk-line-l { animation: none; }
}

/* ---- The channel button ------------------------------------------------
   Sits under the mock-up: a red YouTube pill that breathes on its own and
   lifts under the cursor, with a ring pulsing out of it so the eye catches
   it against the dark section. */

.flk-ytb {
	left: calc(var(--u) * 1287);
	top: calc(var(--u) * 872);
	transform: translateX(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--u) * 14);
	padding: calc(var(--u) * 15) calc(var(--u) * 34);
	border-radius: 999px;
	background: linear-gradient(135deg, #ff2d2d 0%, #c30000 100%);
	box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * -14) rgba(255, 45, 45, 0.75);
	color: #fff;
	font-family: var(--flk-brut);
	font-weight: 700;
	font-size: calc(var(--u) * 26);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	animation: flk-ytb-breathe 3.4s ease-in-out infinite;
	transition: box-shadow 0.35s ease;
}
.flk-ytb-play {
	display: flex;
	width: calc(var(--u) * 40);
	color: #fff;
}
.flk-ytb-play svg { width: 100%; height: auto; display: block; }
.flk-ytb-t { position: relative; z-index: 1; }
/* The ring is a copy of the pill's own edge, pushed outwards and faded. */
.flk-ytb-ring {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid rgba(255, 70, 70, 0.85);
	animation: flk-ytb-ring 2.6s ease-out infinite;
	pointer-events: none;
}
.flk-ytb:hover,
.flk-ytb:focus-visible {
	animation-play-state: paused;
	box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 54) calc(var(--u) * -12) rgba(255, 45, 45, 0.95);
}
.flk-ytb:hover .flk-ytb-play { animation: flk-ytb-nudge 0.9s ease-in-out infinite; }

@keyframes flk-ytb-breathe {
	0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
	50%      { transform: translateX(-50%) translateY(-4%) scale(1.035); }
}
@keyframes flk-ytb-ring {
	0%   { opacity: 0.75; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.28); }
}
@keyframes flk-ytb-nudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(-14%); }
}

@media (max-width: 900px) {
	/* In the phone stack it follows the mock-up instead of floating over it. */
	.flk-ytb {
		order: 4;
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		align-self: center;
		margin: calc(var(--g, 1px) * 26) auto 0;
		gap: 10px;
		padding: 13px 26px;
		font-size: 18px;
	}
	.flk-ytb-play { width: 26px; }
	@keyframes flk-ytb-breathe {
		0%, 100% { transform: translateY(0) scale(1); }
		50%      { transform: translateY(-3px) scale(1.03); }
	}

	/* The counters keep to one side of their photograph, and stay small. */
	.flk-stat {
		width: 190px;
		padding: 13px 12px;
		border-radius: 22px;
		animation: flk-stat-float-m 7s ease-in-out infinite;
	}
	.flk-stat1 { justify-self: end; margin-inline-end: 18px; }
	.flk-stat2 { justify-self: start; margin-inline-start: 18px; animation-duration: 8.4s; animation-delay: -2.6s; }
	.flk-stat-num { font-size: 30px; }
	.flk-stat-label { font-size: 16px; }
	.flk-stat-label2 { font-size: 15px; }
	@keyframes flk-stat-float-m {
		0%, 100% { transform: translateY(0) rotate(-0.5deg); }
		50%      { transform: translateY(-9px) rotate(0.5deg); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.flk-ytb,
	.flk-ytb-ring,
	.flk-ytb:hover .flk-ytb-play,
	.flk-stat { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
	/* Still centred under the mock-up once the breathing stops. */
	.flk-ytb { transform: translateX(-50%); }
}

/* A touchscreen has no hover, so the badge that says "this one plays" is
   always on there — smaller, and without the darkening wash. */
@media (hover: none) {
	button.flk-press-c .flk-press-play {
		opacity: 1;
		background: none;
	}
	button.flk-press-c .flk-press-play svg {
		width: 30%;
		max-width: 52px;
		padding: 8%;
		scale: 1;
	}
}

/* ---- The WhatsApp button ----------------------------------------------
   Under the form's own button: a green pill that breathes, with a halo
   going out of it and a shine crossing it now and then, so the eye finds
   the second way to write to Yossi without it shouting over the form. */

.flk-wa {
	position: absolute;
	left: calc(var(--u) * 609);
	top: calc(var(--u) * 573);
	width: calc(var(--u) * 340);
	height: calc(var(--u) * 60);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 12);
	border-radius: calc(var(--u) * 9);
	background: linear-gradient(135deg, #2ee06a 0%, #12a854 100%);
	box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 30) calc(var(--u) * -12) rgba(20, 200, 100, 0.8);
	color: #fff;
	font-family: var(--flk-brut);
	font-weight: 700;
	font-size: calc(var(--u) * 24);
	line-height: 1;
	text-decoration: none;
	overflow: hidden;
	animation: flk-wa-breathe 3.6s ease-in-out infinite;
	transition: box-shadow 0.35s ease, filter 0.35s ease;
}
.flk-wa-ic { display: flex; width: calc(var(--u) * 34); color: #fff; }
.flk-wa-ic svg { width: 100%; height: auto; display: block; }
.flk-wa-t { position: relative; z-index: 2; }
/* The halo is the pill's own edge pushed outwards and faded. */
.flk-wa-halo {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid rgba(60, 240, 140, 0.9);
	animation: flk-wa-halo 2.8s ease-out infinite;
	pointer-events: none;
}
/* The shine sweeps the pill every few seconds, then waits. */
.flk-wa::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
	transform: translateX(-120%);
	animation: flk-wa-shine 4.4s ease-in-out infinite;
	pointer-events: none;
}
.flk-wa:hover,
.flk-wa:focus-visible {
	animation-play-state: paused;
	filter: brightness(1.08);
	box-shadow: 0 calc(var(--u) * 22) calc(var(--u) * 46) calc(var(--u) * -12) rgba(20, 220, 110, 0.95);
}
.flk-wa:hover .flk-wa-ic { animation: flk-wa-wave 0.7s ease-in-out infinite; }

@keyframes flk-wa-breathe {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-2%) scale(1.025); }
}
@keyframes flk-wa-halo {
	0%   { opacity: 0.8; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.22); }
}
@keyframes flk-wa-shine {
	0%, 62%  { transform: translateX(-120%); }
	86%, 100% { transform: translateX(120%); }
}
@keyframes flk-wa-wave {
	0%, 100% { transform: rotate(-9deg); }
	50%      { transform: rotate(9deg); }
}

@media (max-width: 900px) {
	/* In the phone card it simply follows the send button in the column. */
	.flk-wa {
		position: static;
		width: 100%;
		height: calc(var(--f) * 54);
		margin: calc(var(--f) * 4) 0 0;
		border-radius: calc(var(--f) * 12);
		gap: calc(var(--f) * 10);
		font-size: calc(var(--f) * 17);
		box-shadow: 0 calc(var(--f) * 10) calc(var(--f) * 24) rgba(16, 150, 80, 0.5);
	}
	.flk-wa-ic { width: calc(var(--f) * 24); }
}

@media (prefers-reduced-motion: reduce) {
	.flk-wa,
	.flk-wa-halo,
	.flk-wa::after,
	.flk-wa:hover .flk-wa-ic { animation: none; }
	.flk-wa::after { opacity: 0; }
}

/* Mobile: a larger portrait. Anchored to the top of its row and 125% of the
   row's height, so the waist runs under the CTA circle instead of the whole
   figure shrinking to fit. */
@media (max-width: 900px) {
	.flk-hero-photo img {
		top: calc(var(--m) * 6);
		bottom: auto;
		height: 125%;
		max-width: none;
	}
}