/*!
 * Innova — Master CSS (consolidato)
 * Generato dal merge di: _foundations + sections + hero-v2 + pages
 * Ordine critico (cascade):
 *   1. FOUNDATIONS — tokens, fonts, header, menu fullscreen
 *   2. SECTIONS — sezioni shared home + page-innova/agency
 *   3. HERO-V2 — cinematic, scoped a body.innova-intro-page
 *   4. PAGES — overrides specifici interne (breadcrumb, pagination, scoped page-*)
 */

/* =========================================================
   [1] FOUNDATIONS
   ========================================================= */
/* ============================================================
   INNOVA — Foundations
   Tokens, fonts, base reset. Disponibili in tutto il sito (:root).
   Source of truth per il design system. Vedi DESIGN-SYSTEM.md
   ============================================================ */

/* ============================================================
   @font-face — Brand fonts Innova (locali, no Google)
   ============================================================ */

/* BECONDER — display proprietario (solo MAIUSCOLO) */
@font-face {
	font-family: 'Beconder';
	src: url('../fonts/BECONDER.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* HOST GROTESK — body, 3 pesi */
@font-face {
	font-family: 'Host Grotesk';
	src: url('../fonts/HostGrotesk-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Host Grotesk';
	src: url('../fonts/HostGrotesk-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Host Grotesk';
	src: url('../fonts/HostGrotesk-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ============================================================
   DESIGN TOKENS — variabili CSS globali
   ============================================================ */
:root {
	/* ---- COLORI brand (skill innova-brand) ---- */
	--innova-yellow:        #F2BF32;
	--innova-black:         #121212;
	--innova-white:         #FFFFFF;

	/* Varianti utility (derivate, usare con parsimonia) */
	--innova-yellow-soft:   rgba(242, 191, 50, 0.15);
	--innova-black-soft:    rgba(18, 18, 18, 0.85);
	--innova-text-muted:    rgba(245, 243, 238, 0.65);  /* su dark */
	--innova-text-muted-d:  rgba(18, 18, 18, 0.65);     /* su light */

	/* ---- TIPOGRAFIA ---- */
	--innova-font-display:  'Beconder', system-ui, sans-serif;       /* solo maiuscolo */
	--innova-font-body:     'Host Grotesk', system-ui, sans-serif;   /* corpo testo */

	/* Scala fluid (clamp min, preferito vw, max) */
	--innova-fs-eyebrow:    0.8125rem;                              /* 13px */
	--innova-fs-body:       1rem;                                    /* 16px */
	--innova-fs-body-lg:    clamp(1.0625rem, 0.9vw + 0.75rem, 1.25rem);
	--innova-fs-h3:         clamp(1.5rem, 2vw + 0.75rem, 2.5rem);
	--innova-fs-h2:         clamp(2rem, 5vw, 4rem);
	--innova-fs-h1:         clamp(2.5rem, 8vw, 7.5rem);
	--innova-fs-display:    clamp(3.5rem, 9vw, 9rem);

	--innova-lh-tight:      1.05;
	--innova-lh-normal:     1.5;
	--innova-lh-loose:      1.65;

	/* Letter spacing */
	--innova-ls-display:    -0.035em;
	--innova-ls-title:      0.03em;        /* h1 / h2 — più arioso (era -0.025em) */
	--innova-ls-tracked:    0.14em;        /* eyebrow */

	/* ---- SPACING (scala fluid) ---- */
	--innova-space-xs:      clamp(0.25rem, 0.5vw, 0.5rem);
	--innova-space-sm:      clamp(0.5rem, 1vw, 1rem);
	--innova-space-md:      clamp(1rem, 2vw, 1.5rem);
	--innova-space-lg:      clamp(1.5rem, 3vw, 2.5rem);
	--innova-space-xl:      clamp(2.5rem, 5vw, 4rem);
	--innova-space-2xl:     clamp(4rem, 10vh, 8rem);
	--innova-space-3xl:     clamp(6rem, 14vh, 12rem);

	--innova-section-py:    var(--innova-space-3xl);   /* padding-block sezioni */
	--innova-section-px:    clamp(1.5rem, 5vw, 4rem);  /* padding-inline sezioni */

	/* ---- LAYOUT ---- */
	--innova-container:     1240px;       /* max-width default */
	--innova-container-lg:  1440px;       /* max-width esteso (footer, pinned showcase) */
	--innova-radius-sm:     8px;
	--innova-radius-md:     14px;
	--innova-radius-lg:     22px;
	--innova-radius-pill:   100px;

	/* ---- ANIMATION easing ---- */
	--innova-ease-out:      cubic-bezier(0.2, 0.85, 0.2, 1);   /* swift exit */
	--innova-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);      /* standard */
	--innova-ease-elastic:  cubic-bezier(0.16, 1, 0.3, 1);     /* counter, soft bounce */

	/* Durations */
	--innova-dur-fast:      150ms;
	--innova-dur-normal:    280ms;
	--innova-dur-slow:      480ms;
	--innova-dur-page:      800ms;
}

/* ============================================================
   SAFETY GUARDS — html/body per sticky + scroll-driven
   Molti plugin (Elementor, animation-addons) iniettano overflow/transform
   sull'html/body che KILLA position: sticky.
   ============================================================ */
html:has(body.innova-home-v2-active),
body.innova-home-v2-active {
	overflow-x: clip !important;
	overflow-y: visible !important;
	transform: none !important;
}

/* Stesso guard per le PAGINE INTERNE (.innova-page): il tema padre imposta
   body,html{overflow-x:hidden} → crea uno scroll-container che KILLA
   position:sticky (es. sezione Processo/METODO Horizontal Pinned). `clip`
   previene lo scroll orizzontale SENZA creare scroll-container → sticky vivo. */
html:has(body.innova-page),
body.innova-page {
	overflow-x: clip !important;
	overflow-y: visible !important;
	transform: none !important;
}

/* ============================================================
   BREAKPOINTS — convenzione (per riferimento, CSS media queries inline)
   --innova-bp-sm:  640px   ← tablet small (2-col grid)
   --innova-bp-md:  768px   ← tablet (3-col grid, NOVA hide)
   --innova-bp-lg:  900px   ← desktop small (servizi sticky kicks in)
   --innova-bp-xl:  1024px  ← desktop standard (4-col grid)
   --innova-bp-2xl: 1100px  ← desktop wide
   ============================================================ */

/* ============================================================
   SR-ONLY — utility per screen reader only
   ============================================================ */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   HEADER GLOBALE — fixed top, sfondo NERO SOLIDO sempre
   Uniforme su tutto il sito (home + interne).
   Sulla home la "II" appare quando il logo cinematic si docka.
   ============================================================ */
.innova-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 210;                      /* sopra il cinematic stage (10) */
	background: var(--innova-black);
	font-family: var(--innova-font-body);

	/* Auto-hide transition (slide up/down con scroll) */
	transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

/* AUTO-HIDE su scroll giù — classe attivata via JS.
   !important batte l'animation `innova-header-enter` (fill-mode both) che
   altrimenti manterrebbe transform: translateY(0) con priorità animation. */
.innova-header.is-hidden {
	transform: translateY(-100%) !important;
}

/* Menu aperto → header SEMPRE visibile (overrides is-hidden) + sopra al menu (350 > 300)
   così l'hamburger X e il logo header restano cliccabili. */
body.innova-menu-open .innova-header,
body.innova-menu-open .innova-header.is-hidden {
	transform: translateY(0) !important;
	z-index: 350 !important;
}

/* HOME (intro-page): header parte FUORI SCHERMO e scende dopo l'intro.
   IMPORTANTE: transform iniziale gestito DENTRO al keyframe (from), no più
   sulla regola base — altrimenti quando JS rimuove l'animation a fine intro
   il transform torna a translateY(-100%) → header sparisce in alto (BUG). */
body.innova-intro-page .innova-header {
	animation: innova-header-enter 750ms cubic-bezier(0.16, 1, 0.3, 1) 3.5s both;
}
@keyframes innova-header-enter {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* Reduced-motion: nessun delay, nessun slide */
@media (prefers-reduced-motion: legacy-disabled-no-match) {
	body.innova-intro-page .innova-header {
		transform: none !important;
		animation: none !important;
	}
	.innova-header.is-hidden {
		transform: none !important;
	}
}

/* Spacer per evitare che il contenuto vada sotto l'header fixed */
body:not(.innova-intro-page) .innova-header + * {
	margin-top: 0;                     /* le pagine interne hanno già padding-top nel hero */
}

/* (Definizione spostata sotto, sezione HEADER BURGER) */

/* ============================================================
   LOGO HEADER — solo icona "II" gialla (grande, ~56px)
   Il logo intero è dentro al menu fullscreen (.innova-menu-fs__brand)
   ============================================================ */
.innova-header__logo {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	height: 40px;                  /* altezza FISSA del wrap logo */
	color: var(--innova-white);
	text-decoration: none;
	transition: opacity 220ms ease, transform 280ms var(--innova-ease-out);
	z-index: 220;                  /* sopra il menu fullscreen */
}
.innova-header__logo:hover { opacity: 0.85; transform: scale(1.04); }

.innova-header__logo-icon {
	display: inline-flex;
	align-items: center;
	color: var(--innova-yellow);
	transition: opacity 320ms ease, transform 380ms var(--innova-ease-out);
}
.innova-header__logo-icon svg,
.innova-header__logo-svg {
	/* Dimensioni FORZATE con !important per battere stylesheet parent theme.
	   width: auto + height fissa → il viewBox 55.18:50.36 calcola la width
	   in modo automatico (30.7px), NO letterboxing, content fills container. */
	height: 28px !important;
	width: auto !important;
	max-width: none !important;
	max-height: none !important;
	display: block !important;
}

/* HOME (intro-page): l'icona "II" header è SEMPRE visibile dal load
   (no più handoff scroll — il cinematic ora fa zoom-in 3D + fade-out separato). */
body.innova-intro-page .innova-header__logo-icon {
	opacity: 1;
}

/* Menu aperto: l'icona "II" header rimane visibile (il brand mark è stato rimosso) */
body.innova-menu-open .innova-header__logo-icon {
	opacity: 1 !important;
	transform: scale(1);
}

.innova-header__logo-fallback {
	font-family: var(--innova-font-display);
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	letter-spacing: -0.02em;
}

/* ============================================================
   KILL "AI-LOOKING" DOTS — i pallini gialli vicino agli eyebrow
   delle sezioni del sito. Nascosti globalmente (override safe).
   ============================================================ */
.innova-eyebrow__dot,
.innova-eyebrow__dot--dark {
	display: none !important;
}
/* Rimosso il dot → toglie il gap iniziale dell'eyebrow se serve */
.innova-eyebrow {
	padding-left: 0;
}

/* NAV */
.innova-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}
.innova-header__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	align-items: center;
}
.innova-header__link {
	color: var(--innova-white);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 400;
	transition: color 200ms ease;
	position: relative;
}
.innova-header__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1.5px;
	background: var(--innova-yellow);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 280ms var(--innova-ease-out);
}
.innova-header__link:hover {
	color: var(--innova-yellow);
}
.innova-header__link:hover::after {
	transform: scaleX(1);
}

/* CTA */
.innova-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.65rem 1.25rem;
	border: 1px solid rgba(245, 243, 238, 0.3);
	border-radius: var(--innova-radius-pill);
	font-family: var(--innova-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--innova-white);
	text-decoration: none;
	transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease;
	flex-shrink: 0;
}
.innova-header__cta:hover {
	background: var(--innova-yellow);
	color: var(--innova-black);
	border-color: var(--innova-yellow);
}
.innova-header__cta-arrow {
	transition: transform 220ms var(--innova-ease-out);
}
.innova-header__cta:hover .innova-header__cta-arrow {
	transform: translate(2px, -2px);
}

/* MOBILE TOGGLE */
.innova-header__toggle {
	display: none;
	background: transparent;
	border: 1px solid rgba(245, 243, 238, 0.25);
	width: 44px;
	height: 44px;
	border-radius: var(--innova-radius-pill);
	padding: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	flex-shrink: 0;
}
.innova-header__toggle-line {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--innova-white);
	transition: transform 220ms ease;
}
.innova-header__toggle[aria-expanded="true"] .innova-header__toggle-line:first-child {
	transform: translateY(3.5px) rotate(45deg);
}
.innova-header__toggle[aria-expanded="true"] .innova-header__toggle-line:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

/* MOBILE MENU */
.innova-header__mobile {
	border-top: 1px solid rgba(245, 243, 238, 0.08);
}
.innova-header__mobile nav { padding: 1rem clamp(1rem, 3vw, 2.5rem) 2rem; }
.innova-header__mobile ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.5rem;
}
.innova-header__mobile a {
	display: block;
	padding: 0.85rem 0;
	color: var(--innova-white);
	text-decoration: none;
	font-size: 1.125rem;
	border-bottom: 1px solid rgba(245, 243, 238, 0.08);
}
.innova-header__mobile-cta {
	color: var(--innova-yellow) !important;
	font-weight: 500;
}

/* RESPONSIVE — sotto 900px: nav nascosta, mostra toggle */
@media (max-width: 899px) {
	.innova-header__nav,
	.innova-header__cta { display: none; }
	.innova-header__toggle { display: inline-flex; }
}
@media (min-width: 900px) {
	.innova-header__mobile { display: none; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: legacy-disabled-no-match) {
	.innova-header,
	.innova-header__link::after,
	.innova-header__cta,
	.innova-header__cta-arrow {
		transition: none !important;
	}
}

/* ============================================================
   HEADER BURGER — sostituisce nav + cta inline
   Top-right su mobile + desktop, sempre visibile
   ============================================================ */
.innova-header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;       /* allinea verticalmente al CENTER */
	min-height: 80px;          /* altezza fissa → logo + burger sempre allineati */
	padding: 0.75rem clamp(1.25rem, 4vw, 3rem);
	max-width: var(--innova-container-lg);
	margin-inline: auto;
}

/* Logo ha altezza FISSA propria (40px, vedi sezione LOGO HEADER).
   Burger 56×56 — flex center dell'inner garantisce allineamento. */
.innova-header__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.innova-header__burger {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--innova-yellow);
	border: 0;
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0;
	transition: transform 320ms var(--innova-ease-out),
	            background-color 320ms ease;
	z-index: 200;
	flex-shrink: 0;
}
.innova-header__burger:hover {
	transform: scale(1.08);
	background: #ffd14f;
}
.innova-header__burger:focus-visible {
	outline: 2px solid var(--innova-white);
	outline-offset: 3px;
}
.innova-header__burger-line {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--innova-black);
	border-radius: 2px;
	transition: transform 320ms var(--innova-ease-out),
	            opacity 220ms ease;
}

/* Burger → X morphing premium (3 linee → X)
   Animazione coreografata:
     - line 1: slide down + rotate 45°
     - line 2: shrink dal center con fade (sparisce dietro la X)
     - line 3: slide up + rotate -45° (opposta) — incrocia la 1 al centro
   Easing distinto (back-easing) per dare "snap" al morphing. */
.innova-header__burger-line {
	transform-origin: center center;
}
.innova-header__burger[aria-expanded="true"] .innova-header__burger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
	transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1.35);
}
.innova-header__burger[aria-expanded="true"] .innova-header__burger-line:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
	transition: transform 220ms ease, opacity 180ms ease;
}
.innova-header__burger[aria-expanded="true"] .innova-header__burger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
	transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1.35);
}
/* Burger resta giallo con X nera anche a menu aperto — max contrasto brand */

/* ============================================================
   MENU FULLSCREEN — Innova v2 (DEFINITIVA)
   Animazione: clip-path circle expand singola dal hamburger top-right.
   Layout desktop: CTA cards a sx · nav outlined gialla a dx.
   Contatti full-width in basso.
   Hover: nav letter-spacing si allarga + fill yellow reveal.
   ============================================================ */
.innova-menu-fs {
	position: fixed;
	inset: 0;
	z-index: 300;            /* sopra cinematic stage (220) e header normale (210).
	                            Header sale a 350 a menu aperto per restare cliccabile. */
	color: var(--innova-white);
	pointer-events: none;
	visibility: hidden;
	overflow: hidden;
}
.innova-menu-fs.is-open {
	pointer-events: auto;
	visibility: visible;
}

/* Body lock */
body.innova-menu-open {
	overflow: hidden;
}

/* ---- BG NERO: clip-path circle SINGOLA dal hamburger top-right ----
   Apertura: 850ms / Chiusura: 700ms (più veloce, dopo che il contenuto è uscito) */
.innova-menu-fs__bg {
	position: absolute;
	inset: 0;
	background: var(--innova-black);
	z-index: 0;
	clip-path: circle(0% at calc(100% - 2.75rem) 2.75rem);
	transition: clip-path 850ms cubic-bezier(0.77, 0, 0.175, 1);

	/* Texture grain leggera */
	background-image:
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.025) 1px, transparent 0);
	background-size: 36px 36px;
	background-color: var(--innova-black);
}
.innova-menu-fs.is-open .innova-menu-fs__bg {
	clip-path: circle(160% at calc(100% - 2.75rem) 2.75rem);
}
/* Chiusura: il bg si richiude verso il hamburger (più veloce dell'apertura) */
.innova-menu-fs.is-closing .innova-menu-fs__bg {
	transition: clip-path 700ms cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: 450ms;  /* aspetta che il contenuto sia uscito */
	clip-path: circle(0% at calc(100% - 2.75rem) 2.75rem);
}

/* ---- INNER GRID ---- */
.innova-menu-fs__inner {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 1600px;
	margin-inline: auto;
	padding: clamp(6rem, 12vh, 9rem) clamp(2rem, 5vw, 6rem) clamp(2rem, 4vh, 3rem);
	z-index: 1;
	display: grid;
	gap: clamp(2rem, 4vh, 3.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;

	/* MOBILE: nav in alto, contacts in mezzo, CTA in basso (prominent + visibili) */
	grid-template-areas:
		"nav"
		"contacts"
		"cta";
	grid-template-rows: 1fr auto auto;
	align-content: stretch;

	opacity: 0;
	transition: opacity 400ms ease;
}
.innova-menu-fs.is-open .innova-menu-fs__inner {
	opacity: 1;
	transition-delay: 500ms;
}
@media (min-width: 900px) {
	.innova-menu-fs__inner {
		grid-template-areas:
			"cta nav"
			"contacts contacts";
		grid-template-columns: 0.95fr 1.3fr;
		grid-template-rows: 1fr auto;
		align-items: center;
		column-gap: clamp(3rem, 6vw, 6rem);
	}
}

/* Eyebrow brand-style */
.innova-menu-fs__eyebrow {
	display: block;
	font-family: var(--innova-font-display);
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--innova-yellow);
	margin-bottom: 1.25rem;
	opacity: 0.85;
}

/* ============================================================
   COLONNA SX: CTA CARDS (Parliamone + SEO Analyzer)
   - Sfondo trasparente + bordo giallo sottile
   - Hover: bordo si rinforza + chevron trasla + sottile glow
   - NESSUN cambio drastico di colore (sempre leggibile)
   ============================================================ */
.innova-menu-fs__cta-col {
	grid-area: cta;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
}

.innova-menu-fs__cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.5rem 1.75rem;
	border-radius: var(--innova-radius-md);
	background: rgba(242, 191, 50, 0.04);
	border: 1px solid rgba(242, 191, 50, 0.25);
	color: var(--innova-white);
	text-decoration: none;
	overflow: hidden;

	/* Stagger entry */
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 500ms ease,
	            transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
	            background-color 320ms ease,
	            border-color 320ms ease,
	            box-shadow 320ms ease;
}
.innova-menu-fs.is-open .innova-menu-fs__cta {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(700ms + var(--i, 0) * 90ms);
}

/* Hover/focus SAFE: rinforza il bordo, alza l'opacità del fill */
.innova-menu-fs__cta:hover,
.innova-menu-fs__cta:focus-visible {
	background: rgba(242, 191, 50, 0.09);
	border-color: var(--innova-yellow);
	box-shadow: 0 8px 32px -12px rgba(242, 191, 50, 0.35);
	outline: none;
}

/* Body della card (testi) */
.innova-menu-fs__cta-body {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
}
.innova-menu-fs__cta-kicker {
	font-family: var(--innova-font-display);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--innova-yellow);
	opacity: 0.8;
}
.innova-menu-fs__cta-title {
	font-family: var(--innova-font-display);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--innova-white);
	transition: letter-spacing 380ms var(--innova-ease-out),
	            color 280ms ease;
}
.innova-menu-fs__cta-sub {
	font-family: var(--innova-font-body);
	font-size: 0.875rem;
	line-height: 1.45;
	color: rgba(245, 243, 238, 0.6);
}

/* Hover: titolo si allarga di letter-spacing (effetto stretch) */
.innova-menu-fs__cta:hover .innova-menu-fs__cta-title,
.innova-menu-fs__cta:focus-visible .innova-menu-fs__cta-title {
	letter-spacing: 0.12em;
	color: var(--innova-yellow);
}

.innova-menu-fs__cta-arrow {
	font-family: var(--innova-font-body);
	font-size: 1.5rem;
	color: var(--innova-yellow);
	flex-shrink: 0;
	transition: transform 380ms var(--innova-ease-out);
}
.innova-menu-fs__cta:hover .innova-menu-fs__cta-arrow,
.innova-menu-fs__cta:focus-visible .innova-menu-fs__cta-arrow {
	transform: translate(6px, -6px);
}

/* (Brand mark rimosso — il logo "II" header è sempre visibile) */

/* ============================================================
   PULSANTE X (chiudi menu, dentro al fullscreen top-right)
   Appare con fade dopo l'apertura, posizionato sopra l'hamburger.
   ============================================================ */
.innova-menu-fs__close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 5;                    /* sopra inner ma sotto header burger */
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid rgba(242, 191, 50, 0.35);
	color: var(--innova-yellow);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	opacity: 0;
	transform: scale(0.8) rotate(-90deg);
	transition: opacity 400ms ease,
	            transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
	            background-color 280ms ease,
	            border-color 280ms ease,
	            color 280ms ease;
}
.innova-menu-fs.is-open .innova-menu-fs__close {
	opacity: 1;
	transform: scale(1) rotate(0);
	transition-delay: 700ms;
}
.innova-menu-fs__close:hover,
.innova-menu-fs__close:focus-visible {
	background: var(--innova-yellow);
	border-color: var(--innova-yellow);
	color: var(--innova-black);
	outline: none;
	transform: scale(1.05) rotate(90deg);
	transition: background-color 280ms ease,
	            border-color 280ms ease,
	            color 280ms ease,
	            transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.innova-menu-fs__close svg {
	display: block;
}

/* Burger header NON viene più nascosto a menu aperto.
   Le 3 line morphano in X via .innova-header__burger[aria-expanded="true"]
   con animation smooth (vedi sopra). */

/* ============================================================
   COLONNA DX: NAV outlined gialla
   - Default: outline giallo + colore giallo (leggibile sul nero)
   - Hover: fill giallo che sale + letter-spacing che si allarga
   ============================================================ */
.innova-menu-fs__nav {
	grid-area: nav;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.innova-menu-fs__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: clamp(0.4rem, 1.2vh, 1rem);
}
.innova-menu-fs__item {
	overflow: hidden;
	position: relative;
}
.innova-menu-fs__link {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	padding: 0.2rem 0;
	color: var(--innova-yellow);
	text-decoration: none;
	font-family: var(--innova-font-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 7.5vw, 6rem);
	line-height: 0.95;
	text-transform: uppercase;

	/* Stagger entry: salgono da sotto */
	transform: translateY(110%);
	opacity: 0;
	transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 500ms ease;
}
.innova-menu-fs.is-open .innova-menu-fs__link {
	transform: translateY(0);
	opacity: 1;
	transition-delay: calc(650ms + var(--i, 0) * 85ms);
}
.innova-menu-fs__link:focus-visible {
	outline: none;
}

/* Numero superscript a sx (giallo dimmed) */
.innova-menu-fs__link-num {
	font-family: var(--innova-font-display);
	font-size: clamp(0.7rem, 0.95vw, 0.95rem);
	letter-spacing: 0.18em;
	color: var(--innova-yellow);
	opacity: 0.4;
	transform: translateY(-0.7em);
	transition: opacity 280ms ease;
	font-variant-numeric: tabular-nums;
}
.innova-menu-fs__link:hover .innova-menu-fs__link-num,
.innova-menu-fs__link:focus-visible .innova-menu-fs__link-num {
	opacity: 1;
}

/* Testo: OUTLINED giallo default, fill giallo che sale on hover
   + LETTER-SPACING che si allarga (effetto stretch elegante) */
.innova-menu-fs__link-text {
	position: relative;
	display: inline-block;
	color: transparent;
	-webkit-text-stroke: 2px var(--innova-yellow);
	letter-spacing: -0.015em;
	transition: letter-spacing 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
.innova-menu-fs__link-text::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	color: var(--innova-yellow);
	-webkit-text-stroke: 0;
	clip-path: inset(100% 0 0 0);
	transition: clip-path 500ms cubic-bezier(0.77, 0, 0.175, 1);
	pointer-events: none;
	letter-spacing: inherit; /* eredita lo stretch dal parent */
}
.innova-menu-fs__link:hover .innova-menu-fs__link-text,
.innova-menu-fs__link:focus-visible .innova-menu-fs__link-text {
	letter-spacing: 0.04em;
}
.innova-menu-fs__link:hover .innova-menu-fs__link-text::after,
.innova-menu-fs__link:focus-visible .innova-menu-fs__link-text::after {
	clip-path: inset(0 0 0 0);
}

/* ============================================================
   CONTATTI in basso (full-width)
   ============================================================ */
.innova-menu-fs__contacts {
	grid-area: contacts;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(242, 191, 50, 0.18);
}
.innova-menu-fs__contact {
	display: grid;
	gap: 0.2rem;
	color: var(--innova-white);
	text-decoration: none;
	transition: color 280ms ease, transform 320ms var(--innova-ease-out);

	opacity: 0;
	transform: translateY(15px);
}
.innova-menu-fs.is-open .innova-menu-fs__contact {
	opacity: 1;
	transform: translateY(0);
	transition: color 280ms ease,
	            transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 500ms ease;
	transition-delay: calc(1100ms + var(--i, 0) * 70ms);
}
a.innova-menu-fs__contact:hover {
	color: var(--innova-yellow);
	transform: translateY(0) translateX(3px);
}
.innova-menu-fs__contact-label {
	font-family: var(--innova-font-display);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--innova-yellow);
	opacity: 0.7;
}
.innova-menu-fs__contact-value {
	font-family: var(--innova-font-body);
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
}

/* ============================================================
   ANIMAZIONE DI CHIUSURA (is-closing) — cascade inverso
   Contenuto esce prima (link in alto, CTA si abbassano, contatti scendono),
   POI il bg si richiude verso l'hamburger.
   ============================================================ */
/* Inner: fade-out rapido */
.innova-menu-fs.is-closing .innova-menu-fs__inner {
	opacity: 0;
	transition: opacity 320ms ease;
	transition-delay: 180ms;
}

/* Nav links escono verso l'alto (inverso dell'entry) */
.innova-menu-fs.is-closing .innova-menu-fs__link {
	transform: translateY(-110%);
	opacity: 0;
	transition: transform 450ms cubic-bezier(0.77, 0, 0.175, 1),
	            opacity 350ms ease;
	/* Stagger INVERSO: ultimo link esce per primo */
	transition-delay: calc((4 - var(--i, 0)) * 40ms);
}

/* CTA cards: scendono verso il basso (esce verso direzione opposta all'entry) */
.innova-menu-fs.is-closing .innova-menu-fs__cta {
	transform: translateY(40px);
	opacity: 0;
	transition: transform 400ms cubic-bezier(0.77, 0, 0.175, 1),
	            opacity 350ms ease;
	transition-delay: calc((1 - var(--i, 0)) * 50ms);
}

/* Contatti footer: sliding-down */
.innova-menu-fs.is-closing .innova-menu-fs__contact {
	transform: translateY(20px);
	opacity: 0;
	transition: transform 350ms ease,
	            opacity 300ms ease;
	transition-delay: 0s;
}

/* Pulsante X scompare per primo */
.innova-menu-fs.is-closing .innova-menu-fs__close {
	opacity: 0;
	transform: scale(0.8) rotate(90deg);
	transition: opacity 250ms ease,
	            transform 350ms cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: 0s;
}

