/* ==========================================================================
   SuperFX – Projects page
   Figma frame "Projects" = 2560px wide.

   Every measurement is written in design pixels × --sfx-u, where
   --sfx-u = 1/2560 of the viewport width. Result:
     • 2560px screen → identical to Figma (1 design px = 1 px)
     • any other width → same proportions, full width, no fixed sizes
   Tablet / mobile only change the scale (and the number of columns).
   ========================================================================== */

:root {
	--sfx-u: calc(100vw / 2560);
	--sfx-font: "CodecPro", "Codec Pro", system-ui, sans-serif;
	--sfx-white: #ffffff;
	--sfx-black: #000000;
	--sfx-red: #ee363d;     /* Figma variable "Rosso" */
	--sfx-grey: #d9d9d9;
	--sfx-line: max(1px, calc(2 * var(--sfx-u)));
	--sfx-ease: cubic-bezier(.22, .61, .36, 1);

	/* Space between the site header and the "OUR PROJECTS" title.
	   Figma: title top 263px − header/logo 215px = 48px. Adjust if your header differs. */
	--sfx-top: calc(48 * var(--sfx-u));
}

@media (max-width: 1024px) {
	:root { --sfx-u: calc(100vw / 1500); }
}

@media (max-width: 767px) {
	:root { --sfx-u: calc(100vw / 700); }
}

/* --------------------------------------------------------------------------
   0. Reset Elementor defaults inside our blocks
   (container padding / gaps / widget spacing come from this file)
   -------------------------------------------------------------------------- */

:is(.sfx-page, .sfx-card).e-con,
:is(.sfx-page, .sfx-card) .e-con {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-block-start: 0;
	--padding-block-end: 0;
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--gap: 0;
	--row-gap: 0;
	--column-gap: 0;
	--min-height: 0;
	--display: flex;
	--flex-shrink: 0; /* sections never squeeze (cards spilled onto the next row on mobile) */
	min-height: 0;
}

.elementor :is(.sfx-page, .sfx-card) .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

:is(.sfx-page, .sfx-card, .sfx-filter) {
	font-family: var(--sfx-font);
	color: var(--sfx-white);
}

.elementor :is(.sfx-page, .sfx-card) :is(.elementor-heading-title, .elementor-button, .elementor-widget-text-editor) {
	font-family: var(--sfx-font);
	letter-spacing: 0;
	text-transform: none;
}

.sfx-page.e-con {
	overflow-x: clip;
}

/* Projects page sections are simply stacked: normal block layout.
   (Inside a flex column, Chrome/Safari measure a grid of aspect-ratio images
   too short on mobile and the cards spill onto the next row.) */
.sfx-page.e-con,
.sfx-page :is(.sfx-hero, .sfx-featured, .sfx-filterbar, .sfx-rows, .sfx-row).e-con {
	display: block;
}

/* Stacked sections keep their full content height (no flex shrinking) */
:is(.sfx-page, .sfx-sp, .sfx-single) .e-con,
:is(.sfx-page, .sfx-sp, .sfx-single) > .elementor-element,
:is(.sfx-page, .sfx-sp, .sfx-single) .elementor-widget {
	flex-shrink: 0;
	min-height: auto;
	height: auto;
}

/* Elementor gives .elementor-widget-container "height: 100%"; inside our flex
   sections that makes the browser size the widget too short on mobile and the
   cards spill onto the next row. Our widgets size to their content. */
.elementor :is(.sfx-page, .sfx-sp, .sfx-single) .e-con > .elementor-widget > .elementor-widget-container,
.elementor :is(.sfx-page, .sfx-sp, .sfx-single) .e-con > .e-con-inner > .elementor-widget > .elementor-widget-container {
	height: auto;
}

.sfx-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Shared arrow (Figma "arrow_right_white") */
:root {
	--sfx-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 27'%3E%3Cpath d='M1 13.5h26.5M16 1l12.5 12.5L16 26' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   1. Hero – "OUR PROJECTS" (355px Heavy, centered)
   -------------------------------------------------------------------------- */

.sfx-page .sfx-hero.e-con {
	padding: var(--sfx-top) 0 0;
}

.elementor .sfx-hero__title .elementor-heading-title {
	font-size: calc(355 / 2560 * 100vw); /* stays edge-to-edge on every screen */
	font-weight: 900;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sfx-white);
}

/* --------------------------------------------------------------------------
   2. Featured – [superfx_featured]: one post, slider of its own images
   -------------------------------------------------------------------------- */

.sfx-page .sfx-featured.e-con {
	/* title bottom → image: 660 − 263 − 355 = 42px */
	padding: calc(42 * var(--sfx-u)) calc(56.5 * var(--sfx-u)) 0;
}

.sfx-fb {
	font-family: var(--sfx-font);
	color: var(--sfx-white);
}

.sfx-fb__visual {
	position: relative;
}

/* Image 2447×964, radius 30 */
.sfx-fb__media {
	display: block;
	aspect-ratio: 2447 / 964;
	border-radius: calc(30 * var(--sfx-u));
	overflow: hidden;
	background: var(--sfx-grey);
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

.sfx-fb__track {
	display: flex;
	height: 100%;
	transition: transform .8s var(--sfx-ease);
	will-change: transform;
}

.sfx-fb .sfx-fb__slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	user-select: none;
}

/* Dots: 26px, 7px apart, 20px under the image, right aligned */
.sfx-fb__dots {
	position: absolute;
	top: calc(100% + 20 * var(--sfx-u));
	right: calc(25 * var(--sfx-u));
	display: flex;
	gap: calc(7 * var(--sfx-u));
	z-index: 2;
}

.sfx-fb .sfx-fb__dot {
	width: max(10px, calc(26 * var(--sfx-u)));
	height: max(10px, calc(26 * var(--sfx-u)));
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sfx-grey);
	cursor: pointer;
	transition: background-color .3s var(--sfx-ease), transform .3s var(--sfx-ease);
}

.sfx-fb .sfx-fb__dot:hover {
	transform: scale(1.15);
}

.sfx-fb .sfx-fb__dot.is-active {
	background: var(--sfx-red);
}

.sfx-fb .sfx-fb__dot:focus-visible {
	outline: 2px solid var(--sfx-white);
	outline-offset: 2px;
}

