/* ==========================================================================
   Label Studio — design system
   Brand: nero #040502 · azzurro #61B3C9 · carta. TOV: concreto, tecnico-competente.
   Richiami al mondo stampa: filetti hairline, etichette mono, segni di registro.
   ========================================================================== */

/* ---------- Tokens */
@font-face {
	font-family: "Manrope";
	src: url("../fonts/Manrope-VariableFont_wght.woff2") format("woff2");
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
}

:root {
	--c-ink: #040502;
	--c-text: #2b2b28;
	--c-muted: #6d6d68;
	--c-accent: #61b3c9;
	--c-accent-ink: #2a7a91;   /* azzurro accessibile su bianco (testo/link) */
	--c-paper: #ffffff;
	--c-paper-2: #f5f6f5;
	--c-line: #e3e4e2;
	--c-dark: #0b0b09;
	--c-dark-text: #ecEEec;
	--c-dark-muted: #b9bbb7;

	--font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	--wrap: 1180px;
	--wrap-narrow: 720px;
	--radius: 10px;
	--header-h: 80px;

	--t: 160ms ease;
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-expo: cubic-bezier(.16, 1, .3, 1);
	--t-slow: .7s var(--ease-out);
	--t-cine: 1s var(--ease-expo);
}

/* ---------- Reset essenziale */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--c-text);
	background: var(--c-paper);
	overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { color: var(--c-ink); line-height: 1.15; margin: 0 0 .6em; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: 1.22rem; letter-spacing: 0; }
p, ul, ol { margin: 0 0 1.1em; }
a { color: var(--c-accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t); }
a:hover { color: var(--c-ink); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
::selection { background: var(--c-accent); color: var(--c-ink); }

/* ---------- Utilities */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.wrap-narrow { max-width: var(--wrap-narrow); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-ink); color: var(--c-paper); padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }

.eyebrow {
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-accent-ink);
	margin: 0 0 .9em;
}
.eyebrow::before { content: "// "; color: var(--c-accent); }

/* ---------- Bottoni */
.btn {
	display: inline-flex; align-items: center; gap: .55rem;
	background: var(--c-ink); color: var(--c-paper);
	border: 1px solid var(--c-ink); border-radius: var(--radius);
	padding: .72rem 1.35rem; font-weight: 600; font-size: .97rem;
	text-decoration: none; cursor: pointer;
	transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.btn-outline { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn-big { padding: .95rem 1.6rem; font-size: 1.05rem; }
.btn-small { padding: .45rem .95rem; font-size: .88rem; }
.btn-onDark { background: var(--c-accent); color: var(--c-ink); border-color: var(--c-accent); }
.btn-onDark:hover { background: var(--c-accent); border-color: var(--c-paper); color: var(--c-ink); }
.link-plain { font-family: var(--font-mono); font-size: .95rem; }

/* ---------- Header */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--c-paper) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--c-line);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--c-line), 0 8px 24px rgba(4, 5, 2, .05); }
body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); } /* solo utenti loggati */
.header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 3vw, 3rem); min-height: var(--header-h); }
.brand { color: var(--c-ink); display: inline-flex; align-items: center; gap: .75rem; flex: none; min-height: 44px; }
.brand .site-logo { height: 19px; width: auto; }
.brand .brand-mark { height: 28px; width: auto; flex: none; }

.site-nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); flex: 1; min-width: 0; }
.nav-list { display: flex; align-items: center; gap: clamp(1.5rem, 2.1vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-item > a {
	display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
	color: var(--c-ink); text-decoration: none; font-size: .95rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
	padding: .6rem 0; border-bottom: 2px solid transparent;
}
.nav-item > a:hover { border-bottom-color: var(--c-accent); }
.sub-toggle { display: none; }
.sub-menu {
	position: absolute; top: 100%; left: -1rem; min-width: 270px;
	background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius);
	box-shadow: 0 14px 34px rgba(4, 5, 2, .09);
	list-style: none; margin: .4rem 0 0; padding: .45rem;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.nav-item:hover .sub-menu,
.nav-item:focus-within .sub-menu,
.nav-item.sub-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sub-menu a {
	display: block; padding: .55rem .8rem; color: var(--c-text); text-decoration: none;
	border-radius: var(--radius); font-size: .93rem;
}
.sub-menu a:hover { background: var(--c-paper-2); color: var(--c-ink); }

/* Mega menu Digital & Web: le competenze restano visibili senza appesantire la nav. */
.nav-item.has-mega { position: static; }
.mega-menu {
	left: clamp(1.1rem, 4vw, 2rem); right: clamp(1.1rem, 4vw, 2rem); top: calc(100% - 1px);
	min-width: 0; width: auto; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	overflow: hidden; border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: 0 18px 42px rgba(4, 5, 2, .12);
}
.mega-menu-head {
	grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 2rem;
	padding: 1rem 1.25rem; background: var(--c-paper-2); border-bottom: 1px solid var(--c-line);
}
.mega-menu-head > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 1rem; }
.mega-menu-head strong { color: var(--c-ink); font-size: .96rem; }
.mega-menu-head > div > span { color: var(--c-muted); font-size: .84rem; }
.mega-menu .mega-all {
	display: inline-flex; align-items: center; gap: .5rem; flex: none; padding: .25rem 0;
	color: var(--c-ink); font-size: .84rem; font-weight: 700; background: transparent;
	border-bottom: 1px solid var(--c-ink); border-radius: 0;
}
.mega-menu .mega-all:hover { color: var(--c-accent-ink); border-color: var(--c-accent-ink); background: transparent; }
.mega-group { min-width: 0; padding: 1.2rem 1.15rem 1.3rem; border-right: 1px solid var(--c-line); }
.mega-group:last-child { border-right: 0; }
.mega-menu .mega-primary {
	display: block; padding: 0 0 .45rem; color: var(--c-ink); font-size: 1rem; font-weight: 750;
	background: transparent; border-radius: 0;
}
.mega-menu .mega-primary:hover { color: var(--c-accent-ink); background: transparent; }
.mega-summary { display: block; min-height: 4.2em; color: var(--c-muted); font-size: .79rem; line-height: 1.48; }
.mega-links { list-style: none; margin: .8rem 0 0; padding: .65rem 0 0; border-top: 1px solid var(--c-line); }
.mega-links li + li { margin-top: .08rem; }
.mega-menu .mega-links a {
	position: relative; display: block; padding: .35rem .85rem .35rem 0;
	color: var(--c-text); font-size: .79rem; line-height: 1.35; background: transparent; border-radius: 0;
}
.mega-menu .mega-links a::after {
	content: ""; position: absolute; right: 0; top: .72rem; width: 5px; height: 5px;
	border-top: 1px solid var(--c-accent-ink); border-right: 1px solid var(--c-accent-ink); transform: rotate(45deg);
	transition: transform var(--t);
}
.mega-menu .mega-links a:hover { color: var(--c-accent-ink); background: transparent; }
.mega-menu .mega-links a:hover::after { transform: translateX(3px) rotate(45deg); }
.nav-actions { display: flex; align-items: center; gap: .625rem; flex: none; }
.nav-actions .btn { min-height: 44px; justify-content: center; padding: .6rem 1rem; font-size: .9rem; line-height: 1.25; white-space: nowrap; }
.nav-actions .nav-contact { min-width: 104px; padding-inline: 1.25rem; }
.nav-actions .nav-whatsapp { border-color: var(--c-line); color: var(--c-text); font-weight: 550; }
.nav-actions .nav-whatsapp:hover { border-color: var(--c-accent); color: var(--c-ink); }
.nav-whatsapp .ico-svg { width: 18px; height: 18px; }

.nav-toggle { display: none; place-items: center; width: 44px; height: 44px; flex: none; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 0; cursor: pointer; }
.nav-toggle-box { display: flex; flex-direction: column; gap: 6px; width: 22px; }
.nav-toggle-box span { display: block; height: 2px; background: var(--c-ink); transition: transform var(--t), opacity var(--t); }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Hero */
.hero { position: relative; padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; max-width: var(--wrap); }
.hero-title { max-width: 17ch; font-size: clamp(2.6rem, 5.6vw, 4rem); letter-spacing: -.03em; }
.hero-sub { font-size: 1.18rem; max-width: 52ch; color: var(--c-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.hero-proof {
	margin: 1.4rem 0 0;
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .08em;
	color: var(--c-muted);
}

/* ---------- Numbers strip */
.numbers { position: relative; background: var(--c-dark); color: var(--c-dark-text); padding: 2.2rem 0; }
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.num strong { display: block; font-family: var(--font-mono); font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--c-accent); letter-spacing: -.02em; }
.num span { font-size: .9rem; color: var(--c-dark-muted); }

/* ---------- Sezioni */
.section { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.section-alt { background: var(--c-paper-2); border-block: 1px solid var(--c-line); }
.section-head { margin-bottom: 2.4rem; max-width: 720px; }
.section-head h2 a { color: inherit; text-decoration: none; }
.section-head h2 a:hover { color: var(--c-accent-ink); }
.section-sub { color: var(--c-muted); font-size: 1.08rem; }

/* ---------- Card */
.cards { display: grid; gap: 1.1rem; }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.card {
	background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius);
	transition: border-color var(--t), transform var(--t), box-shadow var(--t);
	display: flex;
}
.card:hover { border-color: var(--c-accent); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(4, 5, 2, .06); }
.card-link { display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.2rem; text-decoration: none; color: inherit; width: 100%; }
.card .eyebrow { margin-bottom: .7em; }
.card-title { margin-bottom: .45em; }
.card:hover .card-title { color: var(--c-accent-ink); }
.card-text { font-size: .96rem; color: var(--c-muted); margin-bottom: 1.2em; }
.card-more {
	margin-top: auto; display: flex; justify-content: space-between; align-items: center;
	font-family: var(--font-mono); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--c-ink); border-top: 1px solid var(--c-line); padding-top: .85rem; margin-bottom: 0;
}
.card-more .arrow { transition: transform var(--t); }
.card:hover .card-more .arrow { transform: translateX(4px); color: var(--c-accent-ink); }

/* ---------- Elenco servizi */
.service-list { border-top: 1px solid var(--c-line); }
.service-row { border-bottom: 1px solid var(--c-line); }
.service-link {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.25rem;
	padding: 1.35rem 0;
	color: inherit;
	text-decoration: none;
	transition: color var(--t), background var(--t), transform var(--t);
}
.service-link:hover { color: var(--c-ink); transform: translateX(6px); }
.service-icon .ico { width: 52px; height: 52px; }
.service-copy { display: grid; grid-template-columns: minmax(170px, .45fr) minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
.service-title { margin: 0; font-size: 1.18rem; font-weight: 750; color: var(--c-ink); letter-spacing: -.02em; }
.service-copy > p { margin: 0; }
.service-summary { color: var(--c-muted); max-width: 65ch; }
.service-action { font-size: 1.4rem; color: var(--c-accent-ink); transition: transform var(--t); }
.service-link:hover .service-action { transform: translateX(5px); }

/* ---------- Strip AI (fondo scuro) */
.strip-ai { background: var(--c-dark); color: var(--c-dark-text); padding: clamp(2.6rem, 5vw, 4rem) 0; }
.strip-ai-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.strip-ai h2 { color: var(--c-paper); margin-bottom: .4em; }
.strip-ai p { color: var(--c-dark-muted); max-width: 60ch; margin: 0; }
.strip-ai .eyebrow { color: var(--c-accent); }

/* ---------- Steps (come lavoriamo) */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; padding: 0; margin: 0; }
.steps li { counter-increment: step; border-top: 2px solid var(--c-ink); padding-top: 1rem; }
.steps li::before {
	content: "0" counter(step);
	font-family: var(--font-mono); color: var(--c-accent-ink); font-size: .85rem; letter-spacing: .1em;
	display: block; margin-bottom: .4rem;
}
.steps strong { display: block; color: var(--c-ink); font-size: 1.08rem; margin-bottom: .25rem; }
.steps span { font-size: .93rem; color: var(--c-muted); }

/* ---------- CTA finale */
.cta-final { background: var(--c-dark); color: var(--c-dark-text); padding: clamp(3.4rem, 7vw, 5.5rem) 0; text-align: center; }
.cta-final h2 { color: var(--c-paper); }
.cta-final p { color: var(--c-dark-muted); max-width: 54ch; margin-inline: auto; }
.cta-mark { height: 54px; width: auto; margin: 0 auto 1.4rem; color: var(--c-paper); opacity: .9; }
.cta-actions { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.cta-final .btn { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
.cta-final .btn:hover { background: var(--c-accent); border-color: var(--c-paper); color: var(--c-ink); }
.cta-final .btn-outline { background: transparent; color: var(--c-paper); border-color: var(--c-dark-muted); }
.cta-final .link-plain { color: var(--c-dark-muted); }
.cta-final .link-plain:hover { color: var(--c-paper); }

/* ---------- Page head (pagine interne) */
.page-head { padding: clamp(2.6rem, 5vw, 4rem) 0 0; }
.page-head h1 { max-width: 22ch; }
.crumbs { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .05em; color: var(--c-muted); margin-bottom: 1.4rem; }
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-accent-ink); }
.crumbs span[aria-current] { color: var(--c-ink); }

/* ---------- Prose (contenuti Gutenberg) */
.prose h2 { margin-top: 1.9em; }
.prose h3 { margin-top: 1.6em; }
.prose ul li, .prose ol li { margin-bottom: .35em; }
.prose blockquote { margin: 1.6em 0; padding: 1rem 1.15rem; border-radius: var(--radius); background: var(--c-paper-2); color: var(--c-muted); font-size: 1.1rem; }
.prose img { border-radius: var(--radius); }
.prose em:only-child { color: var(--c-muted); } /* nota "contenuti in preparazione" */

.hub-intro { max-width: 720px; font-size: 1.12rem; }

/* ---------- Blog */
.cat-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.cat-nav a {
	font-family: var(--font-mono); font-size: .8rem; letter-spacing: .05em; text-decoration: none;
	border: 1px solid var(--c-line); border-radius: var(--radius); padding: .35rem .75rem; color: var(--c-text);
	transition: border-color var(--t), color var(--t);
}
.cat-nav a:hover { border-color: var(--c-accent); color: var(--c-accent-ink); }
.pagination { margin-top: 2.4rem; font-family: var(--font-mono); }
.pagination .nav-links { display: flex; gap: .6rem; justify-content: center; }
.pagination .page-numbers { border: 1px solid var(--c-line); border-radius: var(--radius); padding: .3rem .7rem; text-decoration: none; }
.pagination .page-numbers.current { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.post-nav { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--c-line); font-size: .95rem; }

/* ---------- Contatti */
.contact-card .card-title a { text-decoration: none; color: var(--c-ink); }
.contact-card .card-title a:hover { color: var(--c-accent-ink); }
.contact-card { padding: 1.5rem; flex-direction: column; }
.contact-note { margin-top: 3rem; }

/* ---------- Footer */
.site-footer { background: var(--c-dark); color: var(--c-dark-muted); margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.4rem; padding-block: 3.4rem 2.4rem; }
.footer-logo { height: 15px; width: auto; color: var(--c-paper); margin-bottom: 1rem; }
.footer-tagline { font-size: .92rem; }
.footer-contacts { list-style: none; margin: 1.2rem 0 0; padding: 0; font-size: .92rem; }
.footer-contacts li { margin-bottom: .35rem; }
.footer-title { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-paper); margin-bottom: .9rem; }
.footer-title a { color: inherit; text-decoration: none; }
.footer-col ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.footer-col ul li { margin-bottom: .45rem; }
.site-footer a { color: var(--c-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); }
.footer-dago img { height: 26px; width: auto; margin-bottom: .8rem; }
.footer-note { font-size: .85rem; }
.footer-legal {
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	border-top: 1px solid rgba(236, 238, 236, .12); padding-block: 1.2rem;
	font-size: .82rem; font-family: var(--font-mono);
}
.footer-legal p { margin: 0; }