/* ---- prefers-reduced-motion ---- */
@media (prefers-reduced-motion: legacy-disabled-no-match) {
	.innova-menu-fs__bg,
	.innova-menu-fs__inner,
	.innova-menu-fs__link,
	.innova-menu-fs__link-text,
	.innova-menu-fs__link-text::after,
	.innova-menu-fs__cta,
	.innova-menu-fs__cta-title,
	.innova-menu-fs__cta-arrow,
	.innova-menu-fs__contact,
	.innova-menu-fs__close,
	.innova-header__burger,
	.innova-header__burger-line,
	.innova-header__logo-icon,
	.innova-header__logo-full {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
   MOBILE LAYOUT (<900px)
   - Header sticky top (~80px)
   - NAV in alto (HOME, AGENCY, …)
   - CONTACTS NASCOSTI (sono già nell'header morphing X e si vedono da desktop)
   - CTA cards in basso, stack verticale, width controllata
   ============================================================ */
@media (max-width: 899px) {
	.innova-menu-fs__inner {
		/* Padding-top ridotto → nav inizia più vicino all'header */
		padding: clamp(6.5rem, 12vh, 8rem) clamp(1.25rem, 5vw, 2rem) clamp(1.5rem, 4vh, 2.5rem);
		gap: clamp(1.75rem, 4vh, 2.5rem);
		/* Mobile: nav top + CTA subito sotto (auto auto = ambo content-driven).
		   align-content: start → contenuto ancorato in alto, no più stretch fino in fondo */
		grid-template-areas:
			"nav"
			"cta";
		grid-template-rows: auto auto;
		align-content: start;
	}

	/* NAV — più grande, sx-aligned, ancorato in alto */
	.innova-menu-fs__nav {
		justify-content: flex-start;
	}
	.innova-menu-fs__list {
		gap: 0.4rem;
		text-align: left;
	}
	.innova-menu-fs__link {
		font-size: clamp(2.5rem, 11vw, 4.5rem);
		gap: 0.65rem;
	}
	.innova-menu-fs__link-text {
		-webkit-text-stroke-width: 2px;
	}
	.innova-menu-fs__link-num {
		font-size: 0.875rem;
	}

	/* CONTACTS nascosti su mobile (CTA al loro posto) */
	.innova-menu-fs__contacts {
		display: none;
	}

	/* CTA cards stack verticale — width fissa 370px che si adatta sotto */
	.innova-menu-fs__cta-col {
		gap: 0.75rem;
		width: 100%;
		max-width: 370px;            /* width fissa massima — su iPhone Pro Max sta centrata */
		margin-left: 0;              /* allineato a sinistra come la nav */
	}
	.innova-menu-fs__cta {
		padding: 1rem 1.25rem;
		gap: 0.75rem;
		width: 100%;
		max-width: 100%;             /* riempie la cta-col (max 370px) */
		box-sizing: border-box;
		min-width: 0;
	}
	.innova-menu-fs__cta-body {
		min-width: 0;
		overflow: hidden;
	}
	.innova-menu-fs__cta-kicker {
		font-size: 0.625rem;
	}
	.innova-menu-fs__cta-title {
		font-size: clamp(1.25rem, 5.5vw, 1.625rem);
	}
	.innova-menu-fs__cta-sub {
		font-size: 0.8125rem;
		overflow-wrap: break-word;
	}
	.innova-menu-fs__cta-arrow {
		font-size: 1.25rem;
		flex-shrink: 0;
	}
}

/* MICRO MOBILE (<400px o altezza <650px): più compatto, nascondi cta-sub */
@media (max-width: 399px), (max-height: 649px) {
	.innova-menu-fs__inner {
		padding-top: clamp(5.5rem, 10vh, 7rem);
		gap: 1.25rem;
	}
	.innova-menu-fs__link {
		font-size: clamp(2rem, 10vw, 3.25rem);
	}
	.innova-menu-fs__cta-sub {
		display: none;        /* su micro screens lascia solo titolo + arrow */
	}
	.innova-menu-fs__cta {
		padding: 0.85rem 1.1rem;
	}
}

/* ============================================================
   PAGE BASE — typography & spacing per pagine "interne"
   (page-innova.php template + WP editor content area)
   ============================================================ */
.innova-page {
	font-family: var(--innova-font-body);
	color: var(--innova-black);
	background: var(--innova-white);
}

/* Hero della pagina (titolone + sub) */
.innova-page__hero {
	padding-top: clamp(8rem, 14vh, 12rem);  /* extra top per non finire sotto header sticky */
}
.innova-page__hero .innova-section__title {
	font-family: var(--innova-font-body);
	font-weight: 700;
	font-size: var(--innova-fs-h1);
	line-height: var(--innova-lh-tight);
	letter-spacing: var(--innova-ls-title);
	max-width: 22ch;
	text-wrap: balance;
}

/* Content area: WP editor / Gutenberg / Elementor */
.innova-page__content {
	padding-block: clamp(3rem, 8vh, 6rem);
}
.innova-page__content-inner {
	max-width: 760px;  /* readable line length */
}
.innova-page__content-inner h2 {
	font-family: var(--innova-font-body);
	font-weight: 700;
	font-size: var(--innova-fs-h2);
	line-height: var(--innova-lh-tight);
	letter-spacing: var(--innova-ls-title);
	margin: 2.5rem 0 1rem;
}
.innova-page__content-inner h3 {
	font-family: var(--innova-font-body);
	font-weight: 700;
	font-size: var(--innova-fs-h3);
	line-height: 1.2;
	margin: 2rem 0 0.75rem;
}
.innova-page__content-inner p {
	font-size: var(--innova-fs-body-lg);
	line-height: var(--innova-lh-loose);
	margin: 0 0 1.25rem;
	color: rgba(18, 18, 18, 0.8);
}
.innova-page__content-inner a {
	color: var(--innova-black);
	text-decoration: underline;
	text-decoration-color: var(--innova-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 200ms ease;
}
.innova-page__content-inner a:hover {
	color: var(--innova-yellow);
}
.innova-page__content-inner blockquote {
	margin: 2rem 0;
	padding: 1.5rem 2rem;
	border-left: 3px solid var(--innova-yellow);
	font-style: italic;
	font-size: var(--innova-fs-body-lg);
	color: rgba(18, 18, 18, 0.75);
	background: rgba(242, 191, 50, 0.06);
}
.innova-page__content-inner ul,
.innova-page__content-inner ol {
	margin: 0 0 1.5rem;
	padding-left: 1.5rem;
}
.innova-page__content-inner li {
	font-size: var(--innova-fs-body-lg);
	line-height: var(--innova-lh-loose);
	margin-bottom: 0.5rem;
}
.innova-page__content-inner ul li::marker { color: var(--innova-yellow); }
.innova-page__content-inner ol li::marker {
	color: var(--innova-yellow);
	font-weight: 700;
}
.innova-page__content-inner img {
	max-width: 100%;
	height: auto;
	border-radius: var(--innova-radius-md);
	margin: 2rem 0;
}
.innova-page__content-inner code {
	background: rgba(18, 18, 18, 0.06);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.9em;
}
.innova-page__content-inner pre {
	background: var(--innova-black);
	color: var(--innova-white);
	padding: 1.5rem;
	border-radius: var(--innova-radius-md);
	overflow-x: auto;
	margin: 2rem 0;
	font-size: 0.875rem;
	line-height: 1.6;
}
.innova-page__content-inner pre code {
	background: transparent;
	padding: 0;
	color: inherit;
}
.innova-page__content-inner hr {
	border: 0;
	height: 1px;
	background: rgba(18, 18, 18, 0.1);
	margin: 3rem 0;
}


/* =========================================================
   [2] SECTIONS — shared (home + page-innova + agency)
   ========================================================= */
/* ============================================================
   Innova Home v2 — Sections stylesheet
   Manifesto · Servizi · AI · Lavori · Metodo · Numeri ·
   Testimonial · Team · Magazine · CTA · Footer
   ============================================================
   Foundations (tokens + fonts + safety): _foundations.css
   Design system doc: ../../../../DESIGN-SYSTEM.md
   ============================================================ */

/* Import foundations (relativo a sections.css → stesso folder) */
/* @import _foundations.css RIMOSSO — foundations è gi inline nel master file
   (sezione [1] all'inizio). L'import duplicava il caricamento e causava cascade
   imprevedibile. */

/* ============================================================
   MOBILE GRID SPACING — gap generoso quando le card stack verticali.
   Su mobile (<640px) molti grid collassano a 1 colonna: le card vanno
   una sopra l'altra e serve respiro tra una e l'altra. */
@media (max-width: 639px) {
	.innova-ai__grid,
	.innova-magazine__grid,
	.innova-numeri__grid,
	.innova-cta-final__foot,
	.innova-footer__main {
		gap: 2rem !important;
	}
	.innova-page-agency-v2 .innova-section {
		padding-block: clamp(3rem, 8vh, 5rem);
	}
}

/* TESTIMONIAL — gap extra perché ogni quote ha __mark virgolette che
   sporgono di -0.25rem sopra la card → senza gap sufficiente le virgolette
   della card 2 finiscono dentro/sopra la card 1. Range esteso a <768px
   perché stack a 1 colonna fino a quel punto. */
@media (max-width: 767px) {
	.innova-testimonial__grid {
		gap: 3rem !important;
	}
}

/* ============================================================
   SERVIZI — Stacked Cards (rebuild pulito, namespace .innova-srv)
   Da zero, isolato — nessun residuo da v4/v5/v6.

   - Sezione CREAM (#ECE9DD) per spezzare il flusso black della home
   - 6 card che si IMPILANO allo scroll (position: sticky)
   - SCROLL-DRIVEN SCALE: ogni card si restringe quando la successiva
     la copre → profondità (card nuova sempre più grande della vecchia)
   - Gradient alternato (entrambi partono da #121212)
   - Font brand: Beconder (display) + Host Grotesk (body) — NO serif
   - Pure CSS, zero JS. Fallback no-scroll-timeline: stack senza scale.
   ============================================================ */
.innova-srv {
	--srv-count: 6;       /* n. card */
	--srv-step: 0.04;     /* restringimento per ogni card precedente */
	--srv-peek: 26px;     /* sfalsamento verticale tra card impilate */
	background: #ECE9DD;
	color: var(--innova-black, #0c0c0e);
	padding: clamp(6rem, 10vw, 10rem) 0 clamp(4rem, 7vw, 8rem);
	position: relative;
	overflow: visible; /* sticky richiede antenati non-clipped */
}

/* ── HEADER intro ───────────────────────────────────────── */
.innova-srv__head {
	max-width: 1480px;
	margin: 0 auto clamp(3rem, 6vw, 6rem);
	padding: 0 clamp(1.5rem, 4vw, 4.5rem);
}

.innova-srv__eyebrow {
	font: 500 0.8125rem/1 var(--innova-font-display, 'Beconder', system-ui);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(12, 12, 14, 0.5);
	margin: 0 0 1.5rem;
}

.innova-srv__head-title {
	font: 400 clamp(2.5rem, 6.5vw, 5.5rem) / 0.98 var(--innova-font-display, 'Beconder', system-ui);
	letter-spacing: -0.025em;
	color: var(--innova-black, #0c0c0e);
	margin: 0;
}

.innova-srv__head-title em {
	font-style: italic;
	font-family: var(--innova-font-body, 'Host Grotesk', system-ui);
	font-weight: 400;
	letter-spacing: -0.015em;
}

.innova-srv__head-ghost {
	color: rgba(12, 12, 14, 0.32);
	display: inline-block;
}

/* ── STACK ──────────────────────────────────────────────── */
.innova-srv__stack {
	max-width: 1480px;
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 4.5rem);
	position: relative;
}

/* ── CARD (sticky pin + JS scroll-based scale/depth) ────────
   Lo SCALE / brightness / z-index è gestito da JS (innova-smooth.js,
   funzione initSrvStack): cross-browser, niente animation-timeline.
   Qui solo: pin sticky, offset verticale, gradient, ombra. */
.innova-srv__card {
	position: sticky;
	top: calc(var(--innova-header-h, 88px) + 24px + (var(--i, 0) * var(--srv-peek, 26px)));
	color: #fff;
	border-radius: clamp(22px, 2.4vw, 36px);
	padding: clamp(1.75rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem) clamp(1.75rem, 2.8vw, 2.75rem);
	margin-bottom: 1.75rem;
	min-height: 56vh;
	display: grid;
	grid-auto-rows: max-content;
	align-content: start;     /* contenuto impaccato in alto → CTA subito sotto la desc */
	gap: clamp(1rem, 1.8vw, 1.6rem);
	overflow: hidden;
	transform-origin: 50% 0%;       /* scala verso l'alto: bordo top resta visibile */
	transform: translateZ(0);        /* base; JS sovrascrive con scale */
	backface-visibility: hidden;
	will-change: transform, filter;
	transition: box-shadow 0.4s ease;
	box-shadow: 0 30px 60px -28px rgba(12, 12, 14, 0.5);
	background: #121212;
}

/* Gradient alternato — alternanza percepibile (scura / più chiara) */
.innova-srv__card:nth-child(odd) {
	background: linear-gradient(165deg, #121212 0%, #1e1e26 100%);
}
.innova-srv__card:nth-child(even) {
	background: linear-gradient(165deg, #1e1e25 0%, #34343f 100%);
}

/* SPOTLIGHT GLOW — alone di luce gialla (brand) gestito da JS:
   - all'attivazione della card (.is-glow-active) appare in basso a destra
   - col mouse si sposta sotto il cursore con molla "bloop" (overshoot)
   - scrollando, il raggio (--gr) cresce fino a coprire l'intera card
   Centro = --gx/--gy, raggio = --gr (tutti px, aggiornati da JS). */
.innova-srv__dots {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle var(--gr, 300px) at var(--gx, 82%) var(--gy, 84%),
		rgba(242, 191, 50, 0.20) 0%,
		rgba(242, 191, 50, 0.08) 40%,
		transparent 72%);
	opacity: 0;
	transition: opacity 0.55s ease;
}
.innova-srv__card.is-glow-active .innova-srv__dots {
	opacity: 1;
}

/* GLYPH lettera SVG (giallo brand) — GRANDE, parte integrante della card.
   Lato destro, verticalmente centrata, leggero bleed. Più trasparente. */
.innova-srv__glyph {
	position: absolute;
	top: 50%;
	right: clamp(0.5rem, 2.5vw, 3.5rem);
	transform: translateY(-50%);
	height: clamp(14rem, 34vw, 30rem);   /* più grande (CTA ora a sx) */
	width: auto;
	max-width: 52%;
	object-fit: contain;
	object-position: right center;
	opacity: 0.16;
	pointer-events: none;
	user-select: none;
	z-index: 1;
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.16,1,.3,1);
}
.innova-srv__card:hover .innova-srv__glyph {
	opacity: 0.26;
	transform: translateY(-50%) scale(1.04);
}

/* DRAW: stato attivato dal JS (.is-draw) sui path dell'SVG inline.
   Il contorno si disegna (stroke-dashoffset) e poi si riempie (fill-opacity),
   pilotati dallo scroll. Senza JS i path restano col fill pieno (graceful). */
.innova-srv__glyph.is-draw path {
	fill-opacity: 0;
	stroke: var(--innova-yellow, #F2BF32);
	stroke-width: 2;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;   /* spessore uniforme su tutti i viewBox */
}

/* Contenuto (testo) sopra dots + glyph, confinato alla colonna sinistra
   così la lettera gigante a destra non riduce il contrasto del testo. */
.innova-srv__card > :not(.innova-srv__glyph):not(.innova-srv__dots) {
	position: relative;
	z-index: 2;
}
.innova-srv__top,
.innova-srv__title,
.innova-srv__pills,
.innova-srv__body {
	max-width: 64%;
}

/* ── TOP — numero ───────────────────────────────────────── */
.innova-srv__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.innova-srv__num {
	font: 500 0.8125rem/1 var(--innova-font-display, 'Beconder', system-ui);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--innova-yellow, #F2BF32);
}

/* ── TITLE — strong + ghost ─────────────────────────────── */
.innova-srv__title {
	font: 400 clamp(2.75rem, 7.5vw, 6rem) / 0.92 var(--innova-font-display, 'Beconder', system-ui);
	letter-spacing: -0.028em;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.innova-srv__title-strong { color: #fff; display: block; }
.innova-srv__title-ghost {
	color: rgba(255, 255, 255, 0.32);
	display: block;
	padding-left: 0.4em;
}

/* ── PILLS — sub-services ───────────────────────────────── */
.innova-srv__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	list-style: none;
	margin: 0;
	padding: clamp(1.25rem, 2vw, 2rem) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.innova-srv__pill {
	font: 400 clamp(0.875rem, 0.95vw, 1rem) / 1 var(--innova-font-body, 'Host Grotesk', system-ui);
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: -0.005em;
	white-space: nowrap;
	padding: 0.55rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	transition: border-color 0.3s ease, color 0.3s ease;
}

.innova-srv__pill:hover {
	border-color: rgba(255, 255, 255, 0.32);
	color: #fff;
}

/* ── BODY — sparkle + copy (compatto, non si espande) ──── */
.innova-srv__body {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	max-width: 680px;
	align-self: start;   /* non riempie la riga 1fr → meno spazio verticale */
}

.innova-srv__star {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	color: var(--innova-yellow, #F2BF32);
	display: inline-block;
	margin-top: 0.25em;
	animation: innova-srv-star-spin 18s linear infinite;
}

.innova-srv__star svg { width: 100%; height: 100%; display: block; }

@keyframes innova-srv-star-spin {
	to { transform: rotate(360deg); }
}

.innova-srv__desc {
	font: 400 clamp(1rem, 1.15vw, 1.1875rem) / 1.5 var(--innova-font-body, 'Host Grotesk', system-ui);
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	letter-spacing: -0.005em;
}

/* ── FOOT — CTA pill ────────────────────────────────────── */
.innova-srv__foot {
	display: flex;
	justify-content: flex-start;   /* CTA a SINISTRA, sotto la descrizione */
	align-items: center;
	margin-top: 0.5rem;
}

.innova-srv__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9rem 1.25rem 0.9rem 1.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	text-decoration: none;
	font: 500 0.9375rem/1 var(--innova-font-display, 'Beconder', system-ui);
	letter-spacing: -0.005em;
	transition: background 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(.16,1,.3,1);
}

.innova-srv__cta:hover {
	background: var(--innova-yellow, #F2BF32);
	color: var(--innova-black, #0c0c0e);
	transform: translateX(4px);
}

.innova-srv__cta-arrow { width: 18px; height: 18px; display: inline-block; }
.innova-srv__cta-arrow svg { width: 100%; height: 100%; display: block; }

/* ── MOBILE — stack statico, no sticky, no scale ────────── */
@media (max-width: 900px) {
	.innova-srv {
		padding: 4rem 0 3rem;
	}
	.innova-srv__head {
		margin-bottom: 2.5rem;
	}
	.innova-srv__stack {
		padding: 0 1rem;
	}
	.innova-srv__card {
		position: static !important;
		min-height: auto;
		padding: 2rem 1.5rem;
		border-radius: 22px;
		margin-bottom: 1rem;
		gap: 1.5rem;
		transform: none !important;
		filter: none !important;
		animation: none !important;
	}
	.innova-srv__title {
		font-size: clamp(2.25rem, 11vw, 3rem);
		line-height: 0.95;
	}
	.innova-srv__title-ghost { padding-left: 0; }
	/* contenuti full-width su mobile (no colonna sinistra) */
	.innova-srv__top,
	.innova-srv__title,
	.innova-srv__pills,
	.innova-srv__body { max-width: none; }
	.innova-srv__foot { justify-content: flex-start; }
	/* glyph torna watermark piccolo in alto a destra; dots off (no hover touch) */
	.innova-srv__glyph {
		top: 1.5rem;
		right: 1.5rem;
		transform: none;
		height: clamp(4rem, 14vw, 7rem);
		max-width: 30%;
		opacity: 0.18;
	}
	.innova-srv__card:hover .innova-srv__glyph { transform: none; }
	/* spotlight glow off su mobile (no mouse) */
	.innova-srv__dots { display: none; }
}

/* Reduced motion: niente spin sparkle (resto invariato) */
@media (prefers-reduced-motion: legacy-disabled-no-match) {
	.innova-srv__star { animation: none; }
}

/* ============================================================
   VIEW TRANSITIONS API — Panel Slide Up (SOHub-style)
   - Outgoing page: scala leggera + opacity down (resta dietro)
   - Incoming page: sale dal basso con TOP corners arrotondati
     (36px) che si appiattiscono quando arriva a posto
   - Effetto "pannello dark che si solleva sopra"
   Browser support: Chrome 111+, Edge 111+, Safari 18+.
   Firefox no (in arrivo 2026) → navigation normale come fallback.
   Same-origin only (meta in functions.php).
   ============================================================ */
@view-transition {
	navigation: auto;
}

/* Stacking: incoming page SOPRA outgoing */
::view-transition-old(root) {
	animation: innova-vt-out 520ms cubic-bezier(0.65, 0, 0.35, 1) both;
	z-index: 1;
}
::view-transition-new(root) {
	animation: innova-vt-in 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
	z-index: 2;
}

/* OUT: stays in place ma fades + scala leggera (rimane "dietro") */
@keyframes innova-vt-out {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	100% {
		opacity: 0.35;
		transform: translateY(-6vh) scale(0.94);
	}
}

/* IN: sale dal basso con top rounded che si straighten */
@keyframes innova-vt-in {
	0% {
		transform: translateY(100%);
		clip-path: inset(0 0 0 0 round 40px 40px 0 0);
	}
	55% {
		clip-path: inset(0 0 0 0 round 40px 40px 0 0);
	}
	100% {
		transform: translateY(0);
		clip-path: inset(0 0 0 0 round 0 0 0 0);
	}
}

/* ============================================================
   ARROW SVG (replace emoticon ↗ → ← ↓)
   Tutti gli arrow nelle CTA usano SVG inline + currentColor.
   Size 1em così matcha la dimensione testo del parent. */
.innova-btn__arrow svg,
.innova-srv__cta-arrow svg,
.innova-lavori__cta-arrow svg,
.innova-footer__arrow svg,
.innova-menu-fs__cta-arrow svg,
.innova-arrow-svg svg {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.1em;
	flex-shrink: 0;
}

/* ============================================================
   SERVICE PAGE TEMPLATE — pilot Web Design AI
   Stile editoriale Awwwards-grade. Riusabile per tutte le pagine
   servizio cambiando solo $page_data nel template PHP.
   ============================================================ */

/* ---- HERO gigante ---- */
.innova-service-hero {
	padding-block: clamp(8rem, 18vh, 14rem) clamp(4rem, 10vh, 8rem);
	min-height: 90vh;
	display: flex;
	align-items: center;
}
.innova-service-hero__title {
	font-family: var(--innova-font-display);
	font-size: clamp(3.5rem, 12vw, 11rem);
	line-height: 0.92;
	letter-spacing: -0.025em;
	color: var(--innova-white);
	margin: 1.5rem 0 1.5rem;
	font-weight: 400;
	text-transform: uppercase;
	max-width: 14ch;
}
.innova-service-hero__title em {
	font-style: italic;
	color: var(--innova-yellow);
	font-weight: 400;
	display: inline-block;
	letter-spacing: -0.02em;
}
.innova-service-hero__sub {
	font-family: var(--innova-font-body);
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	line-height: 1.5;
	color: rgba(245, 243, 238, 0.7);
	max-width: 62ch;
	margin: 0 0 2.5rem;
}
.innova-service-hero__sub em {
	font-style: normal;
	color: var(--innova-yellow);
	font-weight: 500;
}
.innova-service-hero__ctas {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* ---- MANIFESTO statement ---- */
.innova-service-manifesto {
	padding-block: clamp(6rem, 12vh, 10rem);
}
.innova-service-manifesto__text {
	font-family: var(--innova-font-display);
	font-size: clamp(2rem, 4vw, 3.5rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--innova-white);
	max-width: 22ch;
	margin: 0;
	font-weight: 400;
	text-wrap: balance;
}
.innova-service-manifesto__text em {
	font-style: italic;
	color: var(--innova-yellow);
}

/* ---- PILLARS grid ---- */
.innova-service-pillars {
	padding-block: clamp(5rem, 10vh, 8rem);
}
.innova-service-pillars__head {
	max-width: 760px;
	margin-bottom: clamp(3rem, 6vh, 5rem);
}
.innova-service-pillars__title {
	font-family: var(--innova-font-display);
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--innova-white);
	margin: 1rem 0 0;
	font-weight: 400;
	text-transform: uppercase;
}
.innova-service-pillars__title em {
	font-style: italic;
	color: var(--innova-yellow);
}
.innova-service-pillars__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1px;
	background: rgba(255, 255, 255, 0.08);     /* divider visivo tra card */
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--innova-radius-md);
	overflow: hidden;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .innova-service-pillars__grid { grid-template-columns: repeat(2, 1fr); } }
.innova-pillar {
	background: var(--innova-black);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	display: grid;
	gap: 1rem;
	transition: background-color 320ms ease;
	position: relative;
}
.innova-pillar:hover {
	background: #1a1a1a;
}
.innova-pillar__num {
	font-family: var(--innova-font-display);
	font-size: 0.875rem;
	letter-spacing: 0.18em;
	color: var(--innova-yellow);
	opacity: 0.7;
}
.innova-pillar__name {
	font-family: var(--innova-font-body);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--innova-white);
	margin: 0;
}
.innova-pillar__desc {
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(245, 243, 238, 0.65);
	margin: 0;
	max-width: 48ch;
}

/* ---- PROCESS (4 step orizzontali) ---- */
.innova-service-process {
	padding-block: clamp(6rem, 12vh, 10rem);
}
.innova-service-process__head {
	max-width: 760px;
	margin-bottom: clamp(3rem, 6vh, 5rem);
}
.innova-service-process .innova-eyebrow {
	color: var(--innova-black);
	opacity: 0.85;
}
.innova-service-process__title {
	font-family: var(--innova-font-display);
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--innova-black);
	margin: 1rem 0;
	font-weight: 400;
	text-transform: uppercase;
}
.innova-service-process__title em {
	font-style: italic;
	color: var(--innova-black);
	font-weight: 700;
}
.innova-service-process__sub {
	font-size: 1.0625rem;
	line-height: 1.55;
	color: rgba(18, 18, 18, 0.78);
	max-width: 56ch;
	margin: 0;
}
.innova-service-process__steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: clamp(2rem, 4vh, 3rem);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.innova-service-process__steps {
		grid-template-columns: repeat(4, 1fr);
		gap: clamp(1.5rem, 3vw, 2.5rem);
		padding-top: 3rem;
		position: relative;
	}
	/* Linea connettore orizzontale (decorativa) */
	.innova-service-process__steps::before {
		content: "";
		position: absolute;
		top: 36px;
		left: 12.5%;
		right: 12.5%;
		height: 2px;
		background: rgba(18, 18, 18, 0.15);
		border-radius: 2px;
	}
}
.innova-process-step {
	display: grid;
	gap: 0.5rem;
	color: var(--innova-black);
	padding-left: clamp(2rem, 4vw, 2.5rem);
	position: relative;
}
@media (min-width: 900px) {
	.innova-process-step {
		padding-left: 0;
		padding-top: 4rem;
	}
}
.innova-process-step::before {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--innova-black);
	border: 2px solid var(--innova-black);
	z-index: 1;
}
@media (max-width: 899px) {
	.innova-process-step::before { left: 8px; top: 0.3rem; }
	.innova-process-step::after  {
		content: ""; position: absolute; left: 14px; top: 1.5rem; bottom: -2rem;
		width: 2px; background: rgba(18, 18, 18, 0.15);
	}
	.innova-process-step:last-child::after { display: none; }
}
@media (min-width: 900px) {
	.innova-process-step::before {
		left: 50%; transform: translateX(-50%); top: 16px;
	}
}
.innova-process-step__num {
	font-family: var(--innova-font-display);
	font-size: clamp(2rem, 3vw, 2.75rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--innova-black);
	margin-bottom: 0.5rem;
	opacity: 0.4;
}
.innova-process-step__name {
	font-family: var(--innova-font-body);
	font-weight: 700;
	font-size: clamp(1.375rem, 1.5vw + 0.75rem, 1.75rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--innova-black);
	margin: 0;
}
.innova-process-step__lead {
	font-family: var(--innova-font-body);
	font-weight: 500;
	font-size: 1rem;
	color: var(--innova-black);
	line-height: 1.35;
	margin: 0;
}
.innova-process-step__desc {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(18, 18, 18, 0.7);
	margin: 0.5rem 0 0;
}

/* ---- FAQ accordion ---- */
.innova-service-faq {
	padding-block: clamp(5rem, 10vh, 8rem);
}
.innova-service-faq__head {
	max-width: 760px;
	margin-bottom: clamp(3rem, 6vh, 5rem);
}
.innova-service-faq__title {
	font-family: var(--innova-font-display);
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--innova-white);
	margin: 1rem 0 0;
	font-weight: 400;
	text-transform: uppercase;
}
.innova-service-faq__title em {
	font-style: italic;
	color: var(--innova-yellow);
}
.innova-service-faq__list {
	max-width: 1000px;
	display: grid;
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.innova-faq-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: background-color 280ms ease;
}
.innova-faq-item:hover {
	background: rgba(255, 255, 255, 0.02);
}
.innova-faq-item__q {
	list-style: none;
	cursor: pointer;
	padding: clamp(1.25rem, 2.5vh, 1.75rem) 0;
	padding-left: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	font-family: var(--innova-font-body);
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	font-weight: 500;
	color: var(--innova-white);
	line-height: 1.35;
	transition: color 220ms ease;
}
.innova-faq-item__q::-webkit-details-marker { display: none; }
.innova-faq-item__q::marker { display: none; }
.innova-faq-item:hover .innova-faq-item__q,
.innova-faq-item[open] .innova-faq-item__q {
	color: var(--innova-yellow);
}
.innova-faq-item__icon {
	display: inline-flex;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	color: var(--innova-yellow);
}
.innova-faq-item__icon svg {
	width: 100%;
	height: 100%;
}
.innova-faq-item__v {
	transform-origin: center;
	transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.innova-faq-item[open] .innova-faq-item__v {
	transform: rotate(90deg);
}
.innova-faq-item__a {
	padding-bottom: clamp(1.25rem, 2.5vh, 1.75rem);
	padding-left: 10px;
	max-width: 80ch;
}
.innova-faq-item__a p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(245, 243, 238, 0.7);
}

/* ============================================================
   BAFFAIT FASE 1 — Scroll Counter + Section Labels
   Pattern editorial-cinematic ispirato a lukebaffait.fr
   - Counter (NN) bottom-left = "frame counter" persistente
   - Labels destra = nome sezione corrente in writing-mode vertical
   Mix-blend-mode difference per visibilità su ogni sfondo.
   ============================================================ */
.innova-scroll-counter {
	position: fixed;
	bottom: 1.5rem;
	left: clamp(1rem, 4vw, 2rem);
	z-index: 100;
	font-family: var(--innova-font-display);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.7);
	pointer-events: none;
	mix-blend-mode: difference;
	font-variant-numeric: tabular-nums;
	user-select: none;
}

.innova-section-labels {
	position: fixed;
	right: clamp(0.75rem, 2.5vw, 1.5rem);
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	writing-mode: vertical-rl;
	font-family: var(--innova-font-display);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	pointer-events: none;
	mix-blend-mode: difference;
	user-select: none;
	opacity: 0;
	transition: opacity 320ms ease;
	white-space: nowrap;
}
.innova-section-labels.is-visible {
	opacity: 1;
}

/* Hide su menu aperto (sotto al menu fullscreen z-index 300) — già coperti, ma
   per evitare flicker quando menu fade-in li nascondiamo esplicitamente. */
body.innova-menu-open .innova-scroll-counter,
body.innova-menu-open .innova-section-labels {
	opacity: 0 !important;
}

/* ============================================================
   SMOOTH CURSOR — freccia con spring physics (Magic UI port vanilla)
   Freccia che segue il mouse con MOLLA (stiffness 400 / damping 45 /
   mass 1), RUOTA verso la direzione del movimento e SCALA leggermente
   con la velocità. Hover su interattivi → scala maggiore.
   Disabilitato su touch device (JS return + CSS hover query).
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
	.innova-smooth-cursor {
		position: fixed;
		top: 0;
		left: 0;
		width: 28px;
		height: 28px;
		pointer-events: none;
		z-index: 100000;   /* sopra TUTTO, anche il menu fullscreen (z 300) */
		transform-origin: center center;
		will-change: transform;
		filter: drop-shadow(0 3px 8px rgba(12, 12, 14, 0.28));
	}
	.innova-smooth-cursor svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* Aree non interattive: cursore nativo nascosto → si vede lo SmoothCursor */
	body {
		cursor: none;
	}
	/* Elementi cliccabili: MANINA nativa (indica che è cliccabile).
	   Il SmoothCursor viene nascosto via JS (.is-hidden) su questi. */
	a, button, [role="button"], summary, label[for],
	.innova-btn, .innova-shimmer-btn, .innova-srv__pill,
	input[type="submit"], input[type="button"], input[type="checkbox"],
	input[type="radio"], select {
		cursor: pointer;
	}
	/* Form testo: caret */
	input[type="text"], input[type="email"], input[type="search"],
	input[type="tel"], input[type="url"], input[type="password"],
	input[type="number"], textarea, [contenteditable="true"] {
		cursor: text;
	}
}