/* Each slide is a link to its project */
.sfx-fb .sfx-fb__slide-link {
	flex: 0 0 100%;
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
}

.sfx-fb .sfx-fb__slide-link .sfx-fb__slide {
	display: block;
	background: #222;
}

/* Text of every Featured project in the same place: the active one fades in
   (no height jump – the box is as tall as the longest text). */
.sfx-fb__bodies {
	display: grid;
}

.sfx-fb__bodies > .sfx-fb__body {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(calc(16 * var(--sfx-u)));
	transition: opacity .5s var(--sfx-ease), transform .6s var(--sfx-ease), visibility 0s linear .6s;
}

.sfx-fb__bodies > .sfx-fb__body.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .6s var(--sfx-ease) .15s, transform .7s var(--sfx-ease) .15s, visibility 0s;
}

/* Single project: image slider at the top (Main image + "Featured" box images) */
.sfx-sp .sfx-sp-hero--slider .sfx-fb__media {
	aspect-ratio: 2447 / 1376;
}

.sfx-sp .sfx-sp-hero--slider .sfx-fb__slide {
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

/* Text: image bottom → "FEATURED" 50px · left 29px · right 12px */
.sfx-fb__body {
	padding: calc(50 * var(--sfx-u)) calc(12 * var(--sfx-u)) 0 calc(29 * var(--sfx-u));
}

.sfx-fb .sfx-fb__label {
	display: block;
	font-size: calc(30 * var(--sfx-u));
	font-weight: 900;
	line-height: calc(34 / 30);
	text-transform: uppercase;
}

.sfx-fb .sfx-fb__title {
	margin: calc(8 * var(--sfx-u)) 0 0 calc(-7 * var(--sfx-u));
	padding: 0;
	font-family: var(--sfx-font);
	font-size: calc(80 * var(--sfx-u));
	font-weight: 700;
	line-height: calc(103 / 80);
	letter-spacing: 0;
	text-transform: none;
	color: var(--sfx-white);
}

.sfx-fb__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: calc(40 * var(--sfx-u));
	margin-top: calc(12 * var(--sfx-u));
	min-height: calc(117 * var(--sfx-u)); /* Figma text box ends at 1948 → filter 158px below */
}

.sfx-fb .sfx-fb__excerpt {
	max-width: calc(1114 * var(--sfx-u));
	margin: 0 0 0 calc(-5 * var(--sfx-u));
	font-size: calc(30 * var(--sfx-u));
	font-weight: 400;
	line-height: 1.2;
	color: var(--sfx-white);
}

/* Outline button "VIEW PROJECT →" (300×65, radius 50, stroke 2) */
.sfx-fb .sfx-fb__btn {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(300 * var(--sfx-u));
	height: calc(65 * var(--sfx-u));
	padding: 0 calc(64 * var(--sfx-u)) 0 calc(30 * var(--sfx-u));
	border: var(--sfx-line) solid var(--sfx-white);
	border-radius: calc(50 * var(--sfx-u));
	color: var(--sfx-white);
	font-size: calc(30 * var(--sfx-u));
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .3s var(--sfx-ease);
}

.sfx-fb .sfx-fb__btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(22 * var(--sfx-u));
	width: calc(30 * var(--sfx-u));
	height: calc(27 * var(--sfx-u));
	transform: translateY(-50%);
	background: var(--sfx-arrow) center / contain no-repeat;
	transition: transform .3s var(--sfx-ease);
}

.sfx-fb .sfx-fb__btn:is(:hover, :focus-visible) {
	background: rgba(255, 255, 255, .1);
	color: var(--sfx-white);
}

.sfx-fb .sfx-fb__btn:is(:hover, :focus-visible)::after {
	transform: translate(calc(6 * var(--sfx-u)), -50%);
}

.sfx-fb__debug {
	margin: calc(60 * var(--sfx-u)) 0 0;
	padding: 6px 10px;
	border: 1px dashed rgba(255, 255, 255, .4);
	border-radius: 4px;
	color: rgba(255, 255, 255, .75);
	font: 12px/1.4 system-ui, sans-serif;
}

.sfx-fb__debug a {
	color: inherit;
	text-decoration: underline;
}

.sfx-fb__notice {
	margin: 0;
	padding: 20px;
	border: 1px dashed var(--sfx-grey);
	color: var(--sfx-white);
	font-family: var(--sfx-font);
}

@media (prefers-reduced-motion: reduce) {
	.sfx-fb__track,
	.sfx-fb__bodies > .sfx-fb__body { transition: none; }
}

/* --------------------------------------------------------------------------
   3. Filter bar – [superfx_filter]
   -------------------------------------------------------------------------- */

.sfx-page .sfx-filterbar.e-con {
	/* excerpt box bottom → filter: 158px · filter → first line: 37px */
	padding: calc(158 * var(--sfx-u)) calc(68 * var(--sfx-u)) calc(37 * var(--sfx-u)) calc(86 * var(--sfx-u));
	position: relative;
	z-index: 10; /* dropdown above the grids */
	scroll-margin-top: calc(120 * var(--sfx-u));
}

.sfx-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(42 * var(--sfx-u));
	position: relative;
}

.sfx-filter__form {
	position: relative;
	margin: 0;
}

.sfx-filter button {
	font-family: var(--sfx-font);
	cursor: pointer;
}

/* Button 303×65, radius 50, stroke 2 */
.sfx-filter .sfx-filter__toggle,
.sfx-filter .sfx-filter__close {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(303 * var(--sfx-u));
	height: calc(65 * var(--sfx-u));
	margin: 0;
	padding: 0;
	border: var(--sfx-line) solid var(--sfx-white);
	border-radius: calc(50 * var(--sfx-u));
	background: transparent;
	color: var(--sfx-white);
	font-size: calc(30 * var(--sfx-u));
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color .3s var(--sfx-ease);
}

.sfx-filter .sfx-filter__toggle:is(:hover, :focus-visible) {
	background: rgba(255, 255, 255, .1);
}

.sfx-filter .sfx-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	overflow: visible;
}

.sfx-filter .sfx-icon--filter {
	left: calc(21 * var(--sfx-u));
	width: calc(34 * var(--sfx-u));
	height: calc(21 * var(--sfx-u));
}

.sfx-filter .sfx-icon--close {
	left: calc(24 * var(--sfx-u));
	width: calc(20 * var(--sfx-u));
	height: calc(18 * var(--sfx-u));
}