/* ---------- Responsive */
@media (max-width: 1180px) {
	:root { --header-h: 72px; }
	.site-header { background: var(--c-paper); backdrop-filter: none; }
	.brand { gap: .65rem; }
	.brand .site-logo { height: 18px; }
	.brand .brand-mark { height: 26px; }
	.nav-toggle { display: grid; }
	.site-nav {
		position: fixed; inset: var(--header-h) 0 0 0; z-index: 40;
		background: var(--c-paper); border-top: 1px solid var(--c-line);
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 1rem clamp(1.1rem, 4vw, 2rem) 2rem; overflow-y: auto;
		display: none;
	}
	.site-nav.is-open { display: flex; }
	.nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-item > a { display: block; padding: .9rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--c-line); }
	.nav-item.has-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; }
	.sub-toggle {
		display: block; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; position: relative;
	}
	.sub-toggle span { position: absolute; inset: 50% auto auto 50%; width: 10px; height: 10px; border-right: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); transform: translate(-50%, -70%) rotate(45deg); transition: transform var(--t); }
	.sub-toggle[aria-expanded="true"] span { transform: translate(-50%, -30%) rotate(225deg); }
	.sub-menu {
		grid-column: 1 / -1;
		position: static; min-width: 0; border: 0; box-shadow: none; margin: 0; padding: 0 0 0 .9rem;
		opacity: 1; visibility: hidden; transform: none; display: none; background: transparent;
	}
	.nav-item.sub-open .sub-menu { display: block; visibility: visible; }
	.sub-menu a { padding: .7rem 0; border-bottom: 1px solid var(--c-line); border-radius: 0; }
	.mega-menu { display: none; overflow: visible; }
	.nav-item.sub-open .mega-menu { display: block; }
	.mega-menu-head { display: none; }
	.mega-group { padding: .35rem 0 .65rem; border-right: 0; border-bottom: 1px solid var(--c-line); }
	.mega-group:last-child { border-bottom: 0; }
	.mega-menu .mega-primary { padding: .7rem 0 .35rem; border-bottom: 0; font-size: 1rem; }
	.mega-summary { display: none; }
	.mega-links { margin: 0; padding: 0 0 .2rem .8rem; border-top: 0; }
	.mega-links li + li { margin-top: 0; }
	.mega-menu .mega-links a { padding: .48rem 1rem .48rem 0; border-bottom: 0; font-size: .91rem; }
	.mega-menu .mega-links a::after { top: .82rem; }
	.nav-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.5rem; }
	.nav-actions .btn { width: 100%; }
}