/* SmoothCursor nascosto quando sopra un elemento cliccabile (c'è la manina) */
.innova-smooth-cursor.is-hidden {
	opacity: 0;
}

/* Il cursore resta visibile anche a menu aperto (z-index 100000 sopra il menu) */

/* ============================================================
   PROGRESSIVE BLUR — fascia blur progressivo in fondo viewport
   (port vanilla del componente ProgressiveBlur). Layer multipli
   di backdrop-filter mascherati a fasce sfalsate del 12.5% →
   il blur cresce verso il bordo inferiore. Effetto Apple-style:
   il contenuto si sfuma man mano che scorre fuori dallo schermo.
   I layer (backdrop-filter + mask) sono generati da JS.
   ============================================================ */
.innova-pblur {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 18vh;
	max-height: 200px;
	z-index: 60;
	pointer-events: none;
	transition: opacity 0.4s ease;
	/* transform usato da JS (anchorToScreen) per restare appoggiato al fondo
	   visibile su mobile durante lo scroll → compositing su GPU */
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.innova-pblur__layer {
	position: absolute;
	inset: 0;
}

/* Nascondi a menu aperto (l'overlay del menu copre tutto) */
body.innova-menu-open .innova-pblur {
	opacity: 0;
}

/* Mobile: nascondi del tutto il ProgressiveBlur (perf backdrop-filter
   + viewport dinamica). Visibile solo desktop/tablet ≥769px. */
@media (max-width: 768px) {
	.innova-pblur {
		display: none !important;
	}
}

/* ============================================================
   BAFFAIT FASE 3 — Shatter Particle Burst
   Particles random esplodono dal center di ogni sezione al primo
   entry. Custom props --tx --ty --rot --size --delay setate da JS.
   ============================================================ */
.innova-shatter {
	width: 0;
	height: 0;
}
.innova-shatter__p {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--size, 8px);
	height: var(--size, 8px);
	border-radius: 50%;
	background: var(--innova-yellow);
	pointer-events: none;
	opacity: 0;
	animation: innova-shatter-burst 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms) forwards;
	will-change: transform, opacity;
}
@keyframes innova-shatter-burst {
	0%   { opacity: 1; transform: translate(0, 0) rotate(0) scale(0.3); }
	30%  { opacity: 1; transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) rotate(calc(var(--rot) * 0.5)) scale(1); }
	100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.4); }
}

/* ============================================================
   BAFFAIT FASE 3 — BG animato sulla sezione AI
   Blob giallo radial-gradient che fluttua dietro al content.
   ============================================================ */
.innova-ai {
	position: relative;
	overflow: hidden;
}
.innova-ai::after {
	content: "";
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(circle at 30% 40%, rgba(242, 191, 50, 0.15) 0%, transparent 40%),
		radial-gradient(circle at 70% 60%, rgba(242, 191, 50, 0.10) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
	animation: innova-ai-bg-float 18s ease-in-out infinite alternate;
	filter: blur(40px);
}
.innova-ai > * {
	position: relative;
	z-index: 1;
}
@keyframes innova-ai-bg-float {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(8%, -6%) scale(1.15); }
	100% { transform: translate(-6%, 8%) scale(0.95); }
}

/* ============================================================
   BAFFAIT FASE 1 — Footer giga-wordmark
   "INNOVA" gigante chiusura cinematic in fondo al footer, outlined
   (text-stroke giallo trasparente) per non rubare la scena ma firmare.
   ============================================================ */
.innova-footer__giga {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: clamp(2rem, 5vh, 4rem) 0 0;
	margin-top: clamp(2rem, 4vh, 3rem);
	border-top: 1px solid rgba(242, 191, 50, 0.18);
	line-height: 0.85;
	display: flex;
	justify-content: center;
}
.innova-footer__giga-text {
	font-family: var(--innova-font-display);
	font-size: clamp(5rem, 22vw, 22rem);
	letter-spacing: -0.03em;
	font-weight: 400;
	color: var(--innova-yellow);
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
	user-select: none;
	display: block;
	margin-bottom: -0.15em;
}

/* Mobile: counter più piccolo, labels nascosti (spazio limitato) */
@media (max-width: 767px) {
	.innova-scroll-counter {
		font-size: 0.6875rem;
		bottom: 1rem;
		left: 1rem;
	}
	.innova-section-labels {
		display: none;
	}
}

/* ============================================================
   GLOBAL TYPOGRAPHY OVERRIDES
   h1 / h2 sempre con letter-spacing 0.03em (richiesta brand).
   Vince su qualsiasi regola child theme / Gutenberg / Elementor
   che setti letter-spacing diverso. */
h1, h2,
.innova-section__title,
.innova-page__hero .innova-section__title,
.innova-page__content-inner h2 {
	letter-spacing: 0.03em !important;
}

/* Aliases legacy promossi a :root → disponibili su TUTTE le pagine
   (home, agency-v2, page-innova, single, archive, ecc.). Prima erano scoped
   solo a .innova-intro-page → la home riceveva, le altre cadevano in default. */
:root {
	--innova-pad-y: var(--innova-section-py);
	--innova-pad-x: var(--innova-section-px);
	--innova-max:   var(--innova-container);
	--innova-radius: var(--innova-radius-md);

	/* Cinematic dock target — fallback per viewport desktop ~1920px.
	   JS (innova-smooth.js) sovrascrive con valori esatti runtime per ogni viewport. */
	--dock-x: calc(-50vw + 128px);
	--dock-y: calc(-50vh + 49px);
	--dock-s: 0.268;
}

/* ---------- generic section shell --------------------------- */
.innova-section {
	position: relative;
	padding-block: var(--innova-pad-y);
	padding-inline: var(--innova-pad-x);
	font-family: 'Host Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
	font-feature-settings: 'ss01';
}

.innova-section--dark  { background: var(--innova-black); color: var(--innova-white); }
.innova-section--light { background: var(--innova-white); color: var(--innova-black); }

.innova-section__inner {
	/* FULLWIDTH globale — content si estende fino ai bordi viewport.
	   Padding-inline gestito dalla .innova-section parent (--innova-pad-x). */
	max-width: none;
	margin-inline: 0;
	width: 100%;
}

/* ---------- eyebrow (riusabile) ----------------------------- */
.innova-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(245, 243, 238, 0.6);
}
.innova-eyebrow--dark { color: rgba(18, 18, 18, 0.6); }

.innova-eyebrow__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--innova-yellow);
	box-shadow: 0 0 12px 2px color-mix(in srgb, var(--innova-yellow) 50%, transparent);
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.innova-manifesto__title {
	margin: 0 0 1.5rem;
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.85rem, 4vw + 0.5rem, 4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: none;
	text-wrap: balance;
	max-width: 22ch;
}
.innova-manifesto__title em {
	color: var(--innova-yellow);
	font-style: italic;
	font-weight: 400;
}

.innova-manifesto__sub {
	margin: 0;
	max-width: 56ch;
	font-size: clamp(1.0625rem, 0.9vw + 0.75rem, 1.375rem);
	line-height: 1.55;
	color: rgba(245, 243, 238, 0.72);
}

/* Sottolineatura gialla coerente col payoff del logo intro */
.innova-underline {
	display: block;
	width: clamp(120px, 18vw, 240px);
	height: 3px;
	margin-top: 2.5rem;
	background: var(--innova-yellow);
	transform-origin: left center;
}

/* ============================================================
   PLACEHOLDER SECTIONS
   ============================================================ */
.innova-section--placeholder {
	background: #f7f6f4;
	color: var(--innova-black);
}

.innova-placeholder {
	border: 2px dashed rgba(18, 18, 18, 0.18);
	border-radius: var(--innova-radius);
	padding: clamp(2rem, 5vw, 4rem);
	background: var(--innova-white);
	display: grid;
	gap: 1rem;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.innova-placeholder__tag {
	display: inline-block;
	justify-self: center;
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.4rem 0.85rem;
	border-radius: 100px;
	background: var(--innova-yellow);
	color: var(--innova-black);
}

.innova-placeholder__title {
	margin: 0;
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--innova-black);
}

.innova-placeholder__desc {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(18, 18, 18, 0.62);
	max-width: 56ch;
	margin-inline: auto;
}

/* ============================================================
   CTA FINALE (placeholder yellow)
   ============================================================ */
.innova-section--cta-final {
	background: var(--innova-yellow);
	color: var(--innova-black);
}
.innova-placeholder--cta {
	background: rgba(18, 18, 18, 0.04);
	border-color: rgba(18, 18, 18, 0.25);
}
.innova-placeholder__tag--dark {
	background: var(--innova-black);
	color: var(--innova-yellow);
}
.innova-placeholder__title--dark,
.innova-placeholder__desc--dark {
	color: var(--innova-black);
}

/* ============================================================
   SECTION HEADINGS (riusabili — Testimonial, Team, Magazine)
   ============================================================ */
.innova-section__title {
	margin: 0 0 1rem;
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--innova-black);
	text-wrap: balance;
}
.innova-section__title--light { color: var(--innova-white); }
.innova-section__title em {
	color: var(--innova-yellow);
	font-style: italic;
	font-weight: 400;
}

.innova-section__sub {
	margin: 0 0 3.5rem;
	max-width: 56ch;
	font-size: clamp(1.0625rem, 0.9vw + 0.75rem, 1.25rem);
	line-height: 1.55;
	color: rgba(18, 18, 18, 0.65);
}
.innova-section__sub--light { color: rgba(245, 243, 238, 0.7); }

/* ============================================================
   SECTION AI — sfondo nero con gradient soft + grain
   ============================================================ */
.innova-ai {
	position: relative;
	overflow: hidden;
}

.innova-ai__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(50% 40% at 20% 10%, color-mix(in srgb, var(--innova-yellow) 18%, transparent) 0%, transparent 60%),
		radial-gradient(45% 50% at 90% 80%, rgba(80, 60, 200, 0.18) 0%, transparent 60%);
	filter: blur(60px);
	opacity: 0.7;
}

.innova-ai .innova-section__inner {
	position: relative;
	z-index: 1;
}

.innova-ai__title {
	margin: 0 0 1.75rem;
	font-family: 'Beconder', system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(2.5rem, 8vw, 7.5rem);
	line-height: 0.95;
	letter-spacing: -0.035em;
	color: var(--innova-white);
	text-transform: uppercase;
	/* Su desktop lascia spazio a NOVA in alto-destra */
	padding-right: clamp(0px, 18vw, 240px);
}
@media (max-width: 768px) {
	.innova-ai__title { padding-right: 0; }  /* mobile: NOVA è nascosta */
}
.innova-ai__title em {
	color: var(--innova-yellow);
	font-style: normal;
}

.innova-ai__sub {
	margin: 0 0 2.5rem;
	max-width: 60ch;
	font-size: clamp(1.0625rem, 0.9vw + 0.75rem, 1.375rem);
	line-height: 1.55;
	color: rgba(245, 243, 238, 0.75);
}

.innova-ai__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-bottom: 5rem;
}

/* Grid 4 feature cards: 1 col mobile → 2 col tablet → 4 col desktop */
.innova-ai__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 2rem;                          /* mobile: gap generoso per stack verticale */
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .innova-ai__grid { gap: 1.5rem; grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .innova-ai__grid { gap: 1.25rem; grid-template-columns: repeat(4, 1fr); } }

.innova-feat {
	position: relative;
	padding: 1.75rem 1.5rem;
	border-radius: var(--innova-radius);
	background: rgba(245, 243, 238, 0.04);
	border: 1px solid rgba(245, 243, 238, 0.08);
	height: 100%;
	display: grid;
	gap: 0.75rem;
	align-content: start;
	transition: background-color 280ms ease, border-color 280ms ease;
}
.innova-feat:hover {
	background: rgba(245, 243, 238, 0.08);
	border-color: color-mix(in srgb, var(--innova-yellow) 35%, transparent);
}

.innova-feat__tag {
	font-family: 'Beconder', system-ui, sans-serif;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	color: var(--innova-yellow);
	font-weight: 400;
}

.innova-feat__title {
	margin: 0;
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.25;
	color: var(--innova-white);
	letter-spacing: -0.01em;
}

.innova-feat__desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(245, 243, 238, 0.65);
}

/* ============================================================
   NOVA — mascotte II Companion (CSS-pure, refined)
   2 cubi gialli che orbitano + tilt cursor-follow + parallax scroll
   + aura pulsata + ombra reattiva
   ============================================================ */

/* NOVA è posizionata in alto-destra, accanto al titolo della sezione AI */
.innova-nova {
	position: absolute;
	top: clamp(1.5rem, 3vh, 3rem);
	right: clamp(1.5rem, 4vw, 4rem);
	width: clamp(140px, 16vw, 200px);
	height: clamp(140px, 16vw, 200px);
	z-index: 3;
	pointer-events: auto;     /* riceve pointermove per il cursor follow */
}
@media (max-width: 768px) {
	.innova-nova { display: none; }   /* mobile: nascosta per perf + spazio */
}

/* PLACEHOLDER — perspective + 3D */
.innova-nova__placeholder {
	position: relative;
	width: 100%;
	height: 100%;
	perspective: 900px;
	perspective-origin: 50% 50%;
}

/* AURA — alone giallo dietro che pulsa lento */
.innova-nova__aura {
	position: absolute;
	inset: -20%;
	background: radial-gradient(
		closest-side,
		color-mix(in srgb, var(--innova-yellow) 28%, transparent) 0%,
		transparent 65%
	);
	filter: blur(18px);
	animation: innova-nova-aura 5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes innova-nova-aura {
	0%, 100% { opacity: 0.5; transform: scale(0.9); }
	50%      { opacity: 0.9; transform: scale(1.05); }
}

/* TILT WRAPPER — riceve la rotazione dal cursor (CSS vars dal JS)
   Default: --nova-tilt-x e --nova-tilt-y = 0deg (smooth easing al return) */
.innova-nova__tilt {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateX(var(--nova-tilt-x, 0deg)) rotateY(var(--nova-tilt-y, 0deg));
	transition: transform 460ms cubic-bezier(0.2, 0.85, 0.2, 1);
	will-change: transform;
}

/* SCENE — orbit + float (animazioni di fondo, non confliggono col tilt) */
.innova-nova__scene {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	animation: innova-nova-float 6s ease-in-out infinite;
}
@keyframes innova-nova-float {
	0%, 100% { transform: translateY(0)     rotateX(15deg); }
	50%      { transform: translateY(-14px) rotateX(15deg); }
}

/* 2 LETTERE "I" del logo Innova che orbitano (SVG flat in spazio 3D)
   sistema simmetrico, opposite phase */
.innova-nova__letter {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 84px;
	height: 110px;
	margin: -55px 0 0 -42px;
	transform-style: preserve-3d;
}
.innova-nova__letter img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	/* Drop shadow soft per profondità */
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

.innova-nova__letter--1 { animation: innova-nova-orbit-1 14s linear infinite; }
.innova-nova__letter--2 { animation: innova-nova-orbit-2 14s linear infinite; }

/* Orbit con counter-rotation: ogni "I" gira attorno al centro ma resta
   sempre orientata verso la camera (face the viewer). */
@keyframes innova-nova-orbit-1 {
	from { transform: rotateY(0deg)   translateX(62px) rotateY(0deg);   }
	to   { transform: rotateY(360deg) translateX(62px) rotateY(-360deg); }
}
@keyframes innova-nova-orbit-2 {
	from { transform: rotateY(180deg) translateX(62px) rotateY(-180deg); }
	to   { transform: rotateY(540deg) translateX(62px) rotateY(-540deg); }
}

/* OMBRA morbida — respira coi cubi */
.innova-nova__shadow {
	position: absolute;
	left: 50%;
	bottom: 2%;
	width: 65%;
	height: 16px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center,
		rgba(0, 0, 0, 0.42) 0%,
		transparent 70%);
	filter: blur(8px);
	animation: innova-nova-shadow 6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes innova-nova-shadow {
	0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.7; }
	50%      { transform: translateX(-50%) scale(0.82); opacity: 0.45; }
}

/* ============================================================
   prefers-reduced-motion: fermiamo tutto, mostriamo posizione finale
   ============================================================ */
@media (prefers-reduced-motion: legacy-disabled-no-match) {
	.innova-nova,
	.innova-nova__scene,
	.innova-nova__letter,
	.innova-nova__aura,
	.innova-nova__shadow {
		animation: none !important;
		opacity: 1 !important;
	}
	.innova-nova__scene {
		transform: rotateX(10deg) !important;
	}
	.innova-nova__letter--1 { transform: translateX(-62px); }
	.innova-nova__letter--2 { transform: translateX(62px);  }
	.innova-nova__tilt {
		transition: none !important;
		transform: none !important;
	}
}

/* ============================================================
   Per swap futuro con Spline: il <spline-viewer> riempie il box
   ============================================================ */
.innova-nova spline-viewer {
	width: 100%;
	height: 100%;
	display: block;
}

/* ============================================================
   BUTTONS (condivisi tra AI section e CTA finale)
   ============================================================ */
.innova-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.95rem 1.5rem;
	border-radius: var(--innova-radius);
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
	transition: transform 250ms ease, background-color 250ms ease, color 250ms ease;
	will-change: transform;
	cursor: pointer;
}
.innova-btn:hover { transform: translateY(-2px); }

.innova-btn--primary {
	background: var(--innova-yellow);
	color: var(--innova-black);
}
.innova-btn--primary:hover {
	background: #ffd14f;
}

.innova-btn--ghost {
	background: transparent;
	color: var(--innova-white);
	border: 1px solid rgba(245, 243, 238, 0.3);
}
.innova-btn--ghost:hover {
	border-color: var(--innova-white);
	background: rgba(245, 243, 238, 0.06);
}

.innova-btn--dark {
	background: var(--innova-black);
	color: var(--innova-yellow);
}
.innova-btn--dark:hover {
	background: #2a2a2a;
}

.innova-btn--ghost-dark {
	background: transparent;
	color: var(--innova-black);
	border: 1px solid var(--innova-black);
}
.innova-btn--ghost-dark:hover {
	background: var(--innova-black);
	color: var(--innova-yellow);
}

.innova-btn__arrow {
	transition: transform 250ms ease;
	display: inline-block;
}
.innova-btn:hover .innova-btn__arrow {
	transform: translateX(4px);
}

.innova-btn__icon {
	font-size: 1.05em;
	line-height: 1;
}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
/* SLIDER MARQUEE — recensioni che scorrono in loop, pausa su hover */
.innova-testimonial__marquee {
	position: relative;
	overflow-x: clip;        /* clip → taglia solo in orizzontale (no nome tagliato sotto) */
	padding-block: 0.5rem;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.innova-testimonial__track {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	display: flex;
	align-items: flex-start;  /* card all'altezza del contenuto (no height 100%) */
	gap: clamp(1rem, 2vw, 1.75rem);
	width: max-content;
	animation: innova-testimonial-scroll 48s linear infinite;
}
.innova-testimonial__marquee:hover .innova-testimonial__track {
	animation-play-state: paused;
}
@keyframes innova-testimonial-scroll {
	to { transform: translateX(-50%); }   /* card duplicate → loop seamless */
}
.innova-testimonial__item {
	flex: 0 0 clamp(300px, 32vw, 420px);
}
@media (prefers-reduced-motion: legacy-disabled-no-match) {
	.innova-testimonial__track { animation: none; }
}

/* HEADER testimonial: testo + CTA "Lascia una recensione" */
.innova-testimonial__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: clamp(1.5rem, 4vw, 3rem);
	flex-wrap: wrap;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.innova-testimonial__head-text { max-width: 60ch; }
.innova-testimonial__cta { flex: 0 0 auto; }
@media (max-width: 600px) {
	.innova-testimonial__cta { width: 100%; justify-content: center; }
}

/* STELLE recensione (giallo brand) */
.innova-quote__stars {
	display: flex;
	gap: 0.15rem;
	color: var(--innova-yellow);
	margin-bottom: -0.7rem;   /* avvicina le stelle al testo */
}
.innova-quote__stars svg {
	width: 18px;
	height: 18px;
	display: block;
}
/* Limita la lunghezza riga della quote per leggibilità */
.innova-quote__text { max-width: 52ch; }

.innova-quote {
	position: relative;
	padding: 2.25rem 2rem 1.75rem;
	border-radius: var(--innova-radius);
	background: var(--innova-white);
	border: 1px solid rgba(18, 18, 18, 0.08);
	display: grid;
	gap: 1.5rem;
	align-content: start;
	transition: border-color 280ms ease, transform 280ms ease;
}
.innova-quote:hover {
	border-color: color-mix(in srgb, var(--innova-yellow) 60%, transparent);
	transform: translateY(-2px);
}

.innova-quote__mark {
	position: absolute;
	top: -0.25rem;
	left: 1.25rem;
	font-family: 'Beconder', serif;
	font-size: 4rem;
	line-height: 1;
	color: var(--innova-yellow);
	pointer-events: none;
}

.innova-quote__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(18, 18, 18, 0.85);
	font-style: italic;
}

.innova-quote__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(18, 18, 18, 0.08);
}

.innova-quote__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--innova-black);
	color: var(--innova-yellow);
	font-family: 'Beconder', system-ui, sans-serif;
	font-size: 1rem;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.innova-quote__meta {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.innova-quote__name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--innova-black);
	letter-spacing: -0.005em;
}

.innova-quote__role {
	font-size: 0.75rem;
	color: rgba(18, 18, 18, 0.55);
}

/* ============================================================
   TEAM — Marquee verticale 2 colonne (CSS pure, no JS, no scatti)
   Colonna sx scorre UP, colonna dx scorre DOWN.
   Testo centrale "Behind the screens" tra le due colonne.
   Loop infinito via translate -50% (lista duplicata).
   ============================================================ */
.innova-team--marquee {
	background: var(--innova-black);
	color: var(--innova-white);
	overflow: hidden;
	position: relative;
	padding-block: 0 !important;
}
.innova-team__layout {
	display: grid;
	grid-template-columns: 1fr minmax(280px, 600px) 1fr;
	align-items: center;
	min-height: 100vh;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-inline: clamp(1rem, 3vw, 2rem);
}

/* Colonne marquee */
.innova-team__col {
	position: relative;
	height: 100vh;
	overflow: hidden;
	mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.innova-team__track {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-block: 1rem;
	animation: innova-team-up 32s linear infinite;
	will-change: transform;
}
.innova-team__col--down .innova-team__track {
	animation-name: innova-team-down;
}
@keyframes innova-team-up {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }       /* 50% perché lista duplicata 2x */
}
@keyframes innova-team-down {
	from { transform: translateY(-50%); }
	to   { transform: translateY(0); }
}

/* Pausa al hover sulla colonna (UX leggibilità) */
.innova-team__col:hover .innova-team__track {
	animation-play-state: paused;
}

/* ---------- Member tile ---------- */
.innova-member-tile {
	margin: 0;
	display: grid;
	gap: 0.5rem;
	cursor: pointer;
}
.innova-member-tile__photo {
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: rgba(255, 255, 255, 0.04);
	transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 380ms ease;
}
.innova-member-tile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}
.innova-member-tile:hover .innova-member-tile__photo {
	transform: scale(1.04);
	box-shadow: 0 18px 48px -16px rgba(242, 191, 50, 0.45);
}
.innova-member-tile:hover .innova-member-tile__photo img {
	transform: scale(1.08);
}
.innova-member-tile__meta {
	font-family: var(--innova-font-body);
	font-size: 0.8125rem;
	line-height: 1.3;
}
.innova-member-tile__name {
	display: block;
	font-weight: 600;
	color: var(--innova-white);
	transition: letter-spacing 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.innova-member-tile:hover .innova-member-tile__name {
	letter-spacing: 0.03em;
}
.innova-member-tile__role {
	display: block;
	font-size: 0.6875rem;
	color: var(--innova-yellow);
	margin-top: 0.15rem;
	opacity: 0.7;
	transition: opacity 280ms ease;
}
.innova-member-tile:hover .innova-member-tile__role {
	opacity: 1;
}

/* ---------- Testo centrale ---------- */
.innova-team__core {
	text-align: center;
	padding-block: clamp(3rem, 6vh, 5rem);
}
.innova-team__core .innova-eyebrow {
	justify-content: center;
}
.innova-team__core .innova-section__title {
	font-size: clamp(2.25rem, 5.5vw, 4.5rem);
	margin-bottom: 1.5rem;
}
.innova-team__core .innova-section__sub {
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	color: rgba(255, 255, 255, 0.7);
}
.innova-team__core .innova-section__sub em {
	font-style: italic;
	color: var(--innova-yellow);
	font-weight: 500;
}

/* MOBILE — single colonna, testo prima, marquee orizzontale (semplificato) */
@media (max-width: 767px) {
	.innova-team__layout {
		grid-template-columns: 1fr;
		min-height: auto;
		padding-block: 4rem;
	}
	.innova-team__col {
		height: 60vh;
		max-height: 500px;
	}
	.innova-team__core {
		order: -1;                                /* testo sopra */
	}
}
@media (max-width: 540px) {
	/* Una sola colonna su screen molto piccoli */
	.innova-team__col--down {
		display: none;
	}
}
.innova-team__scatter {
	position: absolute;
	inset: 0;
	list-style: none;
	padding: 0;
	margin: 0;
	pointer-events: none;
	transform-style: preserve-3d;
}
.innova-team__chip {
	position: absolute;
	top: var(--top, 50%);
	left: var(--left, 50%);
	width: clamp(140px, 18vw, 240px);
	pointer-events: auto;
	transform-style: preserve-3d;

	/* Custom props animate */
	--scroll-y: 0px;
	--enter-scale: 0.3;                       /* default: invisibile (entry parte da qui) */
	--depth: calc((var(--scale, 0.8) - 0.55) * 260px);   /* parallax intensity */

	transform:
		translate(var(--mx, 0px), calc(var(--my, 0px) + var(--scroll-y)))
		rotate(var(--rot, 0deg))
		scale(calc(var(--scale, 0.8) * var(--enter-scale, 1)))
		translateZ(calc((var(--scale) - 0.7) * 80px));

	opacity: 0;
	transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
	            filter   260ms ease;
	will-change: transform, opacity;
}

/* ENTRY animation parte SOLO quando section ha .is-in-view (set da JS via IO) */
.innova-team--scatter.is-in-view .innova-team__chip {
	animation: innova-team-chip-in 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: calc(var(--i, 0) * 100ms);
}
@keyframes innova-team-chip-in {
	0%   { opacity: 0; --enter-scale: 0.3; }
	100% { opacity: 1; --enter-scale: 1;   }
}

/* SCROLL-DRIVEN motion — chip salgono mentre la sezione attraversa il viewport.
   Range: entry 0% → exit 100% (movimento totale durante tutta la traversata). */
@supports (animation-timeline: view()) {
	.innova-team__chip {
		animation: innova-team-chip-scroll linear both;
		animation-timeline: --innova-team-scroll;
		animation-range: entry 0% exit 100%;
	}
	@keyframes innova-team-chip-scroll {
		from { --scroll-y: calc(var(--depth) * 1.5); }    /* parte 50% più in basso */
		to   { --scroll-y: calc(var(--depth) * -2.5); }   /* sale 250% verso l'alto */
	}
	/* Entry animation va in parallelo con scroll (animation-timeline auto = time) */
	.innova-team--scatter.is-in-view .innova-team__chip {
		animation:
			innova-team-chip-in 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards,
			innova-team-chip-scroll linear both;
		animation-delay: calc(var(--i, 0) * 100ms), 0s;
		animation-timeline: auto, --innova-team-scroll;
		animation-range: auto, entry 0% exit 100%;
	}
}

/* MICROINTERAZIONI HOVER ricche */
.innova-team__chip:hover {
	transform:
		translate(var(--mx, 0px), calc(var(--my, 0px) + var(--scroll-y)))
		rotate(0deg)
		scale(calc(var(--scale, 0.8) * 1.18))
		translateZ(120px);
	filter: brightness(1.08) saturate(1.15);
	z-index: 10;
	transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
	            filter   420ms ease;
}

.innova-member-chip {
	margin: 0;
	display: grid;
	gap: 0.5rem;
}
.innova-member-chip__photo {
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.6);
	transition: box-shadow 360ms ease;
}
.innova-team__chip:hover .innova-member-chip__photo {
	box-shadow: 0 24px 64px -16px rgba(242, 191, 50, 0.4);
}
.innova-member-chip__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}
.innova-team__chip:hover .innova-member-chip__photo img {
	transform: scale(1.08);                       /* photo zoom interno */
}