.sfx-filter .sfx-icon path {
	stroke-width: max(1.5px, calc(3 * var(--sfx-u)));
	vector-effect: non-scaling-stroke;
}

/* Dropdown panel 532×642, white, radius 27 – opens over the button */
.sfx-filter__panel {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	width: max-content;
	min-width: calc(532 * var(--sfx-u));
	padding: calc(97 * var(--sfx-u)) calc(26 * var(--sfx-u)) calc(37 * var(--sfx-u));
	border-radius: calc(27 * var(--sfx-u));
	background: var(--sfx-white);
	color: var(--sfx-black);
	box-shadow: 0 calc(20 * var(--sfx-u)) calc(60 * var(--sfx-u)) rgba(0, 0, 0, .35);
	animation: sfx-panel-in .25s var(--sfx-ease);
}

.sfx-filter__panel[hidden] {
	display: none;
}

@keyframes sfx-panel-in {
	from { opacity: 0; transform: translateY(calc(-8 * var(--sfx-u))); }
	to   { opacity: 1; transform: none; }
}

.sfx-filter .sfx-filter__close {
	position: absolute;
	top: 0;
	left: 0;
	border-color: transparent;
	color: var(--sfx-black);
}

.sfx-filter__group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* Checkbox rows: 40px pitch, box 28×28 radius 7, label at 52px */
.sfx-check {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: calc(24 * var(--sfx-u));
	margin: 0;
	padding: 0;
	cursor: pointer;
	font-size: calc(30 * var(--sfx-u));
	font-weight: 700;
	line-height: calc(40 * var(--sfx-u));
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sfx-black);
}

.sfx-check input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.sfx-check__box {
	flex: 0 0 auto;
	width: calc(28 * var(--sfx-u));
	height: calc(28 * var(--sfx-u));
	border-radius: calc(7 * var(--sfx-u));
	background: var(--sfx-grey);
	transition: background-color .2s var(--sfx-ease);
}

.sfx-check input:checked + .sfx-check__box {
	background: var(--sfx-red);
}

.sfx-check:hover .sfx-check__box {
	background: #c4c4c4;
}

.sfx-check:hover input:checked + .sfx-check__box {
	background: #d82a31;
}

.sfx-check input:focus-visible + .sfx-check__box {
	outline: 2px solid var(--sfx-black);
	outline-offset: 2px;
}

.sfx-filter__apply {
	margin-top: calc(20 * var(--sfx-u));
}

/* Active filter chips (Figma "Projects – Results") */
.sfx-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: calc(42 * var(--sfx-u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfx-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: calc(65 * var(--sfx-u));
	padding: 0 calc(40 * var(--sfx-u)) 0 calc(61 * var(--sfx-u));
	border: var(--sfx-line) solid var(--sfx-white);
	border-radius: calc(50 * var(--sfx-u));
	margin: 0;
	background: transparent;
	color: var(--sfx-white);
	font-size: calc(30 * var(--sfx-u));
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .3s var(--sfx-ease);
}

.sfx-chip:is(:hover, :focus-visible) {
	background: rgba(255, 255, 255, .1);
	color: var(--sfx-white);
}

/* --------------------------------------------------------------------------
   4. Rows: line + label/SHOW ALL + 4-column Loop Grid
   -------------------------------------------------------------------------- */

.sfx-page .sfx-rows.e-con {
	flex-direction: column;
}

.sfx-page .sfx-row__head.e-con > .elementor-widget {
	flex: 0 1 auto;
	width: auto;
	max-width: none;
	margin: 0;
}

.sfx-page .sfx-row.e-con {
	flex-direction: column;
	border-style: solid;
	/* line → label 41px (incl. the 2px line) · cards → next line 117px */
	padding: calc(39 * var(--sfx-u)) 0 calc(117 * var(--sfx-u));
	border-width: var(--sfx-line) 0 0 0;
	border-color: var(--sfx-white);
}

.sfx-page .sfx-row__head.e-con {
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 0 calc(68 * var(--sfx-u)) 0 calc(86 * var(--sfx-u));
}

.elementor :is(.sfx-row__label, .sfx-row__all) .elementor-heading-title {
	font-size: calc(30 * var(--sfx-u));
	font-weight: 900;
	line-height: calc(34 / 30);
	text-transform: uppercase;
	color: var(--sfx-white);
}

.elementor .sfx-row__all .elementor-heading-title a {
	color: inherit;
	transition: color .3s var(--sfx-ease);
}

.elementor .sfx-row__all .elementor-heading-title a:is(:hover, :focus-visible) {
	color: var(--sfx-red);
}

/* Grid: 4 × 588px, gap 41px – Figma offsets: 50px left, 34px right */
.sfx-page .sfx-grid {
	margin-top: calc(34 * var(--sfx-u));
	padding: 0 calc(34 * var(--sfx-u)) 0 calc(50 * var(--sfx-u));
}

.elementor .sfx-grid .elementor-loop-container.elementor-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: calc(41 * var(--sfx-u));
	row-gap: calc(34 * var(--sfx-u));
}

.elementor .sfx-grid .e-loop-nothing-found-message,
.sfx-results__empty {
	color: var(--sfx-white);
	font-family: var(--sfx-font);
	font-size: calc(30 * var(--sfx-u));
}

/* Rows ↔ results switch (body class added by the plugin) */
.sfx-page .sfx-results.e-con {
	display: none;
}

body.sfx-is-filtered .sfx-page .sfx-results.e-con {
	display: block;
}

body.sfx-is-filtered .sfx-page .sfx-rows.e-con {
	display: none;
}

/* Results grid (rendered instantly by JS, no "Filter results" title) */
.sfx-page .sfx-results .sfx-grid {
	margin-top: 0;
}

.sfx-results__empty {
	margin: 0;
	padding: 0 calc(86 * var(--sfx-u));
}

.sfx-results .sfx-card__bg {
	animation: sfx-fade-in .4s var(--sfx-ease);
}

@keyframes sfx-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   5. Project card (588 × 396 image + title, hover = Figma "Component 1 / Variant2")
   Rendered by the plugin ([superfx_projects_row], filter results) with a real <img>;
   the same classes also style the Elementor loop item version.
   -------------------------------------------------------------------------- */