@media (max-width: 980px) {
	.numbers-grid { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.ico-grid { grid-template-columns: repeat(2, 1fr); }
	.timeline { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.numbers-grid { gap: 1.1rem; }
	.steps { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
	.hero-actions .btn { width: 100%; justify-content: center; }
	.post-nav { flex-direction: column; }
	.ico-grid, .ico-grid-2, .who-list, .fit-cols, .split-cols, .antihype-list, .timeline { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Motion — "a registro"
   Il sito nasce dalla stampa: il gesto guida è il registro delle lastre.
   Il marchio arriva a registro al caricamento, si disallinea con lo scroll
   e con la velocità, torna a registro quando ci si ferma. Tutto il resto
   (titoli, filetti, immagini che entrano come un foglio in macchina,
   contatori, fasce che si aprono) sostiene quel gesto.
   Stati nascosti e scrub esistono solo con html.js-anim (aggiunta da main.js
   se il motion è consentito): senza JS o con reduced-motion il sito è
   completo e statico. Variabili dal motore: --p (progresso scena),
   --sv (velocità scroll, -1…1), --mx/--my (cursore sulle card).
   ========================================================================== */

/* ---------- Keyframes */
@keyframes ls-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ls-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ls-word-up { from { transform: translateY(118%) rotate(2deg); } to { transform: none; } }
@keyframes ls-glow-drift { from { transform: translate(0, 0); } to { transform: translate(-6%, 5%); } }
@keyframes ls-blob-drift { to { transform: translate(-160px, 70px) scale(1.18); } }
@keyframes ls-marquee { to { transform: translateX(-50%); } }
@keyframes ls-draw { to { stroke-dashoffset: 0; } }
@keyframes ls-sheet-in { from { opacity: 0; transform: translateY(26px) rotate(-1.5deg) scale(.97); } }
@keyframes ls-reg-flash { 0% { stroke: var(--c-accent-ink); } 100% { stroke: var(--c-muted); } }
@keyframes ls-vt-out { to { opacity: 0; transform: translateY(-12px); filter: blur(6px); } }
@keyframes ls-vt-in { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } }

/* ---------- Hero: copia + foglio macchina */
.hero { isolation: isolate; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
.hero::after {
	content: ""; position: absolute; inset: -15%; z-index: 0; pointer-events: none;
	background: radial-gradient(620px 440px at 76% 42%, color-mix(in srgb, var(--c-accent) 18%, transparent), transparent 70%);
	animation: ls-glow-drift 11s ease-in-out infinite alternate;
}

/* ---------- Flussi digitali: curve ampie nei margini, area di lettura libera */
.ls-bg-host { position: relative; isolation: isolate; }
.ls-bg-scene {
	position: absolute; inset: 0; z-index: -1; overflow: hidden;
	pointer-events: none; user-select: none;
	--bg-accent: var(--c-accent-ink);
}
.ls-bg-rail {
	position: absolute; top: 0; bottom: 0;
	width: clamp(24px, calc((100% - var(--wrap)) / 2 + 1rem), 260px);
	overflow: hidden;
	mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
}
.ls-bg-rail-left { left: 0; }
.ls-bg-rail-right { right: 0; transform: scaleX(-1); }
.ls-bg-art {
	position: absolute; left: -112px; top: 50%; margin-top: -400px;
	width: 400px; height: 800px; max-width: none;
	fill: none; stroke: var(--bg-accent); stroke-width: 1; stroke-linecap: round;
}
.ls-bg-rail-right .ls-bg-art { margin-top: -300px; }
.ls-bg-strand { opacity: .22; }
.ls-bg-stream-far { transform: translate(-38px, 140px) rotate(-14deg); transform-origin: 50% 50%; opacity: .45; }
.ls-bg-pulse { stroke: var(--c-accent); stroke-width: 2.8; stroke-dasharray: .035 .965; stroke-dashoffset: .35; opacity: 0; }
.ls-bg-connections .ls-bg-strand { opacity: .3; }
.cta-final .ls-bg-scene { --bg-accent: var(--c-accent); }
.cta-final .ls-bg-strand { opacity: .34; }
/* These surfaces now use the scroll composition instead of autonomous glows. */
.hero.ls-bg-host::after, .cta-final.ls-bg-host::before { display: none; }
.ls-bg-moving .ls-bg-stream-near {
	transform: translate3d(calc(var(--bg-shift, 0px) * .12), calc(var(--bg-shift, 0px) * .85), 0) rotate(calc((var(--bg-p, .35) - .5) * 8deg));
	transform-origin: 50% 50%;
}
.ls-bg-moving .ls-bg-stream-far {
	transform: translate3d(-38px, calc(140px - var(--bg-shift, 0px) * .5), 0) rotate(-14deg);
}
.ls-bg-moving .ls-bg-pulse {
	opacity: .9; stroke-dashoffset: calc(var(--flow-phase, 0) - var(--bg-p, .35) * 1.65);
}
@media (max-width: 1180px), (hover: none), (pointer: coarse) {
	.ls-bg-scene { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ls-bg-stream-near { transform: none !important; }
	.ls-bg-stream-far { transform: translate(-38px, 140px) rotate(-14deg) !important; }
	.ls-bg-pulse { display: none; }
}
@media print { .ls-bg-scene { display: none; } }

.hero-sheet { margin: 0; justify-self: end; width: min(100%, 400px); position: relative; }
.hero-sheet svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 22px 40px rgba(4, 5, 2, .09)) drop-shadow(0 2px 4px rgba(4, 5, 2, .05)); }
.hs-paper { fill: var(--c-paper); stroke: var(--c-line); }
.hs-marks { fill: none; stroke: var(--c-muted); stroke-width: 1; }
.hs-label, .hs-readout { font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; fill: var(--c-muted); }
.hs-readout { font-variant-numeric: tabular-nums; letter-spacing: .06em; transition: fill .3s ease; }
.hs-plate { mix-blend-mode: multiply; }
.hero-sheet.is-registered .hs-readout { fill: var(--c-accent-ink); font-weight: 700; }

html.js-anim .hero-sheet { animation: ls-sheet-in 1.1s var(--ease-expo) .15s both; }
html.js-anim .hs-draw { stroke-dasharray: 60; stroke-dashoffset: 60; animation: ls-draw .9s var(--ease-out) forwards; animation-delay: calc(.45s + var(--i, 0) * 70ms); }
html.js-anim .hs-reg .hs-draw { animation-delay: calc(.45s + var(--i, 0) * 70ms); }
html.js-anim .hero-sheet.is-registered .hs-reg .hs-draw { animation: ls-draw .01s forwards, ls-reg-flash 1.2s ease-out; }
/* Lastre: la posizione la scrive il motore (translate in unità SVG). */
html.js-anim .hs-plate-c { translate: var(--cx, 0) var(--cy, 0); }
html.js-anim .hs-plate-k { translate: var(--kx, 0) var(--ky, 0); }
/* Uscita: il foglio si allontana più lento del testo (profondità). */
html.js-anim .hero-sheet svg {
	transform: translate3d(0, calc(var(--p, 0) * 9vh), 0) rotate(calc(var(--p, 0) * 3deg));
	will-change: transform;
}
html.js-anim .hero-copy {
	transform-origin: 0 20%;
	transform: translate3d(0, calc(var(--p, 0) * -7vh), 0) scale(calc(1 - var(--p, 0) * .06));
	opacity: clamp(0, calc(1 - var(--p, 0) * 1.1), 1);
	filter: blur(calc(var(--p, 0) * 3px));
}
html.js-anim .hero .hero-sub { animation: ls-fade-up .7s var(--ease-out) .55s both; }
html.js-anim .hero .hero-actions { animation: ls-fade-up .7s var(--ease-out) .72s both; }
html.js-anim .hero .hero-proof { animation: ls-fade-in .9s ease 1s both; }

/* Marchio nell'header e nella CTA: le due lastre (primo g = azzurro,
   secondo = nero) si separano con la velocità di scroll. */
.brand-mark > g > g, .cta-mark > g > g { transition: translate .5s var(--ease-out); }
html.js-anim .brand-mark > g > g:first-child { translate: calc(var(--sv, 0) * 26px) calc(var(--sv, 0) * -10px); transition: none; }
html.js-anim .brand-mark > g > g:last-child  { translate: calc(var(--sv, 0) * -18px) calc(var(--sv, 0) * 8px); transition: none; }
html.js-anim .cta-mark > g > g:first-child { translate: 34px -18px; transition: translate 1.4s var(--ease-expo) .25s; }
html.js-anim .cta-mark > g > g:last-child  { translate: -26px 14px; transition: translate 1.4s var(--ease-expo) .25s; }
html.js-anim .cta-final.in .cta-mark > g > g { translate: 0 0; }

/* ---------- Reveal (varianti per materiale, non una sola entrata ovunque) */
/* rv: messa a fuoco (card, blocchi) */
html.js-anim .rv { opacity: 0; transform: translateY(30px) scale(.985); filter: blur(10px); }
/* rv-line: righe di elenco — salgono mentre il filetto si traccia */
html.js-anim .rv-line { opacity: 0; transform: translateY(18px); }
/* rv-soft: testi di accompagnamento */
html.js-anim .rv-soft { opacity: 0; transform: translateY(14px); }
html.js-anim :is(.rv, .rv-line, .rv-soft).in {
	opacity: 1; transform: none; filter: none;
	transition: opacity .9s var(--ease-expo), transform 1s var(--ease-expo), filter .9s var(--ease-expo);
	transition-delay: calc(var(--d, 0) * 80ms);
}
/* Filetto che si disegna sopra la riga */
.rv-line { position: relative; }
html.js-anim .rv-line::before {
	content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
	background: var(--c-ink); transform: scaleX(0); transform-origin: left; pointer-events: none;
}
html.js-anim .rv-line.in::before {
	transform: scaleX(1); opacity: 0;
	transition: transform 1.1s var(--ease-expo), opacity 1.2s ease 1s;
	transition-delay: calc(var(--d, 0) * 80ms), calc(1s + var(--d, 0) * 80ms);
}
/* Dopo il reveal restano le transizioni di hover native del componente */
.service-link, .ico-item, .card { transition-property: color, background, transform, border-color, box-shadow, opacity, filter; }

/* rv-press: le immagini entrano come un foglio che passa in macchina */
html.js-anim .rv-press { clip-path: inset(0 100% 0 0 round var(--radius)); }
html.js-anim .rv-press.in { clip-path: inset(0 0 0 0 round var(--radius)); transition: clip-path 1.4s var(--ease-expo); }
html.js-anim .rv-press img { transform: translate3d(0, calc((var(--p, .5) - .5) * -7%), 0) scale(1.12); will-change: transform; }

/* ---------- Titoli parola per parola (span creati da JS) */
.hw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.hwi { display: inline-block; }
/* Le parole lunghe nelle traduzioni restano leggibili su schermi stretti. */
html:not([lang^="it"]) .hw,
html:not([lang^="it"]) .hwi { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
html.js-anim .split-ready .hwi {
	transform: translateY(118%);
	animation: ls-word-up .7s var(--ease-expo) forwards;
	animation-delay: calc(var(--wi, 0) * 40ms + .1s);
}
html.js-anim .wsplit .hwi { transform: translateY(118%); }
html.js-anim .wsplit.in .hwi {
	animation: ls-word-up .9s var(--ease-expo) both;
	animation-delay: calc(var(--wi, 0) * 45ms);
}

/* ---------- Pagine interne: entrata + uscita in dolly */
html.js-anim .page-head .crumbs { animation: ls-fade-up .5s var(--ease-out) both; }
html.js-anim .page-head .kicker,
html.js-anim .page-head .section-sub { animation: ls-fade-up .7s var(--ease-out) .35s both; }
html.js-anim .page-head > .wrap {
	transform-origin: 0 20%;
	transform: translate3d(0, calc(var(--p, 0) * -5vh), 0);
	opacity: clamp(0, calc(1 - var(--p, 0) * 1.1), 1);
	filter: blur(calc(var(--p, 0) * 4px));
}

/* ---------- Marquee: guidato dalla velocità di scroll (JS), CSS di riserva */
.marquee {
	border-block: 1px solid var(--c-line);
	overflow: hidden; padding: .85rem 0;
	background: var(--c-paper);
}
.marquee-track { display: flex; width: max-content; animation: ls-marquee 32s linear infinite; }
.marquee-inner { display: flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; }
.marquee .mi {
	font-family: var(--font-mono); font-size: .8rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--c-muted); white-space: nowrap;
}
.marquee .mi-sep { color: var(--c-accent); letter-spacing: 0; }
html.js-anim .marquee-track { animation: none; will-change: transform; }
html.js-anim .marquee .mi { display: inline-block; transform: skewX(calc(var(--sv, 0) * -12deg)); }

/* ---------- Header: nasconde scendendo, riappare risalendo + progresso */
.site-header { transition: transform .35s var(--ease-out), box-shadow .3s ease, background .3s ease; }
.site-header.is-hidden { transform: translateY(-100%); }
body.admin-bar .site-header.is-hidden { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 32px))); }
.scroll-progress {
	position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
	background: var(--c-accent); transform: scaleX(var(--sp, 0)); transform-origin: left;
	pointer-events: none;
}
@media (min-width: 1181px) {
	.site-nav, .nav-list, .nav-item { min-height: var(--header-h); }
	.nav-list { margin-inline: auto; }
	.nav-item { display: flex; align-items: center; }
	.nav-item > a {
		border-bottom: 0;
		background: linear-gradient(var(--c-accent), var(--c-accent)) left bottom / 0% 2px no-repeat;
		transition: background-size .28s var(--ease-out);
	}
	.nav-item.has-sub > a::after {
		content: ""; width: 6px; height: 6px; margin-top: -3px;
		border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg);
	}
	.nav-item > a:hover, .nav-item:focus-within > a { background-size: 100% 2px; }
}

