.freemodels-filmstrip-slider {
	--film-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	/* Viewport minus the header right above it: 120px on desktop, 90px up to 1024px. */
	--film-height: calc(100svh - 120px);
	position: relative;
	width: 100%;
	white-space: normal;
	height: max(620px, var(--film-height));
	min-height: max(620px, var(--film-height));
	margin: 0;
	overflow: hidden;
	/* Configurable colours (Filmstrip Slider > Colori), also set inline by the template.
	   Defaults are the original dark scheme; every other colour derives from these. */
	--film-bg-center: #303030;
	--film-bg-edge: #050505;
	--film-text: #ffffff;
	--film-button: #ffffff;
	--film-button-bg: #000000;
	--film-shadow: #000000;
	background: var(--film-bg-edge);
	background-image: radial-gradient(ellipse at 50% 54%, var(--film-bg-center) 0%, var(--film-bg-edge) 100%);
	isolation: isolate;
	container-type: size;
	/* Same expression as RADIUS in home-filmstrip-slider.js. */
	--film-radius: min(300px, max(22cqw, min(34cqw, (768px - 100cqw) * 1000)));
	--film-card: clamp(150px, 19vw, 290px);
	/* Legibility floor for the intersection cap below; must not exceed --film-card. */
	--film-card-min: 140px;
}

.freemodels-filmstrip-slider__stage {
	position: relative;
	min-height: inherit;
	overflow: hidden;
}

.freemodels-filmstrip-slider__orbit {
	position: absolute;
	inset: 0;
	perspective: 1200px;
	transform-style: preserve-3d;
	perspective-origin: 50% 50%;
	z-index: 3;
}

.freemodels-filmstrip-slider__tile {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--film-card);
	aspect-ratio: 1.08;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	cursor: grab;
	overflow: visible;
	transform-style: preserve-3d;
	transform: translate(-50%, -50%);
	will-change: transform, opacity;
}

.freemodels-filmstrip-slider__tile-frame {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: clamp(16px, 2.1vw, 34px);
	background: var(--film-bg-edge);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .36);
	overflow: hidden;
	transform-style: preserve-3d;
	backface-visibility: visible;
	will-change: transform, filter;
}

.freemodels-filmstrip-slider__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
}

.freemodels-filmstrip-slider__copy {
	position: relative;
	min-height: inherit;
	z-index: 2;
	pointer-events: none;
}

.freemodels-filmstrip-slider__copy-panel,
.freemodels-filmstrip-slider__description-panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 420ms var(--film-ease-out), transform 420ms var(--film-ease-out);
}

.freemodels-filmstrip-slider__copy-panel.is-active,
.freemodels-filmstrip-slider__description-panel.is-active {
	opacity: 1;
	transform: translateY(0);
}

.freemodels-filmstrip-slider__title {
	position: absolute;
	inset: 0;
	margin: 0;
	color: var(--film-text);
	font-family: 'Raleway', sans-serif;
	font-size: 168px;
	--film-title-top: 18%;
	--film-title-gap: 16px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: .9;
}

.freemodels-filmstrip-slider__title-block {
	position: absolute;
	display: block;
	white-space: nowrap;
}

.freemodels-filmstrip-slider__title-block--first {
	top: var(--film-title-top);
	left: 4%;
}

.freemodels-filmstrip-slider__title-block--second {
	top: calc(var(--film-title-top) + .9em + var(--film-title-gap));
	right: 4%;
	text-align: right;
}

.freemodels-filmstrip-slider__description {
	position: absolute;
	bottom: 64px;
	left: 48px;
	max-width: min(26ch, 28%);
	margin: 0;
	color: var(--film-text);
	font-family: 'Raleway', sans-serif;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1.17;
	/* Tight edge plus a soft halo (refined below): readable over the title and the cards. */
	text-shadow: 0 1px 2px var(--film-shadow);
}

.freemodels-filmstrip-slider__controls {
	position: absolute;
	right: clamp(28px, 5.5vw, 106px);
	bottom: clamp(34px, 8vh, 90px);
	display: flex;
	align-items: center;
	gap: 15px;
	z-index: 4;
}

.freemodels-filmstrip-slider__control {
	display: grid;
	width: 42px;
	height: 42px;
	padding: 0;
	place-items: center;
	border: 1px solid var(--film-button);
	border-radius: 50%;
	background: transparent;
	color: var(--film-button);
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.freemodels-filmstrip-slider__control svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.5;
}

.freemodels-filmstrip-slider__counter {
	min-width: 46px;
	margin: 0;
	/* Themes pad every <p>; the counter must stay centred on the arrows. */
	padding: 0;
	line-height: 1;
	color: var(--film-button);
	font-family: 'Raleway', sans-serif;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: .08em;
	text-align: center;
}

.freemodels-filmstrip-slider__control:focus-visible {
	outline: 2px solid var(--film-button);
	outline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) {
	.freemodels-filmstrip-slider__control:hover { background: var(--film-button); color: var(--film-button-bg); }
	.freemodels-filmstrip-slider__control--previous:hover { transform: translateX(-3px); }
	.freemodels-filmstrip-slider__control--next:hover { transform: translateX(3px); }
}