.sfx-item,
.e-loop-item:has(.sfx-card) {
	position: relative;
	z-index: 0;
	min-width: 0;
}

.sfx-item:is(:hover, :focus-within),
.e-loop-item:has(.sfx-card):is(:hover, :focus-within) {
	z-index: 3;
}

.sfx-card {
	display: flex;
	flex-direction: column;
	color: var(--sfx-white);
	text-decoration: none;
}

.sfx-card .sfx-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 588 / 396;
	margin: 0;
	padding: 0;
	overflow: visible;
}

/* Image layer: on hover grows 102px up and 174px down (396 → 672) */
.sfx-card .sfx-card__bg {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: center;
	background-color: var(--sfx-grey);
	background-size: cover !important;      /* Elementor loop item version */
	background-position: center !important;
	background-repeat: no-repeat !important;
	filter: grayscale(1); /* black & white by default, original colours on hover */
	transition: top .5s var(--sfx-ease), height .5s var(--sfx-ease), filter .5s var(--sfx-ease);
}

.sfx-card .sfx-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: calc(33 * var(--sfx-u)) 0 0 calc(7 * var(--sfx-u));
}

.sfx-card .sfx-card__title .elementor-heading-title {
	margin: 0;
	padding: 0;
	font-family: var(--sfx-font);
	font-size: max(15px, calc(30 * var(--sfx-u)));
	font-weight: 900;
	line-height: calc(33 / 30);
	letter-spacing: 0;
	text-transform: none;
	color: var(--sfx-white);
}

/* "VIEW PROJECT" + circle arrow (60×60, stroke 3) */
.sfx-card .sfx-card__cta {
	position: absolute;
	top: calc(92 * var(--sfx-u));
	right: calc(12 * var(--sfx-u));
	margin: 0;
	opacity: 0;
	transform: translateY(calc(12 * var(--sfx-u)));
	transition: opacity .35s var(--sfx-ease), transform .45s var(--sfx-ease);
	pointer-events: none;
}

.sfx-card .sfx-card__cta .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: calc(21 * var(--sfx-u));
	margin: 0;
	font-family: var(--sfx-font);
	font-size: calc(30 * var(--sfx-u));
	font-weight: 900;
	line-height: calc(33 / 30);
	text-transform: uppercase;
	color: var(--sfx-white);
}

.sfx-card .sfx-card__cta .elementor-heading-title::after {
	content: "";
	flex: 0 0 auto;
	box-sizing: border-box;
	width: calc(60 * var(--sfx-u));
	height: calc(60 * var(--sfx-u));
	border: max(1.5px, calc(3 * var(--sfx-u))) solid var(--sfx-white);
	border-radius: 50%;
	background: var(--sfx-arrow) center / calc(30 * var(--sfx-u)) calc(27 * var(--sfx-u)) no-repeat;
}

@media (hover: hover) and (min-width: 1025px) {
	.sfx-card:is(:hover, :focus-visible) .sfx-card__bg {
		top: calc(-102 / 396 * 100%);
		height: calc(672 / 396 * 100%);
		filter: grayscale(0);
	}

	.sfx-card:is(:hover, :focus-visible) .sfx-card__cta {
		opacity: 1;
		transform: none;
	}
}

.sfx-card:focus-visible {
	outline: 2px solid var(--sfx-red);
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   6. Tablet / mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.elementor .sfx-grid .elementor-loop-container.elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: calc(80 * var(--sfx-u));
	}
}

@media (max-width: 767px) {
	.elementor .sfx-grid .elementor-loop-container.elementor-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: calc(70 * var(--sfx-u));
	}

	.sfx-page .sfx-grid {
		padding: 0 calc(30 * var(--sfx-u));
	}

	.sfx-page .sfx-featured.e-con {
		padding-inline: calc(30 * var(--sfx-u));
	}

	.sfx-fb__media {
		aspect-ratio: 16 / 10;
	}

	.sfx-fb__row {
		flex-direction: column;
		align-items: flex-start;
		gap: calc(40 * var(--sfx-u));
		min-height: 0;
	}

	.sfx-fb .sfx-fb__excerpt {
		line-height: 1.25;
	}

	.sfx-page .sfx-filterbar.e-con {
		padding-top: calc(100 * var(--sfx-u));
		padding-left: calc(30 * var(--sfx-u));
	}

	.sfx-page .sfx-row__head.e-con {
		padding: 0 calc(30 * var(--sfx-u));
	}

	.sfx-filter__panel {
		max-width: calc(100vw - 60 * var(--sfx-u));
	}

	.sfx-check {
		line-height: calc(52 * var(--sfx-u)); /* bigger touch rows */
		align-items: center;
	}
}

/* ==========================================================================
   SINGLE PROJECT  (Figma: "Projects – Single project", 2560px)
   Layout template "SuperFX – Project Layout" (inside each project, built in Elementor)
   + Theme Builder template "SuperFX – Single Project" (Post Content + Discover)
   ========================================================================== */

:root {
	/* Space above the date line (under the site header): 280px at 2560 = 10.94% of the width */
	--sfx-top-single: calc(280 * var(--sfx-u));
	/* side gutter on small screens (0 on desktop: every block is narrower than the page) */
	--sfx-gutter: 0px;
}

@media (max-width: 1024px) {
	:root { --sfx-gutter: 20px; }
}

:is(.sfx-sp, .sfx-single, .sfx-discover).e-con,
:is(.sfx-sp, .sfx-single, .sfx-discover) .e-con {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-block-start: 0;
	--padding-block-end: 0;
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--gap: 0;
	--row-gap: 0;
	--column-gap: 0;
	--min-height: 0;
	--display: flex;
	--flex-shrink: 0; /* sections never squeeze (cards spilled onto the next row on mobile) */
}

.elementor :is(.sfx-sp, .sfx-single, .sfx-discover) .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.elementor :is(.sfx-sp, .sfx-discover) :is(.elementor-heading-title, .elementor-widget-text-editor, .elementor-button) {
	font-family: var(--sfx-font);
	letter-spacing: 0;
}

.sfx-sp p,
.sfx-discover p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Project layout
   -------------------------------------------------------------------------- */