/* ---------- Bottoni: riempimento dal basso + spinta magnetica (translate da JS) */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: background var(--t), color .25s ease, border-color var(--t), translate .45s var(--ease-out); }
.btn::before {
	content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-accent);
	transform: translateY(101%); transition: transform .45s var(--ease-expo);
}
.btn:hover::before { transform: none; }
.btn:hover { background: var(--c-ink); color: var(--c-ink); border-color: var(--c-accent); }
.btn-outline:hover { background: transparent; }
.btn-onDark::before, .cta-final .btn::before { background: var(--c-paper); }
.btn > span[aria-hidden] { display: inline-block; transition: transform .35s var(--ease-expo); }
.btn:hover > span[aria-hidden] { transform: translateX(4px); }
.cta-final .btn-outline::before { background: var(--c-paper); }
.cta-final .btn-outline:hover { color: var(--c-ink); }

/* ---------- Card e blocchi icona: alone che segue il cursore */
.card, .ico-item { position: relative; }
.card::after, .ico-item::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c-accent) 15%, transparent), transparent 65%);
	opacity: 0; transition: opacity .35s ease;
}
.card:hover::after, .ico-item:hover::after { opacity: 1; }
.card:hover { box-shadow: 0 18px 40px rgba(4, 5, 2, .1); }

/* ---------- Elenco servizi: la riga si "inchiostra" all'hover */
.service-row { position: relative; }
.service-link { position: relative; }
.service-link::before {
	content: ""; position: absolute; inset: 0 -1rem; z-index: -1; border-radius: var(--radius);
	background: color-mix(in srgb, var(--c-accent) 9%, transparent);
	transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-expo);
}
.service-link:is(:hover, :focus-visible)::before { transform: none; }
.service-list { isolation: isolate; }
.service-link .ico { transition: border-color var(--t), background var(--t), transform .45s var(--ease-expo); }
.service-link:is(:hover, :focus-visible) .ico { border-color: var(--c-accent-ink); background: var(--c-paper); transform: none; }

/* Gesti brevi: terminale, vendita, ricerca, manutenzione e impulso AI. */
.service-link .ico-svg { transform-origin: center; }
.service-link .ico-svg > * { transform-box: view-box; transform-origin: 12px 12px; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.service-link:is(:hover, :focus-visible) [data-ls-icon="monitor"] .a { animation: ls-icon-terminal .55s var(--ease-expo) both; }
	.service-link:is(:hover, :focus-visible) [data-ls-icon="cart"] { animation: ls-icon-cart .5s var(--ease-expo) both; }
	.service-link:is(:hover, :focus-visible) [data-ls-icon="search"] .a { animation: ls-icon-scan .65s var(--ease-expo) both; }
	.service-link:is(:hover, :focus-visible) [data-ls-icon="wrench"] > path:first-child { animation: ls-icon-turn .65s var(--ease-expo) both; }
	.service-link:is(:hover, :focus-visible) [data-ls-icon="chip"] .a { animation: ls-icon-core .65s var(--ease-expo) both; }
	.service-link:is(:hover, :focus-visible) [data-ls-icon="printer"] .a { animation: ls-icon-terminal .55s var(--ease-expo) both; }
}
@keyframes ls-icon-terminal { 0% { stroke-dasharray: 16; stroke-dashoffset: 16; opacity: .3; } 100% { stroke-dasharray: 16; stroke-dashoffset: 0; opacity: 1; } }
@keyframes ls-icon-cart { 35% { transform: translateX(3px) rotate(-5deg); } 100% { transform: none; } }
@keyframes ls-icon-scan { 0% { transform: translate(-1.5px, 1.5px); opacity: .35; } 55% { transform: translate(1.5px, -1.5px); } 100% { transform: none; opacity: 1; } }
@keyframes ls-icon-turn { 100% { transform: rotate(180deg); } }
@keyframes ls-icon-core { 45% { transform: scale(1.45); fill: var(--c-accent); } 100% { transform: none; fill: transparent; } }

/* ---------- Numbers: contatori (testo definitivo senza JS) */
.num strong { font-variant-numeric: tabular-nums; }

/* ---------- Steps: la linea si disegna seguendo lo scroll (scrub) */
.steps li { position: relative; }
.steps li::after {
	content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 100%;
	background: var(--c-accent); transform: scaleX(0); transform-origin: left;
}
html.js-anim .steps li { --pi: clamp(0, calc((var(--p, 0) - var(--i, 0) * .14) / .3), 1); }
html.js-anim .steps li::after { transform: scaleX(var(--pi, 0)); }
/* Titoli e numeri restano opachi: il contrasto non dipende dallo scroll. */
html.js-anim .steps strong { transform: translateX(calc((1 - var(--pi, 0)) * -10px)); }

/* ---------- Fasce scure: bagliore, vignettatura, inquadratura che si apre */
.strip-ai, .cta-final { position: relative; overflow: hidden; }
.strip-ai .wrap, .cta-final .wrap { position: relative; z-index: 1; }
.strip-ai::before, .cta-final::before {
	content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 26%, transparent), transparent 65%);
	filter: blur(12px); pointer-events: none;
	animation: ls-blob-drift 16s ease-in-out infinite alternate;
}
.strip-ai::before { top: -200px; right: -140px; }
.cta-final::before { bottom: -260px; left: -160px; animation-duration: 19s; }
.numbers::after, .strip-ai::after, .cta-final::after, .antihype::after, .dago-cta::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(130% 105% at 50% 42%, transparent 58%, rgba(0, 0, 0, .32) 100%);
}
html.js-anim :is(.numbers, .strip-ai, .cta-final, .antihype, .dago-cta) {
	--pe: clamp(0, calc(var(--p, 1) / .4), 1);
	transform: scale(calc(.955 + .045 * var(--pe)));
	clip-path: inset(0 round calc((1 - var(--pe)) * 26px));
}

/* Fascia tipografie con la macchina offset */
.strip-print { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.strip-print::before { display: none; }
.strip-bg { position: absolute; inset: 0; z-index: 0; }
.strip-bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.strip-print::after { background: linear-gradient(90deg, var(--c-dark) 18%, color-mix(in srgb, var(--c-dark) 55%, transparent) 55%, transparent 85%); z-index: 0; }
html.js-anim .strip-bg img { transform: translate3d(0, calc((var(--p, .5) - .5) * -12%), 0) scale(1.18); will-change: transform; }
.strip-print .strip-ai-inner { position: relative; z-index: 1; }
.strip-print h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
@media (max-width: 980px) {
	.strip-print::after { background: linear-gradient(0deg, var(--c-dark) 30%, color-mix(in srgb, var(--c-dark) 70%, transparent) 70%, color-mix(in srgb, var(--c-dark) 35%, transparent)); }
	.strip-bg img { object-position: 78% center; }
}

.cta-mark { height: 64px; }

/* ---------- Immagini */
.page-media, .post-cover, .card-media { overflow: hidden; }
.card-media img { transition: transform .9s var(--ease-out); }
.card:hover .card-media img { transform: scale(1.055); }

/* ---------- FAQ: apertura fluida dove supportata */
@supports selector(::details-content) {
	.faq-item { interpolate-size: allow-keywords; }
	.faq-item::details-content {
		block-size: 0; overflow: clip;
		transition: block-size .45s var(--ease-expo), content-visibility .45s allow-discrete;
	}
	.faq-item[open]::details-content { block-size: auto; }
}

/* ---------- Superfici del browser */
html { scrollbar-color: color-mix(in srgb, var(--c-ink) 35%, transparent) transparent; accent-color: var(--c-accent-ink); caret-color: var(--c-accent-ink); }

/* ---------- Stacco tra pagine (View Transitions cross-document) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) { animation: ls-vt-out .28s ease both; }
	::view-transition-new(root) { animation: ls-vt-in .5s var(--ease-out) both; }
}

@media (max-width: 980px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero-sheet { justify-self: start; width: min(100%, 340px); margin-top: .5rem; }
}

@media print {
	html.js-anim :is(.rv, .rv-line, .rv-soft, .rv-press, .wsplit .hwi) { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* ==========================================================================
   Contenuti interni (Mese 2): kicker, icone, elenchi, FAQ, timeline, DAGO
   ========================================================================== */

/* ---------- Kicker sotto l'H1 (promessa) */
.kicker { font-size: 1.14rem; color: var(--c-muted); max-width: 62ch; margin: .2rem 0 0; }
html.js-anim .page-head .kicker { animation: ls-fade-up .65s var(--ease-out) .22s both; }

/* ---------- Intro pagina (lead) */
.section-intro { padding-bottom: clamp(2rem, 4vw, 3rem); }
.prose.lead { font-size: 1.12rem; }
.prose.lead p:first-child { color: var(--c-ink); font-weight: 500; }

/* ---------- Fotografie editoriali: il dettaglio entra a registro */
.intro-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}
.intro-layout .prose > :last-child { margin-bottom: 0; }
.studio-intro-title { margin: 0 0 1.1rem; font-size: clamp(1.8rem, 2.8vw, 2.3rem); line-height: 1.15; }
.studio-portrait { width: min(100%, 24rem); margin: 0 auto; }
.studio-portrait img { display: block; width: 100%; height: auto; }
.studio-portrait figcaption { margin: 0 0 .6rem; color: var(--c-ink); font-weight: 650; text-align: center; }
.contact-editorial { margin-top: clamp(3rem, 6vw, 5rem); }
.contact-editorial .contact-note { margin-top: 0; }
.editorial-media { position: relative; margin: 0; min-width: 0; }
.editorial-frame { position: relative; padding: 12px; }
.editorial-picture { display: block; overflow: hidden; border-radius: 6px; background: var(--c-paper-2); }
.editorial-picture img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.editorial-register { position: absolute; inset: 0; pointer-events: none; color: var(--c-accent); }
.editorial-register i { position: absolute; width: 18px; height: 18px; border: 0 solid currentColor; }
.editorial-register i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; --rx: -6px; --ry: -6px; }
.editorial-register i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; --rx: 6px; --ry: -6px; }
.editorial-register i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; --rx: -6px; --ry: 6px; }
.editorial-register i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; --rx: 6px; --ry: 6px; }
html.js-anim .rv-editorial .editorial-picture { clip-path: inset(0 100% 0 0 round 6px); opacity: .35; }
html.js-anim .rv-editorial .editorial-picture img { transform: scale(1.06); }
html.js-anim .rv-editorial .editorial-register i { opacity: .2; transform: translate(var(--rx), var(--ry)); }
html.js-anim .rv-editorial.in .editorial-picture {
	clip-path: inset(0 round 6px); opacity: 1;
	transition: clip-path .78s var(--ease-expo), opacity .4s ease-out;
}
html.js-anim .rv-editorial.in .editorial-picture img { transform: none; transition: transform .9s var(--ease-expo); }
html.js-anim .rv-editorial.in .editorial-register i { opacity: 1; transform: none; transition: transform .6s var(--ease-expo) .18s, opacity .6s ease-out .18s; }
@media (max-width: 799px) {
	.intro-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.editorial-media { width: 100%; max-width: 640px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
	html.js-anim .rv-editorial .editorial-picture,
	html.js-anim .rv-editorial .editorial-picture img,
	html.js-anim .rv-editorial .editorial-register i { clip-path: none; opacity: 1; transform: none; transition: none; }
}
@media print {
	.editorial-media { break-inside: avoid; }
	html.js-anim .rv-editorial .editorial-picture,
	html.js-anim .rv-editorial .editorial-picture img,
	html.js-anim .rv-editorial .editorial-register i { clip-path: none; opacity: 1; transform: none; }
}

/* ---------- Icone (design system proprio: inchiostro + dettaglio accento) */
.ico-svg { width: 22px; height: 22px; flex: none; }
.ico-svg .a { stroke: var(--c-accent-ink); }
.ico-svg .af { fill: var(--c-accent-ink); stroke: none; }
/* Nelle fasce scure l'accento passa all'azzurro chiaro */
.antihype .ico-svg .a, .strip-ai .ico-svg .a, .cta-final .ico-svg .a, .dago-cta .ico-svg .a { stroke: var(--c-accent); }
.antihype .ico-svg .af, .strip-ai .ico-svg .af, .cta-final .ico-svg .af, .dago-cta .ico-svg .af { fill: var(--c-accent); }
.ico {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 46px; height: 46px; border: 1px solid var(--c-line); border-radius: var(--radius);
	color: var(--c-accent-ink); background: var(--c-paper);
	box-shadow: inset 0 0 0 1px transparent;
}
.card-ico { margin-bottom: 1.05rem; transition: border-color var(--t), color var(--t), background var(--t); }
.card:hover .card-ico { border-color: var(--c-accent); color: var(--c-ink); background: color-mix(in srgb, var(--c-accent) 12%, var(--c-paper)); }

/* ---------- Griglia "cosa facciamo" */
.ico-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.ico-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ico-item {
	display: flex; gap: 1rem; align-items: flex-start;
	background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius);
	padding: 1.35rem 1.35rem 1.2rem;
	transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.ico-item:hover { border-color: var(--c-accent); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(4, 5, 2, .06); }
.ico-item:hover .ico { border-color: var(--c-accent); color: var(--c-ink); }
.ico-item h3 { font-size: 1.05rem; margin-bottom: .3em; }
.ico-item p { font-size: .93rem; color: var(--c-muted); margin: 0; }
.ico-item .ico { transition: border-color var(--t), color var(--t); }

/* ---------- "Per chi è" (hub) */
.who-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem 2rem; margin: 0; padding: 0; max-width: 880px; }
.who-list li { display: flex; gap: .7rem; align-items: flex-start; border-bottom: 1px solid var(--c-line); padding-bottom: .7rem; font-size: 1.02rem; color: var(--c-ink); }
.who-check { color: var(--c-accent-ink); margin-top: .22em; width: 18px; height: 18px; }

