/* Site pages: header, footer, sections, home, landing, Metodo, Studio, Contatti, legal. */

/* Header ------------------------------------------------------------------ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--header-h);
}

.menu-toggle {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	font-weight: 600;
}
.menu-toggle__icon, .menu-toggle__icon::before {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform .25s var(--ease);
}
.menu-toggle__icon { position: relative; transform: translateY(-4px); }
.menu-toggle__icon::before { content: ""; position: absolute; top: 8px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(-8px) rotate(-90deg); }

/* Mobile: full-screen menu. */
.site-nav {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
	background: var(--c-bg);
	visibility: hidden;
	opacity: 0;
	transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.nav-open .site-nav {
	visibility: visible;
	opacity: 1;
	transition: opacity .25s var(--ease);
}
.nav-open { overflow: hidden; }
.site-nav__list { display: grid; gap: 8px; }
.site-nav__list a {
	font-size: var(--fs-h2);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.05;
	text-decoration: none;
}
.site-nav__list a:hover { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 4px; }
.site-nav__cta { align-self: flex-start; }

@media (min-width: 900px) {
	.menu-toggle { display: none; }
	.site-nav {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 32px;
		padding: 0;
		visibility: visible;
		opacity: 1;
		background: none;
		transition: none;
	}
	.site-nav__list { display: flex; gap: 28px; }
	.site-nav__list a {
		font-size: 1rem;
		font-weight: 600;
		letter-spacing: 0;
	}
	.site-nav__list a:hover { text-decoration-thickness: 2px; }
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
	background: var(--c-ink);
	color: #fff;
	padding-block: 64px 32px;
}
.site-footer__top {
	display: grid;
	gap: 32px;
	padding-bottom: 40px;
	border-bottom: 1px solid #2a2a28;
}
.site-footer__logo { display: inline-block; color: #fff; margin-bottom: 20px; }
.site-footer__svg { display: block; height: 40px; width: auto; aspect-ratio: 7805 / 4381; }
.site-footer__name { font-weight: 800; font-size: var(--fs-h3); letter-spacing: -0.02em; }
.site-footer__tagline { color: var(--c-invert-2); margin-top: 4px; }
.site-footer__list { display: grid; gap: 8px; }
.site-footer__list a { text-decoration: none; }
.site-footer__list a:hover { text-decoration: underline; }
.site-footer__company { margin-top: 24px; font-size: var(--fs-small); color: var(--c-invert-2); }
@media (min-width: 768px) {
	.site-footer__top { grid-template-columns: 2fr 1fr 1fr; }
}

/* Sections ---------------------------------------------------------------- */

.section { padding-block: var(--space); }
.section--tight { padding-block: calc(var(--space) * 0.6); }
.section--surface { background: var(--c-surface); }
.section--invert { background: var(--c-ink); color: #fff; }
.section--invert .note { color: var(--c-invert-2); }
.section--invert .form-card .note { color: var(--c-ink-2); } /* White card on black: back to the AA grey. */
.section--accent { background: var(--c-accent); color: var(--c-accent-ink); }
.section--accent .btn:hover, .section--accent .btn:focus-visible { background: #fff; color: var(--c-ink); }
.section--accent .lead { margin-top: 28px; }
.section__title { margin-bottom: clamp(32px, 5vw, 72px); max-width: 18ch; }

.grid-2 { display: grid; gap: 32px; }
@media (min-width: 1024px) {
	.grid-2 {
		grid-template-columns: repeat(12, 1fr);
		column-gap: var(--gutter);
	}
	.grid-2 > :first-child { grid-column: 1 / span 6; }
	.grid-2 > :last-child { grid-column: 8 / span 5; align-self: end; }
	.grid-2--form > :first-child { grid-column: 1 / span 7; }
	.grid-2--form > :last-child { grid-column: 9 / span 4; align-self: start; }
}

/* Hero -------------------------------------------------------------------- */

/* Mobile: title → lead → CTA in the first screen, the illustration after the CTA (centered, ≤ 32vh). */
.hero { padding-block: clamp(24px, 6vw, 96px) var(--space); }
.hero .lead { margin-top: 20px; }
.hero .actions { margin-top: 24px; }
.hero .note { margin-top: 16px; }
.hero__grid { display: grid; gap: 32px; }
.page-home .hero .display { font-size: clamp(2.5rem, 11vw, 3rem); }
.hero__visual { display: flex; justify-content: center; }
.hero__visual .blocks { width: auto; height: 32vh; max-width: 100%; overflow: visible; }
.hero__talk { margin-top: 16px; font-size: 1rem; }
.hero__talk .link-arrow { display: inline-flex; }

@media (min-width: 768px) {
	.hero .lead { margin-top: 28px; }
	.hero .actions { margin-top: 32px; }
	.hero .note { margin-top: 20px; }
	.page-home .hero .display { font-size: var(--fs-display); }
}

@media (min-width: 1024px) {
	.hero { min-height: calc(92vh - var(--header-h)); display: flex; align-items: center; }
	.hero__grid { grid-template-columns: repeat(12, 1fr); align-items: center; column-gap: var(--gutter); }
	.hero__text { grid-column: 1 / span 8; grid-row: 1; }
	.hero__visual { grid-column: 9 / span 4; grid-row: 1; display: block; }
	.hero__visual .blocks { width: 100%; height: auto; }
	.hero--landing, .hero--page { min-height: 0; }
}
.hero--landing .h1, .hero--page .h1 { max-width: 16ch; }
.hero--page .label { margin-top: 24px; }

/* Hero blocks: off-axis, aligned by scroll progress --p (0 → 1). */
.blocks--hero { --p: 0; }
.blocks--hero .blk {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transform: translateX(calc(var(--tx0) * (1 - var(--p)))) rotate(calc(var(--r0) * (1 - var(--p))));
}
@media (prefers-reduced-motion: reduce) {
	.blocks--hero { --p: 1 !important; }
}

/* Hero animations (Metodo, Studio, Contatti) ---------------------------------------------
 * Keyframes on transform/opacity only. The SVG's resting state is the final frame: with
 * reduced motion the animations are switched off and that frame stays. site.js adds
 * .is-paused off-screen; .tab-hidden on <html> pauses everything in a background tab.
 */

.hero__inner { display: grid; gap: 32px; }
.hero__anim svg { display: block; width: 100%; height: auto; max-height: 32vh; margin-inline: auto; overflow: visible; }
@media (min-width: 1024px) {
	.hero__inner { grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; }
	.hero__inner > .hero__text { grid-column: 1 / span 7; }
	.hero__inner > .hero__anim { grid-column: 9 / span 4; }
	.hero__anim svg { max-height: 56vh; }
}

.anim g { transform-box: fill-box; }
.hero__anim.is-paused *, .tab-hidden .hero__anim * { animation-play-state: paused !important; }

/* Metodo, 10 s: the four steps stack in order, the top lights up, everything scatters. */
.anim--metodo .m-b { animation: 10s var(--ease) infinite both; }
.anim--metodo .m-b1 { animation-name: m-b1; }
.anim--metodo .m-b2 { animation-name: m-b2; }
.anim--metodo .m-b3 { animation-name: m-b3; }
.anim--metodo .m-b4 { animation-name: m-b4; }
.anim--metodo .m-lit { animation: m-lit 10s linear infinite both; }
@keyframes m-b1 { 0% { opacity: 0; transform: translateY(-50px); } 6%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translate(var(--sx), var(--sy)); } }
@keyframes m-b2 { 0%, 10% { opacity: 0; transform: translateY(-50px); } 16%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translate(var(--sx), var(--sy)); } }
@keyframes m-b3 { 0%, 20% { opacity: 0; transform: translateY(-50px); } 26%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translate(var(--sx), var(--sy)); } }
@keyframes m-b4 { 0%, 30% { opacity: 0; transform: translateY(-50px); } 36%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translate(var(--sx), var(--sy)); } }
@keyframes m-lit { 0%, 42% { opacity: 0; } 48%, 70% { opacity: 1; } 76%, 100% { opacity: 0; } }