.sfx-sp.e-con {
	flex-direction: column;
	align-items: center;
	padding-bottom: calc(284 * var(--sfx-u)); /* gallery → "Discover" */
	color: var(--sfx-white);
	font-family: var(--sfx-font);
	overflow-x: clip;
}

/* Every block is centred and never wider than the screen */
.elementor.elementor .sfx-sp.e-con > .elementor-element,
.elementor.elementor .sfx-sp.e-con > .e-con-inner > .elementor-element {
	max-width: calc(100% - 2 * var(--sfx-gutter));
}

/* Head: back button, date + place, title, intro */
.sfx-sp .sfx-sp-head.e-con {
	position: relative;
	width: 100%;
	max-width: 100%;
	flex-direction: column;
	align-items: center;
	padding: var(--sfx-top-single) var(--sfx-gutter) 0;
	text-align: center;
}

.sfx-sp .sfx-sp-back {
	position: absolute;
	top: calc(var(--sfx-top-single) + 66 * var(--sfx-u));
	left: calc(116 * var(--sfx-u));
	z-index: 2;
	width: auto;
}

.sfx-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: max(36px, calc(60 * var(--sfx-u)));
	height: max(36px, calc(60 * var(--sfx-u)));
	border: max(1.5px, calc(3 * var(--sfx-u))) solid var(--sfx-white);
	border-radius: 50%;
	color: var(--sfx-white);
	transition: background-color .3s var(--sfx-ease);
}

.sfx-back .sfx-icon--arrow {
	width: 50%;
	height: 45%;
	transform: rotate(180deg); /* Figma bt_arrow rotated 180° */
	transition: transform .3s var(--sfx-ease);
}

.sfx-back:is(:hover, :focus-visible) {
	background: rgba(255, 255, 255, .1);
	color: var(--sfx-white);
}

.sfx-back:is(:hover, :focus-visible) .sfx-icon--arrow {
	transform: rotate(180deg) translateX(calc(6 * var(--sfx-u)));
}

.elementor .sfx-sp-meta.elementor-widget-text-editor {
	font-size: max(13px, calc(30 * var(--sfx-u)));
	font-weight: 400;
	line-height: calc(34 / 30);
	color: var(--sfx-white);
}

.elementor .sfx-sp-title .elementor-heading-title {
	max-width: calc(1340 * var(--sfx-u));
	margin: calc(31 * var(--sfx-u)) auto 0;
	font-size: calc(120 * var(--sfx-u));
	font-weight: 700;
	line-height: calc(110 / 120);
	text-align: center;
	color: var(--sfx-white);
}

.elementor.elementor .sfx-sp .sfx-sp-intro.elementor-widget-text-editor {
	max-width: min(calc(998 * var(--sfx-u)), calc(100% - 2 * var(--sfx-gutter)));
	margin-top: calc(19 * var(--sfx-u)); /* Figma title box is 12px shorter than 2 × 110 */
	font-size: max(14px, calc(30 * var(--sfx-u)));
	font-weight: 400;
	line-height: calc(81 / 60); /* Figma text box: 2 lines = 81px */
	color: var(--sfx-white);
}

/* Hero image 2447×1376, radius 30 */
.sfx-sp .sfx-sp-hero {
	width: calc(2447 * var(--sfx-u));
	margin-top: calc(218 * var(--sfx-u));
}

.sfx-sp .sfx-sp-hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2447 / 1376;
	object-fit: cover;
	border-radius: calc(30 * var(--sfx-u));
}

/* Lead text – Light 60 */
.elementor.elementor .sfx-sp .sfx-sp-lead.elementor-widget-text-editor {
	max-width: min(calc(2125 * var(--sfx-u)), calc(100% - 2 * var(--sfx-gutter)));
	margin-top: calc(293 * var(--sfx-u));
	font-size: max(18px, calc(60 * var(--sfx-u)));
	font-weight: 300;
	line-height: calc(67 / 60); /* Figma text box: 3 lines = 201px */
	text-align: center;
	color: var(--sfx-white);
}

/* Video 1107×1107 + round play button (287px, stroke 3) */
.sfx-sp .sfx-sp-video {
	width: calc(1107 * var(--sfx-u));
	margin-top: calc(210 * var(--sfx-u));
}

.sfx-sp .sfx-sp-video .elementor-wrapper {
	aspect-ratio: 1 / 1;
	--video-aspect-ratio: 1;
	overflow: hidden;
	background: #000;
}

.sfx-sp .sfx-sp-video :is(video, iframe) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sfx-sp .sfx-sp-video .elementor-custom-embed-image-overlay {
	background-size: cover;
	background-position: center;
}

.sfx-sp .sfx-sp-video .elementor-custom-embed-play {
	box-sizing: border-box;
	width: calc(287 / 1107 * 100%);
	aspect-ratio: 1;
	height: auto;
	border: max(1.5px, calc(3 * var(--sfx-u))) solid var(--sfx-white);
	border-radius: 50%;
	opacity: 1;
	transition: transform .3s var(--sfx-ease), background-color .3s var(--sfx-ease);
}

.sfx-sp .sfx-sp-video .elementor-custom-embed-play > * {
	display: none; /* Elementor's own icon */
}

.sfx-sp .sfx-sp-video .elementor-custom-embed-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(121 / 287 * 100%);
	height: calc(164 / 287 * 100%);
	background: var(--sfx-white);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transform: translate(-38%, -50%);
}

.sfx-sp .sfx-sp-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play {
	transform: translate(-50%, -50%) scale(1.06);
	background: rgba(255, 255, 255, .1);
}

/* Text – Light 30 */
.elementor.elementor .sfx-sp .sfx-sp-text.elementor-widget-text-editor {
	max-width: min(calc(1461 * var(--sfx-u)), calc(100% - 2 * var(--sfx-gutter)));
	margin-top: calc(206 * var(--sfx-u));
	font-size: max(14px, calc(30 * var(--sfx-u)));
	font-weight: 300;
	line-height: calc(34 / 30); /* Figma text box: 5 lines = 170px */
	text-align: center;
	color: var(--sfx-white);
}

/* Wide image 2301×1221 */
.sfx-sp .sfx-sp-wide {
	width: calc(2301 * var(--sfx-u));
	margin-top: calc(205 * var(--sfx-u));
}

.sfx-sp .sfx-sp-wide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2301 / 1221;
	object-fit: cover;
}