/* ---------- Per chi è / non è (fit) */
.fit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.fit-col { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-paper); padding: 1.5rem; }
.fit-col.fit-si { box-shadow: inset 0 3px 0 var(--c-accent); }
.fit-col.fit-no { box-shadow: inset 0 3px 0 var(--c-ink); }
.fit-head {
	display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem;
	font-family: var(--font-mono); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink);
}
.fit-si .fit-head .ico-svg { color: var(--c-accent-ink); }
.fit-no .fit-head .ico-svg { color: var(--c-muted); }
.fit-col ul { list-style: none; margin: 0; padding: 0; }
.fit-col li { padding: .55rem 0; border-top: 1px solid var(--c-line); font-size: .96rem; color: var(--c-text); }
.fit-col li:first-child { border-top: 0; padding-top: 0; }
.fit-note { margin: 1.4rem 0 0; font-size: .88rem; color: var(--c-muted); max-width: 76ch; padding: .9rem 1rem; border-radius: var(--radius); background: color-mix(in srgb, var(--c-accent) 10%, var(--c-paper)); }

/* ---------- Split (AI: due mondi) */
.split-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.split-col { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-paper); padding: 1.5rem; }
.split-head { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.1rem; font-weight: 700; color: var(--c-ink); font-size: 1.12rem; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { display: flex; gap: .65rem; align-items: flex-start; padding: .55rem 0; border-top: 1px solid var(--c-line); font-size: .95rem; }
.ticks li:first-child { border-top: 0; padding-top: 0; }
.ticks .tick { color: var(--c-accent-ink); margin-top: .2em; width: 17px; height: 17px; }

/* ---------- Anti-hype (fascia scura "cosa non promettiamo") */
.antihype { background: var(--c-dark); color: var(--c-dark-text); padding: clamp(2.8rem, 5vw, 4.2rem) 0; position: relative; overflow: hidden; }
.antihype .wrap { position: relative; z-index: 1; }
.antihype h2 { color: var(--c-paper); }
.antihype .eyebrow { color: var(--c-accent); }
.antihype .section-head { margin-bottom: 1.6rem; }
.antihype-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 2.4rem; }
.antihype-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .97rem; color: var(--c-dark-muted); border-top: 1px solid rgba(236, 238, 236, .14); padding-top: .8rem; }
.antihype-list .no-x { color: var(--c-accent); margin-top: .2em; width: 18px; height: 18px; }

/* ---------- FAQ (details/summary, zero JS) */
.faq-section .section-head { margin-bottom: 1.6rem; }
.faq { border-top: 1px solid var(--c-line); }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item summary {
	display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
	cursor: pointer; list-style: none; padding: 1.05rem 0;
	font-weight: 600; color: var(--c-ink); font-size: 1.03rem;
	transition: color var(--t);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--c-accent-ink); }
.faq-mark { position: relative; flex: none; width: 16px; height: 16px; }
.faq-mark::before, .faq-mark::after {
	content: ""; position: absolute; inset: 50% auto auto 0; width: 100%; height: 2px;
	background: var(--c-accent-ink); transform: translateY(-50%); transition: transform var(--t);
}
.faq-mark::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] .faq-mark::after { transform: translateY(-50%) rotate(0deg); }
.faq-a { padding: 0 0 1.2rem; max-width: 65ch; }
.faq-a p { margin: 0; color: var(--c-text); font-size: .98rem; }

/* ---------- Timeline (chi siamo) */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.timeline li { position: relative; border-top: 2px solid var(--c-ink); padding-top: 1.1rem; }
.timeline li::before {
	content: ""; position: absolute; top: -5px; left: 0; width: 8px; height: 8px;
	background: var(--c-accent); border-radius: 50%;
}
.tl-when { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent-ink); margin: 0 0 .5rem; }
.timeline h3 { font-size: 1.08rem; margin-bottom: .35em; }
.tl-text { font-size: .93rem; color: var(--c-muted); margin: 0; }

/* ---------- Stats (DAGO) */
.svc-stats { border-block: 1px solid var(--c-line); }
.stats-note { margin: 1.6rem 0 0; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; color: var(--c-dark-muted); }

/* ---------- CTA unica DAGO */
.dago-cta { background: var(--c-dark); color: var(--c-dark-text); padding: clamp(3.2rem, 6vw, 5rem) 0; text-align: center; position: relative; overflow: hidden; }
.dago-cta::before {
	content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 24%, transparent), transparent 65%);
	filter: blur(12px); top: -220px; right: -140px; pointer-events: none;
	animation: ls-blob-drift 16s ease-in-out infinite alternate;
}
.dago-cta-inner { position: relative; z-index: 1; }
.dago-cta img { margin: 0 auto 1.6rem; height: 40px; width: auto; }
.dago-cta h2 { color: var(--c-paper); }
.dago-cta p { color: var(--c-dark-muted); max-width: 52ch; margin: 0 auto 1.8rem; }

/* ---------- Immagini di pagina e cover articoli */
.page-media { margin: clamp(1.6rem, 3.5vw, 2.4rem) auto 0; max-width: 1040px; overflow: hidden; border-radius: var(--radius); }
.page-media img,
.post-cover img,
.card-media img { display: block; width: 100%; height: auto; border: 1px solid var(--c-line); border-radius: var(--radius); }
.page-media img { aspect-ratio: 3 / 2; object-fit: cover; }
.post-cover { margin: clamp(1.6rem, 3.5vw, 2.4rem) auto 0; }
.card-media { margin: -1.5rem -1.5rem 1.1rem; }
.card-media img { border: 0; border-bottom: 1px solid var(--c-line); border-radius: var(--radius) var(--radius) 0 0; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Navigazione e architettura servizi Digital & Web */
.service-toc {
	display: grid; grid-template-columns: minmax(150px, .25fr) minmax(0, 1fr); gap: 1.5rem;
	align-items: start; padding-block: 1.2rem; margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
	border-block: 1px solid var(--c-line);
}
.service-toc > span {
	font-family: var(--font-mono); font-size: .76rem; letter-spacing: .09em;
	text-transform: uppercase; color: var(--c-muted); padding-top: .15rem;
}
.service-toc ul { display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; list-style: none; margin: 0; padding: 0; }
.service-toc a { color: var(--c-ink); font-size: .9rem; text-decoration: none; border-bottom: 1px solid var(--c-line); }
.service-toc a:hover { color: var(--c-accent-ink); border-color: var(--c-accent); }

.architecture-list { border-top: 1px solid var(--c-line); }
.architecture-group {
	display: grid; grid-template-columns: minmax(240px, .42fr) minmax(0, .58fr); gap: clamp(1.5rem, 5vw, 4.5rem);
	padding: 1.6rem 0; border-bottom: 1px solid var(--c-line);
}
.architecture-summary h3 { margin-bottom: .4rem; }
.architecture-summary h3 a { color: var(--c-ink); text-decoration: none; }
.architecture-summary h3 a:hover { color: var(--c-accent-ink); }
.architecture-summary p { color: var(--c-muted); font-size: .95rem; max-width: 46ch; margin: 0; }
.architecture-links { list-style: none; margin: 0; padding: 0; }
.architecture-links li + li { border-top: 1px solid var(--c-line); }
.architecture-links a {
	display: flex; justify-content: space-between; gap: 1rem; padding: .72rem 0;
	color: var(--c-ink); font-size: .95rem; font-weight: 650; text-decoration: none;
}
.architecture-links a span:last-child { color: var(--c-accent-ink); transition: transform var(--t); }
.architecture-links a:hover span:last-child { transform: translateX(4px); }

.capability-list { border-top: 1px solid var(--c-line); }
.capability-row { border-bottom: 1px solid var(--c-line); }
.capability-row > a {
	display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 1.15rem; align-items: center;
	padding: 1.2rem 0; color: inherit; text-decoration: none;
}
.capability-row > a:hover .capability-copy h3 { color: var(--c-accent-ink); }
.capability-icon { width: 46px; height: 46px; }
.capability-copy { display: grid; grid-template-columns: minmax(190px, .36fr) minmax(0, 1fr); gap: 1.4rem; align-items: baseline; }
.capability-copy h3 { margin: 0; color: var(--c-ink); font-size: 1.04rem; transition: color var(--t); }
.capability-copy > span { color: var(--c-muted); font-size: .94rem; }
.capability-action { color: var(--c-accent-ink); font-size: 1.25rem; transition: transform var(--t); }
.capability-row > a:hover .capability-action { transform: translateX(4px); }

.deliverables {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem);
	margin: 0; padding: 0; border-top: 1px solid var(--c-line);
}
.deliverable { padding: 1.35rem 0; border-bottom: 1px solid var(--c-line); }
.deliverable dt { display: flex; gap: .75rem; color: var(--c-ink); font-weight: 700; }
.deliverable dt span { font-family: var(--font-mono); color: var(--c-accent-ink); font-size: .78rem; padding-top: .18rem; }
.deliverable dd { margin: .4rem 0 0 2.15rem; color: var(--c-muted); font-size: .94rem; }