.innova-member-chip__meta {
	font-family: var(--innova-font-body);
	font-size: 0.75rem;
	line-height: 1.3;
	opacity: 0.85;
	transition: opacity 280ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.innova-team__chip:hover .innova-member-chip__meta {
	opacity: 1;
	transform: translateY(-2px);
}

.innova-member-chip__name {
	display: block;
	font-weight: 600;
	color: var(--innova-white);
	overflow: hidden;
	letter-spacing: 0;
	transition: letter-spacing 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.innova-team__chip:hover .innova-member-chip__name {
	letter-spacing: 0.04em;                       /* stretch elegante */
}

.innova-member-chip__role {
	display: block;
	font-size: 0.6875rem;
	color: var(--innova-yellow);
	margin-top: 0.15rem;
	transform-origin: left center;
	transform: scaleX(0.85);
	opacity: 0.7;
	transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 320ms ease;
}
.innova-team__chip:hover .innova-member-chip__role {
	transform: scaleX(1);                         /* role si "apre" larghezza piena */
	opacity: 1;
}

/* Testo centrale (al di sopra delle chip per z-stack) */
.innova-team__core {
	position: relative;
	z-index: 5;
	text-align: center;
	max-width: 720px;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
	pointer-events: none;
}
.innova-team__core .innova-eyebrow {
	justify-content: center;
}
.innova-team__core .innova-section__title {
	font-size: clamp(2.5rem, 6vw, 5rem);
	margin-bottom: 1.5rem;
}
.innova-team__core .innova-section__sub {
	font-size: clamp(1rem, 1.3vw, 1.25rem);
	color: rgba(255, 255, 255, 0.7);
}
.innova-team__core .innova-section__sub em {
	font-style: italic;
	color: var(--innova-yellow);
	font-weight: 500;
}

/* CTA Team → Agency */
.innova-team__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin-top: 1.75rem;
	padding: 0.95rem 1.6rem;
	cursor: pointer;
	pointer-events: auto;
}

/* METODO — TESTO NERO su sfondo giallo */
.innova-metodo .innova-eyebrow {
	color: var(--innova-black);
	opacity: 0.85;
}
.innova-metodo .innova-section__title {
	color: var(--innova-black);
}
.innova-metodo .innova-section__title em {
	color: var(--innova-black);
	font-style: italic;
	font-weight: 700;
}
.innova-metodo .innova-section__sub {
	color: rgba(18, 18, 18, 0.78);
	max-width: 640px;
}

/* MOBILE — team marquee single col + CTA full, metodo compatto */
@media (max-width: 767px) {
	.innova-team__core {
		padding: clamp(2rem, 5vh, 3.5rem) clamp(1.25rem, 4vw, 2rem);
	}
	.innova-team__core .innova-section__title {
		font-size: clamp(2rem, 9vw, 3rem);
	}
	.innova-team__core .innova-section__sub {
		font-size: 0.95rem;
		line-height: 1.55;
	}
	.innova-team__cta {
		margin-top: 1.25rem;
		font-size: 0.875rem;
		padding: 0.85rem 1.4rem;
	}
	/* Metodo mobile */
	.innova-metodo .innova-section__title {
		font-size: clamp(2.25rem, 10vw, 3.5rem);
	}
	.innova-metodo .innova-section__sub {
		font-size: 0.95rem;
		line-height: 1.55;
	}
	.innova-metodo__head {
		margin-bottom: 2.5rem;
	}
}

/* ============================================================
   TEAM (legacy grid — non più usato, mantengo per backward compat) */
.innova-team__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 2rem 1.5rem;
	grid-template-columns: repeat(2, 1fr);
	justify-items: center;
}
@media (min-width: 640px) {
	.innova-team__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1100px) {
	.innova-team__grid { grid-template-columns: repeat(8, 1fr); gap: 1.75rem 0.875rem; }
}

.innova-member {
	margin: 0;
	display: grid;
	gap: 0.875rem;
	justify-items: center;
	text-align: center;
	width: 100%;
	max-width: 180px;
}

.innova-member__photo {
	width: 100%;
	max-width: 160px;
	aspect-ratio: 3 / 4;
	border-radius: 18px;
	background: var(--innova-yellow);
	overflow: hidden;
	display: grid;
	place-items: center;
	transition: transform 360ms cubic-bezier(0.2, 0.85, 0.2, 1);
}
.innova-member__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 480ms cubic-bezier(0.2, 0.85, 0.2, 1);
}
.innova-member:hover .innova-member__photo { transform: translateY(-4px); }
.innova-member:hover .innova-member__photo img { transform: scale(1.03); }

.innova-member__placeholder {
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: 2.5rem;
	color: rgba(245, 243, 238, 0.25);
}

.innova-member__meta {
	display: grid;
	gap: 0.2rem;
}
.innova-member__name {
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--innova-white);
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.innova-member__role {
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--innova-yellow);
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-wrap: balance;
}

/* ============================================================
   MAGAZINE
   ============================================================ */
.innova-magazine__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 3rem;
	flex-wrap: wrap;
}
.innova-magazine__head .innova-section__title { margin: 0; }

.innova-magazine__all {
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--innova-black);
	text-decoration: none;
	border-bottom: 1.5px solid var(--innova-yellow);
	padding-bottom: 2px;
	transition: color 200ms ease;
}
.innova-magazine__all:hover { color: var(--innova-yellow); }

.innova-magazine__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .innova-magazine__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .innova-magazine__grid { grid-template-columns: repeat(3, 1fr); } }

.innova-article {
	display: grid;
	gap: 1.25rem;
	text-decoration: none;
	color: var(--innova-black);
	height: 100%;
}

.innova-article__thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--innova-radius);
	background: #f0eeea;
	display: grid;
	place-items: center;
}
.innova-article__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 480ms cubic-bezier(0.2, 0.85, 0.2, 1);
}
.innova-article:hover .innova-article__thumb img { transform: scale(1.04); }
.innova-article__placeholder { font-size: 3rem; opacity: 0.35; }

.innova-article__body { display: grid; gap: 0.5rem; }

.innova-article__cat {
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--innova-yellow);
	background: var(--innova-black);
	padding: 0.3rem 0.6rem;
	border-radius: 100px;
	justify-self: start;
}

.innova-article__title {
	margin: 0;
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--innova-black);
}

.innova-article__meta {
	display: flex;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: rgba(18, 18, 18, 0.55);
}

.innova-magazine__empty {
	font-size: 1rem;
	color: rgba(18, 18, 18, 0.6);
}
.innova-magazine__empty a {
	color: var(--innova-black);
	border-bottom: 1.5px solid var(--innova-yellow);
}

/* ============================================================
   CTA FINALE — Let's Talk.
   ============================================================ */
.innova-section--cta-final.innova-cta-final {
	padding-block: clamp(6rem, 14vh, 12rem);
}

.innova-cta-final__title {
	margin: 0 0 2rem;
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(4rem, 14vw, 12rem);
	line-height: 0.85;
	letter-spacing: -0.045em;
	color: var(--innova-black);
	text-wrap: balance;
}
.innova-cta-final__dot {
	color: var(--innova-white);
}

.innova-cta-final__sub {
	margin: 0 0 2.5rem;
	max-width: 56ch;
	font-size: clamp(1.0625rem, 0.9vw + 0.75rem, 1.375rem);
	line-height: 1.55;
	color: rgba(18, 18, 18, 0.78);
}

.innova-cta-final__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-bottom: 4rem;
}

.innova-eyebrow__dot--dark {
	background: var(--innova-black);
	box-shadow: 0 0 12px 2px color-mix(in srgb, var(--innova-black) 30%, transparent);
}

.innova-cta-final__foot {
	display: grid;
	gap: 1.5rem 2rem;
	grid-template-columns: 1fr;
	padding-top: 3rem;
	border-top: 1.5px solid rgba(18, 18, 18, 0.18);
}
@media (min-width: 640px) {
	.innova-cta-final__foot { grid-template-columns: repeat(3, 1fr); }
}
.innova-cta-final__foot > div { display: grid; gap: 0.25rem; }
.innova-cta-final__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(18, 18, 18, 0.5);
}
.innova-cta-final__foot a {
	color: var(--innova-black);
	text-decoration: none;
	font-weight: 500;
	transition: color 200ms ease;
}
.innova-cta-final__foot a:hover {
	color: var(--innova-white);
}

/* ============================================================
   REVEAL (riusa il pattern [data-sd] già nel CSS hero-v2)
   ============================================================ */
/* (le keyframes innova-rise sono già definite in hero-v2.css) */

/* ============================================================
   prefers-reduced-motion — neutralizza hover transforms
   ============================================================ */
@media (prefers-reduced-motion: legacy-disabled-no-match) {
	.innova-card,
	.innova-card__arrow {
		transition: none !important;
	}
	.innova-card:hover,
	.innova-card:focus-visible {
		transform: none !important;
	}
}

/* ============================================================
   NUMERI — "Innova in cifre"
   Sezione gialla brand. Alterna ritmo con le scure.
   - 4 numeri grandi con counter animato (CSS @property + view())
   - Strip settori serviti
   - Fallback statico per browser senza @property/scroll-driven
   ============================================================ */

/* @property counter (Chrome 85+, Safari 16.4+, Firefox 128+) */
@property --innova-num-count {
	syntax: '<integer>';
	inherits: false;
	initial-value: 0;
}

.innova-numeri {
	background: var(--innova-black);
	color: var(--innova-white);
}

.innova-numeri__head {
	max-width: 760px;
	margin-bottom: clamp(3rem, 6vh, 5rem);
}

.innova-numeri__title {
	margin: 0 0 1.25rem;
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2.25rem, 5vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--innova-black);
	text-wrap: balance;
}
.innova-numeri__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--innova-black);
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.12em;
}

.innova-numeri__sub {
	margin: 0;
	max-width: 56ch;
	font-size: clamp(1.0625rem, 0.9vw + 0.75rem, 1.25rem);
	line-height: 1.55;
	color: rgba(18, 18, 18, 0.75);
}

/* ---------- 4 NUMERI ---------- */
.innova-numeri__grid {
	margin: 0 0 clamp(3rem, 6vh, 5rem);
	display: grid;
	gap: 2rem 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .innova-numeri__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .innova-numeri__grid { grid-template-columns: repeat(4, 1fr); } }

.innova-num {
	display: grid;
	gap: 1rem;
	align-content: start;
	padding-top: 1.5rem;
	border-top: 1.5px solid rgba(18, 18, 18, 0.18);
}

.innova-num__value {
	display: flex;
	align-items: baseline;
	gap: 0.05em;
	margin: 0;
	font-family: 'Beconder', system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(3.5rem, 6vw, 6rem);
	line-height: 0.9;
	letter-spacing: -0.025em;
	color: var(--innova-black);
}

.innova-num__prefix,
.innova-num__suffix {
	font-family: 'Beconder', system-ui, sans-serif;
	font-size: 0.7em;
	color: var(--innova-black);
	line-height: 0.9;
}

/* Counter dinamico CSS pure: il browser interpola --innova-num-count
   da 0 al valore target e mostra il numero via counter(). */
.innova-num__count {
	counter-reset: innova-counter var(--innova-num-count, 0);
}
.innova-num__count::after {
	content: counter(innova-counter);
	font-family: 'Beconder', system-ui, sans-serif;
}

/* Fallback statico: visibile solo se @property/scroll-driven non funziona */
.innova-num__static {
	display: none;
	font-family: 'Beconder', system-ui, sans-serif;
}

.innova-num__label {
	margin: 0;
	display: grid;
	gap: 0.15rem;
}
.innova-num__label strong {
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: var(--innova-black);
	letter-spacing: -0.005em;
}
.innova-num__label span {
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-size: 0.875rem;
	color: rgba(18, 18, 18, 0.6);
	line-height: 1.4;
}

/* ---------- STRIP SETTORI ---------- */
.innova-numeri__settori {
	padding-top: clamp(2rem, 4vh, 3rem);
	border-top: 1.5px solid rgba(18, 18, 18, 0.18);
	display: grid;
	gap: 1rem;
}

.innova-numeri__settori-label {
	margin: 0;
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(18, 18, 18, 0.55);
	display: inline-flex;
	gap: 0.4rem;
	align-items: baseline;
}
.innova-numeri__settori-label span {
	color: var(--innova-black);
}

.innova-numeri__settori-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.85rem;
	font-family: 'Beconder', system-ui, sans-serif;
	font-size: clamp(1.5rem, 2.5vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--innova-black);
}
.innova-numeri__settori-list li {
	display: inline-flex;
	align-items: baseline;
}
.innova-numeri__settori-list li:not(:last-child)::after {
	content: '·';
	color: rgba(18, 18, 18, 0.4);
	margin-left: 0.85rem;
}

/* ============================================================
   COUNTER — animazione one-shot triggerata da .is-visible
   (IntersectionObserver inline in section-numeri.php)
   I numeri restano FISSI dopo la prima animazione, non
   reagiscono allo scroll bidirezionale.
   ============================================================ */

/* Stato iniziale: contatori a 0 (saranno animati al primo intersect) */
.innova-num__count { --innova-num-count: 0; }

/* Quando la sezione diventa visibile, parte l'animazione UNA volta sola */
@supports (background: linear-gradient(in oklch, red, blue)) {
	/* Test feature: oklch ≈ ambiente moderno che supporta @property */
	.innova-numeri.is-visible .innova-num__count {
		animation: innova-num-count 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}
	@keyframes innova-num-count {
		from { --innova-num-count: 0; }
		to   { --innova-num-count: var(--target); }
	}
}

/* Browser senza @property → fallback numero statico */
@supports not (background: linear-gradient(in oklch, red, blue)) {
	.innova-num__count { display: none; }
	.innova-num__static { display: inline; }
}

/* prefers-reduced-motion → mostra subito il valore finale */
.innova-numeri.no-anim .innova-num__count {
	animation: none !important;
	--innova-num-count: var(--target) !important;
}
@media (prefers-reduced-motion: legacy-disabled-no-match) {
	.innova-numeri.is-visible .innova-num__count {
		animation: none !important;
		--innova-num-count: var(--target) !important;
	}
}

/* ============================================================
   METODO — Come lavoriamo · Horizontal Pinned (rebuild)
   La sezione si "pinna" e le 4 fasi scorrono in orizzontale mentre
   scrolli verticalmente. translateX della track gestito da JS
   (scroll-driven, cross-browser). Mobile: stack verticale, no pin.
   ============================================================ */
.innova-metodo {
	background: var(--innova-yellow);
	color: var(--innova-black);
	position: relative;
	padding: 0;   /* il pin gestisce il proprio spazio (override .innova-section) */
	/* altezza impostata da JS (vh + distanza orizzontale). Fallback: */
	min-height: 100vh;
}

/* PIN — resta fermo mentre la sezione scorre */
.innova-metodo__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: clamp(2rem, 5vh, 4rem) 0 clamp(1.5rem, 4vh, 3rem);
}

/* HEAD — fisso in alto durante lo scroll orizzontale */
.innova-metodo__head {
	flex: 0 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	max-width: 1480px;
	width: 100%;
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 4.5rem);
	box-sizing: border-box;   /* il padding NON aggiunge larghezza → counter resta dentro */
}
.innova-metodo__head-left { max-width: 60ch; }
.innova-metodo__head .innova-section__title { margin: 0.5rem 0 0; }
.innova-metodo__head .innova-section__sub {
	margin: 0.85rem 0 0;
	max-width: 46ch;
}

/* COUNTER 01 / 04 */
.innova-metodo__counter {
	font: 400 clamp(2rem, 4vw, 3.5rem) / 1 var(--innova-font-display, 'Beconder', system-ui);
	letter-spacing: 0.03em;
	white-space: nowrap;
	color: var(--innova-black);
}
.innova-metodo__counter-cur { color: var(--innova-black); }
.innova-metodo__counter-sep { opacity: 0.4; margin: 0 0.15em; }
.innova-metodo__counter-tot { opacity: 0.4; }

/* VIEWPORT — area che clippa la track orizzontale */
.innova-metodo__viewport {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	overflow: hidden;
	margin-top: clamp(1.5rem, 4vh, 3rem);
}

/* TRACK — fila di pannelli, traslata da JS */
.innova-metodo__track {
	display: flex;
	gap: clamp(1.25rem, 2vw, 2rem);
	padding: 0 clamp(1.5rem, 4vw, 4.5rem);
	will-change: transform;
}

/* PANEL — singola fase */
.innova-metodo__panel {
	flex: 0 0 clamp(290px, 36vw, 440px);
	box-sizing: border-box;   /* padding incluso nella width → no overflow (mobile width:100%) */
	display: grid;
	gap: 0.7rem;
	align-content: start;
	padding: clamp(1.75rem, 2.4vw, 2.5rem);
	border: 1.5px solid rgba(12, 12, 14, 0.28);
	border-radius: clamp(18px, 1.8vw, 26px);
	min-height: 0;
	/* niente align-self → i panel seguono lo stretch della track = stessa altezza
	   (la track è alta quanto la card più alta; il viewport la centra). */
	background: rgba(255, 255, 255, 0.04);
	transition: border-color 0.4s ease, background 0.4s ease, transform 0.5s cubic-bezier(.16,1,.3,1);
}
.innova-metodo__panel.is-active {
	border-color: var(--innova-black);
	background: rgba(12, 12, 14, 0.05);
}

.innova-metodo__panel-num {
	font: 400 clamp(3.5rem, 6vw, 5.5rem) / 0.9 var(--innova-font-display, 'Beconder', system-ui);
	letter-spacing: 0.03em;
	color: rgba(12, 12, 14, 0.3);
	transition: color 0.4s ease;
}
.innova-metodo__panel.is-active .innova-metodo__panel-num {
	color: var(--innova-black);
}

.innova-metodo__panel-name {
	font: 400 clamp(1.75rem, 2.6vw, 2.5rem) / 1 var(--innova-font-display, 'Beconder', system-ui);
	letter-spacing: 0.03em;
	color: var(--innova-black);
	margin: 0;
}

.innova-metodo__panel-lead {
	font: 500 clamp(1.0625rem, 1.3vw, 1.25rem) / 1.35 var(--innova-font-body, 'Host Grotesk', system-ui);
	color: var(--innova-black);
	margin: 0;
	letter-spacing: -0.01em;
}

.innova-metodo__panel-desc {
	font: 400 clamp(0.95rem, 1vw, 1.0625rem) / 1.55 var(--innova-font-body, 'Host Grotesk', system-ui);
	color: rgba(12, 12, 14, 0.72);
	margin: 0;
}

.innova-metodo__panel-items {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.innova-metodo__panel-items li {
	font: 400 0.8125rem/1 var(--innova-font-body, 'Host Grotesk', system-ui);
	color: var(--innova-black);
	padding: 0.45rem 0.8rem;
	border: 1px solid rgba(12, 12, 14, 0.25);
	border-radius: 999px;
	white-space: nowrap;
}

/* PROGRESS bar in basso */
.innova-metodo__progress {
	flex: 0 0 auto;
	max-width: 1480px;
	width: 100%;
	margin: clamp(1.25rem, 3vh, 2rem) auto 0;
	padding: 0 clamp(1.5rem, 4vw, 4.5rem);
	box-sizing: border-box;
}
.innova-metodo__progress-track {
	height: 2px;
	background: rgba(12, 12, 14, 0.18);
	border-radius: 2px;
	overflow: hidden;
}
.innova-metodo__progress-fill {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--innova-black);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

/* ── MOBILE / no-pin fallback ────────────────────────────── */
@media (max-width: 900px) {
	.innova-metodo {
		min-height: 0;
		height: auto !important;
		padding: 4rem 0;
	}
	.innova-metodo__pin {
		position: static;
		height: auto;
		overflow: visible;
		padding: 0;
	}
	.innova-metodo__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.innova-metodo__counter { display: none; }
	.innova-metodo__viewport {
		overflow: visible;
		margin-top: 2rem;
	}
	.innova-metodo__track {
		flex-direction: column;
		gap: 1rem;
		padding: 0 1rem;
		transform: none !important;   /* niente translateX su mobile */
	}
	.innova-metodo__panel {
		flex: 1 1 auto;
		width: 100%;
		min-height: auto;
	}
	.innova-metodo__progress { display: none; }
}

/* ============================================================
   PROGETTI v2 — Grid 2-col rounded (SOHub-inspired)
   - Sfondo dark (continuità home)
   - Header: eyebrow + title 2 righe (strong + ghost grey)
   - Grid 2-col desktop, 1-col mobile, gap 1.5rem
   - Card: img cover 4:3, rounded 24px, overlay bottom-left,
     hover scale + reveal arrow
   - CTA finale pill
   ============================================================ */
.innova-lavori {
	background: var(--innova-black, #0c0c0e);
	color: #fff;
	padding: clamp(5rem, 8vw, 8rem) 0 clamp(5rem, 8vw, 8rem);
	position: relative;
}

.innova-lavori__inner {
	max-width: 1480px;
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 4.5rem);
}

/* ── HEADER ─────────────────────────────────────────────── */
.innova-lavori__head {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: clamp(2.5rem, 5vw, 5rem);
	max-width: 920px;
}

.innova-lavori__eyebrow {
	font: 500 0.8125rem/1 var(--innova-font-display, 'Beconder', system-ui);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin: 0 0 0.5rem;
}

.innova-lavori__title {
	font: 400 clamp(2.25rem, 5.5vw, 4.75rem) / 1 var(--innova-font-display, 'Beconder', system-ui);
	letter-spacing: -0.025em;
	margin: 0;
	color: #fff;
	display: flex;
	flex-direction: column;
}

.innova-lavori__title-strong {
	color: #fff;
}

.innova-lavori__title-ghost {
	color: rgba(255, 255, 255, 0.35);
}

.innova-lavori__sub {
	font: 400 clamp(1rem, 1.15vw, 1.1875rem) / 1.5 var(--innova-font-body, 'Host Grotesk', system-ui);
	color: rgba(255, 255, 255, 0.7);
	margin: 0.75rem 0 0;
	max-width: 580px;
	letter-spacing: -0.005em;
}

/* ── GRID 2-col ──────────────────────────────────────────── */
.innova-lavori__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 1.5vw, 1.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.innova-lavori__item {
	margin: 0;
	padding: 0;
}

/* ── PROJECT CARD ────────────────────────────────────────── */
.innova-project-card {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	position: relative;
}

.innova-project-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	width: 100%;
	overflow: hidden;
	border-radius: clamp(16px, 1.8vw, 28px);
	background: #1a1a1f;
	will-change: transform;
}

.innova-project-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(.16,1,.3,1), filter 0.6s ease;
	filter: brightness(0.95) saturate(0.95);
	will-change: transform;
}

.innova-project-card:hover .innova-project-card__img {
	transform: scale(1.05);
	filter: brightness(1) saturate(1);
}

.innova-project-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 400 clamp(3rem, 8vw, 6rem)/1 var(--innova-font-display, 'Beconder', system-ui);
	color: rgba(255, 255, 255, 0.2);
	letter-spacing: -0.02em;
}

.innova-project-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.innova-project-card:hover .innova-project-card__overlay {
	opacity: 1;
}

/* Arrow reveal su hover (top-right del media) */
.innova-project-card__arrow {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 48px;
	height: 48px;
	background: var(--innova-yellow, #F2BF32);
	color: var(--innova-black, #0c0c0e);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translate(8px, -8px) scale(0.85);
	transition: opacity 0.45s cubic-bezier(.16,1,.3,1), transform 0.55s cubic-bezier(.16,1,.3,1);
	will-change: transform, opacity;
}

.innova-project-card:hover .innova-project-card__arrow {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}

.innova-project-card__arrow svg {
	width: 18px;
	height: 18px;
}

/* ── CARD BODY (sotto la media, allineato a sx) ─────────── */
.innova-project-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0 0.25rem;
}

.innova-project-card__cat {
	font: 500 0.75rem/1 var(--innova-font-display, 'Beconder', system-ui);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.innova-project-card__name {
	font: 400 clamp(1.5rem, 2.4vw, 2.25rem) / 1.05 var(--innova-font-display, 'Beconder', system-ui);
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
	transition: color 0.3s ease;
}

.innova-project-card:hover .innova-project-card__name {
	color: var(--innova-yellow, #F2BF32);
}

/* ── CTA finale ─────────────────────────────────────────── */
.innova-lavori__cta-wrap {
	display: flex;
	justify-content: center;
	margin-top: clamp(3rem, 5vw, 5rem);
}

.innova-lavori__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.1rem 1.5rem 1.1rem 1.85rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	text-decoration: none;
	font: 500 1rem/1 var(--innova-font-display, 'Beconder', system-ui);
	letter-spacing: -0.005em;
	transition: background 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(.16,1,.3,1);
}

.innova-lavori__cta:hover {
	background: var(--innova-yellow, #F2BF32);
	color: var(--innova-black, #0c0c0e);
	transform: translateX(4px);
}

.innova-lavori__cta-arrow {
	width: 18px;
	height: 18px;
	display: inline-block;
}

.innova-lavori__cta-arrow svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ── Empty state ────────────────────────────────────────── */
.innova-lavori__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding: 4rem 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
}

.innova-lavori__empty p {
	font: 400 1.0625rem/1.5 var(--innova-font-body, 'Host Grotesk', system-ui);
	margin: 0;
}

/* ── MOBILE — 1-col ─────────────────────────────────────── */
@media (max-width: 900px) {
	.innova-lavori {
		padding: 3.5rem 0;
	}
	.innova-lavori__inner {
		padding: 0 1rem;
	}
	.innova-lavori__head {
		margin-bottom: 2.5rem;
		gap: 0.75rem;
	}
	.innova-lavori__title {
		font-size: clamp(2rem, 10vw, 3rem);
	}
	.innova-lavori__grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	.innova-project-card__name {
		font-size: 1.5rem;
	}
	.innova-project-card__arrow {
		width: 40px;
		height: 40px;
		top: 1rem;
		right: 1rem;
		opacity: 1;
		transform: none;
	}
	.innova-project-card__arrow svg {
		width: 16px;
		height: 16px;
	}
	.innova-lavori__cta-wrap {
		margin-top: 2.5rem;
	}
}


/* ============================================================
   FOOTER — Innova
   Layout: top (logo+partner) → main 4-col → strip cert → bottom legal
   ============================================================ */
.innova-footer {
	background: var(--innova-black);
	color: var(--innova-white);
	padding: clamp(4rem, 8vh, 7rem) clamp(1.5rem, 5vw, 4rem) 160px;
	font-family: 'Host Grotesk', system-ui, sans-serif;
}

.innova-footer__inner {
	/* FULLWIDTH globale (consistent col resto del sito) */
	max-width: none;
	margin-inline: 0;
	display: grid;
	gap: clamp(2.5rem, 5vh, 4rem);
}

/* ---------- TOP: logo + partner badges --------------------- */
.innova-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.innova-footer__brand {
	display: inline-block;
	color: var(--innova-white);
	text-decoration: none;
	max-width: 360px;
}
.innova-footer__brand svg {
	width: 100%;
	height: auto;
	max-width: 320px;
	display: block;
}

.innova-footer__brand-fallback {
	font-family: 'Beconder', system-ui, sans-serif;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--innova-white);
	display: inline-block;
}
.innova-footer__brand-fallback small {
	display: block;
	font-size: 0.275em;
	letter-spacing: 0.16em;
	margin-top: 0.5rem;
}

.innova-footer__partners {
	display: flex;
	gap: 1rem;
	align-items: center;
}
.innova-footer__partner {
	height: 80px;
	width: auto;
	object-fit: contain;
	transition: transform 280ms ease;
}
.innova-footer__partner:hover {
	transform: translateY(-3px);
}

/* ---------- MAIN: 4 colonne -------------------------------- */
.innova-footer__main {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vh, 3rem);
	padding-block: clamp(2rem, 4vh, 3rem) 0;
}
@media (min-width: 720px) {
	.innova-footer__main { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.innova-footer__main { grid-template-columns: 1fr 1fr 2fr 2fr; }
}

.innova-footer__col {
	display: grid;
	gap: 1.25rem;
}

.innova-footer__title {
	margin: 0;
	font-family: 'Beconder', system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(1.5rem, 2vw, 2rem);
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--innova-white);
}
.innova-footer__title--big {
	font-size: clamp(2.5rem, 3.5vw, 3.75rem);
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
}

.innova-footer__arrow {
	font-family: 'Host Grotesk', system-ui, sans-serif;
	font-weight: 300;
	font-size: 0.65em;
	transition: transform 280ms cubic-bezier(0.2, 0.85, 0.2, 1);
	display: inline-block;
}

.innova-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.65rem;
}
.innova-footer__list a {
	color: rgba(245, 243, 238, 0.65);
	text-decoration: none;
	font-size: 1.0625rem;
	font-weight: 400;
	transition: color 200ms ease;
}
.innova-footer__list a:hover,
.innova-footer__list a:focus-visible {
	color: var(--innova-yellow);
}