/* Red band: "What made this event SUPER:" + endless "DRONE & LASER SHOW" */
.sfx-sp .sfx-sp-band.e-con {
	width: 100%;
	max-width: 100%;
	height: calc(405 * var(--sfx-u));
	margin-top: calc(199 * var(--sfx-u));
	padding-top: calc(28 * var(--sfx-u));
	flex-direction: column;
	align-items: stretch;
	background: var(--sfx-red);
	overflow: hidden;
}

.elementor .sfx-sp-band__label .elementor-heading-title {
	font-size: max(14px, calc(50 * var(--sfx-u)));
	font-weight: 700;
	line-height: calc(44 / 50);
	text-align: center;
	color: var(--sfx-white);
}

.elementor .sfx-sp-band .sfx-marquee {
	margin-top: calc(23 * var(--sfx-u));
	width: 100%;
	overflow: hidden;
}

.elementor .sfx-marquee .elementor-heading-title {
	display: block;
	font-size: calc(350 * var(--sfx-u));
	font-weight: 900;
	line-height: calc(250 / 350);
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--sfx-black);
}

/* JS turns the heading into an endless track */
.sfx-marquee__track,
.sfx-related__track {
	display: flex;
	width: max-content;
	animation: sfx-loop var(--sfx-loop-duration, 30s) linear infinite;
	will-change: transform;
}

.sfx-marquee__item {
	flex: 0 0 auto;
	padding-right: .35em; /* space between repeats (padding, not gap → seamless loop) */
}

@keyframes sfx-loop {
	to { transform: translate3d(-50%, 0, 0); }
}

/* Gallery 2 × 781×977, gap 57 / 54 (Elementor "Basic Gallery", 2 columns) */
.sfx-sp .sfx-sp-gallery {
	width: calc(1619 * var(--sfx-u));
	margin-top: calc(227 * var(--sfx-u));
}

.sfx-sp .sfx-sp-gallery .gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: calc(57 * var(--sfx-u));
	row-gap: calc(54 * var(--sfx-u));
	margin: 0;
}

.sfx-sp .sfx-sp-gallery .gallery br {
	display: none;
}

.sfx-sp .sfx-sp-gallery .gallery-item {
	width: auto !important; /* WordPress sets an inline width per column */
	max-width: none;
	margin: 0;
	padding: 0;
}

.sfx-sp .sfx-sp-gallery .gallery-icon,
.sfx-sp .sfx-sp-gallery .gallery-icon a {
	display: block;
	overflow: hidden;
}

.sfx-sp .sfx-sp-gallery .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 781 / 977;
	object-fit: cover;
	border: 0 !important;
	transition: transform .6s var(--sfx-ease);
}

.sfx-sp .sfx-sp-gallery .gallery-icon a:hover img {
	transform: scale(1.04);
}

.sfx-sp .sfx-sp-gallery .gallery-caption {
	display: none;
}

/* --------------------------------------------------------------------------
   Discover all our projects (Theme Builder single template)
   -------------------------------------------------------------------------- */

.sfx-single.e-con {
	flex-direction: column;
}

.sfx-single .elementor-widget-theme-post-content {
	width: 100%;
}

.sfx-discover.e-con {
	width: 100%;
	flex-direction: column;
	align-items: center;
	/* section top → title 94px · button → section bottom 164px */
	padding: calc(94 * var(--sfx-u)) 0 calc(164 * var(--sfx-u));
	background: var(--sfx-black);
	overflow: hidden;
}

.elementor .sfx-discover__title .elementor-heading-title {
	font-size: calc(120 * var(--sfx-u));
	font-weight: 900;
	line-height: calc(100 / 120);
	text-align: center;
	text-transform: uppercase;
	color: var(--sfx-white);
}

.sfx-discover .sfx-discover__strip {
	width: 100%;
	margin-top: calc(76 * var(--sfx-u)); /* Figma title box is 14px shorter than 2 × 100 */
}

.sfx-related {
	width: 100%;
	overflow: hidden;
}

.sfx-related:hover .sfx-related__track,
.sfx-related:focus-within .sfx-related__track {
	animation-play-state: paused;
}

/* Cards 677×455, 30px apart */
.sfx-related__item {
	position: relative;
	flex: 0 0 auto;
	width: max(240px, calc(677 * var(--sfx-u)));
	aspect-ratio: 677 / 455;
	margin-right: calc(30 * var(--sfx-u));
	overflow: hidden;
	background: #111;
	color: var(--sfx-white);
	text-decoration: none;
}

/* Fills the card whatever the photo ratio (zoom, no black bands).
   Double class: Elementor's ".elementor img { height: auto }" must not win. */
.sfx-related .sfx-related__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .7s var(--sfx-ease);
}

.sfx-related__title {
	position: absolute;
	inset: auto 0 0;
	padding: calc(60 * var(--sfx-u)) calc(24 * var(--sfx-u)) calc(20 * var(--sfx-u));
	background: linear-gradient(transparent, rgba(0, 0, 0, .75));
	font-family: var(--sfx-font);
	font-size: max(13px, calc(26 * var(--sfx-u)));
	font-weight: 900;
	line-height: 1.1;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .35s var(--sfx-ease), transform .35s var(--sfx-ease);
}

.sfx-related__item:is(:hover, :focus-visible) .sfx-related__img {
	transform: scale(1.05);
}

.sfx-related__item:is(:hover, :focus-visible) .sfx-related__title {
	opacity: 1;
	transform: none;
}

/* SHOW ALL – 279×72, radius 40, stroke 3 */
.sfx-discover .sfx-discover__btn {
	margin-top: calc(81 * var(--sfx-u));
}

.sfx-pill,
.elementor .sfx-discover__btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(279 * var(--sfx-u));
	min-width: 120px;
	height: calc(72 * var(--sfx-u));
	min-height: 40px;
	padding: 0;
	border: max(1.5px, calc(3 * var(--sfx-u))) solid var(--sfx-white);
	border-radius: calc(40 * var(--sfx-u));
	background: transparent;
	color: var(--sfx-white);
	font-family: var(--sfx-font);
	font-size: max(14px, calc(30 * var(--sfx-u)));
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .3s var(--sfx-ease), color .3s var(--sfx-ease);
}

.sfx-pill:is(:hover, :focus-visible),
.elementor .sfx-discover__btn .elementor-button:is(:hover, :focus-visible) {
	background: var(--sfx-white);
	color: var(--sfx-black);
}