/* ---------- Pagine specialistiche in preparazione */
.page-placeholder-media {
	position: relative; min-height: clamp(230px, 34vw, 390px); margin: clamp(1.6rem, 3.5vw, 2.4rem) auto 0;
	max-width: 1040px; display: flex; align-items: flex-end; overflow: hidden;
	padding: clamp(1.4rem, 4vw, 3rem); border-radius: var(--radius); background: var(--c-dark); color: var(--c-paper);
}
.page-placeholder-media .placeholder-mark {
	position: absolute; width: min(520px, 62%); right: -5%; top: 50%; transform: translateY(-50%);
	color: rgba(236, 238, 236, .1);
}
.page-placeholder-media > div { position: relative; z-index: 1; display: grid; gap: .35rem; }
.page-placeholder-media span { font-family: var(--font-mono); color: var(--c-accent); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.page-placeholder-media strong { color: var(--c-paper); font-size: clamp(1.45rem, 3vw, 2.3rem); line-height: 1.15; }
.is-service-placeholder .section-intro { padding-bottom: 1rem; }
.placeholder-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; padding-top: 1.5rem; border-top: 2px solid var(--c-ink); }
.placeholder-icon { width: 28px; height: 28px; color: var(--c-accent-ink); margin-top: .2rem; }
.placeholder-panel p { color: var(--c-muted); max-width: 62ch; }
.placeholder-panel .btn { margin-top: .5rem; }

/* ---------- Ancoraggi sotto header sticky */
[id] { scroll-margin-top: calc(var(--header-h) + 1.2rem); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	html { scroll-behavior: auto; }
	.scroll-progress { display: none; }
	::view-transition-group(*),
	::view-transition-old(root),
	::view-transition-new(root) { animation: none !important; }
}

/* Queste regole devono restare dopo i componenti, così il mobile vince nella cascata. */
@media (max-width: 700px) {
	.service-toc { grid-template-columns: 1fr; gap: .7rem; }
	.service-toc ul { display: grid; grid-template-columns: 1fr; gap: .35rem; }
	.service-toc a { display: inline-block; padding: .25rem 0; }
	.architecture-group { grid-template-columns: 1fr; gap: 1rem; }
	.capability-row > a { grid-template-columns: 44px minmax(0, 1fr) auto; gap: .8rem; }
	.capability-copy { grid-template-columns: 1fr; gap: .2rem; }
	.deliverables { grid-template-columns: 1fr; }
	.placeholder-panel { grid-template-columns: 1fr; }
	.page-placeholder-media .placeholder-mark { width: 86%; right: -22%; }
	.service-link { grid-template-columns: 48px minmax(0, 1fr) auto; gap: .85rem; padding: 1.15rem 0; }
	.service-icon .ico { width: 44px; height: 44px; }
	.service-copy { grid-template-columns: 1fr; gap: .25rem; }
	.service-title { font-size: 1.05rem; }
	.service-summary { font-size: .92rem; line-height: 1.5; }
}

@media (max-width: 560px) {
	.ico-grid,
	.ico-grid-2,
	.who-list,
	.fit-cols,
	.split-cols,
	.antihype-list,
	.timeline { grid-template-columns: minmax(0, 1fr); }
	.ico-item { min-width: 0; }
}
.page-media picture, .strip-bg { display: block; }

/* ==========================================================================
   Banner hero delle pagine interne
   Foto a tutta larghezza, velatura d'inchiostro da sinistra (leggibilità),
   segni di taglio agli angoli come su un foglio di stampa.
   ========================================================================== */