/* CTA blocks (Parliamone + SEO Analyzer) */
.innova-footer__cta-block {
	display: grid;
	gap: 0.5rem;
	color: var(--innova-white);
	text-decoration: none;
	align-content: start;
}
.innova-footer__cta-block:hover .innova-footer__arrow,
.innova-footer__cta-block:focus-visible .innova-footer__arrow {
	transform: translate(8px, -8px);
}
.innova-footer__cta-block:hover .innova-footer__title--big {
	color: var(--innova-yellow);
}

.innova-footer__sub {
	margin: 0;
	font-size: 1rem;
	color: rgba(245, 243, 238, 0.6);
}

/* ---------- STRIP cert + cities ---------------------------- */
.innova-footer__strip {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
	padding-block: clamp(2rem, 4vh, 3rem);
	border-top: 1px solid rgba(245, 243, 238, 0.08);
	border-bottom: 1px solid rgba(245, 243, 238, 0.08);
}

.innova-footer__certs {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
}
.innova-footer__certs img {
	height: 64px;
	width: auto;
	transition: transform 280ms ease;
	object-fit: contain;
}
.innova-footer__certs li:hover img {
	transform: translateY(-3px);
}

.innova-footer__cities {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: clamp(1.5rem, 3vw, 3rem);
	font-family: 'Beconder', system-ui, sans-serif;
	font-size: clamp(1.5rem, 2vw, 2.25rem);
	color: var(--innova-white);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* ---------- BOTTOM: legal + copyright ---------------------- */
.innova-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding-top: 1.5rem;
	font-size: 0.875rem;
	color: rgba(245, 243, 238, 0.5);
}

.innova-footer__legal {
	display: flex;
	gap: 1.5rem;
}
.innova-footer__legal a {
	color: rgba(245, 243, 238, 0.65);
	text-decoration: none;
	transition: color 200ms ease;
}
.innova-footer__legal a:hover {
	color: var(--innova-yellow);
}

.innova-footer__copy {
	margin: 0;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: legacy-disabled-no-match) {
	.innova-footer__partner,
	.innova-footer__certs img,
	.innova-footer__arrow {
		transition: none !important;
		transform: none !important;
	}
}


/* =========================================================
   [3] HERO-V2 — scoped a body.innova-intro-page
   ========================================================= */
/* ============================================================
   Innova Hero v2 — Logo Intro cinematografica
   Porting da innova-logo-intro-finale.html

   Token brand (canonici da skill innova-brand):
     --innova-yellow: #F2BF32
     --innova-black:  #121212
     --innova-white:  #FFFFFF

   Filosofia (skill wp-pro-stack): tutto CSS, zero JS.
   - Sequenza intro: pure CSS keyframes
   - Dock on scroll + section reveal: CSS scroll-driven
     animation-timeline: scroll() / view()
   - prefers-reduced-motion: tutto neutralizzato
   ============================================================ */

/* ---------- token brand --------------------------------------- */
.innova-intro-page {
	--innova-yellow: #F2BF32;
	--innova-black:  #121212;
	--innova-white:  #FFFFFF;

	/* alias corti per ridurre verbosità nelle keyframes */
	--y: var(--innova-yellow);
	--w: var(--innova-white);
	--k: var(--innova-black);
}

/* ---------- reset minimale SOLO al cinematic stage -----------
   PRIMA: il reset colpiva anche .innova-intro-content * → azzerava
   il padding di TUTTE le .innova-section della home (testo edge-to-edge).
   ADESSO: limitato al solo cinematic stage (SVG path inside).
   Sezioni e menu mantengono i propri padding dal design system v2. */
.innova-intro-page {
	box-sizing: border-box;
}
.innova-intro-stage,
.innova-intro-stage * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.innova-intro-page {
	background: var(--k);
	color: #fff;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	/* `clip` (non `hidden`) → NON crea un contenitore di scroll,
	   quindi position: sticky continua a funzionare nelle sezioni. */
	overflow-x: clip;
}

/* ============================================================
   STAGE — Logo cinematografico
   ============================================================ */

.innova-intro-stage {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 220;                 /* SOPRA l'header (210) durante il dock,
	                                 così le 2 I non vengono coperte */
	pointer-events: none;
	transform-origin: center center;  /* esplicito per garantire calcolo JS coerente */
	transform-origin: center center;
}

#innova-intro-word {
	width: min(78vw, 600px);
	overflow: visible;
}

#innova-intro-word .ltr {
	transform-box: fill-box;
	transform-origin: center;
}

/* ============================================================
   ICONA — due "I" che si compongono
   ============================================================ */

#innova-intro-ico {
	transform-box: view-box;
	transform-origin: 0 0;
	transform: translate(94px, -6px) scale(1.7);
	animation: innova-place 0.9s cubic-bezier(0.7, 0, 0.2, 1) 1.55s forwards;
}
@keyframes innova-place {
	to { transform: translate(0px, 0px) scale(1); }
}

#innova-intro-iRsep {
	transform: translateX(0);
}
#innova-intro-iRol {
	transform: translateX(30px);
	animation: innova-overlap 0.9s cubic-bezier(0.7, 0, 0.2, 1) 1.55s forwards;
}
@keyframes innova-overlap {
	to { transform: translateX(0); }
}

#innova-intro-word .ib {
	fill: var(--y);
	stroke: var(--y);
	stroke-width: 1;
	fill-opacity: 0;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation:
		innova-draw 0.9s ease-in-out forwards,
		innova-fillin 0.5s ease 0.85s forwards,
		innova-noStroke 0.3s ease 1.3s forwards;
}
#innova-intro-iRol .ib {
	animation-delay: 0.18s, 1.03s, 1.48s;
}
@keyframes innova-draw    { to { stroke-dashoffset: 0; } }
@keyframes innova-fillin  { to { fill-opacity: 1; } }
@keyframes innova-noStroke{ to { stroke-width: 0; } }

/* ============================================================
   LETTERE — NNOVA entrano blur + scale
   ============================================================ */

#innova-intro-word .ltr {
	fill: var(--w);
	opacity: 0;
	animation: innova-letterIn 0.8s cubic-bezier(0.2, 0.85, 0.2, 1) both;
}
@keyframes innova-letterIn {
	from {
		opacity: 0;
		transform: translateY(-14px) scale(1.5);
		filter: blur(10px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

/* ============================================================
   PAYOFF — "Web Design Studio" a tendina + sottolineatura gialla
   ============================================================ */

.payClip {
	clip-path: inset(0 100% 0 0);
	animation: innova-payWipe 0.8s cubic-bezier(0.6, 0, 0.2, 1) 2.6s both;
}
@keyframes innova-payWipe {
	to { clip-path: inset(0 0 0 0); }
}

/* Sottolineatura gialla sotto "WEB DESIGN STUDIO" — entrata + micro overshoot.
   La sparizione è gestita dal fade-out di #innova-intro-nameGrp durante lo scroll
   (così il layer sparisce coerente con il payoff, non isolato). */
.ulP {
	transform-box: fill-box;
	transform-origin: left center;
	transform: scaleX(0);
	will-change: transform;
	/* Entry più lunga e morbida con micro overshoot finale */
	animation: innova-ulRun 1.4s cubic-bezier(0.34, 1.4, 0.64, 1) 2.55s forwards,
	           innova-ulGlow 2.4s ease-in-out 4.0s infinite;
}
@keyframes innova-ulRun {
	0%   { transform: scaleX(0); }
	60%  { transform: scaleX(1.05); }    /* overshoot delicato del 5% */
	78%  { transform: scaleX(0.98); }    /* mini settle back */
	100% { transform: scaleX(1); }        /* stable @ full width — persiste */
}

/* Breathing glow leggero dopo l'entrata — sussulto vitale sul payoff,
   loop infinito finché lo scroll non fa fade-out del nameGrp parent. */
@keyframes innova-ulGlow {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(242, 191, 50, 0)); }
	50%      { filter: drop-shadow(0 0 4px rgba(242, 191, 50, 0.55)); }
}

/* ============================================================
   HINT — "↓ scrolla"
   ============================================================ */

.innova-intro-hint {
	position: fixed;
	bottom: 26px;
	left: 50%;
	color: var(--y);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	z-index: 75;
	opacity: 0;
	transform: translateX(-50%);
	animation: innova-hintIn 0.5s ease 3.5s forwards;
}
@keyframes innova-hintIn {
	to { opacity: 0.9; }
}

/* ============================================================
   CONTENT — sezioni post-hero (scaffolding placeholder)
   ============================================================ */

.innova-intro-hero-space {
	height: 100vh; /* spazio per la "stage" prima che inizi il contenuto */
}

.innova-intro-content {
	position: relative;
	z-index: 1; /* sotto la stage (z 70) */
}

.innova-intro-content__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 6vw;
}

.innova-intro-block {
	max-width: 900px;
	margin: 0 auto;
	padding: 14vh 6vw;
}

.innova-intro-block h2 {
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(1.6rem, 5vw, 3rem);
	color: var(--w);
}

.innova-intro-block p {
	color: #aaa;
	font-size: 1.1rem;
	line-height: 1.6;
	max-width: 600px;
	margin-top: 12px;
}

.innova-intro-footer {
	padding: 16vh 6vw;
	text-align: center;
	color: #777;
	font-size: 0.85rem;
}
.innova-intro-footer a {
	color: var(--y);
	text-decoration: none;
}
.innova-intro-footer a:hover {
	text-decoration: underline;
}

/* ============================================================
   SCROLL-DRIVEN ANIMATIONS — dock + section reveal
   Solo browser che supportano animation-timeline (Chrome 115+,
   Edge 115+, Safari TP). Fallback: stage resta centrata.
   ============================================================ */

@supports (animation-timeline: scroll()) {

	/* CINEMATIC ZOOM-IN 3D — l'utente "attraversa" il logo che si ingrandisce
	   esponenzialmente verso lo spettatore, con motion blur progressivo e
	   fade-out finale. Comandato dallo scroll (0 → 75vh).
	   Icona "II" header sempre visibile (no più handoff dock). */
	.innova-intro-stage {
		animation: innova-zoom-cinematic linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 75vh;
		transform-origin: center center;
		will-change: transform, opacity, filter;
	}
	@keyframes innova-zoom-cinematic {
		0% {
			transform: scale(1);
			opacity: 1;
			filter: blur(0px);
		}
		40% {
			transform: scale(2.4);
			opacity: 1;
			filter: blur(2px);
		}
		70% {
			transform: scale(6);
			opacity: 0.7;
			filter: blur(8px);
		}
		100% {
			transform: scale(14);
			opacity: 0;
			filter: blur(24px);
		}
	}

	/* (Rimosso innova-separate — lo sdoppiamento extra delle II non serve più
	    con la nuova animazione zoom-in 3D cinematografico. Le 2 I restano
	    nella loro posizione naturale "II" durante tutto lo scroll.) */

	/* Il wordmark NNOVA + payoff svaniscono durante lo scroll */
	#innova-intro-nameGrp {
		animation: innova-fadeOut linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 36vh;
	}
	@keyframes innova-fadeOut {
		to { opacity: 0; }
	}

	/* Sezioni con [data-sd] entrano in view */
	.innova-intro-page [data-sd] {
		opacity: 0;
		animation: innova-rise linear both;
		animation-timeline: view();
		animation-range: entry 5% cover 35%;
	}
	@keyframes innova-rise {
		from { opacity: 0; transform: translateY(40px); }
		to   { opacity: 1; transform: none; }
	}
}

/* ============================================================
   ACCESSIBILITY — prefers-reduced-motion
   ============================================================ */

/* Fallback per browser senza animation-timeline (Safari pre-26, Firefox pre-128).
   PROBLEMA SENZA FALLBACK: il cinematic resta fixed centrato per sempre.
   FIX: dopo l'intro animation (~3.5s) il cinematic fade-out + icona header
   appare. UX: l'intro si vede comunque, ma il scroll handoff non è disponibile. */
@supports not (animation-timeline: scroll()) {
	/* Icona "II" header visibile fin da subito (no scroll handoff possibile) */
	body.innova-intro-page .innova-header__logo-icon {
		opacity: 1;
	}
	/* Cinematic stage fade-out dopo l'intro (4s = fine intro + 0.5s buffer) */
	body.innova-intro-page .innova-intro-stage {
		animation: innova-stage-static-fadeout 700ms ease 4s both;
	}
	/* Le sezioni [data-sd] (che usano scroll view) devono essere visibili
	   anche senza scroll-timeline → fallback opacity 1 */
	body.innova-intro-page [data-sd] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Keyframe PROMOSSO a top-level (era dentro @supports not).
   Necessario perché viene riusato anche dal blocco prefers-reduced-motion
   su browser CHE supportano scroll-timeline ma hanno reduce-motion attivo
   (es. Windows 11 con "Animation effects" OFF). */
@keyframes innova-stage-static-fadeout {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@media (prefers-reduced-motion: legacy-disabled-no-match) {

	#innova-intro-ico {
		transform: translate(0px, 0px) scale(1) !important;
		animation: none !important;
	}
	#innova-intro-iRol {
		transform: translateX(0) !important;
		animation: none !important;
	}
	#innova-intro-word .ib {
		fill-opacity: 1 !important;
		stroke: none !important;
		animation: none !important;
	}
	#innova-intro-word .ltr {
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
	}
	.payClip {
		clip-path: none !important;
		animation: none !important;
	}
	.ulP {
		display: none;
	}
	.innova-intro-hint {
		display: none;
	}
	/* BUG FIX (Windows reduce-motion): il cinematic stage NON deve essere
	   bloccato da `animation: none` perché senza la sua animation di fade-out
	   resterebbe FIXED al centro dello schermo per sempre (sopra il content).
	   Lo facciamo invece sparire con un fade-out istantaneo (no animation,
	   ma display:none dopo 2s tramite mini-keyframe semplice). */
	.innova-intro-stage {
		animation: innova-stage-static-fadeout 400ms ease 2s both !important;
	}
	/* Reduced-motion: icona header sempre visibile (no handoff scroll) */
	body.innova-intro-page .innova-header__logo-icon {
		opacity: 1 !important;
		animation: none !important;
	}
	.innova-intro-page [data-sd] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* FALLBACK GLOBALE: anche se animation-timeline: view() non supportata
   le sezioni con [data-sd] devono essere visibili (no rendering invisibile). */
@supports not (animation-timeline: view()) {
	.innova-intro-page [data-sd],
	[data-sd] {
		opacity: 1 !important;
		transform: none !important;
	}
}


/* =========================================================
   [4] PAGES — overrides pagine interne + section variants
   ========================================================= */
/* ============================================================
   Innova Pages CSS — single · archive · category · search · 404
   Stili specifici dei template di pagina interne.
   Tokens da _foundations.css, componenti da sections.css.
   ============================================================ */

@import url('./_foundations.css');

/* ============================================================
   BREADCRUMB
   ============================================================ */
.innova-breadcrumb {
	margin-bottom: clamp(1.5rem, 4vh, 3rem);
}
.innova-breadcrumb__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--innova-font-body);
	font-size: 0.8125rem;
	color: rgba(18, 18, 18, 0.55);
}
.innova-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.innova-breadcrumb__item a {
	color: rgba(18, 18, 18, 0.55);
	text-decoration: none;
	transition: color 200ms ease;
}
.innova-breadcrumb__item a:hover {
	color: var(--innova-yellow);
}
.innova-breadcrumb__item [aria-current="page"] {
	color: var(--innova-black);
	font-weight: 500;
}
.innova-breadcrumb__sep {
	color: rgba(18, 18, 18, 0.25);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.innova-pagination {
	margin-top: clamp(3rem, 6vh, 5rem);
	display: flex;
	justify-content: center;
}
.innova-pagination__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.innova-pagination__list .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.875rem;
	border: 1px solid rgba(18, 18, 18, 0.15);
	border-radius: var(--innova-radius-pill);
	font-family: var(--innova-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--innova-black);
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.innova-pagination__list .page-numbers:hover {
	border-color: var(--innova-yellow);
	background: var(--innova-yellow);
	color: var(--innova-black);
}
.innova-pagination__list .page-numbers.current {
	background: var(--innova-black);
	color: var(--innova-yellow);
	border-color: var(--innova-black);
}
.innova-pagination__list .page-numbers.dots {
	border-color: transparent;
}

/* ============================================================
   SEARCH FORM
   ============================================================ */
.innova-search {
	display: flex;
	gap: 0.5rem;
	max-width: 600px;
	background: var(--innova-white);
	border-radius: var(--innova-radius-pill);
	padding: 0.35rem;
	border: 1px solid rgba(18, 18, 18, 0.1);
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.innova-search:focus-within {
	border-color: var(--innova-yellow);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--innova-yellow) 25%, transparent);
}
.innova-search--dark {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(245, 243, 238, 0.15);
}
.innova-search--dark:focus-within {
	background: rgba(255, 255, 255, 0.1);
}

.innova-search__input {
	flex: 1;
	background: transparent;
	border: 0;
	padding: 0.65rem 1rem;
	font-family: var(--innova-font-body);
	font-size: 1rem;
	color: var(--innova-black);
	min-width: 0;
}
.innova-search--dark .innova-search__input {
	color: var(--innova-white);
}
.innova-search__input::placeholder {
	color: rgba(18, 18, 18, 0.45);
}
.innova-search--dark .innova-search__input::placeholder {
	color: rgba(245, 243, 238, 0.45);
}
.innova-search__input:focus { outline: none; }

.innova-search__btn {
	background: var(--innova-yellow);
	border: 0;
	border-radius: var(--innova-radius-pill);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--innova-black);
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms ease;
	flex-shrink: 0;
}
.innova-search__btn:hover {
	background: #ffd14f;
	transform: scale(1.05);
}

.innova-search__form-wrap {
	margin-top: 2rem;
	max-width: 600px;
}

/* ============================================================
   SINGLE POST
   ============================================================ */
.innova-single__hero {
	padding-top: clamp(8rem, 14vh, 12rem);
	padding-bottom: clamp(3rem, 6vh, 5rem);
}
.innova-single__title {
	font-family: var(--innova-font-body);
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 4rem);
	max-width: 22ch;
	text-wrap: balance;
}
.innova-single__meta {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--innova-font-body);
	font-size: 0.875rem;
	color: rgba(245, 243, 238, 0.55);
	letter-spacing: 0.02em;
}
.innova-single__sep { opacity: 0.4; }

/* Featured image full-bleed */
.innova-single__featured {
	margin: 0;
	background: var(--innova-black);
}
.innova-single__featured img {
	width: 100%;
	max-height: 600px;
	object-fit: cover;
	display: block;
}

.innova-single__content {
	padding-block: clamp(4rem, 8vh, 7rem);
}
.innova-single__container {
	display: grid;
	gap: clamp(2rem, 4vh, 3rem);
}
.innova-single__body {
	margin: 0;
}

/* Tags footer */
.innova-single__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(18, 18, 18, 0.1);
}
.innova-single__tags-label {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(18, 18, 18, 0.55);
}
.innova-single__tags a {
	display: inline-flex;
	padding: 0.35rem 0.75rem;
	background: rgba(18, 18, 18, 0.06);
	border-radius: var(--innova-radius-pill);
	font-size: 0.8125rem;
	color: var(--innova-black);
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}
.innova-single__tags a:hover {
	background: var(--innova-yellow);
}

/* Related posts */
.innova-single__related {
	padding-block: clamp(4rem, 8vh, 7rem);
	background: #f7f6f4;
}

/* ============================================================
   ARCHIVE / CATEGORY
   ============================================================ */
.innova-archive__hero {
	padding-top: clamp(8rem, 14vh, 12rem);
	padding-bottom: clamp(3rem, 6vh, 5rem);
}
.innova-archive__count {
	margin-top: 1.5rem;
	font-family: var(--innova-font-body);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	color: var(--innova-yellow);
	font-weight: 500;
}
.innova-archive__list {
	padding-block: clamp(3rem, 6vh, 5rem);
}
.innova-archive__grid {
	/* riusa la grid del magazine — già responsive */
}
.innova-archive__empty {
	padding: clamp(3rem, 8vh, 6rem) 0;
	text-align: center;
	display: grid;
	gap: 1.5rem;
	justify-items: center;
}
.innova-archive__empty p {
	font-size: 1.125rem;
	color: rgba(18, 18, 18, 0.6);
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.innova-search__hero {
	padding-top: clamp(8rem, 14vh, 12rem);
	padding-bottom: clamp(3rem, 6vh, 5rem);
}
.innova-search__results {
	padding-block: clamp(3rem, 6vh, 5rem);
}
.innova-search__empty {
	padding: clamp(2rem, 5vh, 4rem) 0;
	display: grid;
	gap: 1.5rem;
}
.innova-search__empty-title {
	margin: 0;
	font-family: var(--innova-font-body);
	font-weight: 700;
	font-size: clamp(1.5rem, 2vw, 2rem);
}
.innova-search__empty-tips {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.5rem;
}
.innova-search__empty-tips li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 1rem;
	color: rgba(18, 18, 18, 0.7);
}
.innova-search__empty-tips li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--innova-yellow);
	font-weight: 700;
}
.innova-search__empty-recent-title {
	margin: 2rem 0 1rem;
	font-family: var(--innova-font-body);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
}

/* ============================================================
   404
   ============================================================ */
.innova-404__hero {
	padding-top: clamp(8rem, 14vh, 12rem);
	padding-bottom: clamp(4rem, 10vh, 8rem);
	text-align: left;
	position: relative;
	overflow: hidden;
}
.innova-404__big {
	font-family: var(--innova-font-display);
	font-size: clamp(8rem, 28vw, 24rem);
	line-height: 0.85;
	letter-spacing: -0.05em;
	color: var(--innova-yellow);
	margin: 1rem 0 0;
	text-align: center;
	user-select: none;
	-webkit-user-select: none;
}
.innova-404__title {
	margin-top: 0;
	max-width: 22ch;
}
.innova-404__sub {
	max-width: 50ch;
}
.innova-404__links {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
}

/* ============================================================
   FEATURE GRID — usabile dentro the_content() su page-innova
   Markup: <div class="innova-feature-grid"><div class="innova-feature">...</div></div>
   ============================================================ */
.innova-page__content-inner .innova-feature-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: 1fr;
	margin: 2rem 0;
}
@media (min-width: 640px) {
	.innova-page__content-inner .innova-feature-grid { grid-template-columns: repeat(2, 1fr); }
}

.innova-page__content-inner .innova-feature {
	padding: 1.5rem;
	background: rgba(18, 18, 18, 0.04);
	border-radius: var(--innova-radius-md);
	border-left: 3px solid var(--innova-yellow);
}
.innova-page__content-inner .innova-feature__num {
	font-family: 'Beconder', system-ui, sans-serif;
	font-size: 1.25rem;
	color: var(--innova-yellow);
	display: block;
	margin-bottom: 0.5rem;
}
.innova-page__content-inner .innova-feature h4 {
	margin: 0 0 0.5rem;
	font-family: var(--innova-font-body);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.25;
}
.innova-page__content-inner .innova-feature p {
	margin: 0;
	font-size: 0.9375rem;
	color: rgba(18, 18, 18, 0.7);
	line-height: 1.5;
}

/* Lead paragraph (introduzione enfatizzata) */
.innova-page__content-inner .lead,
.innova-page__content-inner p.lead {
	font-size: clamp(1.125rem, 0.6vw + 0.95rem, 1.375rem);
	line-height: 1.5;
	color: var(--innova-black);
	font-weight: 400;
	margin-bottom: 2rem;
}

/* H4 dentro il content */
.innova-page__content-inner h4 {
	margin: 1.5rem 0 0.5rem;
	font-family: var(--innova-font-body);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -0.005em;
}

/* ============================================================
   AGENCY V2 — STYLE DEDICATO, in linea col vibe della home v2
   ============================================================
   Container 1400px max + padding "respiro" laterale
   Tipografia branded: Beconder per display, Host Grotesk per body
   Sezioni: alternanza dark/light/yellow con ritmo cinematic
   ============================================================ */
.innova-page-agency-v2 {
	--innova-container: 1400px;
	--innova-section-px: clamp(1.5rem, 6vw, 7rem);

	background: var(--innova-black);
	color: var(--innova-white);
	font-family: var(--innova-font-body);
}

/* Footer prende lo stesso width / padding */
.innova-page-agency-v2 .innova-footer {
	padding-inline: clamp(1.5rem, 6vw, 7rem);
}
.innova-page-agency-v2 .innova-footer__inner { max-width: none; }

/* ============================================================
   HERO "AGENCY." — gigante, cinematic
   ============================================================ */
.innova-page-agency-v2 .innova-page-hero {
	padding-top: clamp(11rem, 22vh, 18rem);
	padding-bottom: clamp(6rem, 14vh, 10rem);
	background: var(--innova-black);
	position: relative;
	overflow: hidden;
}

/* Glow ambient dietro l'hero per profondità */
.innova-page-agency-v2 .innova-page-hero::before {
	content: '';
	position: absolute;
	top: 30%; right: -20%;
	width: 800px; height: 800px;
	background: radial-gradient(circle, color-mix(in srgb, var(--innova-yellow) 12%, transparent) 0%, transparent 70%);
	filter: blur(80px);
	pointer-events: none;
	z-index: 0;
}

.innova-page-agency-v2 .innova-page-hero .innova-section__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1rem, 2vh, 1.75rem);
}

.innova-page-agency-v2 .innova-page-hero__big {
	font-family: var(--innova-font-display);
	font-size: clamp(5rem, 18vw, 18rem);
	line-height: 0.8;
	letter-spacing: -0.05em;
	color: var(--innova-white);
	margin: 0;
	text-transform: uppercase;
}

.innova-page-agency-v2 .innova-page-hero__kicker {
	font-family: var(--innova-font-body);
	font-weight: 500;
	font-size: clamp(1.0625rem, 0.5vw + 0.9rem, 1.375rem);
	color: var(--innova-yellow);
	letter-spacing: 0.02em;
	margin: clamp(1.5rem, 3vh, 2.5rem) 0 0;
	max-width: 60ch;
}