/* --------------------------------------------------------------------------
   Single project – small screens & reduced motion
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sfx-sp :is(.sfx-sp-hero, .sfx-sp-video, .sfx-sp-wide, .sfx-sp-gallery) {
		width: 100%;
	}

	.sfx-sp .sfx-sp-gallery .gallery {
		grid-template-columns: minmax(0, 1fr);
	}

	.elementor .sfx-sp-title .elementor-heading-title {
		font-size: 34px;
		line-height: 1.05;
	}

	.elementor.elementor .sfx-sp :is(.sfx-sp-intro, .sfx-sp-text).elementor-widget-text-editor {
		line-height: 1.35;
	}

	.elementor.elementor .sfx-sp .sfx-sp-lead.elementor-widget-text-editor {
		font-size: 22px;
		line-height: 1.25;
	}

	.sfx-sp .sfx-sp-band.e-con {
		height: auto;
		padding-bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sfx-marquee__track,
	.sfx-related__track {
		animation: none;
	}

	.sfx-related {
		overflow-x: auto;
	}
}

/* Admin-only diagnostic line under the filter */
.sfx-filter__debug {
	flex: 1 0 100%;
	margin: 0;
	padding: 6px 10px;
	border: 1px dashed rgba(255, 255, 255, .4);
	border-radius: 4px;
	color: rgba(255, 255, 255, .75);
	font: 12px/1.4 system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Project cards on tablet / mobile – locked layout
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.elementor .sfx-grid .elementor-loop-container.elementor-grid {
		height: auto !important;
		grid-auto-rows: auto;
		align-items: start;
	}

	.elementor .sfx-grid .elementor-loop-container > * {
		position: relative !important;
		inset: auto !important;
		height: auto !important;
		margin: 0 !important;
		transform: none !important;
		grid-column: auto !important;
		grid-row: auto !important;
	}

	.sfx-card .sfx-card__bg {
		position: absolute !important;
		inset: 0 !important;
		height: 100% !important;
		transition: filter .4s var(--sfx-ease);
	}

	.sfx-card .sfx-card__cta {
		display: none;
	}

	.sfx-card:active .sfx-card__bg {
		filter: grayscale(0);
	}
}

/* --------------------------------------------------------------------------
   Single project built from the backend form ([superfx_project])
   – video player without the Elementor video widget
   -------------------------------------------------------------------------- */

.sfx-video {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #000;
}

.sfx-video__cover {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: #000;
	background-size: cover;
	background-position: center;
	cursor: pointer;
}

.sfx-video__cover .elementor-custom-embed-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.sfx-sp .sfx-sp-video .sfx-video__cover:is(:hover, :focus-visible) .elementor-custom-embed-play {
	transform: translate(-50%, -50%) scale(1.06);
	background: rgba(255, 255, 255, .1);
}

.sfx-video__cover:focus-visible {
	outline: 2px solid var(--sfx-red);
	outline-offset: -4px;
}

.sfx-video__player {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	background: #000;
}

/* Images inside the form-built layout */
.sfx-sp--fields .elementor-widget-image img {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Single project – tablet & phone refinements
   -------------------------------------------------------------------------- */

/* Tablet: back arrow above the date, never over the title */
@media (max-width: 1024px) {
	/* Arrow on the same line as the date, aligned with the left edge of the images */
	.sfx-sp .sfx-sp-head.e-con {
		padding-top: max(var(--sfx-top-single), 200px);
	}

	.sfx-sp .sfx-sp-back {
		top: max(var(--sfx-top-single), 200px);
		left: 0;
	}
}

/* Phone: tighter rhythm, smaller band and "Discover" title */
@media (max-width: 767px) {
	/* The site logo ends at ~37% of the width on phones → content starts at 40% */
	.sfx-sp .sfx-sp-head.e-con {
		padding-top: 40%;
	}

	/* Arrow on the date line (40% of the width = 40vw), left edge aligned with the images */
	.sfx-sp .sfx-sp-back {
		top: 40vw;
		left: 0;
	}

	.elementor.elementor .sfx-sp .sfx-sp-intro.elementor-widget-text-editor {
		margin-top: 14px;
	}

	.sfx-sp .sfx-sp-hero {
		margin-top: 32px;
	}

	.elementor.elementor .sfx-sp .sfx-sp-lead.elementor-widget-text-editor,
	.elementor.elementor .sfx-sp .sfx-sp-text.elementor-widget-text-editor,
	.sfx-sp .sfx-sp-video,
	.sfx-sp .sfx-sp-wide,
	.sfx-sp .sfx-sp-gallery {
		margin-top: 48px;
	}

	.sfx-sp .sfx-sp-band.e-con {
		margin-top: 48px;
		padding: 16px 0 10px;
	}

	.elementor .sfx-sp-band__label .elementor-heading-title {
		padding: 0 var(--sfx-gutter);
		font-size: 15px;
		line-height: 1.2;
	}

	.elementor .sfx-sp-band .sfx-marquee {
		margin-top: 6px;
	}

	.elementor .sfx-marquee .elementor-heading-title {
		font-size: 96px;
		line-height: .85;
	}

	.sfx-sp.e-con {
		padding-bottom: 72px;
	}

	.sfx-sp .sfx-sp-gallery .gallery {
		row-gap: 16px;
	}

	.sfx-discover.e-con {
		padding: 48px 0 56px;
	}

	.elementor .sfx-discover__title .elementor-heading-title {
		font-size: 40px;
		line-height: .95;
	}

	.sfx-discover .sfx-discover__strip {
		margin-top: 28px;
	}

	.sfx-discover .sfx-discover__btn {
		margin-top: 32px;
	}
}

/* --------------------------------------------------------------------------
   Header menu: when the popup opens, the 2 white lines become a red X
   (bars rotate ±30°, Figma "Header / Variant2") with "CLOSE MENU" on the left.
   The animated button is placed by JS exactly over the menu icon.
   -------------------------------------------------------------------------- */

.sfx-burger {
	--sfx-bw: 40px;  /* menu icon size, set by JS */
	--sfx-bh: 40px;
	--sfx-bar: max(2.5px, calc(var(--sfx-bw) * .07)); /* same thickness closed and open */
	position: fixed;
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: calc(var(--sfx-bw) * .3);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* The theme styles <button> with a pink/red background on hover/focus – never on this one */
.sfx-burger,
.sfx-burger:hover,
.sfx-burger:focus,
.sfx-burger:active,
.sfx-burger:focus-visible {
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1 !important;
	color: inherit;
}

.sfx-burger__lines {
	position: relative;
	flex: 0 0 auto;
	width: var(--sfx-bw);
	height: var(--sfx-bh);
}

.sfx-burger__lines i {
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--sfx-bar);
	border-radius: 0;
	background: var(--sfx-white);
	transition: top .45s var(--sfx-ease), height .45s var(--sfx-ease), transform .45s var(--sfx-ease) .05s, background-color .3s var(--sfx-ease);
}

/* Closed: two parallel lines (same geometry as the menu icon in the header) */
.sfx-burger__lines i:nth-child(1) { top: calc(50% - var(--sfx-bw) * .104 - var(--sfx-bar) / 2); }
.sfx-burger__lines i:nth-child(2) { top: calc(50% + var(--sfx-bw) * .104 - var(--sfx-bar) / 2); }

/* Open: both lines meet in the middle and rotate into the X */
.sfx-burger.is-open .sfx-burger__lines i {
	top: calc(50% - var(--sfx-bar) / 2);
	background: var(--sfx-red);
}

.sfx-burger.is-open .sfx-burger__lines i:nth-child(1) { transform: rotate(30deg); }
.sfx-burger.is-open .sfx-burger__lines i:nth-child(2) { transform: rotate(-30deg); }

.sfx-burger__label {
	font-family: var(--sfx-font);
	font-size: max(14px, calc(var(--sfx-bw) * .25));
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sfx-red);
	opacity: 0;
	transform: translateX(calc(var(--sfx-bw) * .25));
	transition: opacity .3s var(--sfx-ease), transform .45s var(--sfx-ease);
}