/* Studio, 12 s: team A assembles around the referent and leaves; team B does the same 6 s later. */
.anim--studio .s-p { animation: s-in 12s var(--ease) infinite both; animation-delay: calc(var(--i) * .25s); }
.anim--studio .s-b { animation-delay: calc(6s + var(--i) * .25s); }
@keyframes s-in {
	0% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
	7%, 40% { opacity: 1; transform: none; }
	47%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

/* Contatti, 8 s: dashed line → solid bridge → blocks close in and lock → they part. */
.anim--contatti .c-line { stroke: var(--c-ink); stroke-width: 2; stroke-dasharray: 6 6; transform-box: fill-box; transform-origin: 0 50%; opacity: 0; }
.anim--contatti .c-l { animation: c-l 8s var(--ease) infinite both; }
.anim--contatti .c-r { animation: c-r 8s var(--ease) infinite both; }
.anim--contatti .c-line { animation: c-line 8s var(--ease) infinite both; }
.anim--contatti .c-br { animation: c-br 8s linear infinite both; }
@keyframes c-l { 0%, 40% { transform: translate(-13px, -7.5px); } 55%, 80% { transform: none; } 92%, 100% { transform: translate(-13px, -7.5px); } }
@keyframes c-r { 0%, 40% { transform: translate(13px, 7.5px); } 55%, 80% { transform: none; } 92%, 100% { transform: translate(13px, 7.5px); } }
@keyframes c-line { 0%, 8% { opacity: 1; transform: scaleX(0); } 28% { opacity: 1; transform: scaleX(1); } 36%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes c-br { 0%, 30% { opacity: 0; } 38%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* Vendere di più, 10 s: the funnel fills from the bottom, slice by slice, then empties. */
.anim--vendere .v-s { animation: 10s var(--ease) infinite both; }
.anim .v-s1 { animation-name: v-s1; }
.anim .v-s2 { animation-name: v-s2; }
.anim .v-s3 { animation-name: v-s3; }
.anim .v-s4 { animation-name: v-s4; }
.anim .v-s5 { animation-name: v-s5; }
@keyframes v-s1 { 0%, 10% { opacity: 0; } 15%, 80% { opacity: 1; transform: none; } 87%, 100% { opacity: 0; transform: none; } }
@keyframes v-s2 { 0%, 19% { opacity: 0; } 24%, 80% { opacity: 1; transform: none; } 87%, 100% { opacity: 0; transform: none; } }
@keyframes v-s3 { 0%, 28% { opacity: 0; } 33%, 80% { opacity: 1; transform: none; } 87%, 100% { opacity: 0; transform: none; } }
@keyframes v-s4 { 0%, 37% { opacity: 0; } 42%, 80% { opacity: 1; transform: none; } 87%, 100% { opacity: 0; transform: none; } }
@keyframes v-s5 { 0%, 46% { opacity: 0; } 51%, 80% { opacity: 1; transform: none; } 87%, 100% { opacity: 0; transform: none; } }

/* Lavorare meglio, 9 s: links appear between three separate blocks, which then lock on. */
.anim--lavorare .w-a { animation: w-a 9s var(--ease) infinite both; }
.anim--lavorare .w-c { animation: w-c 9s var(--ease) infinite both; }
.anim--lavorare .w-r { animation: w-r 9s linear infinite both; }
.anim--lavorare .w-r2 { animation-delay: .5s; }
@keyframes w-a { 0%, 32% { transform: translateX(-14px); } 48%, 82% { transform: none; } 94%, 100% { transform: translateX(-14px); } }
@keyframes w-c { 0%, 32% { transform: translateX(14px); } 48%, 82% { transform: none; } 94%, 100% { transform: translateX(14px); } }
@keyframes w-r { 0%, 12% { opacity: 0; } 20%, 82% { opacity: 1; } 90%, 100% { opacity: 0; } }

/* Costruire, 11 s: the column builds up layer by layer, capped in accent. */
.anim--costruire .k-l { animation: 11s var(--ease) infinite both; }
.anim .k-l1 { animation-name: k-l1; }
.anim .k-l2 { animation-name: k-l2; }
.anim .k-l3 { animation-name: k-l3; }
.anim .k-l4 { animation-name: k-l4; }
.anim .k-l5 { animation-name: k-l5; }
.anim .k-l6 { animation-name: k-l6; }
.anim .k-l7 { animation-name: k-l7; }
.anim .k-l8 { animation-name: k-l8; }
@keyframes k-l1 { 0%, 6% { opacity: 0; transform: translateY(-40px); } 10%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes k-l2 { 0%, 14% { opacity: 0; transform: translateY(-40px); } 18%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes k-l3 { 0%, 22% { opacity: 0; transform: translateY(-40px); } 26%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes k-l4 { 0%, 30% { opacity: 0; transform: translateY(-40px); } 34%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes k-l5 { 0%, 38% { opacity: 0; transform: translateY(-40px); } 42%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes k-l6 { 0%, 46% { opacity: 0; transform: translateY(-40px); } 50%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes k-l7 { 0%, 54% { opacity: 0; transform: translateY(-40px); } 58%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes k-l8 { 0%, 62% { opacity: 0; transform: translateY(-40px); } 66%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }

/* AI, 11 s: the blocks line up; only then does the accent prism land on top. */
.anim--ai .a-b { transform-origin: 50% 100%; animation: a-b 11s var(--ease) infinite both; animation-delay: calc(var(--i) * .3s); }
.anim--ai .a-p { animation: a-p 11s var(--ease) infinite both; }
@keyframes a-b { 0%, 8% { transform: translateX(var(--tx)) rotate(var(--r)); } 38%, 84% { transform: none; } 96%, 100% { transform: translateX(var(--tx)) rotate(var(--r)); } }
@keyframes a-p { 0%, 46% { opacity: 0; transform: translateY(-50px); } 56%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translateY(-50px); } }

@media (prefers-reduced-motion: reduce) {
	.hero__anim * { animation: none !important; }
	.anim--studio .s-b { opacity: 0; }
}

/* Need tiles -------------------------------------------------------------- */

.tiles { border-top: 1px solid var(--c-line); }
.tiles li { border-bottom: 1px solid var(--c-line); }
.tile {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 4px 20px;
	align-items: baseline;
	padding: 28px 0;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
}
.tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--c-accent);
	transform: translateX(-101%);
	transition: transform .35s var(--ease);
}
.tile:hover::before, .tile:focus-visible::before { transform: translateX(0); }
.tile__n { font-size: var(--fs-small); font-weight: 600; }
.tile__title { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.tile__text { grid-column: 2; color: var(--c-ink-2); max-width: 52ch; }
.tile:hover .tile__text, .tile:focus-visible .tile__text { color: var(--c-ink); }
.tile .arrow { grid-column: 3; grid-row: 1; align-self: center; transition: transform .25s var(--ease); }
.tile:hover .arrow, .tile:focus-visible .arrow { transform: translateX(4px); }

@media (min-width: 1024px) {
	.tiles { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 0; }
	.tiles li { border-bottom: 0; border-left: 1px solid var(--c-line); }
	.tiles li:last-child { border-right: 1px solid var(--c-line); }
	.tile {
		grid-template-columns: 1fr;
		align-content: start;
		gap: 16px;
		height: 100%;
		min-height: 340px;
		padding: 28px 24px;
	}
	.tile__text, .tile .arrow { grid-column: 1; grid-row: auto; }
	.tile .arrow { margin-top: auto; }
}

/* Steps ------------------------------------------------------------------- */

.steps { display: grid; gap: 40px; counter-reset: step; }
.step { border-top: 2px solid var(--c-ink); padding-top: 20px; }
.section--invert .step { border-color: #fff; }
.step__n {
	display: block;
	font-size: var(--fs-h2);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--c-accent);
	margin-bottom: 16px;
}
.step .h3 { margin-bottom: 8px; }
.step p { max-width: 40ch; }
.step__lead { font-size: var(--fs-lead); line-height: 1.35; }
.section > .wrap > .note { margin-top: 48px; font-size: 1rem; }
@media (min-width: 768px) {
	.steps { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
	.steps--4 { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
}
@media (min-width: 1200px) {
	.steps--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Quote, symptoms, skills, FAQ ------------------------------------------ */

.quote { font-size: var(--fs-lead); line-height: 1.45; max-width: 46ch; }

.symptoms { display: grid; gap: 0; border-top: 1px solid #2a2a28; }
.symptoms li {
	position: relative;
	padding: 20px 0 20px 32px;
	border-bottom: 1px solid #2a2a28;
	font-size: var(--fs-lead);
	line-height: 1.35;
}
.symptoms li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 30px;
	width: 14px;
	height: 14px;
	background: var(--c-accent);
}

.skills { display: grid; gap: 32px; }
.skill { border-top: 1px solid #2a2a28; padding-top: 20px; }
.skill dd { margin-top: 8px; color: var(--c-invert-2); max-width: 36ch; }
@media (min-width: 768px) {
	.skills { grid-template-columns: repeat(2, 1fr); gap: 48px var(--gutter); }
}
@media (min-width: 1200px) {
	.skills { grid-template-columns: repeat(4, 1fr); }
}

.faq { border-top: 1px solid var(--c-ink); }
.faq__item { border-bottom: 1px solid var(--c-ink); }
.faq__item summary {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-weight: 400; }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { padding-bottom: 24px; max-width: 58ch; }

/* Forms on site pages ----------------------------------------------------- */

.form-card {
	background: #fff;
	color: var(--c-ink);
	padding: 24px 20px;
	border-radius: var(--radius);
}
.page-contatti .form-card { padding: 0; }
@media (min-width: 768px) {
	.form-card { padding: 40px; }
}
.form-done { font-size: var(--fs-lead); line-height: 1.4; }
.form-done:focus { outline: none; }

.contact-aside { display: grid; gap: 16px; align-content: start; }

/* Legal pages ------------------------------------------------------------- */

.legal { margin-top: 40px; }
.legal h2 { font-size: var(--fs-h3); font-weight: 700; margin: 40px 0 12px; letter-spacing: -0.01em; }
.legal p, .legal li { margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 20px; }
.legal a { text-decoration: underline; }
.draft-banner { margin-bottom: 8px; }

.cases { display: grid; gap: 32px; }