/* Typography changes only at these viewport breakpoints. */
@media (min-width: 1440px) {
	.freemodels-filmstrip-slider__title { font-size: 260px; }
	.freemodels-filmstrip-slider__description { font-size: 28px; bottom: 72px; left: 64px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.freemodels-filmstrip-slider__title { font-size: 190px; }
	.freemodels-filmstrip-slider__description { font-size: 24px; left: 40px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
	.freemodels-filmstrip-slider { --film-height: calc(100svh - 90px); }
}
@media (min-width: 769px) and (max-width: 1023px) {
	.freemodels-filmstrip-slider__title { font-size: 144px; }
	.freemodels-filmstrip-slider__description { font-size: 22px; left: 32px; }
}

@media (max-width: 768px) {
	/* The slider starts right under the 90px mobile header and svh is the viewport with the
	   browser bars shown: the whole slider, controls included, fits while the address bar is
	   visible. The 480px floor keeps title and caption apart on very short screens. */
	.freemodels-filmstrip-slider { --film-height: calc(100svh - 90px); height: max(480px, var(--film-height)); min-height: max(480px, var(--film-height)); }
	.freemodels-filmstrip-slider { --film-card: clamp(110px, 42vw, 190px); --film-card-min: 100px; }
	.freemodels-filmstrip-slider__title { font-size: 56px; --film-title-top: 22%; --film-title-gap: 12px; }
	.freemodels-filmstrip-slider__title-block--first { left: 6%; }
	.freemodels-filmstrip-slider__title-block--second { right: 6%; }
	/* Mobile: centred secondary text, with the slide controls centred below it. */
	.freemodels-filmstrip-slider__description { bottom: 105px; left: 0; right: 0; max-width: min(29ch, calc(100% - 48px)); margin: 0 auto; font-size: 21px; line-height: 1.24; text-align: center; }
	.freemodels-filmstrip-slider__controls { left: 0; right: 0; bottom: 30px; gap: 11px; justify-content: center; }
	/* Arrows and counter are centred; the motion toggle sits on the right edge. */
	.freemodels-filmstrip-slider__motion-toggle { position: absolute; top: 50%; right: 27px; transform: translateY(-50%); }
	.freemodels-filmstrip-slider__control { width: 38px; height: 38px; }

}

@media (min-width: 480px) and (max-width: 768px) {
	.freemodels-filmstrip-slider__title { font-size: 76px; }
	.freemodels-filmstrip-slider__description { font-size: 24px; }
}
@media (max-width: 359px) {
	.freemodels-filmstrip-slider__title { font-size: 48px; }
	.freemodels-filmstrip-slider__description { max-width: min(27ch, calc(100% - 40px)); font-size: 20px; }
	.freemodels-filmstrip-slider__motion-toggle { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.freemodels-filmstrip-slider__tile,
	.freemodels-filmstrip-slider__tile-frame { animation: none; }
	.freemodels-filmstrip-slider__tile:nth-child(3n + 1) { opacity: .46; transform: translate3d(calc(-50% - 27vw), -8vh, -190px) rotate(15deg) scale(.6); }
	.freemodels-filmstrip-slider__tile:nth-child(3n + 2) { opacity: 1; transform: translate3d(-50%, -2vh, 30px) rotate(-4deg) scale(.94); }
	.freemodels-filmstrip-slider__tile:nth-child(3n) { opacity: .46; transform: translate3d(calc(-50% + 27vw), 11vh, -190px) rotate(-15deg) scale(.6); }
	.freemodels-filmstrip-slider__copy-panel,
	.freemodels-filmstrip-slider__control { transition-duration: 180ms; }
	.freemodels-filmstrip-slider__copy-panel,
	.freemodels-filmstrip-slider__description-panel { transform: none; transition-property: opacity; }
	.freemodels-filmstrip-slider__motion-toggle { display: none; }
	.freemodels-filmstrip-slider__tile-frame { filter: none; }
}

/* Without scripting, keep a composed, still gallery. */
.freemodels-filmstrip-slider:not(.is-animated) .freemodels-filmstrip-slider__tile:nth-child(n + 4) { display: none; }
.freemodels-filmstrip-slider:not(.is-animated) .freemodels-filmstrip-slider__tile:nth-child(1) { transform: translate3d(calc(-50% - 26vw), 18vh, -120px) rotate(-12deg); }
.freemodels-filmstrip-slider:not(.is-animated) .freemodels-filmstrip-slider__tile:nth-child(2) { transform: translate3d(-50%, -50%, 0); }
.freemodels-filmstrip-slider:not(.is-animated) .freemodels-filmstrip-slider__tile:nth-child(3) { transform: translate3d(calc(-50% + 26vw), -32vh, -120px) rotate(12deg); }
.freemodels-filmstrip-slider__motion-toggle { font: inherit; font-size: 22px; }

/* Tiles are non-interactive divs, so no hover or focus states. Keep them neutral against theme styles. */
.freemodels-filmstrip-slider .freemodels-filmstrip-slider__tile {
	background: transparent;
	border: 0;
	box-shadow: none;
	filter: none;
	transition: none;
}
.freemodels-filmstrip-slider .freemodels-filmstrip-slider__image {
	transform: scale(1.04);
	filter: none;
	opacity: 1;
	transition: none;
}
/* Only the mouse drags the helix; touch keeps every default gesture, pinch-zoom included. */
.freemodels-filmstrip-slider.is-animated .freemodels-filmstrip-slider__stage {
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}
.freemodels-filmstrip-slider.is-dragging .freemodels-filmstrip-slider__stage,
.freemodels-filmstrip-slider.is-dragging .freemodels-filmstrip-slider__tile { cursor: grabbing; }
.freemodels-filmstrip-slider__image { -webkit-user-drag: none; }

/* Captions have their own stacking context above the orbit, independent of titles. */
.freemodels-filmstrip-slider__descriptions {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
}
.freemodels-filmstrip-slider__tile-frame { position: relative; }
.freemodels-filmstrip-slider .freemodels-filmstrip-slider__image { position: relative; }

/* A decoded frame covers the image and stays visible while paused; the cover is only the fallback. */
.freemodels-filmstrip-slider__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease;
}
.freemodels-filmstrip-slider__video.is-ready { opacity: 1; }

/* Neighbouring cards on the helix never intersect when either their angular gap leaves room
   (tangent planes meet at r * tan(half step)) or their vertical gap exceeds the card height.
   The step is 720deg / count and the vertical span 170cqh. Only the animated helix is capped;
   without tan() support the plain size applies. 0.95 leaves room for the -4deg tilt.
   --film-card-min keeps cards legible with many media; below it neighbours may touch again. */
@supports (width: calc(1px * tan(45deg))) {
	.freemodels-filmstrip-slider.is-animated .freemodels-filmstrip-slider__tile {
		width: max(var(--film-card-min), min(var(--film-card), max(
			calc(var(--film-radius) * 2 * tan(min(360deg / var(--film-count, 1), 89deg)) * 0.95),
			calc(170cqh / var(--film-count, 1) * 1.08 * 0.95)
		)));
	}
}

/* Shades derived from the configurable colours. Proportions reproduce the original values
   exactly with the defaults (51.2% and 18.6% give the two original intermediate gradient
   stops). Browsers without color-mix() keep the simpler declarations above. */
@supports (color: color-mix(in srgb, red, blue)) {
	.freemodels-filmstrip-slider {
		background-image: radial-gradient(ellipse at 50% 54%,
			var(--film-bg-center) 0%,
			color-mix(in srgb, var(--film-bg-center) 51.2%, var(--film-bg-edge)) 35%,
			color-mix(in srgb, var(--film-bg-center) 18.6%, var(--film-bg-edge)) 68%,
			var(--film-bg-edge) 100%);
	}
	.freemodels-filmstrip-slider__tile-frame { background: color-mix(in srgb, var(--film-bg-edge) 95.2%, var(--film-text)); }
	.freemodels-filmstrip-slider__title { color: color-mix(in srgb, var(--film-text) 96%, transparent); }
	.freemodels-filmstrip-slider__description {
		color: color-mix(in srgb, var(--film-text) 95%, transparent);
		/* text-shadow: 0 1px 2px color-mix(in srgb, var(--film-shadow) 60%, transparent), 0 2px 18px color-mix(in srgb, var(--film-shadow) 55%, transparent); */
		text-shadow: 0 1px 20px color-mix(in srgb, var(--film-shadow) 90%, transparent), 0 2px 40px color-mix(in srgb, var(--film-shadow) 80%, transparent);
	}
	/* A soft veil in the background colour between the cards and the caption: photos passing
	   behind the text fade back, the rest of the helix is untouched. Static, so it costs
	   nothing per frame (no backdrop-filter over the moving cards). */
	.freemodels-filmstrip-slider__description::before {
		content: '';
		position: absolute;
		inset: -44px -36px;
		z-index: -1;
		pointer-events: none;
		background: radial-gradient(closest-side,
			color-mix(in srgb, var(--film-bg-center) 85%, transparent) 0%,
			color-mix(in srgb, var(--film-bg-center) 70%, transparent) 50%,
			transparent 100%);
	}
	.freemodels-filmstrip-slider__control {
		border-color: color-mix(in srgb, var(--film-button) 72%, transparent);
		background: color-mix(in srgb, var(--film-button-bg) 30%, transparent);
	}
	.freemodels-filmstrip-slider__counter { color: color-mix(in srgb, var(--film-button) 95%, transparent); }
	@media (hover: hover) and (pointer: fine) {
		/* Hover swaps the two button colours; the icon keeps a hint of the button colour. */
		.freemodels-filmstrip-slider__control:hover { color: color-mix(in srgb, var(--film-button-bg) 93.3%, var(--film-button)); }
	}
}

/* "Ombra del testo descrittivo: Disattiva" turns off the veil as well. */
.freemodels-filmstrip-slider--no-shadow .freemodels-filmstrip-slider__description { text-shadow: none; }
.freemodels-filmstrip-slider--no-shadow .freemodels-filmstrip-slider__description::before { display: none; }