.page-hero {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; align-items: flex-end;
	min-height: clamp(440px, 68vh, 660px);
	padding: clamp(5rem, 12vh, 8rem) 0 clamp(2.8rem, 6vh, 4.2rem);
	background: var(--c-dark); color: var(--c-dark-text);
}
.page-hero-media { position: absolute; inset: 0; z-index: -2; display: block; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.page-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(4, 5, 2, .86) 0%, rgba(4, 5, 2, .66) 38%, rgba(4, 5, 2, .18) 72%, rgba(4, 5, 2, .06) 100%),
		linear-gradient(0deg, rgba(4, 5, 2, .55) 0%, transparent 45%);
}
.page-hero-inner { position: relative; width: 100%; }
.page-hero h1 { color: var(--c-paper); max-width: 18ch; font-size: clamp(2.3rem, 5vw, 3.8rem); letter-spacing: -.03em; margin-bottom: .35em; }
.page-hero .kicker { color: color-mix(in srgb, var(--c-paper) 82%, var(--c-accent)); max-width: 56ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.page-hero .crumbs, .page-hero .crumbs a { color: color-mix(in srgb, var(--c-paper) 72%, transparent); }
.page-hero .crumbs a:hover { color: var(--c-accent); }
.page-hero .crumbs span[aria-current] { color: var(--c-paper); }
.page-hero ::selection { background: var(--c-accent); color: var(--c-ink); }

/* Segni di taglio: quattro "L" agli angoli, in azzurro brand */
.page-hero-crop { position: absolute; inset: clamp(14px, 2.2vw, 28px); pointer-events: none; z-index: 0; }
.page-hero-crop i { position: absolute; width: 22px; height: 22px; border: 0 solid color-mix(in srgb, var(--c-accent) 85%, transparent); }
.page-hero-crop i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.page-hero-crop i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.page-hero-crop i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.page-hero-crop i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* Motion: la foto si mette a fuoco e "atterra", poi scorre più lenta del testo */
@keyframes ls-hero-settle { from { transform: scale(1.14); filter: blur(10px) saturate(.6); } }
@keyframes ls-crop-in { from { opacity: 0; transform: scale(1.6); } }
html.js-anim .page-hero-media { animation: ls-hero-settle 1.8s var(--ease-expo) both; }
html.js-anim .page-hero-media img { transform: translate3d(0, calc(var(--p, 0) * 22%), 0) scale(calc(1.04 + var(--p, 0) * .08)); will-change: transform; }
html.js-anim .page-hero-crop i { animation: ls-crop-in .9s var(--ease-expo) both; animation-delay: calc(.5s + var(--ci, 0) * 90ms); }
.page-hero-crop i:nth-child(2) { --ci: 1; } .page-hero-crop i:nth-child(3) { --ci: 2; } .page-hero-crop i:nth-child(4) { --ci: 3; }
html.js-anim .page-hero::before { opacity: calc(1 + var(--p, 0) * .4); }
html.js-anim .page-hero-crop { opacity: clamp(0, calc(1 - var(--p, 0) * 2), 1); }

@media (max-width: 700px) {
	.page-hero { min-height: clamp(420px, 78vh, 560px); }
	.page-hero-media img { object-position: 70% 40%; }
	.page-hero::before { background: linear-gradient(0deg, rgba(4, 5, 2, .9) 0%, rgba(4, 5, 2, .62) 55%, rgba(4, 5, 2, .3) 100%); }
	.page-hero-crop i { width: 14px; height: 14px; }
}
.crumbs a, .crumbs span[aria-current] { display: inline-block; }


.prose-legal table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prose-legal th, .prose-legal td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.prose-legal th { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.prose-legal figure { margin: 1.4rem 0; overflow-x: auto; }

/* ==========================================================================
   Consenso cookie — skin Label Studio del plugin "Label Studio — Consenso cookie"
   Il plugin resta generico; qui la sua grafica diventa una "prova di stampa":
   scheda in basso a sinistra, segni di taglio che entrano a registro,
   interruttori al posto delle caselle, le due risposte identiche.
   ========================================================================== */
.lscc {
	--paper: var(--c-paper); --paper-2: var(--c-paper-2);
	--ink: var(--c-ink); --ink-soft: var(--c-text); --muted: var(--c-muted);
	--line: var(--c-line); --line-2: var(--c-line);
	--gold: var(--c-accent); --gold-text: var(--c-accent-ink);
	--bronze: var(--c-accent); --bronze-text: var(--c-accent-ink);
	--sans: var(--font-sans); --serif: var(--font-sans); --serif-sc: var(--font-mono);
	inset: auto auto 0 0; justify-content: flex-start;
	padding: clamp(12px, 2.2vw, 26px);
	font-family: var(--font-sans);
	animation: ls-lscc-in .7s var(--ease-expo) both;
}
@keyframes ls-lscc-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes ls-lscc-reg { from { inset: -2px; opacity: 0; } }

.lscc .lscc-box {
	max-width: 452px; padding: 26px 26px 22px;
	background: var(--c-paper); color: var(--c-text);
	border: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
	border-radius: var(--radius);
	box-shadow: 0 28px 60px -24px rgba(4, 5, 2, .38), 0 2px 8px rgba(4, 5, 2, .06);
	max-height: min(86vh, 720px);
	scrollbar-width: thin;
}
/* Segni di taglio agli angoli, in azzurro brand: arrivano "a registro" */
.lscc .lscc-box::before {
	content: ""; position: absolute; inset: 9px; pointer-events: none;
	--m: color-mix(in srgb, var(--c-accent) 90%, transparent);
	background:
		linear-gradient(var(--m), var(--m)) left top / 12px 1px no-repeat,
		linear-gradient(var(--m), var(--m)) left top / 1px 12px no-repeat,
		linear-gradient(var(--m), var(--m)) right top / 12px 1px no-repeat,
		linear-gradient(var(--m), var(--m)) right top / 1px 12px no-repeat,
		linear-gradient(var(--m), var(--m)) left bottom / 12px 1px no-repeat,
		linear-gradient(var(--m), var(--m)) left bottom / 1px 12px no-repeat,
		linear-gradient(var(--m), var(--m)) right bottom / 12px 1px no-repeat,
		linear-gradient(var(--m), var(--m)) right bottom / 1px 12px no-repeat;
	animation: ls-lscc-reg .9s var(--ease-expo) .25s both;
}

/* Testa: marchio a sinistra, informativa privacy a destra */
.lscc .lscc-testa { align-items: center; margin-bottom: 18px; padding-right: 30px; }
.lscc .lscc-marchio { display: inline-flex; align-items: center; gap: .55rem; color: var(--c-ink); }
.lscc .lscc-marchio .ls-mark { height: 20px; width: auto; }
.lscc .lscc-marchio .site-logo { height: 12px; width: auto; }
.lscc .lscc-privacy { font-size: .78rem; color: var(--c-muted); }
.lscc .lscc-privacy:hover { color: var(--c-accent-ink); }

.lscc .lscc-box h2 {
	font-family: var(--font-sans); font-weight: 700; letter-spacing: -.025em;
	font-size: 1.35rem; line-height: 1.2; color: var(--c-ink); margin: 0 0 .45em;
}
.lscc .lscc-box p { font-size: .9rem; line-height: 1.6; color: var(--c-text); }
.lscc .lscc-x { top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 1.25rem; color: var(--c-muted); transition: background var(--t), color var(--t); }
.lscc .lscc-x:hover { background: var(--c-paper-2); color: var(--c-ink); }

/* Pannello delle voci: interruttori */
.lscc .lscc-scelte { margin: 16px 0 2px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.lscc .lscc-voce { padding: 10px 0; }
.lscc .lscc-voce + .lscc-voce { margin-top: 0; border-top: 1px solid var(--c-line); }
.lscc .lscc-riga { justify-content: space-between; flex-direction: row-reverse; gap: 12px; font-weight: 650; }
.lscc .lscc-nome { flex: 1; font-size: .92rem; letter-spacing: 0; }
.lscc .lscc-sempre { order: -1; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; color: var(--c-accent-ink); }
.lscc .lscc-riga input {
	appearance: none; -webkit-appearance: none; flex: none; margin: 0;
	width: 36px; height: 20px; border-radius: 999px; position: relative;
	background: var(--c-line); transition: background .25s ease;
}
.lscc .lscc-riga input::before {
	content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
	background: var(--c-paper); box-shadow: 0 1px 3px rgba(4, 5, 2, .25);
	transition: transform .3s var(--ease-expo);
}
.lscc .lscc-riga input:checked { background: var(--c-accent-ink); }
.lscc .lscc-riga input:checked::before { transform: translateX(16px); }
.lscc .lscc-riga input:disabled { background: color-mix(in srgb, var(--c-accent-ink) 45%, var(--c-line)); }
.lscc .lscc-riga input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.lscc .lscc-desc { margin: 4px 0 0 !important; font-size: .8rem !important; color: var(--c-muted); }

/* Pulsanti: le due risposte sono lo stesso pulsante; le altre due azioni stanno sotto, più leggere */
.lscc .lscc-azioni { gap: 8px; margin-top: 18px; }
.lscc .lscc-btn {
	font-family: var(--font-sans); font-size: .9rem; font-weight: 650; letter-spacing: 0; text-transform: none;
	padding: 11px 16px; border-radius: var(--radius); min-width: 0;
	border: 1px solid var(--c-line); color: var(--c-ink); background: var(--c-paper);
	transition: background var(--t), color var(--t), border-color var(--t);
}
.lscc .lscc-btn:hover { border-color: var(--c-ink); color: var(--c-ink); }
.lscc .lscc-btn-scelta { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.lscc .lscc-btn-scelta:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
.lscc .lscc-btn-salva { background: var(--c-accent-ink); border-color: var(--c-accent-ink); color: var(--c-paper); }
.lscc .lscc-btn-salva:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.lscc .lscc-policy { margin-top: 12px !important; font-size: .78rem !important; }
.lscc .lscc-policy a { color: var(--c-muted); }
.lscc .lscc-policy a:hover { color: var(--c-accent-ink); }

/* Segnaposto dei contenuti esterni bloccati (se un giorno ce ne saranno) */
.lscc-blocco { border-radius: var(--radius); background: var(--c-paper-2); }
.lscc-blocco-tit { font-family: var(--font-mono) !important; text-transform: uppercase !important; letter-spacing: .12em !important; color: var(--c-accent-ink) !important; }

/* Footer: link alle preferenze */
.footer-legal .lscc-riapri { background: none; border: 0; padding: 0; font: inherit; color: var(--c-dark-muted); cursor: pointer; text-decoration: none; }
.footer-legal .lscc-riapri:hover { color: var(--c-accent); }
.footer-legal .lscc-sep, .footer-legal-links span { color: rgba(236, 238, 236, .35); }

@media (max-width: 600px) {
	.lscc { padding: 0; inset: auto 0 0 0; }
	.lscc .lscc-box { max-width: none; border-radius: 16px 16px 0 0; border-width: 1px 0 0; padding: 24px 20px calc(18px + env(safe-area-inset-bottom)); }
	.lscc .lscc-azioni { flex-direction: row; }
	.lscc .lscc-btn-scelta { flex: 1 1 calc(50% - 4px); }
	.lscc .lscc-btn:not(.lscc-btn-scelta) { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.lscc, .lscc .lscc-box::before { animation: none; }
}

/* ==========================================================================
   Revisione 29/09/2026: footer, numeri hero, CTA, pulsanti flottanti
   ========================================================================== */
/* Footer: tutti i titoli di colonna uguali (bianco, grassetto), anche quello che è un link */
.site-footer .footer-title { color: var(--c-paper); font-weight: 700; }
.site-footer .footer-title a { color: var(--c-paper); }
.site-footer .footer-title a:hover { color: var(--c-accent); }
.footer-dago img { height: 30px; }

/* Hero: la prova numerica sale sopra i pulsanti e prende risalto */
.hero .hero-proof {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 0;
	width: fit-content; max-width: 100%;
	margin: 1.9rem 0 0; padding: .85rem 0;
	border-block: 1px solid var(--c-line);
	font-family: var(--font-mono); font-size: .86rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--c-text);
}
.hero .hero-proof span { padding: 0 1.1rem; }
.hero .hero-proof span:first-child { padding-left: 0; }
.hero .hero-proof span + span { border-left: 1px solid var(--c-line); }
.hero .hero-proof strong {
	font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -.02em;
	color: var(--c-accent-ink); font-variant-numeric: tabular-nums;
}
.hero .hero-actions { margin-top: 1.6rem; }
html.js-anim .hero .hero-proof { animation: ls-fade-up .7s var(--ease-out) .62s both; }
html.js-anim .hero .hero-actions { animation: ls-fade-up .7s var(--ease-out) .8s both; }
@media (max-width: 560px) {
	.hero .hero-proof { font-size: .74rem; }
	.hero .hero-proof span { padding: 0 .7rem; }
}

/* CTA finale: email e telefono */
.cta-actions .btn { text-align: left; }
.btn-ico { width: 22px; height: 22px; flex: none; }
.btn-label { display: grid; line-height: 1.2; }
.btn-label small { font-family: var(--font-mono); font-size: .76rem; font-weight: 500; letter-spacing: .02em; opacity: .75; }
.cta-final .btn .ico-svg .a { stroke: currentColor; }
.cta-final .btn .ico-svg .af { fill: currentColor; }

/* Pulsanti flottanti */
.fab {
	position: fixed; z-index: 60; bottom: clamp(14px, 2.4vw, 26px);
	width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0;
	display: grid; place-items: center; cursor: pointer;
	box-shadow: 0 10px 28px -8px rgba(4, 5, 2, .45), 0 2px 6px rgba(4, 5, 2, .12);
	transition: transform .35s var(--ease-expo), opacity .3s ease, background var(--t), box-shadow .3s ease;
}
.fab svg { width: 28px; height: 28px; }
.fab:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.fab-wa { left: clamp(14px, 2.4vw, 26px); background: #25d366; color: #fff; }
.fab-wa:hover { transform: translateY(-3px) scale(1.04); color: #fff; box-shadow: 0 14px 30px -8px rgba(37, 211, 102, .6); }
.fab-top { right: clamp(14px, 2.4vw, 26px); background: var(--c-ink); color: var(--c-paper); }
.fab-top svg { width: 22px; height: 22px; }
.fab-top:hover { background: var(--c-accent-ink); transform: translateY(-3px); }
/* Anello: quanto della pagina è stato letto */
.fab-top::before {
	content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
	background: conic-gradient(var(--c-accent) calc(var(--sp, 0) * 1turn), color-mix(in srgb, var(--c-accent) 18%, transparent) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.fab-top:not(.is-visible) { opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; }
@media (max-width: 600px) {
	.fab { width: 50px; height: 50px; }
	.fab svg { width: 25px; height: 25px; }
}
@media print { .fab { display: none; } }
@media (max-width: 560px) {
	.cta-actions { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
	.cta-actions .btn { justify-content: flex-start; }
}

/* Language selector: native disclosure, incumbent typography and palette. */
.header-inner { gap: clamp(.75rem, 1.5vw, 1.5rem); }
.language-switcher { position: relative; flex: none; color: var(--c-ink); }
.language-switcher summary {
 display: flex; align-items: center; justify-content: center; gap: .45rem;
 min-width: 56px; min-height: 44px; padding: .6rem .65rem;
 border: 1px solid var(--c-line); border-radius: var(--radius);
 font: inherit; font-size: .85rem; font-weight: 650; line-height: 1.25;
 list-style: none; cursor: pointer; transition: border-color var(--t), background var(--t);
}
.language-switcher summary::-webkit-details-marker { display: none; }
.language-switcher summary:hover, .language-switcher[open] summary { border-color: var(--c-accent-ink); background: var(--c-paper-2); }
.language-switcher summary:focus-visible, .language-options a:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 3px; }
.language-switcher[open] summary svg { transform: rotate(180deg); }
.language-options {
 position: absolute; inset-inline-end: 0; top: calc(100% + .55rem); z-index: 55;
 display: grid; min-width: 174px; padding: .4rem; background: var(--c-paper);
 border: 1px solid var(--c-line); border-radius: var(--radius);
 box-shadow: 0 10px 28px rgba(4, 5, 2, .1);
}
.language-options a { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: .65rem .75rem; color: var(--c-text); text-decoration: none; font-size: .9rem; border-radius: var(--radius); }
.language-options a:hover { background: var(--c-paper-2); color: var(--c-ink); }
.language-options a[aria-current] { font-weight: 700; background: var(--c-paper-2); }
.language-code { min-width: 2ch; font-size: .75rem; color: var(--c-muted); }
@media (max-width: 1180px) {
 .header-inner > .brand { margin-inline-end: auto; }
}

/* Questionario italiano: tre passaggi, domande pertinenti al progetto. */
.contact-intake { border-top: 1px solid var(--c-line);  }
.contact-intake .wrap { max-width: 1180px; }
.contact-intake-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 3vw, 2.5rem); align-items: start; }
.contact-intake-intro h2 { font-size: clamp(2rem, 3vw, 2.7rem); line-height: 1.15; }
.contact-intake-intro p { max-width: 42ch; }
.contact-intake-lead { margin-top: 1rem; }
.contact-intake-form { min-width: 0; border-left: 1px solid var(--c-line); padding-left: 1.5rem; }
.contact-intake .gform_wrapper.gravity-theme { font-family: var(--font-sans); color: var(--c-text); }
.contact-intake .ls-progress { margin-bottom: 1rem; }
.contact-intake .ls-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.contact-intake .ls-step { display: flex; gap: .5rem; align-items: baseline; padding: .65rem 0; border-top: 3px solid var(--c-line); color: var(--c-muted); font-size: .9rem; }
.contact-intake .ls-step-number { font-variant-numeric: tabular-nums; }
.contact-intake .ls-step-current { border-color: var(--c-accent-ink); color: var(--c-accent-ink); font-weight: 700; }
.contact-intake .ls-step-completed { border-color: var(--c-accent); color: var(--c-text); }
.contact-intake .ls-step-status { margin: .5rem 0 0; font-size: .8rem; color: var(--c-muted); }
.contact-intake .gform_wrapper.gravity-theme .gfield_label { font-size: 1rem; font-weight: 650; margin-bottom: .4rem; }
.contact-intake .gform_wrapper.gravity-theme input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.contact-intake .gform_wrapper.gravity-theme textarea,
.contact-intake .gform_wrapper.gravity-theme select {
	width: 100%; padding: .7rem .85rem; border: 1px solid var(--c-muted); border-radius: var(--radius);
	background: var(--c-paper); color: var(--c-ink); font: inherit; min-height: 48px;
}
.contact-intake .gform_wrapper.gravity-theme .gfield .ginput_container textarea { height: 6rem; min-height: 5rem; resize: vertical; display: block; }
.contact-intake .gform_wrapper.gravity-theme :is(input, textarea, select):focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }
.contact-intake .gform_wrapper.gravity-theme :is(.gform_button, .gform_next_button, .gform_previous_button) {
	border: 1px solid var(--c-ink); border-radius: var(--radius); padding: 1rem 1.6rem; min-height: 60px; min-width: 170px;
	background: var(--c-ink); color: var(--c-paper); font: inherit; font-weight: 650; cursor: pointer;
}
.contact-intake .gform_wrapper.gravity-theme :is(.gform_button, .gform_next_button):hover { background: var(--c-accent-ink); border-color: var(--c-accent-ink); }
.contact-intake .gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button { background: var(--c-paper); color: var(--c-ink); border-color: var(--c-line); }
.contact-intake .gform_wrapper.gravity-theme .gform_previous_button:hover { border-color: var(--c-ink); }
.contact-intake :is(.gform_button, .gform_next_button, .gform_previous_button):focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 3px; }
.contact-intake .gform_wrapper.gravity-theme .gform_page_footer { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; margin-top: 1.25rem; padding: 1rem 0 0; border-top: 1px solid var(--c-line); }
.contact-intake .gform_wrapper.gravity-theme .gform_page_footer :is(input, button) { margin: 0; width: auto; }
.contact-intake .gform_page:first-child .gform_page_footer { justify-content: flex-end; }
.contact-intake .gfield_description, .contact-intake .gform_required_legend, .contact-privacy { font-size: .85rem; line-height: 1.5; }
.contact-privacy { margin-top: 1rem; color: var(--c-muted); }
.contact-intake .gform_confirmation_message { padding-block: 1rem; }
.contact-intake .gform_confirmation_message h3 { font-size: 1.5rem; }
.contact-intake .gform_wrapper.gravity-theme .gsection { margin: 0 0 .25rem; padding: 0; border: 0; }
.contact-intake .gform_wrapper.gravity-theme .gsection_title { font-size: 1.5rem; line-height: 1.25; margin: 0; }
.contact-intake .gsection_title:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 4px; }
.contact-intake .gform_wrapper.gravity-theme .ginput_counter { font-size: .75rem; padding-top: .35rem; }
.contact-intake .gform_wrapper.gravity-theme .gsection_description { padding: .5rem 0 0; font-size: .9rem; }
.contact-intake .gform_wrapper.gravity-theme .gform_fields { row-gap: 1rem; }
.contact-intake .gform_wrapper.gravity-theme .gfield_required { color: var(--c-text); }
.contact-intake .gform_anchor { scroll-margin-top: var(--contact-anchor-offset, calc(var(--header-h) + 12px)); }
@media (max-width: 1000px) {
	.contact-intake-layout { grid-template-columns: 1fr; gap: 1.5rem; }
	.contact-intake-intro p { max-width: 65ch; }
	.contact-intake-form { border-left: 0; padding-left: 0; }
	:is(.ls-contact-actions-visible, .ls-contact-form-visible) :is(.fab-wa, .fab-top) { visibility: hidden; pointer-events: none; }
}
@media (max-width: 640px) {
	.contact-intake .ls-steps { gap: .5rem; }
	.contact-intake .ls-step { gap: .3rem; font-size: .8rem; }
	.contact-intake .gform_wrapper.gravity-theme .gfield { grid-column: 1 / -1; }
	.contact-intake .gform_wrapper.gravity-theme .gform_page_footer :is(.gform_button, .gform_next_button) { flex: 1 1 100%; min-width: 0; width: 100%; }
	.contact-intake .gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button { min-width: 0; min-height: 48px; padding: .7rem 1.1rem; }
}

#richiesta { scroll-margin-top: var(--contact-anchor-offset, calc(var(--header-h) + 12px)); }
.contact-intake .gform_wrapper.gravity-theme .gfield .gfield_description { padding-top: .35rem; margin: 0; font-size: .85rem; line-height: 1.45; }
.contact-intake .gform_wrapper.gravity-theme .gfield.gsection .gsection_description { margin: 0; padding-top: .35rem; }
.contact-intake .gform_wrapper.gravity-theme .gform_required_legend { margin: 0 0 .75rem; }
.contact-intake .gform_wrapper.gravity-theme .gfield .ginput_container .ginput_counter { font-size: .75rem; margin: 0; padding-top: .25rem; }
.contact-intake-illustration { max-width: 370px; margin: 1.5rem 0 0; }
.contact-intake-illustration img { display: block; width: 100%; height: auto; }
.contact-booking-choice { border-top: 1px solid var(--c-line); padding-top: 1rem; }
.contact-booking-status { font-size: .8rem; color: var(--c-accent-ink); margin: .35rem 0 0; }
.contact-booking-status:empty { display: none; }
.contact-intake select:disabled { opacity: .65; cursor: wait; }
.contact-appointment-confirmation { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); }
.contact-appointment-confirmation .btn { min-height: 56px; }
.contact-invite { position: fixed; z-index: 59; right: clamp(14px, 2.4vw, 26px); bottom: calc(clamp(14px, 2.4vw, 26px) + 78px); display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem .85rem .85rem; background: var(--c-ink); color: var(--c-paper); border-radius: 16px 16px 4px 16px; max-width: calc(100vw - 28px); box-shadow: 0 8px 24px rgba(4, 5, 2, .18); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.96); transition: opacity .35s ease, transform .45s var(--ease-expo), visibility .35s; }
.contact-invite.is-ready { opacity: 1; visibility: visible; transform: translateY(0); }
.contact-invite:hover { color: var(--c-paper); transform: translateY(-3px); }
.contact-invite:focus-visible { outline: 3px solid var(--c-accent-ink); outline-offset: 4px; }
.contact-invite-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--c-ink); background: var(--c-accent); flex: none; }
.contact-invite-copy { display: grid; gap: .2rem; line-height: 1.3; }
.contact-invite-copy strong { font-size: .85rem; font-weight: 650; }
.contact-invite-copy > span { font-size: .75rem; color: var(--c-accent); }
.contact-invite-arrow { font-size: 1.25rem; color: var(--c-accent); }
.ls-contact-form-visible .contact-invite { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); }
.ls-contact-form-visible .site-header.is-hidden { transform: translateY(0); }
@media (max-width: 1000px) { .contact-intake-illustration { display: none; } }
@media (max-width: 640px) {
    .contact-invite { gap: .6rem; padding: .65rem .8rem; bottom: calc(14px + 66px); }
    .contact-invite-icon { width: 38px; height: 38px; }
    .contact-invite-copy strong { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .contact-invite, .contact-invite:hover { transition: none; transform: none; } }

/* Avvisi AI: didascalie discrete, leggibili e indipendenti dalle animazioni. */
.ai-image-label {
	display: block; margin: 0;
	color: var(--c-muted); font-family: var(--font-sans);
	font-size: .75rem; font-weight: 400; line-height: 1.5;
	letter-spacing: 0; text-align: right; white-space: nowrap;
}
.editorial-media .ai-image-label { margin-inline: 12px; }
.page-hero-figure, .strip-print-figure { margin: 0; }
.page-hero-figure > .ai-image-label,
.strip-print-figure > .ai-image-label {
	max-width: none; margin-inline: 0;
	padding: .35rem 12px;
}
.strip-print-figure { background: var(--c-dark); }
.strip-print-figure > .ai-image-label { color: var(--c-dark-muted); }
.footer-ai-note { padding-bottom: 1.5rem; }
.footer-ai-note p { max-width: 75ch; margin: 0; font-size: .85rem; line-height: 1.65; }
@media print {
	.ai-image-label, .strip-print-figure > .ai-image-label { background: var(--c-paper); color: var(--c-ink); }
}