.innova-page-agency-v2 .innova-page-hero__title {
	font-family: var(--innova-font-body) !important;
	font-weight: 700 !important;
	font-size: clamp(1.75rem, 3vw + 0.5rem, 3rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.02em !important;
	color: var(--innova-white) !important;
	max-width: 24ch;
	margin: clamp(1rem, 2vh, 1.5rem) 0 0 !important;
	text-wrap: balance;
}
.innova-page-agency-v2 .innova-page-hero__title em {
	color: var(--innova-yellow);
	font-style: italic;
	font-weight: 700;
}

.innova-page-agency-v2 .innova-page-hero__sub {
	font-family: var(--innova-font-body) !important;
	font-size: clamp(1rem, 0.4vw + 0.85rem, 1.125rem) !important;
	line-height: 1.55;
	color: rgba(245, 243, 238, 0.7) !important;
	max-width: 56ch;
	margin: clamp(0.75rem, 1.5vh, 1.25rem) 0 0 !important;
}

.innova-page-agency-v2 .innova-page-hero .innova-underline {
	margin-top: clamp(2.5rem, 5vh, 4rem);
	width: clamp(80px, 14vw, 200px);
	height: 2px;
	background: var(--innova-yellow);
}

/* ============================================================
   MANIFESTO sections (variant light + yellow) — colori espliciti
   ============================================================ */
.innova-page-agency-v2 .innova-section--light {
	background: var(--innova-white) !important;
	color: var(--innova-black) !important;
}
.innova-page-agency-v2 .innova-section--yellow {
	background: var(--innova-yellow) !important;
	color: var(--innova-black) !important;
}

/* Title manifesto — Host Grotesk Bold mixed case, NO Beconder forzato */
.innova-page-agency-v2 .innova-manifesto__title {
	font-family: var(--innova-font-body) !important;
	font-weight: 700 !important;
	font-size: clamp(2rem, 4vw + 0.5rem, 4.5rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.025em !important;
	text-transform: none !important;
	max-width: 22ch;
	margin: 0 0 1.5rem !important;
	text-wrap: balance;
}

/* Colore title in base al variant section */
.innova-page-agency-v2 .innova-section--dark .innova-manifesto__title { color: var(--innova-white) !important; }
.innova-page-agency-v2 .innova-section--light .innova-manifesto__title,
.innova-page-agency-v2 .innova-section--yellow .innova-manifesto__title {
	color: var(--innova-black) !important;
}

/* em accent giallo (su dark/light) oppure nero (su yellow) */
.innova-page-agency-v2 .innova-manifesto__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--innova-yellow);
}
.innova-page-agency-v2 .innova-section--yellow .innova-manifesto__title em {
	color: var(--innova-black);
}

/* Sub manifesto: colore corretto per variant */
.innova-page-agency-v2 .innova-manifesto__sub {
	font-family: var(--innova-font-body) !important;
	font-size: clamp(1.0625rem, 0.5vw + 0.85rem, 1.25rem) !important;
	line-height: 1.55 !important;
	max-width: 56ch;
	margin: 0 !important;
}
.innova-page-agency-v2 .innova-section--dark .innova-manifesto__sub  { color: rgba(245, 243, 238, 0.72) !important; }
.innova-page-agency-v2 .innova-section--light .innova-manifesto__sub { color: rgba(18, 18, 18, 0.72) !important; }
.innova-page-agency-v2 .innova-section--yellow .innova-manifesto__sub{ color: rgba(18, 18, 18, 0.78) !important; }

/* Underline color in base al variant */
.innova-page-agency-v2 .innova-section--yellow .innova-underline {
	background: var(--innova-black) !important;
}

/* ============================================================
   EYEBROW — dot color in base al variant
   ============================================================ */
.innova-page-agency-v2 .innova-section--dark .innova-eyebrow {
	color: rgba(245, 243, 238, 0.6);
}
.innova-page-agency-v2 .innova-section--light .innova-eyebrow {
	color: rgba(18, 18, 18, 0.6);
}
.innova-page-agency-v2 .innova-section--yellow .innova-eyebrow {
	color: rgba(18, 18, 18, 0.65);
}
.innova-page-agency-v2 .innova-section--light .innova-eyebrow__dot {
	background: var(--innova-yellow);
	box-shadow: 0 0 10px 2px color-mix(in srgb, var(--innova-yellow) 50%, transparent);
}
.innova-page-agency-v2 .innova-section--yellow .innova-eyebrow__dot {
	background: var(--innova-black);
	box-shadow: 0 0 10px 2px color-mix(in srgb, var(--innova-black) 30%, transparent);
}

/* ============================================================
   SECTION RHYTHM — padding consistente + separator subtle
   ============================================================ */
.innova-page-agency-v2 .innova-section {
	padding-block: clamp(5rem, 10vh, 9rem);
	padding-inline: var(--innova-section-px);
}
.innova-page-agency-v2 .innova-section__inner {
	/* FULLWIDTH globale — il content si estende fino ai bordi viewport.
	   Padding-inline gestito dal parent .innova-section (var --innova-section-px). */
	max-width: none;
	margin-inline: 0;
}

/* Separator subtle quando 2 sezioni stesso color family consecutive */
.innova-page-agency-v2 .innova-section--dark + .innova-section--dark {
	border-top: 1px solid rgba(245, 243, 238, 0.06);
}

/* ============================================================
   ENTRY animation tra section (subtle fade)
   ============================================================ */
@supports (animation-timeline: view()) {
	.innova-page-agency-v2 .innova-section {
		animation: innova-section-enter linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 30%;
	}
	@keyframes innova-section-enter {
		from { opacity: 0.3; transform: translateY(30px); }
		to   { opacity: 1;   transform: translateY(0);    }
	}
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion: legacy-disabled-no-match) {
	.innova-page-agency-v2 .innova-section {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ============================================================
   PAGE HERO — cinematic style (riusabile su tutte le pagine v2)
   ============================================================ */
.innova-page-hero {
	padding-top: clamp(10rem, 20vh, 16rem);    /* spazio per header sticky */
	padding-bottom: clamp(5rem, 12vh, 9rem);
	position: relative;
	overflow: hidden;
}

/* Layout interno con respiro */
.innova-page-hero .innova-section__inner {
	display: grid;
	gap: clamp(0.75rem, 1.5vh, 1.5rem);
}

.innova-page-hero .innova-eyebrow {
	margin: 0;
}

/* "AGENCY." giant — visibile, ben spaziato */
.innova-page-hero__big {
	margin: clamp(0.5rem, 1vh, 1rem) 0 0;
	font-family: var(--innova-font-display);
	font-weight: 400;
	font-size: clamp(4.5rem, 16vw, 16rem);
	line-height: 0.82;
	letter-spacing: -0.045em;
	color: var(--innova-white);
	text-transform: uppercase;
}

/* Kicker — mini-titolo sotto il big */
.innova-page-hero__kicker {
	margin: clamp(1rem, 2vh, 1.5rem) 0 0;
	font-family: var(--innova-font-body);
	font-weight: 500;
	font-size: clamp(1.0625rem, 0.5vw + 0.9rem, 1.25rem);
	color: var(--innova-yellow);
	letter-spacing: 0.02em;
	max-width: 60ch;
}

/* Title H2 sotto — Host Grotesk Bold mixed case */
.innova-page-hero__title {
	margin: clamp(0.75rem, 1.5vh, 1.25rem) 0 0 !important;
	max-width: 22ch;
	text-wrap: balance;
	font-size: clamp(1.75rem, 3.5vw + 0.5rem, 3.25rem) !important;
}

/* Sub paragrafo */
.innova-page-hero__sub {
	max-width: 60ch;
	margin: clamp(0.5rem, 1vh, 1rem) 0 0 !important;
	font-size: clamp(1.0625rem, 0.5vw + 0.85rem, 1.1875rem) !important;
}

/* Underline più discreta e ben spaziata */
.innova-page-hero .innova-underline {
	margin-top: clamp(2rem, 4vh, 3.5rem);
	width: clamp(80px, 12vw, 160px);
	height: 2px;
}

/* ============================================================
   MANIFESTO — fix color variants (light/yellow)
   Il default è scritto per dark; qui correggiamo gli altri 2.
   ============================================================ */
.innova-section--light .innova-manifesto__title,
.innova-section--yellow .innova-manifesto__title {
	color: var(--innova-black);
}
.innova-section--light .innova-manifesto__sub {
	color: rgba(18, 18, 18, 0.72);
}
.innova-section--yellow .innova-manifesto__sub {
	color: rgba(18, 18, 18, 0.78);
}
/* em yellow rimane visibile anche su yellow bg → diventa nera per leggibilità */
.innova-section--yellow .innova-manifesto__title em {
	color: var(--innova-black);
	font-style: italic;
	border-bottom: 3px solid var(--innova-black);
	padding-bottom: 0.05em;
}
/* Underline gialla su light → nera su yellow (contrasto) */
.innova-section--yellow .innova-underline {
	background: var(--innova-black);
}

/* ============================================================
   SECTION RHYTHM — padding consistente + separator subtle
   ============================================================ */
.innova-page .innova-section:not(.innova-metodo) {
	padding-block: clamp(5rem, 10vh, 8rem);
}
/* Il metodo (Horizontal Pinned) gestisce il proprio spazio: niente padding-block. */
.innova-page .innova-metodo {
	padding: 0;
}

/* ============================================================
   ALTRI SERVIZI — cross-link in fondo alle pagine servizio
   ============================================================ */
.innova-other-srv__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.innova-other-srv__title {
	font-family: var(--innova-font-display, 'Beconder', system-ui);
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: 0.03em;
	margin: 0.4rem 0 0;
}
.innova-other-srv__title em { color: var(--innova-yellow); font-style: italic; }

.innova-other-srv__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(0.9rem, 1.6vw, 1.25rem);
}
@media (min-width: 760px) {
	.innova-other-srv__grid { grid-template-columns: repeat(2, 1fr); }
}

.innova-other-srv__card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"num  name  arrow"
		"num  desc  arrow";
	align-items: center;
	column-gap: clamp(1rem, 2vw, 1.5rem);
	row-gap: 0.35rem;
	height: 100%;
	box-sizing: border-box;
	padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.5rem, 2.8vw, 2.25rem);
	border: 1px solid rgba(245, 243, 238, 0.14);
	border-radius: clamp(16px, 1.8vw, 22px);
	background: rgba(245, 243, 238, 0.02);
	color: var(--innova-white);
	text-decoration: none;
	transition: border-color 0.35s ease, background 0.35s ease,
	            transform 0.35s cubic-bezier(.16,1,.3,1);
}
.innova-other-srv__card:hover,
.innova-other-srv__card:focus-visible {
	border-color: var(--innova-yellow);
	background: rgba(242, 191, 50, 0.06);
	transform: translateY(-3px);
	outline: none;
}
.innova-other-srv__num {
	grid-area: num;
	align-self: start;
	font-family: var(--innova-font-display, 'Beconder', system-ui);
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	color: var(--innova-yellow);
	opacity: 0.85;
}
.innova-other-srv__name {
	grid-area: name;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4ch;
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	line-height: 1.1;
	letter-spacing: 0.03em;
}
.innova-other-srv__name strong { font-weight: 700; }
.innova-other-srv__name em {
	font-style: italic;
	font-weight: 400;
	color: rgba(245, 243, 238, 0.6);
}
.innova-other-srv__desc {
	grid-area: desc;
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(245, 243, 238, 0.6);
	max-width: 48ch;
}
.innova-other-srv__arrow {
	grid-area: arrow;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 1px solid rgba(245, 243, 238, 0.2);
	color: var(--innova-yellow);
	transition: transform 0.35s cubic-bezier(.16,1,.3,1), border-color 0.35s ease, background 0.35s ease;
}
.innova-other-srv__arrow svg { width: 1.1rem; height: 1.1rem; }
.innova-other-srv__card:hover .innova-other-srv__arrow,
.innova-other-srv__card:focus-visible .innova-other-srv__arrow {
	transform: translateX(4px);
	border-color: var(--innova-yellow);
	background: rgba(242, 191, 50, 0.12);
}

/* Card CTA "Contattaci" — variante gialla piena, senza numero */
.innova-other-srv__card--cta {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"name arrow"
		"desc arrow";
	background: var(--innova-yellow);
	border-color: var(--innova-yellow);
	color: var(--innova-black);
}
.innova-other-srv__card--cta .innova-other-srv__name { color: var(--innova-black); }
.innova-other-srv__card--cta .innova-other-srv__desc { color: rgba(12, 12, 14, 0.72); }
.innova-other-srv__card--cta .innova-other-srv__arrow {
	border-color: rgba(12, 12, 14, 0.25);
	color: var(--innova-black);
}
.innova-other-srv__card--cta:hover,
.innova-other-srv__card--cta:focus-visible {
	background: var(--innova-yellow);
	border-color: var(--innova-yellow);
	transform: translateY(-3px);
	filter: brightness(1.04);
}
.innova-other-srv__card--cta:hover .innova-other-srv__arrow,
.innova-other-srv__card--cta:focus-visible .innova-other-srv__arrow {
	background: rgba(12, 12, 14, 0.14);
	border-color: rgba(12, 12, 14, 0.45);
	transform: translateX(4px);
}

@media (max-width: 540px) {
	.innova-other-srv__card {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"num  arrow"
			"name name"
			"desc desc";
		row-gap: 0.6rem;
	}
	.innova-other-srv__arrow { justify-self: end; }
}
.innova-page .innova-page-hero {
	padding-top: clamp(10rem, 20vh, 16rem);
}

/* Separator sottilissimo tra sezioni stesso color family (es. dark → dark) */
.innova-page .innova-section--dark + .innova-section--dark {
	border-top: 1px solid rgba(245, 243, 238, 0.06);
}
.innova-page .innova-section--light + .innova-section--light {
	border-top: 1px solid rgba(18, 18, 18, 0.06);
}

/* ============================================================
   ENTRY transition tra section (subtle parallax visual)
   ============================================================ */
@supports (animation-timeline: view()) {
	.innova-page .innova-section:not(.innova-metodo) {
		animation: innova-section-enter linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 25%;
	}
	@keyframes innova-section-enter {
		from { opacity: 0.4; }
		to   { opacity: 1; }
	}
}

/* ============================================================
   MANIFESTO TITLE — più contenuto, più "punchy"
   ============================================================ */
.innova-page .innova-manifesto__title {
	font-size: clamp(1.85rem, 3.5vw + 0.5rem, 3.5rem);
	line-height: 1.1;
	max-width: 24ch;
}
.innova-page .innova-manifesto__title em {
	border-bottom: 3px solid var(--innova-yellow);
	padding-bottom: 0.05em;
}

/* Sezione yellow: titolo um nero con underline nera */
.innova-section--yellow .innova-eyebrow__dot {
	background: var(--innova-black);
	box-shadow: 0 0 12px 2px color-mix(in srgb, var(--innova-black) 50%, transparent);
}

/* Eyebrow su light section: dot giallo */
.innova-section--light .innova-eyebrow__dot {
	background: var(--innova-yellow);
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion: legacy-disabled-no-match) {
	.innova-page .innova-section {
		animation: none !important;
		opacity: 1 !important;
	}
}

/* ============================================================
   PROCESS STEPS — patterns "Come lavoriamo" / "Il nostro metodo"
   Markup: <ol class="innova-process">
             <li><span class="innova-process__num">01</span>
               <h4>Titolo step</h4>
               <p>Descrizione</p></li>
           </ol>
   ============================================================ */
.innova-page__content-inner .innova-process {
	list-style: none;
	padding: 0;
	margin: 2.5rem 0;
	display: grid;
	gap: 1.25rem;
	counter-reset: step;
}
.innova-page__content-inner .innova-process li {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 1.5rem;
	padding: 1.5rem;
	background: var(--innova-white);
	border-left: 3px solid var(--innova-yellow);
	border-radius: var(--innova-radius-md);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	margin: 0;
	font-size: 1rem;
}
.innova-page__content-inner .innova-process__num {
	font-family: 'Beconder', system-ui, sans-serif;
	font-size: 2rem;
	color: var(--innova-yellow);
	line-height: 1;
	letter-spacing: -0.02em;
}
.innova-page__content-inner .innova-process h4 {
	margin: 0 0 0.35rem;
	font-size: 1.125rem;
	font-weight: 700;
}
.innova-page__content-inner .innova-process p {
	margin: 0;
	font-size: 0.9375rem;
	color: rgba(18, 18, 18, 0.7);
}

/* ============================================================
   STATS INLINE — 3-4 numeri in fila
   Markup: <div class="innova-stats">
             <div class="innova-stat"><strong>+10</strong><span>label</span></div>
           </div>
   ============================================================ */
.innova-page__content-inner .innova-stats {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	margin: 2.5rem 0;
	padding: 2rem;
	background: var(--innova-black);
	color: var(--innova-white);
	border-radius: var(--innova-radius-md);
}
@media (min-width: 640px) {
	.innova-page__content-inner .innova-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.innova-page__content-inner .innova-stats { grid-template-columns: repeat(4, 1fr); }
}
.innova-page__content-inner .innova-stat {
	text-align: left;
}
.innova-page__content-inner .innova-stat strong {
	display: block;
	font-family: 'Beconder', system-ui, sans-serif;
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	color: var(--innova-yellow);
	line-height: 1;
	letter-spacing: -0.025em;
	margin-bottom: 0.35rem;
}
.innova-page__content-inner .innova-stat span {
	font-family: var(--innova-font-body);
	font-size: 0.875rem;
	color: rgba(245, 243, 238, 0.7);
	font-weight: 500;
}

/* ============================================================
   FAQ — accordion CSS pure con <details>
   Markup: <div class="innova-faq">
             <details><summary>Domanda</summary><p>Risposta</p></details>
           </div>
   ============================================================ */
.innova-page__content-inner .innova-faq {
	display: grid;
	gap: 0.75rem;
	margin: 2.5rem 0;
}
.innova-page__content-inner .innova-faq details {
	background: var(--innova-white);
	border: 1px solid rgba(18, 18, 18, 0.1);
	border-radius: var(--innova-radius-md);
	overflow: hidden;
	transition: border-color 240ms ease;
}
.innova-page__content-inner .innova-faq details[open] {
	border-color: var(--innova-yellow);
}
.innova-page__content-inner .innova-faq summary {
	padding: 1.25rem 3rem 1.25rem 1.5rem;
	cursor: pointer;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--innova-black);
	list-style: none;
	position: relative;
}
.innova-page__content-inner .innova-faq summary::-webkit-details-marker { display: none; }
.innova-page__content-inner .innova-faq summary::after {
	content: '+';
	position: absolute;
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'Beconder', system-ui, sans-serif;
	font-size: 1.5rem;
	color: var(--innova-yellow);
	transition: transform 240ms ease;
}
.innova-page__content-inner .innova-faq details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}
.innova-page__content-inner .innova-faq details > *:not(summary) {
	padding: 0 1.5rem 1.25rem;
}
.innova-page__content-inner .innova-faq p {
	margin: 0;
	font-size: 1rem;
}

/* ============================================================
   CTA INLINE — call-to-action breve dentro il content
   Markup: <div class="innova-cta-inline">
             <h3>Titolo</h3><p>Sub</p>
             <a href="..." class="innova-btn innova-btn--dark">Bottone</a>
           </div>
   ============================================================ */
.innova-page__content-inner .innova-cta-inline {
	margin: 3rem 0;
	padding: 2.5rem;
	background: var(--innova-yellow);
	border-radius: var(--innova-radius-lg);
	display: grid;
	gap: 1rem;
}
.innova-page__content-inner .innova-cta-inline h3 {
	margin: 0;
	font-family: var(--innova-font-body);
	font-weight: 700;
	font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
	line-height: 1.2;
	color: var(--innova-black);
}
.innova-page__content-inner .innova-cta-inline p {
	margin: 0;
	font-size: 1.0625rem;
	color: rgba(18, 18, 18, 0.8);
}
.innova-page__content-inner .innova-cta-inline a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.5rem;
	background: var(--innova-black);
	color: var(--innova-yellow);
	border-radius: var(--innova-radius-pill);
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	width: max-content;
	transition: background-color 240ms ease;
}
.innova-page__content-inner .innova-cta-inline a:hover {
	background: #2a2a2a;
}

/* ============================================================
   CARDS GRID — riusabile per hub pages (servizi, progetti)
   Markup: <div class="innova-cards-grid">
             <a class="innova-hub-card" href="..."><span class="innova-hub-card__num">01</span>
               <h3>Titolo</h3><p>Desc</p>
               <span class="innova-hub-card__arrow">→</span></a>
           </div>
   ============================================================ */
.innova-page__content-inner .innova-cards-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	margin: 2.5rem 0;
}
@media (min-width: 640px) {
	.innova-page__content-inner .innova-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

.innova-page__content-inner .innova-hub-card {
	display: grid;
	gap: 0.75rem;
	padding: 2rem;
	background: var(--innova-black);
	color: var(--innova-white);
	border-radius: var(--innova-radius-md);
	text-decoration: none;
	transition: transform 300ms var(--innova-ease-out);
	position: relative;
}
.innova-page__content-inner .innova-hub-card:hover {
	transform: translateY(-4px);
}
.innova-page__content-inner .innova-hub-card__num {
	font-family: 'Beconder', system-ui, sans-serif;
	font-size: 1.5rem;
	color: var(--innova-yellow);
	margin-bottom: 0.25rem;
}
.innova-page__content-inner .innova-hub-card h3 {
	margin: 0;
	font-family: var(--innova-font-body);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--innova-white);
}
.innova-page__content-inner .innova-hub-card p {
	margin: 0;
	font-size: 0.9375rem;
	color: rgba(245, 243, 238, 0.7);
}
.innova-page__content-inner .innova-hub-card__arrow {
	position: absolute;
	bottom: 1.5rem;
	right: 1.5rem;
	font-family: var(--innova-font-body);
	color: var(--innova-yellow);
	transition: transform 240ms ease;
}
.innova-page__content-inner .innova-hub-card:hover .innova-hub-card__arrow {
	transform: translate(4px, -4px);
}

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: legacy-disabled-no-match) {
	.innova-search,
	.innova-search__btn,
	.innova-pagination__list .page-numbers,
	.innova-single__tags a {
		transition: none !important;
	}
}

/* ============================================================
   BRAND TYPE — letter-spacing 0.03em su tutti i titoli display (Beconder)
   Direttiva brand: spaziatura uniforme dei titoli + card servizi.
   !important per sovrascrivere i letter-spacing locali in modo coerente.
   NB: NON tocca l'intro/cinematic (usano #innova-intro-*, non .__title).
   ============================================================ */
.innova-srv__head-title,
.innova-srv__title,
.innova-section__title,
.innova-service-hero__title,
.innova-service-pillars__title,
.innova-service-process__title,
.innova-service-faq__title,
.innova-manifesto__title,
.innova-ai__title,
.innova-feat__title,
.innova-article__title,
.innova-cta-final__title,
.innova-lavori__title,
.innova-footer__title,
.innova-footer__title--big,
.innova-single__title,
.innova-404__title,
.innova-page-hero__title {
	letter-spacing: 0.03em !important;
}

/* ============================================================
   SHIMMER BUTTON — spark giallo che ruota sul bordo (port Magic UI)
   Riusabile: recensioni CTA, servizi CTA. Brand black + spark yellow.
   ============================================================ */
.innova-shimmer-btn {
	--shimmer-color: var(--innova-yellow, #F2BF32);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.6rem;
	border-radius: 999px;
	background: var(--innova-black, #0c0c0e);
	color: #fff;
	font: 500 0.95rem/1 var(--innova-font-body, 'Host Grotesk', system-ui);
	letter-spacing: -0.005em;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	z-index: 0;
	transition: transform 0.45s cubic-bezier(.16,1,.3,1);
}
/* spark rotante (conic gradient) */
.innova-shimmer-btn::before {
	content: '';
	position: absolute;
	inset: -150%;
	z-index: -2;
	background: conic-gradient(from 0deg, transparent 0 318deg, var(--shimmer-color) 350deg, transparent 360deg);
	animation: innova-shimmer-spin 2.6s linear infinite;
}
/* maschera interna → resta visibile solo un sottile bordo luminoso */
.innova-shimmer-btn::after {
	content: '';
	position: absolute;
	inset: 1.5px;
	z-index: -1;
	background: var(--innova-black, #0c0c0e);
	border-radius: 999px;
	transition: background 0.3s ease;
}
@keyframes innova-shimmer-spin { to { transform: rotate(360deg); } }
.innova-shimmer-btn:hover { transform: translateY(-2px); }
.innova-shimmer-btn:hover::after { background: #18181c; }

.innova-shimmer-btn__arrow {
	width: 16px;
	height: 16px;
	display: inline-block;
}
.innova-shimmer-btn__arrow svg { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: legacy-disabled-no-match) {
	.innova-shimmer-btn::before { animation: none; }
}

/* ============================================================
   REVEAL [data-sd] su PAGINE INTERNE (la home usa il suo scroll-driven).
   Attivo solo con JS (.js-reveal sul body, aggiunto da innova-smooth.js):
   senza JS i contenuti restano visibili (nessun rischio di blank).
   !important per battere il fallback globale @supports not(animation-timeline).
   ============================================================ */
body.js-reveal:not(.innova-intro-page) [data-sd] {
	opacity: 0 !important;
	transform: translateY(20px) !important;
	transition: opacity 0.7s cubic-bezier(.16,1,.3,1),
	            transform 0.7s cubic-bezier(.16,1,.3,1) !important;
	will-change: opacity, transform;
}
body.js-reveal:not(.innova-intro-page) [data-sd].is-revealed {
	opacity: 1 !important;
	transform: none !important;
}
@media (prefers-reduced-motion: legacy-disabled-no-match) {
	body.js-reveal:not(.innova-intro-page) [data-sd] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ============================================================
   MANIFESTO DYNAMIC — sezioni Missione/Visione (pagina /agency/)
   Word reveal scroll-driven sul title + parallax leggero su
   eyebrow/sub. Scopato a .innova-manifesto--dyn (opt-in).
   ============================================================ */
.innova-manifesto--dyn { position: relative; }

/* Title spezzato in parole dal JS: ogni .word parte nascosta+sfocata */
.innova-manifesto--dyn .innova-manifesto__title .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(28px);
	filter: blur(10px);
	transition: opacity 700ms cubic-bezier(.16, 1, .3, 1),
	            transform 700ms cubic-bezier(.16, 1, .3, 1),
	            filter 700ms cubic-bezier(.16, 1, .3, 1);
	will-change: opacity, transform, filter;
}
.innova-manifesto--dyn .innova-manifesto__title .word.is-on {
	opacity: 1;
	transform: none;
	filter: blur(0);
}
/* Le word dentro <em> (accent giallo) entrano con una scala extra */
.innova-manifesto--dyn .innova-manifesto__title em .word {
	transform: translateY(28px) scale(0.92);
}
.innova-manifesto--dyn .innova-manifesto__title em .word.is-on {
	transform: none;
}
/* Quando il dynamic è attivo, il sistema reveal globale [data-sd] NON deve
   nascondere il title (lo gestiamo per word) né l'eyebrow/sub (li animiamo
   con parallax). Forziamo "rivelato" subito per evitare doppio nascondiglio. */
body.js-reveal .innova-manifesto--dyn .innova-manifesto__title[data-sd],
body.js-reveal .innova-manifesto--dyn .innova-eyebrow[data-sd],
body.js-reveal .innova-manifesto--dyn .innova-manifesto__sub[data-sd] {
	opacity: 1 !important;
	transform: none !important;
}

/* ============================================================
   RISE WORDS — reveal word-by-word riusabile (slide up + deblur).
   "Salvato" dall'animazione manifesto Agency. Applicato via JS ai
   TITOLI di sezione delle PAGINE PRINCIPALI (no home, no articoli).
   ============================================================ */
[data-rise-words] .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(28px);
	filter: blur(10px);
	transition: opacity 700ms cubic-bezier(.16, 1, .3, 1),
	            transform 700ms cubic-bezier(.16, 1, .3, 1),
	            filter 700ms cubic-bezier(.16, 1, .3, 1);
	will-change: opacity, transform, filter;
}
[data-rise-words] .word.is-on { opacity: 1; transform: none; filter: blur(0); }
[data-rise-words] em .word { transform: translateY(28px) scale(0.94); }
[data-rise-words] em .word.is-on { transform: none; }
/* il container non dev'essere nascosto dal reveal a blocco [data-sd] */
body.js-reveal [data-rise-words] { opacity: 1 !important; transform: none !important; }

/* Parallax leggero — guidato da --mp (manifesto progress 0→1, JS) */
.innova-manifesto--dyn .innova-eyebrow {
	transform: translateY(calc(var(--mp, 0) * -18px));
	transition: transform 60ms linear;
}
.innova-manifesto--dyn .innova-manifesto__sub {
	transform: translateY(calc((1 - var(--mp, 0)) * 24px));
	opacity: calc(0.35 + 0.65 * var(--mp, 0));
	transition: transform 60ms linear, opacity 120ms linear;
}

/* No motion → tutto statico, no parallax, no blur */
@media (prefers-reduced-motion: reduce) {
	.innova-manifesto--dyn .innova-manifesto__title .word {
		opacity: 1 !important; transform: none !important; filter: none !important;
	}
	.innova-manifesto--dyn .innova-eyebrow,
	.innova-manifesto--dyn .innova-manifesto__sub {
		transform: none !important; opacity: 1 !important;
	}
}


/* ============================================================
   SUB-SERVICES grid — dentro service page (5 pillar come card)
   ============================================================ */
.innova-subsrv { background: var(--innova-black); color: var(--innova-white); }
.innova-subsrv__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.innova-subsrv__title {
	font-family: var(--innova-font-display, 'Beconder', system-ui);
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: 0.03em;
	margin: 0.4rem 0 0;
}
.innova-subsrv__title em { color: var(--innova-yellow); font-style: italic; }
.innova-subsrv__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: 1fr;
	gap: clamp(0.9rem, 1.6vw, 1.25rem);
}
@media (min-width: 760px) {
	.innova-subsrv__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.innova-subsrv__grid { grid-template-columns: repeat(3, 1fr); }
}
.innova-subsrv__card {
	display: grid; grid-template-columns: 1fr auto;
	grid-template-areas: "name arrow" "lead arrow";
	column-gap: clamp(1rem, 2vw, 1.5rem); row-gap: 0.35rem;
	height: 100%; box-sizing: border-box;
	padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.5rem, 2.8vw, 2.25rem);
	border: 1px solid rgba(245, 243, 238, 0.14);
	border-radius: clamp(16px, 1.8vw, 22px);
	background: rgba(245, 243, 238, 0.02);
	color: var(--innova-white); text-decoration: none;
	transition: border-color 0.35s ease, background 0.35s ease,
	            transform 0.35s cubic-bezier(.16,1,.3,1);
}
.innova-subsrv__card:hover,
.innova-subsrv__card:focus-visible {
	border-color: var(--innova-yellow);
	background: rgba(242, 191, 50, 0.06);
	transform: translateY(-3px); outline: none;
}
.innova-subsrv__name {
	grid-area: name; font-size: clamp(1.15rem, 1.9vw, 1.4rem);
	font-weight: 600; line-height: 1.2; letter-spacing: 0.03em;
}
.innova-subsrv__lead {
	grid-area: lead; font-size: 0.92rem; line-height: 1.45;
	color: rgba(245, 243, 238, 0.6); max-width: 36ch;
}
.innova-subsrv__arrow {
	grid-area: arrow;
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem; flex: 0 0 auto;
	border-radius: 50%;
	border: 1px solid rgba(245, 243, 238, 0.2);
	color: var(--innova-yellow);
	transition: transform 0.35s cubic-bezier(.16,1,.3,1),
	            border-color 0.35s ease, background 0.35s ease;
}
.innova-subsrv__arrow svg { width: 1rem; height: 1rem; }
.innova-subsrv__card:hover .innova-subsrv__arrow,
.innova-subsrv__card:focus-visible .innova-subsrv__arrow {
	transform: translateX(4px);
	border-color: var(--innova-yellow);
	background: rgba(242, 191, 50, 0.12);
}
.innova-subsrv__card--cta {
	background: var(--innova-yellow);
	border-color: var(--innova-yellow); color: var(--innova-black);
}
.innova-subsrv__card--cta .innova-subsrv__lead { color: rgba(12,12,14,0.72); }
.innova-subsrv__card--cta .innova-subsrv__arrow {
	border-color: rgba(12,12,14,0.25); color: var(--innova-black);
}
.innova-subsrv__card--cta:hover,
.innova-subsrv__card--cta:focus-visible {
	transform: translateY(-3px); filter: brightness(1.04);
}

/* ============================================================
   BREADCRUMB — sub-services
   ============================================================ */
.innova-breadcrumb {
	font-size: 0.85rem; letter-spacing: 0.04em;
	color: rgba(245, 243, 238, 0.55);
	margin: 0 0 1.5rem; display: inline-flex; gap: 0.6em; align-items: center;
}
.innova-breadcrumb a {
	color: rgba(245, 243, 238, 0.7); text-decoration: none;
	transition: color 0.2s ease;
}
.innova-breadcrumb a:hover { color: var(--innova-yellow); }


/* ============================================================
   BREADCRUMB v2 — wayfinding (Home › Servizio › Sotto-servizio)
   (sostituisce/estende lo stile breadcrumb base)
   ============================================================ */
.innova-breadcrumb {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 0.55em;
	font-size: 0.85rem; letter-spacing: 0.04em;
	margin: 0 0 1.5rem;
	color: rgba(245, 243, 238, 0.55);
}
.innova-breadcrumb__sep { color: rgba(245, 243, 238, 0.3); }
.innova-breadcrumb__link {
	color: rgba(245, 243, 238, 0.65);
	text-decoration: none;
	transition: color 0.2s ease;
}
.innova-breadcrumb__link:hover { color: var(--innova-yellow); }
.innova-breadcrumb__current { color: var(--innova-yellow); }
/* su sezioni gialle/chiare (se mai riusato) */
.innova-section--yellow .innova-breadcrumb,
.innova-section--light .innova-breadcrumb { color: rgba(12, 12, 14, 0.55); }
.innova-section--yellow .innova-breadcrumb__link,
.innova-section--light .innova-breadcrumb__link { color: rgba(12, 12, 14, 0.7); }
.innova-section--yellow .innova-breadcrumb__current,
.innova-section--light .innova-breadcrumb__current { color: var(--innova-black); }

/* ============================================================
   TUTTI I SERVIZI — mappa wayfinding (lista 6 principali)
   ============================================================ */
.innova-allsrv__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.innova-allsrv__title {
	font-family: var(--innova-font-display, 'Beconder', system-ui);
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.05; letter-spacing: 0.03em; margin: 0.4rem 0 0;
}
.innova-allsrv__title em { color: var(--innova-yellow); font-style: italic; }

.innova-allsrv__list { list-style: none; margin: 0; padding: 0; }
.innova-allsrv__item { border-top: 1px solid rgba(245, 243, 238, 0.12); }
.innova-allsrv__item:last-child { border-bottom: 1px solid rgba(245, 243, 238, 0.12); }

.innova-allsrv__link {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1.1rem, 2.4vw, 1.8rem) 0.25rem;
	color: var(--innova-white);
	text-decoration: none;
	transition: padding-left 0.35s cubic-bezier(.16,1,.3,1), color 0.25s ease;
}
.innova-allsrv__link:hover,
.innova-allsrv__link:focus-visible { padding-left: 1.25rem; outline: none; }