.sfx-burger.is-open .sfx-burger__label {
	opacity: 1;
	transform: none;
	transition-delay: .12s;
}

.sfx-burger:is(:hover, :focus-visible).is-open .sfx-burger__lines i:nth-child(1) { transform: rotate(40deg); }
.sfx-burger:is(:hover, :focus-visible).is-open .sfx-burger__lines i:nth-child(2) { transform: rotate(-40deg); }

.sfx-burger:focus {
	outline: none;
}

.sfx-burger:focus-visible {
	outline: 1px dashed var(--sfx-red);
	outline-offset: 8px;
}

/* Header menu icon: Elementor's thick rounded icon is replaced (by JS) with the same
   two lines as above, so closed and open look like one element */
.elementor-icon .sfx-menu-icon {
	--sfx-bw: 1em;
	--sfx-bar: max(2.5px, .07em);
	position: relative;
	display: block;
	width: 1em;
	height: 1em;
}

.elementor-icon .sfx-menu-icon i {
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--sfx-bar);
	background: currentColor;
	transition: transform .3s var(--sfx-ease);
}

.elementor-icon .sfx-menu-icon i:nth-child(1) { top: calc(50% - .104em - var(--sfx-bar) / 2); }
.elementor-icon .sfx-menu-icon i:nth-child(2) { top: calc(50% + .104em - var(--sfx-bar) / 2); }

.elementor-icon:hover .sfx-menu-icon i:nth-child(1) { transform: translateY(-.04em); }
.elementor-icon:hover .sfx-menu-icon i:nth-child(2) { transform: translateY(.04em); }

/* The original menu icon hides while the X is shown; Elementor's own popup X is hidden */
.sfx-burger-hidden {
	visibility: hidden;
}

.elementor-popup-modal.sfx-has-burger .dialog-close-button {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.sfx-burger__lines i,
	.sfx-burger__label {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Menu popup – hover on ABOUT: the SuperFX icon takes the place of the "O"
   (icon URL added inline by the plugin: Media Library → 2026/10/superfx.svg)
   -------------------------------------------------------------------------- */

/* Tuning (override in Elementor → Site Settings → Custom CSS if needed):
   --sfx-about-size  icon width (≈ the circle of the logo), in em of the menu font
   --sfx-about-y     vertical nudge of the circle centre over the "O" */
.sfx-about {
	--sfx-about-size: .82em;
	--sfx-about-y: 0em;
}

/* Whole word turns red on hover (beats Elementor's widget colour) */
.sfx-about:is(:hover, :focus-within) .elementor-icon-list-text {
	color: var(--sfx-red) !important;
	transition: color .25s var(--sfx-ease);
}

.sfx-o {
	position: relative;
	display: inline-block;
}

/* Icon box: logo width = --sfx-about-size, drawn from the bottom so the
   circle sits on the "O" and the flames rise above the word. */
.sfx-o::after {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(50% + var(--sfx-about-y) - var(--sfx-about-size) * 1.1);
	width: var(--sfx-about-size);
	height: calc(var(--sfx-about-size) * 1.6);
	background: var(--sfx-about-icon) center bottom / contain no-repeat;
	opacity: 0;
	transform: translateX(-50%) scale(.4) rotate(-20deg);
	transform-origin: 50% calc(100% - var(--sfx-about-size) / 2); /* circle centre */
	transition: opacity .25s var(--sfx-ease), transform .45s cubic-bezier(.34, 1.56, .64, 1);
	pointer-events: none;
	z-index: 2;
}

.sfx-about:is(:hover, :focus-within) .sfx-o {
	color: transparent !important;
}

.sfx-about:is(:hover, :focus-within) .sfx-o::after {
	opacity: 1;
	transform: translateX(-50%) scale(1) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
	.sfx-o::after {
		transition: opacity .2s linear;
		transform: translateX(-50%);
	}
}

/* --------------------------------------------------------------------------
   Projects page – "Show all" opens the row in place (all projects of the
   category, other rows hidden), "Show less" closes it
   -------------------------------------------------------------------------- */

.sfx-row__all,
.sfx-row__all a {
	cursor: pointer;
}

body.sfx-is-expanded .sfx-page .sfx-rows .sfx-row:not(.is-expanded) {
	display: none !important;
}

/* Keeps the row title below a fixed/sticky header after the scroll */
.sfx-page .sfx-row {
	scroll-margin-top: var(--sfx-scroll-offset, 120px);
}