.innova-allsrv__num {
	font-family: var(--innova-font-display, 'Beconder', system-ui);
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	color: rgba(245, 243, 238, 0.4);
	transition: color 0.25s ease;
}
.innova-allsrv__link:hover .innova-allsrv__num { color: var(--innova-yellow); }

.innova-allsrv__name {
	font-family: var(--innova-font-display, 'Beconder', system-ui);
	font-size: clamp(1.5rem, 3.4vw, 2.6rem);
	line-height: 1.05; letter-spacing: 0.02em;
}
.innova-allsrv__name strong { font-weight: 400; }
.innova-allsrv__name em { font-style: italic; color: rgba(245, 243, 238, 0.55); }

.innova-allsrv__count {
	font-size: 0.85rem; letter-spacing: 0.03em;
	color: rgba(245, 243, 238, 0.5);
	white-space: nowrap;
}
.innova-allsrv__here {
	font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--innova-black); background: var(--innova-yellow);
	padding: 0.32em 0.7em; border-radius: 999px; white-space: nowrap;
}
.innova-allsrv__arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem; flex: 0 0 auto;
	border-radius: 50%;
	border: 1px solid rgba(245, 243, 238, 0.2);
	color: var(--innova-yellow);
	transition: transform 0.35s cubic-bezier(.16,1,.3,1), border-color 0.25s ease, background 0.25s ease;
}
.innova-allsrv__arrow svg { width: 1rem; height: 1rem; }
.innova-allsrv__link:hover .innova-allsrv__arrow {
	transform: translateX(4px);
	border-color: var(--innova-yellow);
	background: rgba(242, 191, 50, 0.12);
}

/* Item corrente (= servizio genitore): evidenziato, non cliccabile-illusione */
.innova-allsrv__item.is-current .innova-allsrv__name strong { color: var(--innova-yellow); }
.innova-allsrv__item.is-current .innova-allsrv__num { color: var(--innova-yellow); }

@media (max-width: 640px) {
	.innova-allsrv__link {
		grid-template-columns: auto 1fr auto;
		gap: 0.9rem 1rem;
	}
	.innova-allsrv__count, .innova-allsrv__here { grid-column: 2 / -1; justify-self: start; }
	.innova-allsrv__arrow { grid-row: 1; grid-column: 3; }
}


/* ============================================================
   HOME CARD — pill cliccabili (link ai sotto-servizi)
   ============================================================ */
.innova-srv__pill-link {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	position: relative;
	z-index: 3;                 /* sopra il glow decorativo della card */
	transition: color 0.2s ease;
}
.innova-srv__pill { transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease; }
.innova-srv__pill:hover {
	border-color: var(--innova-yellow);
	background: rgba(242, 191, 50, 0.1);
}
.innova-srv__pill:hover .innova-srv__pill-link { color: var(--innova-yellow); }

/* ============================================================
   MAPPA SERVIZI — 6 servizi raggruppati con sotto-servizi cliccabili
   ============================================================ */
.innova-srvmap__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.innova-srvmap__title {
	font-family: var(--innova-font-display, 'Beconder', system-ui);
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.05; letter-spacing: 0.03em; margin: 0.4rem 0 0;
}
.innova-srvmap__title em { color: var(--innova-yellow); font-style: italic; }

.innova-srvmap__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2vw, 1.6rem);
}
@media (min-width: 700px)  { .innova-srvmap__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .innova-srvmap__grid { grid-template-columns: repeat(3, 1fr); } }

.innova-srvmap__group {
	border: 1px solid rgba(245, 243, 238, 0.12);
	border-radius: clamp(16px, 1.6vw, 20px);
	padding: clamp(1.4rem, 2.4vw, 2rem);
	background: rgba(245, 243, 238, 0.015);
	transition: border-color 0.3s ease, background 0.3s ease;
}
.innova-srvmap__group.is-current {
	border-color: rgba(242, 191, 50, 0.55);
	background: rgba(242, 191, 50, 0.05);
}

.innova-srvmap__service {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.75rem;
	text-decoration: none; color: var(--innova-white);
	padding-bottom: clamp(0.9rem, 1.6vw, 1.2rem);
	margin-bottom: clamp(0.9rem, 1.6vw, 1.2rem);
	border-bottom: 1px solid rgba(245, 243, 238, 0.1);
}
.innova-srvmap__num {
	font-family: var(--innova-font-display, 'Beconder', system-ui);
	font-size: 0.9rem; color: rgba(245, 243, 238, 0.4);
}
.innova-srvmap__service-name {
	font-family: var(--innova-font-display, 'Beconder', system-ui);
	font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.05; letter-spacing: 0.02em;
	transition: color 0.2s ease;
}
.innova-srvmap__service-name strong { font-weight: 400; }
.innova-srvmap__service-name em { font-style: italic; color: rgba(245, 243, 238, 0.5); }
.innova-srvmap__service:hover .innova-srvmap__service-name { color: var(--innova-yellow); }
.innova-srvmap__group.is-current .innova-srvmap__service-name strong,
.innova-srvmap__group.is-current .innova-srvmap__num { color: var(--innova-yellow); }
.innova-srvmap__here {
	font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--innova-black); background: var(--innova-yellow);
	padding: 0.3em 0.65em; border-radius: 999px; align-self: center;
}

.innova-srvmap__subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.innova-srvmap__sub a {
	display: flex; align-items: center; gap: 0.5rem;
	padding: 0.5rem 0.6rem; margin: 0 -0.6rem;
	border-radius: 10px;
	color: rgba(245, 243, 238, 0.7);
	text-decoration: none;
	font-size: 0.98rem; line-height: 1.3;
	transition: color 0.2s ease, background 0.2s ease, padding-left 0.25s ease;
}
.innova-srvmap__sub a::before {
	content: ""; flex: 0 0 auto;
	width: 5px; height: 5px; border-radius: 50%;
	background: rgba(242, 191, 50, 0.5);
	transition: transform 0.25s ease, background 0.2s ease;
}
.innova-srvmap__sub a:hover {
	color: var(--innova-white);
	background: rgba(245, 243, 238, 0.04);
	padding-left: 0.85rem;
}
.innova-srvmap__sub a:hover::before { background: var(--innova-yellow); transform: scale(1.4); }
.innova-srvmap__sub.is-current a { color: var(--innova-yellow); font-weight: 500; }
.innova-srvmap__sub.is-current a::before { background: var(--innova-yellow); transform: scale(1.5); }


/* ============================================================
   HUB PROGETTI — griglia tutti i progetti (riusa .innova-lavori)
   ============================================================ */
.innova-lavori--hub { padding-top: clamp(2rem, 5vh, 4rem); }
.innova-lavori--hub .innova-lavori__inner { max-width: 1480px; margin: 0 auto; padding-inline: clamp(1.5rem, 4vw, 4.5rem); }

/* ============================================================
   PAGINE LEGALI — contenuto leggibile (the_content)
   ============================================================ */
.innova-legal__body { padding-top: clamp(1rem, 3vh, 2rem); }
.innova-legal__content {
	max-width: 800px;
	color: rgba(245, 243, 238, 0.78);
	font-size: 1.02rem;
	line-height: 1.75;
}
.innova-legal__content h2 {
	font-family: var(--innova-font-display, 'Beconder', system-ui);
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	line-height: 1.1; letter-spacing: 0.02em;
	color: var(--innova-white);
	margin: 2.5rem 0 0.9rem;
}
.innova-legal__content h3 {
	font-size: 1.2rem; font-weight: 600; color: var(--innova-white);
	margin: 1.8rem 0 0.6rem;
}
.innova-legal__content p { margin: 0 0 1.1rem; }
.innova-legal__content ul, .innova-legal__content ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.innova-legal__content li { margin: 0 0 0.5rem; }
.innova-legal__content a { color: var(--innova-yellow); text-decoration: underline; text-underline-offset: 3px; }
.innova-legal__content a:hover { opacity: 0.8; }
.innova-legal__content strong { color: var(--innova-white); }
.innova-legal__content hr { border: 0; border-top: 1px solid rgba(245,243,238,0.12); margin: 2rem 0; }
.innova-legal__content :first-child { margin-top: 0; }


/* ============================================================
   PILLAR CLICCABILE — "Cosa mettiamo in campo" → sotto-servizi
   (stretched-link su .innova-pillar + freccia top-right)
   ============================================================ */
.innova-pillar--link {
	cursor: pointer;
	transition: background-color 320ms ease, transform 0.4s cubic-bezier(.16,1,.3,1);
}
.innova-pillar--link:hover,
.innova-pillar--link:focus-within {
	background: #1a1a1a;
	transform: translateY(-4px);
}
.innova-pillar--link .innova-pillar__name { padding-right: 3.2rem; }
.innova-pillar__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	border-radius: inherit;
}
.innova-pillar__link:focus-visible {
	outline: 2px solid var(--innova-yellow);
	outline-offset: 3px;
}
.innova-pillar__arrow {
	position: absolute;
	top: clamp(1.75rem, 3vw, 2.5rem);
	right: clamp(1.75rem, 3vw, 2.5rem);
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(245, 243, 238, 0.2);
	color: var(--innova-yellow);
	transition: transform 0.4s cubic-bezier(.16,1,.3,1), background 0.25s ease, border-color 0.25s ease;
}
.innova-pillar__arrow svg { width: 1.05rem; height: 1.05rem; }
.innova-pillar--link:hover .innova-pillar__arrow,
.innova-pillar--link:focus-within .innova-pillar__arrow {
	transform: translateX(4px);
	background: rgba(242, 191, 50, 0.12);
	border-color: var(--innova-yellow);
}


/* ============================================================
   PILLAR INTRO — prima cella della griglia = blocco titolo
   (riempie lo slot vuoto: 1 intro + 5 punti = griglia 2x3 piena)
   ============================================================ */
.innova-pillar--intro {
	cursor: default;
	align-content: center;
	gap: 0.9rem;
}
.innova-pillar--intro:hover { background: var(--innova-black); }
.innova-pillar--intro .innova-eyebrow { margin: 0; }
.innova-pillar__heading {
	font-family: var(--innova-font-display, 'Beconder', system-ui);
	font-size: clamp(1.9rem, 2.7vw, 3rem);
	line-height: 1.0;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--innova-white);
	margin: 0;
}
.innova-pillar__heading em { color: var(--innova-yellow); font-style: italic; }
@media (max-width: 767px) {
	.innova-pillar--intro { align-content: start; }
}


/* ============================================================
   HUB PROGETTI — toggle Grid/List + viste + paginazione
   ============================================================ */
.innova-proj { padding-block: clamp(2rem, 5vh, 4rem) clamp(5rem, 9vh, 8rem); }
.innova-proj__inner { max-width: 1480px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 4.5rem); }

/* TOOLBAR toggle */
.innova-proj__toggle {
	display: inline-flex; align-items: center; gap: 0.55rem;
	padding: 0.7rem 1.25rem; border-radius: 12px;
	border: 1px solid rgba(245, 243, 238, 0.16); background: transparent;
	color: rgba(245, 243, 238, 0.6);
	font: 600 0.95rem/1 var(--innova-font-body, 'Host Grotesk', system-ui);
	cursor: pointer; transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.innova-proj__toggle + .innova-proj__toggle { margin-left: 0.6rem; }
.innova-proj__toggle:hover { color: #fff; border-color: rgba(245, 243, 238, 0.3); }
.innova-proj__toggle.is-active {
	background: rgba(242, 191, 50, 0.12); border-color: var(--innova-yellow); color: #fff;
}
.innova-proj__toggle-ico { display: inline-flex; width: 1.05rem; height: 1.05rem; }
.innova-proj__toggle-ico svg { width: 100%; height: 100%; }

/* VISTE — visibilità via data-view */
.innova-proj__grid, .innova-proj__list { list-style: none; margin: clamp(1.6rem, 3vw, 2.6rem) 0 0; padding: 0; }
.innova-proj__list { display: none; }
.innova-proj__bar[data-view="list"] .innova-proj__grid { display: none; }
.innova-proj__bar[data-view="list"] .innova-proj__list { display: grid; }

/* GRID VIEW — foto + gradient nero + nome dentro */
.innova-proj__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.6rem); }
@media (min-width: 760px) { .innova-proj__grid { grid-template-columns: repeat(2, 1fr); } }
.innova-proj__g-card {
	position: relative; display: block; aspect-ratio: 16 / 10;
	border-radius: clamp(16px, 1.8vw, 24px); overflow: hidden;
	text-decoration: none; color: #fff;
}
.innova-proj__g-media { position: absolute; inset: 0; }
.innova-proj__g-img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.innova-proj__g-card:hover .innova-proj__g-img { transform: scale(1.05); }
.innova-proj__g-ph {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-family: var(--innova-font-display, 'Beconder', system-ui); font-size: 4rem; color: rgba(255,255,255,0.28);
}
.innova-proj__g-shade {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 38%, rgba(0,0,0,0) 68%);
}
.innova-proj__g-name {
	position: absolute; z-index: 1;
	left: clamp(1.2rem, 2.6vw, 2.2rem); right: 1.2rem; bottom: clamp(1.1rem, 2.6vw, 2rem);
	display: flex; align-items: center; gap: 0.65rem;
	font: 700 clamp(1.5rem, 3vw, 2.5rem)/1.05 var(--innova-font-body, 'Host Grotesk', system-ui);
	letter-spacing: -0.01em;
	text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.innova-proj__g-arrow { display: inline-flex; flex: 0 0 auto; transition: transform .45s cubic-bezier(.16,1,.3,1); }
.innova-proj__g-arrow svg { width: clamp(1.4rem, 2.6vw, 2.1rem); height: auto; }
.innova-proj__g-card:hover .innova-proj__g-arrow { transform: translateX(5px); }

/* LIST VIEW — Nome · Settore · Anno */
.innova-proj__list { gap: clamp(0.6rem, 1.2vw, 1rem); }
.innova-proj__l-row {
	display: grid; grid-template-columns: 1.6fr 1fr auto; gap: clamp(0.6rem, 1.2vw, 1rem);
	text-decoration: none;
}
.innova-proj__l-name, .innova-proj__l-sector, .innova-proj__l-year {
	display: flex; align-items: center;
	padding: clamp(1.1rem, 2vw, 1.7rem) clamp(1.4rem, 2.6vw, 2.2rem);
	border-radius: clamp(10px, 1.2vw, 14px);
	transition: background .25s ease, color .25s ease;
}
.innova-proj__l-name {
	background: #0e0e13; color: #fff;
	font: 700 clamp(1.2rem, 2.1vw, 1.75rem)/1.1 var(--innova-font-body, 'Host Grotesk', system-ui); letter-spacing: -0.01em;
}
.innova-proj__l-sector {
	background: #1b1d26; color: #fff; justify-content: center; text-align: center;
	font: 600 clamp(1.05rem, 1.8vw, 1.5rem)/1.1 var(--innova-font-body, 'Host Grotesk', system-ui);
}
.innova-proj__l-year {
	background: #d9dbe0; color: var(--innova-black); justify-content: center; min-width: 5.5rem;
	font: 600 clamp(1.05rem, 1.8vw, 1.5rem)/1.1 var(--innova-font-body, 'Host Grotesk', system-ui);
}
.innova-proj__l-row:hover .innova-proj__l-name { background: #16161d; }
.innova-proj__l-row:hover .innova-proj__l-sector { background: #23262f; color: var(--innova-yellow); }
.innova-proj__l-row:hover .innova-proj__l-year { background: #fff; }
@media (max-width: 560px) {
	.innova-proj__l-row { grid-template-columns: 1fr auto; grid-template-areas: "name name" "sector year"; }
	.innova-proj__l-name { grid-area: name; } .innova-proj__l-sector { grid-area: sector; } .innova-proj__l-year { grid-area: year; }
}

/* PAGINAZIONE moderna */
.innova-proj__pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.innova-proj__pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.75rem; height: 2.75rem; padding: 0 0.7rem; border-radius: 12px;
	border: 1px solid rgba(245, 243, 238, 0.16); color: rgba(245, 243, 238, 0.7);
	text-decoration: none; font: 600 1rem var(--innova-font-body, 'Host Grotesk', system-ui);
	transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.innova-proj__pagination .page-numbers:hover { border-color: var(--innova-yellow); color: #fff; }
.innova-proj__pagination .page-numbers.current { background: var(--innova-yellow); border-color: var(--innova-yellow); color: var(--innova-black); }
.innova-proj__pagination .page-numbers.dots { border-color: transparent; }

.innova-proj__empty { text-align: center; color: rgba(245,243,238,0.7); padding: clamp(3rem,8vh,6rem) 0; display: grid; gap: 1.5rem; justify-items: center; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }


/* ---- PROGETTI: toolbar (toggle + filtri tag) ---- */
.innova-proj__toolbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1rem 1.5rem;
}
.innova-proj__views { display: inline-flex; }
.innova-proj__filters { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
.innova-proj__filter {
	padding: 0.55rem 1.15rem; border-radius: 999px;
	border: 1px solid rgba(245, 243, 238, 0.16); background: transparent;
	color: rgba(245, 243, 238, 0.6);
	font: 600 0.9rem/1 var(--innova-font-body, 'Host Grotesk', system-ui);
	cursor: pointer; text-transform: capitalize;
	transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.innova-proj__filter:hover { color: #fff; border-color: rgba(245, 243, 238, 0.32); }
.innova-proj__filter.is-active {
	background: var(--innova-yellow); border-color: var(--innova-yellow); color: var(--innova-black);
}
.innova-proj__noresult {
	text-align: center; color: rgba(245, 243, 238, 0.6);
	padding: 3rem 0; margin: clamp(1.6rem, 3vw, 2.6rem) 0 0;
}


/* ============================================================
   SINGLE PROGETTO — case study (categoria portfolio)
   ============================================================ */
.innova-projsingle__hero { padding-block: clamp(7rem, 16vh, 11rem) clamp(1.5rem, 4vh, 3rem); }
.innova-projsingle__title {
	font-family: var(--innova-font-display, 'Beconder', system-ui);
	font-size: clamp(2.8rem, 8vw, 7rem); line-height: 0.95; letter-spacing: 0.02em;
	text-transform: uppercase; color: var(--innova-white); margin: 0.6rem 0 0;
}
.innova-projsingle__tagline {
	font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.5;
	color: rgba(245, 243, 238, 0.72); max-width: 62ch; margin: 1.4rem 0 0;
}
.innova-projsingle__pills { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 2rem 0 0; }
.innova-projsingle__pill {
	padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid rgba(245, 243, 238, 0.2);
	color: rgba(245, 243, 238, 0.85); font: 600 0.9rem/1 var(--innova-font-body, 'Host Grotesk', system-ui);
}
.innova-projsingle__ctas { margin-top: 2.2rem; }

/* COVER */
.innova-projsingle__coverwrap { padding-block: 0 clamp(3rem, 6vh, 5rem); }
.innova-projsingle__cover-inner { max-width: 1480px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 4.5rem); }
.innova-projsingle__cover { position: relative; aspect-ratio: 16 / 9; border-radius: clamp(16px, 2vw, 28px); overflow: hidden; }
.innova-projsingle__cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.innova-projsingle__cover[data-placeholder] {
	background: linear-gradient(135deg, #1f1a10 0%, #0c0c0e 100%);
	display: flex; align-items: center; justify-content: center; border: 1px solid rgba(245, 243, 238, 0.08);
}
.innova-projsingle__cover-ph {
	font-family: var(--innova-font-display, 'Beconder', system-ui); text-transform: uppercase;
	font-size: clamp(2rem, 6vw, 5rem); color: rgba(242, 191, 50, 0.18); letter-spacing: 0.04em; text-align: center; padding: 2rem;
}

/* OVERVIEW: meta + narrativa */
.innova-projsingle__body { padding-block: clamp(2rem, 5vh, 4rem) clamp(4rem, 9vh, 7rem); }
.innova-projsingle__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .innova-projsingle__grid { grid-template-columns: 280px 1fr; } }
.innova-projsingle__meta { display: grid; gap: 1.2rem; align-content: start; }
@media (min-width: 900px) { .innova-projsingle__meta { position: sticky; top: 110px; } }
.innova-projsingle__meta-row { display: grid; gap: 0.3rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(245, 243, 238, 0.1); }
.innova-projsingle__meta-k { font: 600 0.78rem/1 var(--innova-font-body, 'Host Grotesk', system-ui); text-transform: uppercase; letter-spacing: 0.14em; color: var(--innova-yellow); }
.innova-projsingle__meta-v { font-size: 1.05rem; color: rgba(245, 243, 238, 0.85); }
.innova-projsingle__meta-v a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.innova-projsingle__content { max-width: 70ch; }
.innova-projsingle__content h2 {
	font-family: var(--innova-font-body, 'Host Grotesk', system-ui); font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -0.01em;
	color: var(--innova-white); margin: 2.8rem 0 1rem;
}
.innova-projsingle__content h2:first-child { margin-top: 0; }
.innova-projsingle__content h2::before {
	content: ""; display: block; width: 2.5rem; height: 3px; border-radius: 2px;
	background: var(--innova-yellow); margin-bottom: 1.2rem;
}
.innova-projsingle__content h2 em, .innova-projsingle__content strong { color: var(--innova-yellow); font-style: normal; }
.innova-projsingle__content h3 { font-family: var(--innova-font-body, 'Host Grotesk', system-ui); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: #fff; margin: 2rem 0 0.8rem; }
.innova-projsingle__content p { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.7; color: rgba(245, 243, 238, 0.78); margin: 0 0 1.3rem; }
.innova-projsingle__content ul, .innova-projsingle__content ol { color: rgba(245, 243, 238, 0.78); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.7; padding-left: 1.4rem; margin: 0 0 1.3rem; }
.innova-projsingle__content a { color: var(--innova-yellow); }

/* GALLERY */
.innova-projsingle__gallery { padding-block: 0 clamp(4rem, 9vh, 7rem); }
.innova-projsingle__gal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.6rem); }
@media (min-width: 760px) { .innova-projsingle__gal-grid { grid-template-columns: repeat(2, 1fr); } }
.innova-projsingle__gal-item { border-radius: clamp(12px, 1.5vw, 20px); overflow: hidden; }
.innova-projsingle__gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* RISULTATI (sezione gialla) */
.innova-projsingle__results { padding-block: clamp(4rem, 9vh, 7rem); }
.innova-eyebrow--dark { color: rgba(12, 12, 14, 0.55); }
.innova-projsingle__res-grid { list-style: none; margin: 2.5rem auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2.5rem; }
@media (min-width: 700px) { .innova-projsingle__res-grid { grid-template-columns: repeat(3, 1fr); } }
.innova-projsingle__res { display: grid; gap: 0.4rem; flex: 0 1 220px; }
.innova-projsingle__res-val { font-family: var(--innova-font-display, 'Beconder', system-ui); font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1; color: var(--innova-black); }
.innova-projsingle__res-lab { font-size: 1.05rem; color: rgba(12, 12, 14, 0.7); }

/* PROGETTI CORRELATI */
.innova-projsingle__related { padding-block: clamp(4rem, 9vh, 7rem); }
.innova-projsingle__related-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.innova-projsingle__related-title { font-family: var(--innova-font-display, 'Beconder', system-ui); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; color: var(--innova-white); margin: 0.5rem 0 0; }
.innova-projsingle__related-title em { color: var(--innova-yellow); font-style: italic; }
.innova-projsingle__related .innova-proj__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }


/* ---- SLIDER progetto (marquee automatico) ---- */
.innova-projsingle__slider { padding-block: 0 clamp(4rem, 9vh, 7rem); overflow: hidden; }
.innova-projsingle__slider-mask { overflow: hidden; width: 100%; }
.innova-projsingle__slider-track {
	display: flex; gap: clamp(1rem, 2vw, 1.6rem); width: max-content;
	animation: innova-proj-marquee 45s linear infinite;
	will-change: transform;
}
.innova-projsingle__slider-track:hover { animation-play-state: paused; }
.innova-projsingle__slide {
	flex: 0 0 auto; width: clamp(280px, 42vw, 620px); aspect-ratio: 16 / 10;
	border-radius: clamp(12px, 1.5vw, 20px); overflow: hidden;
}
.innova-projsingle__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.innova-projsingle__slide[data-placeholder] {
	background: linear-gradient(135deg, #2d2438 0%, #14101c 100%);
	display: flex; align-items: center; justify-content: center; border: 1px solid rgba(245, 243, 238, 0.06);
}
.innova-projsingle__slide-ph {
	font-family: var(--innova-font-display, 'Beconder', system-ui); text-transform: uppercase;
	color: rgba(242, 191, 50, 0.16); font-size: clamp(1.5rem, 3vw, 2.6rem); letter-spacing: 0.04em; padding: 1rem; text-align: center;
}
@keyframes innova-proj-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---- Reset margin body globale (tutte le pagine) ---- */
html, body { margin: 0; }


/* ---- COVER ZOOM dentro DEVICE FRAME (Safari desktop / iPhone mobile) ---- */
.innova-projsingle__zoom { position: relative; height: 230vh; background: #0c0c0e; }
.innova-projsingle__zoom-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.innova-projsingle__zoom-framewrap { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; }

/* mockup device */
.innova-frame { position: relative; display: block; will-change: transform; backface-visibility: hidden; }
.innova-frame__screen { position: absolute; z-index: 0; overflow: hidden; background: #0c0c0e; }
.innova-frame__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transform-origin: center; will-change: transform, filter; }
.innova-frame__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-family: var(--innova-font-display, 'Beconder', system-ui); text-transform: uppercase; font-size: clamp(2rem, 6vw, 5rem); line-height: 0.95; color: rgba(242, 191, 50, 0.16); letter-spacing: 0.04em; background: linear-gradient(135deg, #1f1a10 0%, #0c0c0e 100%); }
.innova-frame__chrome { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; will-change: opacity; }

/* DESKTOP — Safari (1203×753, screen 1200×700 @ x1 y52) */
.innova-frame--desktop { width: min(86vw, 1060px); aspect-ratio: 1203 / 753; transform-origin: 50% 53.4%; }
.innova-frame--desktop .innova-frame__screen { left: 0.083%; top: 6.906%; width: 99.751%; height: 92.961%; border-radius: 0 0 calc(11px * var(--r, 1)) calc(11px * var(--r, 1)); }

/* MOBILE — iPhone (433×882, screen 389.5×843.5 @ x21.25 y19.25 r55.75) */
.innova-frame--mobile { display: none; width: min(56vw, 286px); aspect-ratio: 433 / 882; transform-origin: 50% 50%; }
.innova-frame--mobile .innova-frame__screen { left: 4.907%; top: 2.182%; width: 89.954%; height: 95.635%; border-radius: calc(14.313% * var(--r, 1)) / calc(6.609% * var(--r, 1)); }

@media (max-width: 900px) {
	.innova-frame--desktop { display: none; }
	.innova-frame--mobile { display: block; }
}

.innova-projsingle__zoom-shade { position: absolute; inset: 0; z-index: 1; opacity: 0.06; background: radial-gradient(120% 100% at 50% 50%, rgba(12,12,14,0) 30%, rgba(12,12,14,0.92) 100%); pointer-events: none; }
.innova-projsingle__zoom-text { position: relative; z-index: 2; max-width: 64ch; text-align: center; padding: 2rem; opacity: 0; transform: translateY(44px); will-change: opacity, transform; }
.innova-projsingle__zoom-text p { font: 700 clamp(1.6rem, 3.6vw, 3.1rem)/1.25 var(--innova-font-body, 'Host Grotesk', system-ui); color: #fff; letter-spacing: -0.01em; margin: 0; text-shadow: 0 4px 30px rgba(0,0,0,0.5); }

/* ---- RISULTATI → 4 colonne ---- */
.innova-projsingle__res-grid { max-width: 1180px; margin-inline: auto; }
@media (min-width: 920px) { .innova-projsingle__res-grid { column-gap: clamp(2.5rem, 5vw, 5rem); } }

/* ---- PROSSIMO PROGETTO: griglia 9, centrale evidenziata + click zoom ---- */
.innova-projsingle__next { padding-block: clamp(4rem, 9vh, 7rem); }
.innova-projsingle__next-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.innova-projsingle__next-title { font-family: var(--innova-font-display, 'Beconder', system-ui); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; color: var(--innova-white); margin: 0.4rem 0 0; }
.innova-projsingle__next-title em { color: var(--innova-yellow); font-style: italic; }
.innova-projsingle__next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.5vw, 1.1rem); max-width: 1400px; margin: 0 auto; }
.innova-projsingle__next-cell {
	position: relative; aspect-ratio: 16 / 9; border-radius: clamp(10px, 1.4vw, 16px); overflow: hidden;
	opacity: 0.4; transform: scale(0.94);
	transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.innova-projsingle__next.is-focus .innova-projsingle__next-cell { opacity: 0.6; }
.innova-projsingle__next-cell--center { opacity: 0.85; text-decoration: none; display: block; }
.innova-projsingle__next.is-focus .innova-projsingle__next-cell--center {
	opacity: 1; transform: scale(1.08); z-index: 2;
	box-shadow: 0 0 0 3px var(--innova-yellow), 0 30px 60px rgba(0,0,0,0.45);
}
.innova-projsingle__next-media { position: absolute; inset: 0; }
.innova-projsingle__next-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.innova-projsingle__next-label {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 0.5rem;
	padding: 1rem 1.2rem; font: 700 clamp(1rem, 1.5vw, 1.3rem)/1.2 var(--innova-font-body, 'Host Grotesk', system-ui);
	color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
}
.innova-projsingle__next-arrow { display: inline-flex; flex: 0 0 auto; transition: transform .35s ease; color: var(--innova-yellow); }
.innova-projsingle__next-arrow svg { width: 1.1rem; height: 1.1rem; }
.innova-projsingle__next-cell--center:hover .innova-projsingle__next-arrow { transform: translateX(4px); }
.innova-projsingle__next.is-zooming .innova-projsingle__next-cell--center { transform: scale(1.5); opacity: 0; transition: transform .5s cubic-bezier(.7,0,.84,0), opacity .5s ease; }
.innova-projsingle__next.is-zooming .innova-projsingle__next-cell:not(.innova-projsingle__next-cell--center) { opacity: 0; transition: opacity .35s ease; }

/* Prossimo progetto: background #121212 (richiesta) */
.innova-projsingle__next { background: #121212; }


/* ---- STORY blocks con video che "spunta dal basso" allo scroll ---- */
.innova-projsingle__story-block { margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.innova-projsingle__story-block:last-child { margin-bottom: 0; }
.innova-projsingle__story-video {
	margin: clamp(1.6rem, 3.5vw, 2.8rem) 0 0;
	border-radius: clamp(12px, 1.5vw, 20px); overflow: hidden;
	opacity: 0; transform: translateY(64px);
	transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
	will-change: opacity, transform;
}
.innova-projsingle__story-video.is-in { opacity: 1; transform: translateY(0); }
.innova-projsingle__story-video video {
	width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: #000;
}


/* ---- Media VERTICALI (9:16) + 2 video affiancati ---- */
.innova-projsingle__story-videos {
	display: grid; grid-template-columns: 1fr; gap: clamp(0.8rem, 1.8vw, 1.3rem);
	margin: clamp(1.6rem, 3.5vw, 2.8rem) 0 0;
}
.innova-projsingle__story-videos[data-count="1"] { max-width: 360px; }
.innova-projsingle__story-videos[data-count="2"] { grid-template-columns: 1fr 1fr; max-width: 640px; }
.innova-projsingle__story-video { margin: 0; }
.innova-projsingle__story-video video { aspect-ratio: 9 / 16; }
/* slider gallery in verticale */
.innova-projsingle__slide { width: clamp(200px, 26vw, 320px); aspect-ratio: 9 / 16; }


/* ============================================================
   CASE STUDY immersivo: progress bar + capitoli sticky + micro-anim
   ============================================================ */
.innova-projsingle__progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; background: rgba(245,243,238,0.08); pointer-events: none; }
.innova-projsingle__progress-fill { display: block; height: 100%; width: 0; background: var(--innova-yellow); will-change: width; }

/* Titolo-capitolo che si "pinna" (sticky) mentre scorri la sezione */
.innova-projsingle__story-block > h2 {
	position: sticky; top: clamp(72px, 9vh, 92px); z-index: 3;
	margin: 0 0 1.4rem; padding: 0.9rem 0 1rem;
	background: linear-gradient(to bottom, #0c0c0e 0%, #0c0c0e 70%, rgba(12,12,14,0) 100%);
}
.innova-projsingle__story-block.is-revealed { transform: none !important; }
/* accent-bar che si disegna all'ingresso */
.innova-projsingle__story-block > h2::before { width: 0; transition: width 0.6s cubic-bezier(.16,1,.3,1) 0.15s; }
.innova-projsingle__story-block.is-revealed > h2::before { width: 2.5rem; }

/* video: sale dal basso + leggero scale-in */
.innova-projsingle__story-video { transform: translateY(64px) scale(0.96); }
.innova-projsingle__story-video.is-in { transform: translateY(0) scale(1); }

/* dati (meta-bar) in stagger all'ingresso */
@keyframes innova-meta-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.innova-projsingle__meta.is-revealed .innova-projsingle__meta-row { animation: innova-meta-up 0.6s both; }
.innova-projsingle__meta.is-revealed .innova-projsingle__meta-row:nth-child(1) { animation-delay: 0.05s; }
.innova-projsingle__meta.is-revealed .innova-projsingle__meta-row:nth-child(2) { animation-delay: 0.13s; }
.innova-projsingle__meta.is-revealed .innova-projsingle__meta-row:nth-child(3) { animation-delay: 0.21s; }
.innova-projsingle__meta.is-revealed .innova-projsingle__meta-row:nth-child(4) { animation-delay: 0.29s; }


/* Rimosso lo sticky dei titoli-capitolo (richiesta) — restano accent-draw, stagger, video scale, progress bar */
.innova-projsingle__story-block > h2 { position: static; z-index: auto; background: none; padding: 0; margin: 2.8rem 0 1rem; }


/* Gallery slider in formato 4:5 (1080x1350) — i video story restano 9:16 */
.innova-projsingle__slide { aspect-ratio: 4 / 5; width: clamp(240px, 30vw, 400px); }


/* ============================================================
   ARCHIVIO CATEGORIA (news) — griglia stile progetti + Load More
   ============================================================ */
.innova-archive__hero { padding-block: clamp(7rem, 16vh, 11rem) clamp(1.5rem, 4vh, 3rem); }
.innova-archive__title {
	font-family: var(--innova-font-display, 'Beconder', system-ui);
	font-size: clamp(2.8rem, 8vw, 6rem); line-height: 0.95; letter-spacing: 0.02em;
	text-transform: uppercase; color: var(--innova-white); margin: 0.5rem 0 0;
}
.innova-archive__sub { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.5; color: rgba(245, 243, 238, 0.72); max-width: 60ch; margin: 1.2rem 0 0; }
.innova-archive__count { font: 600 0.85rem/1 var(--innova-font-body, 'Host Grotesk', system-ui); text-transform: uppercase; letter-spacing: 0.14em; color: var(--innova-yellow); margin: 1.5rem 0 0; }
.innova-archive__list { padding-block: clamp(1rem, 3vh, 2rem) clamp(5rem, 10vh, 8rem); }

.innova-news-grid { list-style: none; margin: clamp(1rem, 3vw, 2rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }

.innova-archive__empty { text-align: center; color: rgba(245, 243, 238, 0.7); padding: clamp(3rem, 8vh, 6rem) 0; display: grid; gap: 1.5rem; justify-items: center; }

.innova-loadmore-wrap { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.innova-loadmore {
	display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer;
	padding: 0.9rem 2rem; border-radius: 999px;
	border: 1px solid rgba(245, 243, 238, 0.25); background: transparent; color: #fff;
	font: 600 1rem/1 var(--innova-font-body, 'Host Grotesk', system-ui);
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.innova-loadmore:hover { background: var(--innova-yellow); border-color: var(--innova-yellow); color: var(--innova-black); }
.innova-loadmore.is-loading { opacity: 0.85; pointer-events: none; }
.innova-loadmore__spin { display: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: innova-spin 0.7s linear infinite; }
.innova-loadmore.is-loading .innova-loadmore__spin { display: inline-block; }
@keyframes innova-spin { to { transform: rotate(360deg); } }


/* ============================================================
   ARCHIVIO NEWS v2 — sezione chiara, card (img+pill+titolo+meta),
   toggle Grid/List + filtri tag, su sfondo chiaro
   ============================================================ */
.innova-archive__list { background: #f5f3ee; color: var(--innova-black); padding-block: clamp(2rem, 5vh, 4rem) clamp(5rem, 10vh, 8rem); }

/* Toolbar (light) */
.innova-news__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: clamp(1.8rem, 3.5vw, 3rem); }
.innova-news__views { display: inline-flex; }
.innova-news__toggle {
	display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.65rem 1.2rem; border-radius: 12px;
	border: 1px solid rgba(12,12,14,0.15); background: transparent; color: rgba(12,12,14,0.55);
	font: 600 0.95rem/1 var(--innova-font-body, 'Host Grotesk', system-ui); cursor: pointer;
	transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.innova-news__toggle + .innova-news__toggle { margin-left: 0.6rem; }
.innova-news__toggle:hover { color: #0c0c0e; border-color: rgba(12,12,14,0.3); }
.innova-news__toggle.is-active { background: #0c0c0e; border-color: #0c0c0e; color: #fff; }
.innova-news__toggle-ico { display: inline-flex; width: 1.05rem; height: 1.05rem; }
.innova-news__toggle-ico svg { width: 100%; height: 100%; }
.innova-news__filters { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
.innova-news__filter {
	padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid rgba(12,12,14,0.15);
	background: transparent; color: rgba(12,12,14,0.6); font: 600 0.9rem/1 var(--innova-font-body, 'Host Grotesk', system-ui);
	cursor: pointer; text-transform: capitalize; transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.innova-news__filter:hover { color: #0c0c0e; border-color: rgba(12,12,14,0.3); }
.innova-news__filter.is-active { background: var(--innova-yellow); border-color: var(--innova-yellow); color: #0c0c0e; }

/* GRID / LIST toggle */
.innova-news__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem); }
.innova-news__list { list-style: none; margin: 0; padding: 0; display: none; }
.innova-news__bar[data-view="list"] .innova-news__grid { display: none; }
.innova-news__bar[data-view="list"] .innova-news__list { display: flex; flex-direction: column; }

/* CARD (immagine + pill categoria + titolo + data·lettura) */
.innova-news-card { display: block; text-decoration: none; }
.innova-news-card__media { aspect-ratio: 16 / 10; border-radius: clamp(14px, 1.8vw, 22px); overflow: hidden; background: #e6e2d8; }
.innova-news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.innova-news-card:hover .innova-news-card__media img { transform: scale(1.04); }
.innova-news-card__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--innova-font-display, 'Beconder', system-ui); font-size: 2.5rem; color: rgba(12,12,14,0.18); }
.innova-news-card__cat { display: inline-block; margin: 1.2rem 0 0; padding: 0.4rem 0.95rem; border-radius: 999px; background: var(--innova-black); color: var(--innova-yellow); font: 700 0.72rem/1 var(--innova-font-body, 'Host Grotesk', system-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.innova-news-card__title { font: 700 clamp(1.3rem, 2vw, 1.75rem)/1.2 var(--innova-font-body, 'Host Grotesk', system-ui); color: var(--innova-black); letter-spacing: -0.01em; margin: 0.85rem 0 0; transition: color .2s ease; }
.innova-news-card:hover .innova-news-card__title { color: #6b6b6b; }
.innova-news-card__meta { font-size: 0.95rem; color: rgba(12,12,14,0.5); margin: 0.55rem 0 0; }

/* LIST rows (light) */
.innova-news-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(0.5rem, 1.5vw, 1.2rem); border-bottom: 1px solid rgba(12,12,14,0.1); text-decoration: none; transition: background .2s ease; }
.innova-news-row:hover { background: rgba(12,12,14,0.035); }
.innova-news-row__title { font: 700 clamp(1.1rem, 1.7vw, 1.4rem)/1.25 var(--innova-font-body, 'Host Grotesk', system-ui); color: var(--innova-black); letter-spacing: -0.01em; }
.innova-news-row__cat { font: 700 0.68rem/1 var(--innova-font-body, 'Host Grotesk', system-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--innova-black); background: rgba(242,191,50,0.3); padding: 0.4rem 0.8rem; border-radius: 999px; white-space: nowrap; }
.innova-news-row__meta { font-size: 0.9rem; color: rgba(12,12,14,0.5); white-space: nowrap; }
.innova-news-row__arrow { display: inline-flex; color: var(--innova-yellow); transition: transform .3s ease; }
.innova-news-row__arrow svg { width: 1.2rem; height: 1.2rem; }
.innova-news-row:hover .innova-news-row__arrow { transform: translateX(4px); }
@media (max-width: 680px) {
	.innova-news-row { grid-template-columns: 1fr auto; gap: 0.8rem; }
	.innova-news-row__cat, .innova-news-row__meta { display: none; }
}

.innova-news__noresult { color: rgba(12,12,14,0.55); }

/* Load More su sfondo chiaro */
.innova-loadmore--light { color: var(--innova-black); border-color: rgba(12,12,14,0.22); }
.innova-loadmore--light:hover { background: var(--innova-black); border-color: var(--innova-black); color: #fff; }


/* ============================================================
   News v2: post count responsive
   - Schermi grandi (≥1700px): 15 articoli
   - MacBook Pro / desktop standard (760-1700px): 12 articoli
   - Mobile (<760px): 6 articoli
   Server carica 15; CSS nasconde gli extra del primo render
   (e dei successivi che NON sono ancora stati rivelati). Quelli aggiunti via
   AJAX hanno .is-revealed → restano visibili (l'utente ha cliccato "Carica altri").
   ============================================================ */

/* Su MacBook Pro: nascondi gli ultimi 3 della PRIMA pagina (12 visibili) */
@media (max-width: 1699.98px) {
	.innova-news__grid > li:nth-child(n+13):not(.is-revealed) { display: none; }
	.innova-news__list > li:nth-child(n+13):not(.is-revealed) { display: none; }
}
/* Su mobile: solo 6 visibili */
@media (max-width: 759.98px) {
	.innova-news__grid > li:nth-child(n+7):not(.is-revealed) { display: none; }
	.innova-news__list > li:nth-child(n+7):not(.is-revealed) { display: none; }
}

/* Single article: nuovo breadcrumb nell'hero (colori chiari) */
.innova-single__hero .innova-breadcrumb { margin-bottom: 1.4rem; }
.innova-single__hero .innova-breadcrumb__link { color: rgba(245, 243, 238, 0.7); text-decoration: none; transition: color .2s ease; }
.innova-single__hero .innova-breadcrumb__link:hover { color: var(--innova-yellow); }
.innova-single__hero .innova-breadcrumb__sep { color: rgba(245, 243, 238, 0.4); margin: 0 0.6rem; }
.innova-single__hero .innova-breadcrumb__current { color: var(--innova-yellow); }


/* ============================================================
   Single article — Indice dell'articolo (accordion auto h2/h3)
   ============================================================ */
.innova-toc {
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
	border: 1px solid rgba(12, 12, 14, 0.12); border-radius: 16px; background: #fff; overflow: hidden;
	max-width: 800px;
}
.innova-toc[open] { box-shadow: 0 14px 40px -28px rgba(12, 12, 14, 0.3); }
.innova-toc__head {
	display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
	padding: 1.2rem 1.4rem; cursor: pointer; list-style: none;
	font: 700 1.05rem/1.2 var(--innova-font-body, 'Host Grotesk', system-ui); color: var(--innova-black);
	transition: background .2s ease;
}
.innova-toc__head::-webkit-details-marker { display: none; }
.innova-toc__head:hover { background: rgba(242, 191, 50, 0.08); }
.innova-toc__head-l, .innova-toc__head-r { display: inline-flex; align-items: center; gap: 0.7rem; }
.innova-toc__head-ico { display: inline-flex; width: 1.15rem; height: 1.15rem; color: var(--innova-yellow); }
.innova-toc__head-ico svg { width: 100%; height: 100%; }
.innova-toc__count { font: 600 0.78rem/1 var(--innova-font-body, 'Host Grotesk', system-ui); text-transform: uppercase; letter-spacing: 0.14em; color: rgba(12, 12, 14, 0.5); }
.innova-toc__caret { display: inline-flex; width: 1.1rem; height: 1.1rem; color: rgba(12, 12, 14, 0.5); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.innova-toc[open] .innova-toc__caret { transform: rotate(180deg); color: var(--innova-yellow); }

.innova-toc__list { list-style: none; margin: 0; padding: 0.5rem 0 0.9rem; border-top: 1px solid rgba(12, 12, 14, 0.08); }
.innova-toc__item { margin: 0; }
.innova-toc__link {
	display: flex; align-items: baseline; gap: 0.85rem;
	padding: 0.65rem 1.4rem; text-decoration: none; color: rgba(12, 12, 14, 0.85);
	font: 500 1rem/1.4 var(--innova-font-body, 'Host Grotesk', system-ui);
	border-left: 2px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.innova-toc__link:hover { background: rgba(242, 191, 50, 0.1); color: var(--innova-black); border-left-color: var(--innova-yellow); }
.innova-toc__num { flex: 0 0 auto; font: 700 0.78rem/1 var(--innova-font-body, 'Host Grotesk', system-ui); color: var(--innova-yellow); letter-spacing: 0.08em; min-width: 1.6rem; }
.innova-toc__item--h3 .innova-toc__link { padding-left: 3.2rem; font-size: 0.94rem; color: rgba(12, 12, 14, 0.65); }
.innova-toc__item--h3 .innova-toc__num { display: none; }
.innova-toc__item--h3 .innova-toc__link::before { content: ""; flex: 0 0 auto; width: 14px; height: 1px; background: rgba(12, 12, 14, 0.25); margin-right: 0.5rem; margin-left: -1rem; align-self: center; }

/* Smooth open animation */
.innova-toc[open] .innova-toc__list { animation: innova-toc-in 0.4s cubic-bezier(.16,1,.3,1) both; }
@keyframes innova-toc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* offset per le ancore (evita di finire sotto l'header fisso) */
.innova-single__body :is(h2, h3)[id] { scroll-margin-top: 100px; }


/* ============================================================
   Single article — FAQ accordion branded (LIGHT)
   Si applica a .innova-article-faq (auto-classificato dal filtro) E ai
   <details> orfani dentro al body articolo (es. accordion Elementor),
   esclusi il TOC e i blocchi che hanno la propria classe.
   ============================================================ */
.innova-single__body details:not(.innova-toc):not([class*="innova-faq-item"]) { }

.innova-article-faq,
.innova-single__body details:not(.innova-toc):not([class*="innova-faq-item"]) {
	margin: 0 0 0.6rem; padding: 0;
	border-bottom: 1px solid rgba(12, 12, 14, 0.1);
	transition: background-color 280ms ease;
}
.innova-article-faq:first-of-type,
.innova-single__body details:not(.innova-toc):not([class*="innova-faq-item"]):first-of-type {
	border-top: 1px solid rgba(12, 12, 14, 0.1);
}
.innova-article-faq:hover,
.innova-single__body details:not(.innova-toc):not([class*="innova-faq-item"]):hover {
	background: rgba(242, 191, 50, 0.06);
}
.innova-article-faq > summary,
.innova-single__body details:not(.innova-toc):not([class*="innova-faq-item"]) > summary {
	list-style: none; cursor: pointer; padding: clamp(1.1rem, 2vw, 1.5rem) 1rem clamp(1.1rem, 2vw, 1.5rem) 0.6rem;
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	font-family: var(--innova-font-body, 'Host Grotesk', system-ui);
	font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 600; line-height: 1.35;
	color: var(--innova-black);
	transition: color 220ms ease;
}
.innova-article-faq > summary::-webkit-details-marker,
.innova-single__body details:not(.innova-toc):not([class*="innova-faq-item"]) > summary::-webkit-details-marker { display: none; }
.innova-article-faq > summary::marker,
.innova-single__body details:not(.innova-toc):not([class*="innova-faq-item"]) > summary::marker { display: none; }
.innova-article-faq:hover > summary,
.innova-article-faq[open] > summary,
.innova-single__body details:not(.innova-toc):not([class*="innova-faq-item"]):hover > summary,
.innova-single__body details:not(.innova-toc):not([class*="innova-faq-item"])[open] > summary {
	color: rgba(12, 12, 14, 0.7);
}

/* Icona +/× custom: per .innova-article-faq (controllo nostro) */
.innova-article-faq__icon { display: inline-flex; flex: 0 0 auto; width: 26px; height: 26px; color: var(--innova-yellow); }
.innova-article-faq__icon svg { width: 100%; height: 100%; }
.innova-article-faq__v { transform-origin: center; transition: transform 320ms cubic-bezier(.16,1,.3,1); }
.innova-article-faq[open] .innova-article-faq__v { transform: rotate(90deg); }

/* Icona auto per <details> orfani (Elementor): pseudo + che ruota */
.innova-single__body details:not(.innova-toc):not([class*="innova-faq-item"]):not(.innova-article-faq) > summary::after {
	content: ""; flex: 0 0 auto; width: 22px; height: 22px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2BF32' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: contain;
	transition: transform 320ms cubic-bezier(.16,1,.3,1);
}
.innova-single__body details:not(.innova-toc):not([class*="innova-faq-item"])[open] > summary::after { transform: rotate(45deg); }

/* Risposta */
.innova-article-faq[open] .innova-article-faq__a,
.innova-article-faq > .innova-article-faq__a { padding: 0 1rem 1.2rem 0.6rem; max-width: 80ch; color: rgba(12, 12, 14, 0.78); }
.innova-article-faq__a p { margin: 0 0 0.6rem; line-height: 1.7; }
.innova-article-faq__a p:last-child { margin-bottom: 0; }

/* per i details orfani: padding sui figli */
.innova-single__body details:not(.innova-toc):not([class*="innova-faq-item"]):not(.innova-article-faq) > *:not(summary) {
	padding: 0 1rem 1.2rem 0.6rem; color: rgba(12, 12, 14, 0.78); line-height: 1.7;
}

/* Smooth open */
.innova-article-faq[open] > *:not(summary),
.innova-single__body details:not(.innova-toc):not([class*="innova-faq-item"])[open] > *:not(summary) {
	animation: innova-faq-art-in 0.4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes innova-faq-art-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }


/* ============================================================
   Tag archive — hero con #hash + tag correlati
   ============================================================ */
.innova-tag__hash { color: var(--innova-yellow); margin-right: 0.1em; }
.innova-tag__related { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1.6rem 0 0; }
.innova-tag__related-label { font: 600 0.78rem/1 var(--innova-font-body, 'Host Grotesk', system-ui); text-transform: uppercase; letter-spacing: 0.14em; color: rgba(245, 243, 238, 0.5); margin-right: 0.5rem; }
.innova-tag__pill {
	padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid rgba(245, 243, 238, 0.18);
	color: rgba(245, 243, 238, 0.75); text-decoration: none;
	font: 600 0.9rem/1 var(--innova-font-body, 'Host Grotesk', system-ui);
	transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.innova-tag__pill:hover { color: var(--innova-black); background: var(--innova-yellow); border-color: var(--innova-yellow); }


/* ============================================================
   Tag archive — sezione "Articoli correlati" + "Torna alle News"
   ============================================================ */
.innova-tag__related-sec { padding-block: clamp(4rem, 9vw, 7rem) clamp(2rem, 4vw, 4rem); border-top: 1px solid rgba(12, 12, 14, 0.08); }
.innova-tag__related-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.4rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.innova-eyebrow--dark { color: rgba(12, 12, 14, 0.55); }
.innova-tag__related-title { font-family: var(--innova-font-display, 'Beconder', system-ui); font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; color: var(--innova-black); margin: 0.4rem 0 0; }
.innova-tag__related-title em { color: var(--innova-yellow); font-style: italic; }
.innova-tag__back {
	display: inline-flex; align-items: center; gap: 0.6rem;
	padding: 0.85rem 1.6rem; border-radius: 999px;
	border: 1px solid rgba(12, 12, 14, 0.25); background: transparent; color: var(--innova-black);
	font: 600 0.95rem/1 var(--innova-font-body, 'Host Grotesk', system-ui); text-decoration: none;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.innova-tag__back:hover { background: var(--innova-black); border-color: var(--innova-black); color: #fff; }
.innova-tag__back-arrow { display: inline-flex; width: 1.1rem; height: 1.1rem; transition: transform .3s ease; }
.innova-tag__back-arrow svg { width: 100%; height: 100%; }
.innova-tag__back:hover .innova-tag__back-arrow { transform: translateX(3px); }