/* ==========================================================================
   FUL Agency — foglio di stile
   Valori misurati sul sito vivo (Bibbia FUL, 31/08/2026): un carattere solo,
   Inter; titoli 600 con tracking -0.05em, corpo 300. Giallo raro.
   Un gesto solo: tutto si svela dal basso verso l'alto.
   ========================================================================== */

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin.woff2") format("woff2");
	font-weight: 100 900; font-style: normal; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	font-weight: 100 900; font-style: normal; font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Il ripiego mentre Inter arriva: Arial tarato sulle misure di Inter (size-adjust e metriche
   verticali), così quando il carattere vero entra le righe non vanno a capo altrove e niente salta.
   Misurato 28/09: larghezze entro ±2,5% da Inter (system-ui del Mac: -9/-12%, era lo scatto). */
@font-face {
	font-family: "Inter ripiego"; src: local("Arial"), local("ArialMT");
	font-weight: 100 500; size-adjust: 105%; ascent-override: 92.26%; descent-override: 22.97%; line-gap-override: 0%;
}
@font-face {
	font-family: "Inter ripiego"; src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 900; size-adjust: 99%; ascent-override: 97.85%; descent-override: 24.36%; line-gap-override: 0%;
}

:root {
	--giallo: #FDB81C;
	--testo: #1D1D1D;
	--carbone: #151515;
	--bianco: #FFFFFF;
	--sporco: #F3F2EF;
	--grigio: #6E6E6E;       /* testo secondario su bianco: 5.1:1 */
	--grigio-frase: #8A8A8A; /* testo grande a due toni: 3.5:1 */
	--filo: rgba(21, 21, 21, .14);

	--margine: clamp(16px, 2.2vw, 36px);
	--testata-h: clamp(64px, 6vw, 84px);
	--sezione: clamp(96px, 13vw, 200px);

	--ease: cubic-bezier(.65, .05, .15, 1);   /* il gesto: parte deciso, si posa morbido */
	--ease-esce: cubic-bezier(.2, .7, .1, 1);

	--t-display: clamp(3.4rem, 13.5vw, 15rem);
	--t-grande: clamp(3.25rem, 11.2vw, 12.5rem);
	--t-manifesto: clamp(2.5rem, 7.4vw, 8rem);
	--t-frase: clamp(2rem, 4.4vw, 4.6rem);
	--t-titolo: clamp(2rem, 3.6vw, 3.6rem);
	--t-intro: clamp(1.5rem, 2.2vw, 2.25rem);
	--t-corpo-g: clamp(1.15rem, 1.45vw, 1.45rem);
	--t-corpo: 1rem;
	--t-piccolo: .75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
	margin: 0;
	font-family: "Inter", "Inter ripiego", system-ui, sans-serif;
	font-weight: 300;
	font-size: var(--t-corpo);
	line-height: 1.45;
	letter-spacing: -.01em;
	color: var(--testo);
	background: var(--bianco);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "ss01", "cv11";
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, blockquote, ul { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--giallo); outline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.intera { white-space: nowrap; }
.salta { position: fixed; left: var(--margine); top: -100px; z-index: 200; background: var(--carbone); color: var(--bianco); padding: 12px 16px; font-weight: 600; }
.salta:focus { top: 12px; }

/* --- Tipografia di servizio ------------------------------------------------ */
.etichetta {
	display: inline-flex; align-items: center; gap: .6em;
	font-size: var(--t-piccolo); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
	color: var(--testo);
}
.etichetta--punto::before { content: ""; width: 7px; height: 7px; background: var(--giallo); flex: none; }
.corpo-grande { font-size: var(--t-corpo-g); line-height: 1.4; }
.titolo-sezione { font-size: var(--t-frase); font-weight: 600; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }

/* Le righe che salgono: la maschera la mette JS (SplitText), qui solo il taglio */
/* SplitText mette ogni riga in una maschera «riga-sale-mask»: sotto serve aria per le gambe di g, p, q */
[class$="-mask"] { padding-bottom: .16em; margin-bottom: -.16em; }

/* --- Bottoni: rettangoli netti, le lettere rotolano ------------------------ */
.btn {
	--h: 48px;
	position: relative; display: inline-flex; align-items: center; gap: 14px;
	height: var(--h); padding: 0 20px 0 22px;
	font-size: .8125rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
	line-height: 1; white-space: nowrap;
	transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn__t { display: inline-flex; overflow: clip; height: 1.2em; align-items: flex-start; padding-top: .1em; }
.btn__l {
	display: inline-block; text-shadow: 0 1.25em 0 currentColor;
	transition: transform .55s var(--ease); transition-delay: calc(var(--i) * 18ms);
}
.btn__l--spazio { width: .28em; }
.btn__f { position: relative; width: 12px; height: 12px; overflow: clip; flex: none; }
.btn__f svg { position: absolute; inset: 0; transition: transform .55s var(--ease); }
.btn__f svg + svg { transform: translate(-130%, 130%); }
@media (hover: hover) {
	.btn:hover .btn__l { transform: translateY(-1.25em); }
	.btn:hover .btn__f svg:first-child { transform: translate(130%, -130%); }
	.btn:hover .btn__f svg + svg { transform: translate(0, 0); }
}
.btn--pieno { background: var(--carbone); color: var(--bianco); }
.btn--chiaro { background: var(--bianco); color: var(--carbone); }
.btn--filo { color: var(--carbone); box-shadow: inset 0 0 0 1px var(--carbone); }
@media (hover: hover) {
	.btn--pieno:hover { background: #000; }
	.btn--filo:hover { background: var(--carbone); color: var(--bianco); }
	.btn--chiaro:hover { background: var(--giallo); }
}

.btn-testo {
	display: inline-flex; align-items: baseline; gap: .7em; min-height: 48px; align-items: center;
	font-size: .8125rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
}
.btn-testo [data-copia-t] { text-transform: none; letter-spacing: -.01em; font-size: .8125rem; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.btn-testo__nota, .piede__email-nota { font-size: .6875rem; opacity: .7; }

/* --- Sipario d'ingresso ---------------------------------------------------- */
.sipario { display: none; }
.sipario-on .sipario {
	display: flex; position: fixed; inset: 0; z-index: 150;
	flex-direction: column; justify-content: space-between;
	padding: calc(var(--margine) * 1.2) var(--margine);
	background: var(--giallo); color: var(--carbone);
	clip-path: inset(0 0 0 0);
}
.sipario-on body { overflow: hidden; }
.sipario__righe { display: flex; flex-direction: column; }
.sipario__riga {
	display: block; overflow: clip; padding-bottom: .14em; margin-bottom: -.09em;
	font-size: clamp(3rem, 9vw, 9.5rem); font-weight: 600; letter-spacing: -.055em; line-height: .88;
}
.sipario__riga > span { display: block; transform: translateY(105%); }
.sipario__marchio { font-size: var(--t-piccolo); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }

/* --- Passaggio fra pagine: il sipario a ogni clic interno ----------------- */
/* Sale da sotto e copre (partenza), si alza e scopre (arrivo). Carbone; sulle schede la tinta del cliente. */
.passaggio { display: none; }
.passaggio-on .passaggio, .passaggio.va {
	display: flex; position: fixed; inset: 0; z-index: 160;
	flex-direction: column; justify-content: space-between;
	padding: calc(var(--margine) * 1.2) var(--margine);
	background: var(--p-fondo, var(--carbone)); color: var(--p-testo, #fff);
}
.passaggio-on body { overflow: hidden; }
.passaggio__riga {
	display: block; overflow: clip; padding-bottom: .14em; margin-bottom: -.09em; max-width: 14ch;
	font-size: clamp(3rem, 9vw, 9.5rem); font-weight: 600; letter-spacing: -.055em; line-height: .88;
}
.passaggio__riga > span { display: block; }
.passaggio__marchio { font-size: var(--t-piccolo); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }

/* --- Testata --------------------------------------------------------------- */
.testata {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	height: var(--testata-h);
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 var(--margine);
	color: var(--bianco);
	transition: color .45s var(--ease), transform .6s var(--ease);
	pointer-events: none;
}
.testata > * { pointer-events: auto; }
.testata.is-scura { color: var(--carbone); }
.testata.is-nascosta { transform: translateY(-110%); }
/* Il fondo della testata: nasce lontano dalla cima (is-solida) e prende il tono della sezione sotto,
   carbone sulle foto e sul nero, bianco col filo sul chiaro. Si accende col colore, non con un taglio. */
.testata::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--carbone); box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
	opacity: 0; transition: opacity .45s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.testata.is-scura::before { background: var(--bianco); box-shadow: 0 1px 0 var(--filo); }
.testata.is-solida { pointer-events: auto; }
.testata.is-solida::before { opacity: 1; }
.menu-aperto .testata::before { opacity: 0; }
.testata__logo { display: block; width: clamp(40px, 3.4vw, 52px); }
.testata__svg { width: 100%; height: auto; }
.testata__nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.testata__nav ul { display: flex; gap: clamp(18px, 2vw, 34px); }
.testata__voce {
	display: inline-flex; overflow: clip; height: 1.25em;
	font-size: .8125rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
}
.testata__voce span { display: block; transition: transform .55s var(--ease); text-shadow: 0 1.25em 0 currentColor; }
@media (hover: hover) { .testata__voce:hover span { transform: translateY(-1.25em); } }
.testata .btn--pieno { background: var(--bianco); color: var(--carbone); }
.testata.is-scura .btn--pieno { background: var(--carbone); color: var(--bianco); }
@media (hover: hover) { .testata .btn--pieno:hover, .testata.is-scura .btn--pieno:hover { background: var(--giallo); color: var(--carbone); } }
.testata__apri { display: none; height: 44px; padding: 0 2px; font-size: .8125rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }

.menu-pieno {
	position: fixed; inset: 0; z-index: 90;
	display: flex; flex-direction: column; justify-content: flex-end; gap: 40px;
	padding: calc(var(--testata-h) + 24px) var(--margine) calc(var(--margine) + env(safe-area-inset-bottom));
	background: var(--giallo); color: var(--carbone);
	clip-path: inset(0 0 100% 0);
}
.menu-pieno[hidden] { display: none; }
.menu-pieno li { overflow: clip; }
.menu-pieno a { display: flex; align-items: flex-start; gap: 10px; }
.menu-pieno__n { font-size: var(--t-piccolo); font-weight: 600; padding-top: .9em; }
.menu-pieno__v { display: block; font-size: clamp(3rem, 15vw, 6rem); font-weight: 600; letter-spacing: -.055em; line-height: .95; }
.menu-pieno__piede { display: flex; flex-direction: column; gap: 10px; font-size: .9375rem; font-weight: 600; }
.menu-pieno__piede span { display: flex; gap: 18px; }
.menu-aperto .testata { color: var(--carbone); }

/* --- 1 · Hero -------------------------------------------------------------- */
.hero {
	position: relative; height: 100vh; height: 100svh; min-height: 560px;
	display: grid; place-items: center;
	color: var(--bianco); background: var(--carbone); overflow: clip;
}
/* Solo un'ombra bassa dove cade il testo: la foto resta viva */
.hero::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(to top, rgba(10, 8, 6, .42), rgba(10, 8, 6, 0)); pointer-events: none; }
.hero__testo { position: relative; z-index: 2; text-align: center; padding: var(--testata-h) var(--margine) 0; }
.hero__titolo {
	font-size: var(--t-display); font-weight: 600; letter-spacing: -.06em; line-height: .84;
	text-transform: uppercase;
}
.hero__riga { display: block; }
.hero__tag {
	position: absolute; white-space: nowrap; margin: .2em 0 0 .5em;
	font-size: clamp(.8rem, 1.15vw, 1.1rem); letter-spacing: 0; line-height: 1; font-weight: 600;
}
.hero__riga:last-child { position: relative; display: inline-block; }
.hero__sotto { margin: clamp(22px, 2.4vw, 36px) auto 0; max-width: 28ch; font-size: var(--t-corpo-g); font-weight: 400; line-height: 1.3; }
.hero__cta { margin-top: 26px; }
/* Hero: il mosaico dei lavori veri, in colonne inclinate.
   Ogni nastro ripete tre volte le sue quattro tessere: scorrendo di un terzo torna identico. */
.mosaico { position: absolute; inset: 0; overflow: clip; background: var(--carbone); }
.mosaico__piano {
	--col: calc((100vw * 1.1 + 100svh * .3) / 7); --spazio: clamp(8px, .9vw, 14px);
	position: absolute; left: 50%; top: 50%; height: 150svh;
	display: flex; gap: var(--spazio);
	transform: translate(-50%, -50%) rotate(-12deg); transform-origin: 50% 50%;
}
.mosaico__col { position: relative; width: var(--col); flex: none; }
.mosaico__nastro { display: flex; flex-direction: column; gap: var(--spazio); will-change: transform; }
.mosaico__nastro img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #1c1a18; }
/* Il titolo si legge: il centro si abbassa, i bordi restano vivi */
.hero--mosaico::after { inset: 0; background: radial-gradient(ellipse 58% 52% at 50% 50%, rgba(10, 8, 6, .72), rgba(10, 8, 6, .34) 78%); }
@media (max-width: 700px) {
	.mosaico__piano { --col: calc((100vw * 1.1 + 100svh * .3) / 4); }
	.mosaico__col:nth-child(n+5) { display: none; }
}
.hero__giu {
	position: absolute; z-index: 2; left: 50%; bottom: calc(var(--margine) + env(safe-area-inset-bottom)); transform: translateX(-50%);
	font-size: var(--t-piccolo); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; opacity: .8;
}

/* --- 2 · Clienti ----------------------------------------------------------- */
.clienti { padding: clamp(64px, 8vw, 120px) var(--margine) 0; text-align: center; }
.clienti__loghi {
	display: grid; grid-template-columns: repeat(6, 1fr); align-items: center;
	gap: clamp(28px, 3.6vw, 56px) clamp(24px, 4vw, 72px);
	max-width: 1180px; margin: clamp(32px, 3.6vw, 52px) auto 0;
}
.clienti__loghi img { width: auto; max-width: 100%; max-height: clamp(34px, 3.6vw, 52px); margin: 0 auto; opacity: .9; }

/* --- 3 · Manifesto --------------------------------------------------------- */
.manifesto { padding: var(--sezione) var(--margine) 0; text-align: center; }
.manifesto__righe {
	font-size: var(--t-manifesto); font-weight: 600; letter-spacing: -.055em; line-height: .9;
	text-transform: uppercase;
}
.manifesto__riga { display: block; overflow: clip; padding-bottom: .04em; }
.manifesto__riga > span { display: block; }
/* Stessa scala delle sezioni vicine: titolo → contenuto come «Progetti scelti», testo → bottone come Settori */
.manifesto__chi {
	display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; align-items: end;
	margin-top: clamp(56px, 6vw, 100px); text-align: left;
}
.manifesto__video { grid-column: 1 / 8; aspect-ratio: 3 / 2; overflow: clip; background: var(--carbone); }
.manifesto__testo { grid-column: 9 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: 44px; }
.manifesto__testo .corpo-grande { max-width: 34ch; text-wrap: pretty; }
.manifesto__video video { width: 100%; height: 100%; object-fit: cover; }

/* --- Intro (etichetta a sinistra + testo grande rientrato) ----------------- */
.intro {
	display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; align-items: start;
	padding: 0 var(--margine);
}
.intro .etichetta { grid-column: 1 / 4; padding-top: .9em; }
.intro__testo { grid-column: 4 / 12; font-size: var(--t-intro); font-weight: 400; letter-spacing: -.035em; line-height: 1.1; text-wrap: pretty; }

/* --- 4 · Progetti ---------------------------------------------------------- */
.progetti { padding-top: var(--sezione); }
.parole-grandi {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 0 var(--margine); margin-bottom: clamp(56px, 6vw, 100px);
	font-size: var(--t-grande); font-weight: 600; letter-spacing: -.065em; line-height: .82;
	text-transform: uppercase;
}
.parole-grandi > span { display: block; overflow: clip; padding-bottom: .05em; }
.parole-grandi .ch { display: inline-block; }
.progetti__griglia {
	display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px;
	row-gap: clamp(64px, 7vw, 120px);
	padding: clamp(56px, 6vw, 100px) var(--margine) 0;
}
.scheda--1 { grid-column: 1 / 8; }
.scheda--2 { grid-column: 9 / 13; margin-top: 18vw; }
.scheda--3 { grid-column: 1 / 6; }
.scheda--4 { grid-column: 7 / 13; margin-top: -8vw; }
.scheda__link { display: block; }
.scheda__foto { position: relative; aspect-ratio: 4 / 5; overflow: clip; background: var(--sporco); }
.scheda__foto img { width: 100%; height: 116%; object-fit: cover; position: absolute; top: -8%; left: 0; transition: scale 1.1s var(--ease-esce); }
@media (hover: hover) { .scheda__link:hover .scheda__foto img { scale: 1.035; } }
.scheda__didascalia {
	display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 4px;
	padding-top: 14px;
}
.scheda__nome { font-size: var(--t-corpo-g); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.scheda__n { font-size: var(--t-piccolo); font-weight: 600; padding-top: .35em; }
.scheda__cat { grid-column: 1 / -1; font-size: .8125rem; color: var(--grigio); }
.progetti__tutti { display: flex; justify-content: center; padding-top: clamp(64px, 7vw, 110px); }

/* --- Pagina Progetti ------------------------------------------------------- */
/* Stessa scala della home: titolo → contenuto e intro → griglia come «Progetti scelti», righe come la sua griglia */
.lavori { padding-top: calc(var(--testata-h) + clamp(56px, 6vw, 100px)); }
.lavori__conta { font-size: var(--t-titolo); letter-spacing: -.04em; }
.filtri {
	display: flex; flex-wrap: wrap; gap: 8px;
	padding: clamp(56px, 6vw, 100px) var(--margine) 0;
}
.filtri__voce {
	display: inline-flex; align-items: center; gap: .45em; height: 40px; padding: 0 16px;
	font-size: var(--t-piccolo); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
	box-shadow: inset 0 0 0 1px var(--filo);
	transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.filtri__voce sup { font-size: .8em; opacity: .55; }
.filtri__voce[aria-pressed="true"] { background: var(--carbone); color: var(--bianco); box-shadow: none; }
@media (hover: hover) { .filtri__voce:hover { box-shadow: inset 0 0 0 1px var(--carbone); } }
.lavori__griglia {
	display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; align-items: end;
	row-gap: clamp(64px, 7vw, 120px);
	padding: clamp(40px, 4vw, 64px) var(--margine) 0;
}
.lavori__griglia .scheda[hidden] { display: none; }
.scheda--larga.scheda--sx { grid-column: 1 / 8; }
.scheda--stretta.scheda--dx { grid-column: 9 / 13; }
.scheda--stretta.scheda--sx { grid-column: 1 / 5; }
.scheda--larga.scheda--dx { grid-column: 6 / 13; }
.scheda--larga .scheda__foto { aspect-ratio: 5 / 4; }

/* --- Pagina Servizi: i tre reparti ---------------------------------------- */
/* La grammatica della scheda progetto: il fianco resta fermo, i servizi scorrono.
   Colonne (12, gabbia della home)       largo ≥1000    medio 700-1000   stretto <700
   · fianco (numero, nome, foto)         1-5  (5)       1-12             1-12
   · (vuota)                             6    (1)       —                —
   · voci                                7-12 (6)       1-12             1-12
   Righe: nel fianco il nome sta in cima e la foto chiude in fondo allo schermo; ogni voce apre
   col filo carbone come i capitoli della scheda. Densità: regolare (i testi si leggono).
   Volumi: titolo pagina (grande) > nome reparto (~6vw) > nome servizio (intro) > testo (corpo-g). */
.reparti { padding-top: var(--sezione); }
.reparto {
	display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; align-items: start;
	padding: 0 var(--margine);
}
.reparto + .reparto { margin-top: var(--sezione); }
.reparto__fianco {
	grid-column: 1 / 6; position: sticky; top: calc(var(--testata-h) + 24px);
	height: calc(100svh - var(--testata-h) - 24px - var(--margine));
	display: flex; flex-direction: column; gap: clamp(28px, 3vw, 48px);
}
.reparto__n { display: block; margin-bottom: 18px; font-size: var(--t-piccolo); font-weight: 600; }
/* Un corpo solo per i tre nomi: lo decide la parola più lunga («PERFORMANCE», 11 lettere = 7em misurati) sulla colonna */
.reparto__nome {
	font-size: min(var(--t-grande), calc(37vw / 6.9));
	font-weight: 600; letter-spacing: -.06em; line-height: .86; text-transform: uppercase; text-wrap: balance;
}
.reparto__foto { flex: 1; min-height: 0; overflow: clip; background: var(--sporco); }
.reparto__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Le maiuscole accentate (IDENTITÀ) sforano la riga stretta: la maschera che fa salire le righe lascia loro aria sopra */
.reparto__nome [class$="-mask"] { padding-top: .14em; margin-top: -.14em; }

.reparto__voci { list-style: none; padding: 0; margin: 0; grid-column: 7 / 13; display: flex; flex-direction: column; gap: clamp(64px, 7vw, 120px); }
.voce { padding-top: 18px; border-top: 1px solid var(--carbone); scroll-margin-top: calc(var(--testata-h) + 24px); }
.voce__n { display: block; font-size: var(--t-piccolo); font-weight: 600; }
.voce__titolo { margin-top: clamp(24px, 2.6vw, 40px); max-width: 16ch; font-size: var(--t-intro); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.voce__testo { margin-top: clamp(20px, 2vw, 32px); max-width: 38em; font-size: var(--t-corpo-g); line-height: 1.42; text-wrap: pretty; }
.voce__lavori { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: clamp(20px, 2vw, 28px); font-size: .9375rem; font-weight: 400; }
.voce__lavori .etichetta { color: var(--grigio); }
.voce__elenco a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-color .4s var(--ease); }
.voce__elenco .voce__altri { color: var(--grigio); }
@media (hover: hover) { .voce__elenco a:hover { text-decoration-color: var(--giallo); } }

/* --- Pagina Domande frequenti: i reparti di Servizi, più fitti ------------------------------ */
/* 25 domande invece di 12 servizi: lo spazio fra le voci scende di un terzo, e la domanda (più lunga
   di un nome di servizio) si allarga a 22ch per stare in tre righe. Ogni gruppo chiude con l'invito:
   stessa voce, senza numero, col bottone che apre il modulo già sul bisogno giusto. */
.faq__data { margin-top: clamp(20px, 2vw, 28px); font-size: var(--t-piccolo); font-weight: 600; color: var(--grigio); }
.reparti--faq .reparto__voci { gap: clamp(48px, 4.6vw, 80px); }
.reparti--faq .voce__titolo { max-width: 22ch; }
.reparti--faq .voce--invito .voce__titolo { margin-top: 0; }
.voce__azione { margin-top: clamp(24px, 2.4vw, 36px); }

/* --- Pagina Chi siamo ----------------------------------------------------- */
/* Tre parti numerate. La storia e il metodo con la grammatica dei reparti (fianco fermo 1-5, testo 7-12);
   in mezzo le persone, dove la gabbia si apre: otto carte, 4 per riga (2 sotto i 1000 px → 4+4, mai orfane).
   Le carte sono quelle della home senza la pista: niente trascinamento, larghezza dalla griglia. */
.chi__racconto, .chi__metodo { grid-column: 7 / 13; }
.chi__racconto { padding-top: 18px; border-top: 1px solid var(--carbone); }
.chi__attacco { margin-top: clamp(24px, 2.6vw, 40px); font-size: var(--t-intro); font-weight: 400; letter-spacing: -.035em; line-height: 1.12; text-wrap: pretty; }
.chi__attacco strong, .chi__racconto strong { font-weight: 600; }
.chi__racconto .voce__testo { margin-top: clamp(28px, 3vw, 44px); }

/* --- Pagina Contatti --------------------------------------------------------- */
/* Un reparto solo, con la grammatica di Servizi. L'email è il titolo della prima voce: un corpo
   più grande del nome di un servizio, perché è la cosa che si viene a prendere. */
.recapito { padding-bottom: var(--sezione); }
.recapito__mail { max-width: none; font-size: var(--t-titolo); letter-spacing: -.05em; overflow-wrap: anywhere; }
.recapito__mail a { display: inline-block; max-width: 100%; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease); }
@media (hover: hover) { .recapito__mail a:hover { background-size: 100% 2px; } }
.recapito__azioni { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; margin-top: clamp(28px, 3vw, 44px); }
.contatti__subito { display: none; }
.recapito__elenco { list-style: none; padding: 0; margin: clamp(24px, 2.6vw, 40px) 0 0; }
.recapito__elenco li + li { border-top: 1px solid var(--filo); }
.recapito__elenco a {
	display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 0;
	font-size: var(--t-intro); font-weight: 600; letter-spacing: -.045em; line-height: 1.05;
}
.recapito__elenco--piccolo a { font-size: var(--t-corpo-g); font-weight: 500; letter-spacing: -.03em; padding: 16px 0; }
.recapito__elenco .btn__f { width: 16px; height: 16px; }
@media (hover: hover) {
	.recapito__elenco a:hover .btn__f svg:first-child { transform: translate(130%, -130%); }
	.recapito__elenco a:hover .btn__f svg + svg { transform: translate(0, 0); }
}
.recapito__tutti { margin-top: clamp(28px, 3vw, 44px); display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Il modulo dei contatti (voce 01 di Contatti, inc/modulo.php) ----------------------------
   Niente scatole: i campi sono un filo carbone sotto la parola, come i fili delle voci. Le scelte
   sono le pillole dei filtri di Progetti (la scelta fatta prende il carbone, come il filtro acceso). */
.modulo { display: flex; flex-direction: column; gap: clamp(32px, 3.4vw, 48px); margin-top: clamp(28px, 3vw, 44px); }
.modulo__resto { display: flex; flex-direction: column; gap: clamp(32px, 3.4vw, 48px); }
.modulo__gruppo { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.modulo__legenda { padding: 0; margin-bottom: 16px; }
.modulo .filtri { padding: 0; flex-wrap: wrap; overflow: visible; }
.modulo .filtri__voce { cursor: pointer; }
.modulo .filtri__voce:has(:checked) { background: var(--carbone); color: var(--bianco); box-shadow: none; }
.modulo .filtri__voce:has(:focus-visible) { outline: 2px solid var(--giallo); outline-offset: 3px; }
.modulo__gruppo:has([aria-invalid="true"]) .filtri__voce:not(:has(:checked)) { box-shadow: inset 0 0 0 1px var(--carbone); }
.modulo__campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
.modulo__campo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.modulo__campo--largo { grid-column: 1 / -1; }
.modulo__facoltativo { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--grigio); }
.modulo__input {
	width: 100%; padding: 6px 0 10px; border: 0; border-bottom: 1px solid var(--carbone); border-radius: 0;
	background: none; color: var(--testo); font: inherit; font-size: var(--t-corpo-g); font-weight: 300; line-height: 1.4;
	appearance: none; transition: box-shadow .4s var(--ease);
}
textarea.modulo__input { resize: vertical; min-height: 6.5em; }
.modulo__input:focus { outline: none; box-shadow: 0 1px 0 0 var(--carbone); }
.modulo__input[aria-invalid="true"] { box-shadow: 0 2px 0 0 var(--giallo); }
.modulo__nota { font-size: .8125rem; line-height: 1.4; color: var(--grigio); }
.modulo__avviso, .modulo__errore { display: flex; align-items: baseline; gap: .6em; line-height: 1.4; }
.modulo__avviso::before, .modulo__errore::before { content: ""; width: 7px; height: 7px; background: var(--giallo); flex: none; transform: translateY(-.1em); }
.modulo__avviso { padding: 14px 16px; background: var(--sporco); font-size: .9375rem; font-weight: 400; }
.modulo__errore { font-size: .8125rem; font-weight: 400; }
.modulo__avviso[hidden], .modulo__errore[hidden] { display: none; }
.modulo__invio { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.modulo__privacy { font-size: .8125rem; line-height: 1.4; color: var(--grigio); }
.modulo__invio .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
/* La trappola per i programmi che riempiono tutto: fuori dallo schermo, non display:none (quelli lo saltano) */
.modulo__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Un link a parole con la freccia (Come funziona): sottolineato come l'email da copiare */
.btn-testo__t { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
@media (hover: hover) {
	.btn-testo:hover .btn__f svg:first-child { transform: translate(130%, -130%); }
	.btn-testo:hover .btn__f svg + svg { transform: translate(0, 0); }
}

/* --- Grazie (/grazie/) ------------------------------------------------------ */
/* La testa della 404 col bottone sotto il testo, poi tre progetti con le schede della coda degli articoli */
.intro .intro__azioni { grid-column: 4 / 12; }
/* .coda.grazie__lavori e non .grazie__lavori: .coda sta più in basso nel foglio e il suo padding vincerebbe */
.coda.grazie__lavori { padding-bottom: var(--sezione); }
.coda.grazie__lavori::before { display: none; }
.grazie__lavori .coda__lavori { margin-top: 0; }
@media (max-width: 1000px) { .intro .intro__azioni { grid-column: 1 / -1; } }
/* --- Pagine servizio (/servizi/<slug>/) --------------------------------------- */
/* Il nome è lungo («Anniversari ed eventi aziendali»): due righe a scala, la prima a sinistra e la seconda a destra */
.parole-grandi--servizio { flex-direction: column; align-items: flex-start; font-size: var(--t-manifesto); }
.parole-grandi--servizio > span:last-child { align-self: flex-end; }
.servizi__pagine { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 28px; } /* il bottone a parole è già alto 48px: niente spazio in più fra le righe */
.servizio__lavori .coda__lavori { margin-top: 0; }
@media (max-width: 700px) { .modulo__campi { grid-template-columns: minmax(0, 1fr); } }
.chi__riusciti { margin-top: 12px; font-size: var(--t-corpo-g); line-height: 1.42; color: var(--grigio); }
.chi__azione { margin-top: clamp(64px, 7vw, 120px); }

.squadra { padding: var(--sezione) var(--margine) 0; }
.squadra__testa { margin-bottom: clamp(40px, 4.5vw, 72px); }
.squadra__nome { max-width: 18ch; }
.squadra__carte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 1.8vw, 28px); }
.squadra .carta { width: auto; }
/* Qui la frase ha il corpo dei paragrafi della pagina: una banda di testo in meno */
.squadra .carta__frase { font-size: var(--t-corpo-g); line-height: 1.32; }

/* --- Scheda del singolo progetto ------------------------------------------ */
/* Sul modello di What Matters (work/<nome>): il fianco resta fermo, il racconto scorre.
   Colonne (12, gabbia della home)       largo ≥1000    medio 700-1000   stretto <700
   · fianco (nome + dati)                1-5  (5)       1-12             1-12
   · (vuota: aria fra nome e foto)       6    (1)       —                —
   · racconto                            7-12 (6)       1-12             1-12
     · coppia di riquadri                3+3            6+6              6+6
   Righe: i due riquadri di una coppia chiudono insieme (stesso 4:5); i dati del fianco
   chiudono in fondo allo schermo, il nome in cima. Densità: regolare. */
.progetto {
	display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; align-items: start;
	padding: calc(var(--testata-h) + clamp(56px, 6vw, 100px)) var(--margine) 0;
}
.progetto__fianco {
	grid-column: 1 / 6; position: sticky; top: calc(var(--testata-h) + 24px);
	height: calc(100svh - var(--testata-h) - 24px - var(--margine));
	display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.progetto__n { display: block; margin-bottom: 18px; font-size: var(--t-piccolo); font-weight: 600; }
/* Il nome riempie la colonna: la parola più lunga (--lettere) decide il corpo, mai oltre la scala grande. .64 = la lettera media più larga misurata in Inter 600 maiuscolo (MANTOFLEX, MERCURE): con .57 le parole larghe andavano a capo a metà */
.progetto__nome {
	font-size: min(var(--t-grande), calc(37vw / (var(--lettere) * .64)));
	font-weight: 600; letter-spacing: -.065em; line-height: .84; text-transform: uppercase;
	overflow-wrap: normal; text-wrap: balance;
}
.progetto__dati { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin: 0; }
.progetto__dati dt { margin-bottom: 12px; }
.progetto__dati dd { margin: 0; font-size: .9375rem; font-weight: 400; line-height: 1.45; }
.progetto__dati dd a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-color .4s var(--ease); }
@media (hover: hover) { .progetto__dati dd a:hover { text-decoration-color: var(--giallo); } }
/* Negli articoli c'è anche la firma: dove il fianco è largo sta in fila come terza colonna, dove è stretto va a capo col suo stacco. */
.articolo__dati { row-gap: 28px; }
@media (min-width: 1200px) { .articolo__dati { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 32px; } }

.progetto__racconto { grid-column: 7 / 13; display: flex; flex-direction: column; gap: clamp(64px, 7vw, 120px); }
.progetto__attacco { font-size: var(--t-intro); font-weight: 400; letter-spacing: -.035em; line-height: 1.12; text-wrap: pretty; margin-top: calc(clamp(64px, 7vw, 120px) * -.45); }
.progetto__attacco strong, .capitolo strong { font-weight: 600; }

.capitolo { padding-top: 18px; border-top: 1px solid var(--carbone); }
.capitolo__n { display: block; font-size: var(--t-piccolo); font-weight: 600; }
/* Stesso corpo dell'attacco, peso diverso: tre bande di testo come la pagina Progetti (canone ⓐ) */
.capitolo__titolo { margin-top: clamp(24px, 2.6vw, 40px); max-width: 18ch; font-size: var(--t-intro); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.capitolo__corpo { display: flex; flex-direction: column; gap: 1em; margin-top: clamp(24px, 2.4vw, 36px); font-size: var(--t-corpo-g); line-height: 1.42; }
.capitolo__corpo p { max-width: 38em; text-wrap: pretty; }
.capitolo__voci { margin: .6em 0; padding: 0; list-style: none; border-top: 1px solid var(--filo); }
.capitolo__voci li {
	display: grid; grid-template-columns: 2.2em minmax(0, 1fr) minmax(0, 1.5fr); column-gap: 16px;
	padding: 14px 0 16px; border-bottom: 1px solid var(--filo);
	font-size: var(--t-corpo-g); line-height: 1.3;
}
.capitolo__vn { font-size: var(--t-piccolo); font-weight: 600; padding-top: .25em; }
.capitolo__voci strong { letter-spacing: -.035em; }
.capitolo__voci li > span:last-child { color: var(--grigio); }
.capitolo__voci li > span:last-child strong { letter-spacing: inherit; color: var(--testo); }

.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.riquadro { position: relative; overflow: clip; background: var(--sporco); }
.coppia .riquadro { aspect-ratio: 4 / 5; }
/* Fondo pieno (tinta del cliente o carbone) con la foto dentro, come i video di What Matters */
.riquadro--tinta, .riquadro--carbone { display: grid; place-items: center; }
.riquadro--tinta { background: var(--tinta); }
.riquadro--carbone { background: var(--carbone); }
.riquadro--tinta img, .riquadro--carbone img { width: 66%; aspect-ratio: 2 / 3; object-fit: cover; }
/* Foto piena: più alta del riquadro, così la parallasse non scopre i bordi */
.riquadro--piena img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.progetto__copertina { aspect-ratio: 1; }
.riquadro--intera.riquadro--piena { aspect-ratio: 16 / 9; }

/* La vetrina: il sito vero registrato, nudo. Desktop posato su una foto del cliente (16:9), telefono
   sulla tinta come le foto della coppia. Didascalia sotto, una riga. (ful_vetrina, inc/aiuti.php) */
.vetrina__palco { display: grid; place-items: center; }
.vetrina--desk .vetrina__palco { aspect-ratio: 16 / 9; }
.coppia .vetrina__palco { aspect-ratio: 4 / 5; }
.vetrina__fondo { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.vetrina__schermo { position: relative; display: block; cursor: pointer; background: var(--sporco); box-shadow: 0 28px 60px -24px rgb(0 0 0 / .5), 0 2px 8px rgb(0 0 0 / .12); }
.vetrina--desk .vetrina__schermo { width: 70%; height: auto; aspect-ratio: 16 / 10; border-radius: 6px; }
/* Il telefono sta sopra il riquadro, ⛔ dentro il suo flusso: se no il video alto allunga il 4:5 (era 332×718) */
.vetrina--tel .vetrina__schermo { position: absolute; top: 7%; left: 50%; translate: -50% 0; height: 86%; width: auto; aspect-ratio: 480 / 1038; border-radius: clamp(10px, 1.3vw, 20px); }
.vetrina__nota { margin-top: 12px; color: var(--grigio); }

/* Lo shooting: finito il racconto la gabbia si rompe — una fascia a tutta larghezza sulla tinta
   del cliente, due file di verticali che scorrono in versi opposti (lo stesso gesto delle colonne
   dell'hero, qui di lato). Le foto sono tutte 2:3: le due file chiudono pari. */
.shooting { margin-top: var(--sezione); padding: clamp(40px, 4vw, 64px) 0 clamp(56px, 6vw, 100px); background: var(--tinta); overflow: clip; }
.shooting__testa { display: flex; justify-content: space-between; padding: 0 var(--margine); margin-bottom: clamp(32px, 3.4vw, 56px); }
.shooting__fila { display: flex; gap: 16px; width: max-content; padding: 0 var(--margine); will-change: transform; }
.shooting__fila + .shooting__fila { margin-top: 16px; }
.shooting__foto { width: 18vw; aspect-ratio: 2 / 3; overflow: clip; background: var(--sporco); }
.shooting__foto img { width: 100%; height: 100%; object-fit: cover; }
.shooting__foto { position: relative; }

/* Il lightbox delle schede: ogni foto della pagina si apre a schermo intero, sulla pagina velata, e si
   scorre (frecce, tastiera, trascinamento). Il pulsante «apri» lo mette ful.js sopra la foto:
   senza JS le foto restano foto, senza bottoni morti. Nelle foto su tinta|carbone si apre la foto. */
.foto-apri { position: absolute; inset: 0; z-index: 1; width: 100%; cursor: pointer; }
.foto-apri:focus-visible { outline-offset: -5px; }
/* Al passaggio la foto si avvicina appena, come la copertina di «Avanti» (l'hover avvicina, non sbiadisce) */
.riquadro img, .shooting__foto img { transition: scale 1.1s var(--ease-esce); }
@media (hover: hover) {
	.riquadro:has(> .foto-apri:hover) img, .shooting__foto:has(> .foto-apri:hover) img { scale: 1.035; }
}
.riquadro:has(> .foto-apri:focus-visible) img, .shooting__foto:has(> .foto-apri:focus-visible) img { scale: 1.035; }
.lb {
	position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0; overflow: hidden;
	/* Niente blocco pieno: la pagina resta dietro, sfocata e scurita. La pagina è ferma mentre il
	   lightbox è aperto, quindi la sfocatura si calcola una volta e non pesa mentre si scorre. */
	background: rgba(21, 21, 21, .62); color: var(--bianco);
	-webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
.lb::backdrop { background: transparent; }
.lb__testa, .lb__piede { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: var(--margine); }
.lb__testa { padding-bottom: clamp(16px, 1.6vw, 24px); }
.lb__piede { padding-top: clamp(16px, 1.6vw, 24px); justify-content: flex-end; }
.lb__conto { gap: 1.1em; color: var(--bianco); }
.lb__n { display: inline-flex; }
.lb__cifra { display: inline-flex; overflow: clip; }
.lb__cifra > span { display: inline-block; }
.lb__palco { position: relative; overflow: clip; touch-action: pan-y; }
.lb__pista { display: flex; height: 100%; will-change: transform; cursor: grab; }
.lb__pista:active { cursor: grabbing; }
.lb__foto { flex: 0 0 100%; height: 100%; display: grid; place-items: center; padding: 0 var(--margine); }
/* La cornice la misura ful.js (la foto intera dentro il palco): così la foto piccola che fa da
   segnaposto e la grande hanno la stessa misura, e il cambio non salta */
.lb__cornice { overflow: clip; background: rgba(21, 21, 21, .5); }
.lb__cornice img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.lb__passi { display: flex; gap: 8px; flex: none; }
.lb__passo { width: var(--h); padding: 0; justify-content: center; color: var(--bianco); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.lb__passo--prima .btn__f { transform: scaleX(-1); }
.lb__passo .btn__f svg + svg { transform: translateX(-130%); }
.lb__passo[aria-disabled="true"] { opacity: .28; cursor: default; }
@media (hover: hover) {
	.lb__passo:not([aria-disabled="true"]):hover { background: var(--bianco); color: var(--carbone); }
	.lb__passo:not([aria-disabled="true"]):hover .btn__f svg:first-child { transform: translateX(130%); }
	.lb__passo:not([aria-disabled="true"]):hover .btn__f svg + svg { transform: translateX(0); }
}
html.lb-aperto { overflow: hidden; }

/* Avanti: il lavoro dopo, col nome grande come in testa alla scheda e la copertina a destra */
.avanti { padding: var(--sezione) var(--margine) 0; }
.avanti__link {
	display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; align-items: end;
	padding-top: 18px; border-top: 1px solid var(--carbone);
}
.avanti__testa { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-bottom: clamp(40px, 5vw, 80px); }
.avanti__nome {
	grid-column: 1 / 9; grid-row: 2; display: block;
	font-size: min(var(--t-grande), calc(60vw / (var(--lettere) * .64)));
	font-weight: 600; letter-spacing: -.065em; line-height: .84; text-transform: uppercase; text-wrap: balance;
}
.avanti__disc { grid-column: 1 / 9; grid-row: 3; margin-top: 18px; font-size: .9375rem; font-weight: 400; color: var(--grigio); }
.avanti__foto { grid-column: 9 / 13; grid-row: 2 / 4; display: block; position: relative; aspect-ratio: 4 / 5; overflow: clip; background: var(--sporco); }
.avanti__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease-esce); }
@media (hover: hover) { .avanti__link:hover .avanti__foto img { scale: 1.035; } }

/* Il cursore che scorre sopra le schede */
.cursore {
	position: fixed; top: 0; left: 0; z-index: 120; pointer-events: none;
	width: 190px; margin: 18px 0 0 18px; overflow: clip;
	background: var(--carbone); color: var(--bianco);
	font-size: var(--t-piccolo); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
	clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease);
}
.cursore.is-attivo { clip-path: inset(0 0 0 0); }
.cursore__nastro { display: flex; width: max-content; padding: 11px 0; animation: nastro var(--durata, 5s) linear infinite; animation-play-state: paused; }
.cursore.is-attivo .cursore__nastro { animation-play-state: running; }
.cursore__nastro span { padding-right: 2.5em; white-space: nowrap; }
@keyframes nastro { to { transform: translateX(-50%); } }

/* --- 5 · Settori ----------------------------------------------------------- */
.settori { position: relative; padding: var(--sezione) var(--margine) 0; text-align: center; }
.settori__frase {
	max-width: 22ch; margin: 28px auto 44px;
	font-size: var(--t-frase); font-weight: 600; letter-spacing: -.05em; line-height: 1.02;
}
.settori__resto { color: var(--grigio-frase); }
.settori__unita { white-space: nowrap; }
.settori__chiave { color: var(--carbone); cursor: default; position: relative; z-index: 2; }
.volo { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible; }
.volo img { position: absolute; top: 0; left: 0; width: clamp(150px, 13vw, 210px); aspect-ratio: 4 / 5.1; object-fit: cover; will-change: transform; }

/* --- 6 · Servizi ----------------------------------------------------------- */
.servizi { padding-top: var(--sezione); }
.servizi__tavola {
	display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px;
	padding: clamp(56px, 6vw, 100px) var(--margine) 0;
}
.servizi__elenco { grid-column: 1 / 9; }
.servizi__gruppo {
	display: grid; grid-template-columns: repeat(8, 1fr); column-gap: 16px;
	padding: 22px 0 34px; border-top: 1px solid var(--filo);
	transition: opacity .5s var(--ease);
}
.servizi__elenco:hover .servizi__gruppo:not(:hover) { opacity: .38; }
.servizi__cat { grid-column: 1 / 4; font-size: var(--t-piccolo); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding-top: .55em; }
.servizi__gruppo ul { grid-column: 4 / 9; }
.servizi__gruppo li a {
	display: block; padding: 3px 0;
	font-size: var(--t-corpo-g); font-weight: 400; letter-spacing: -.03em; line-height: 1.3;
	transition: transform .5s var(--ease);
}
@media (hover: hover) { .servizi__gruppo li a:hover { transform: translateX(10px); } }
.servizi__n { font-size: .8125rem; font-weight: 600; letter-spacing: 0; color: var(--grigio); vertical-align: .15em; }
.servizi__foto { grid-column: 10 / 13; position: sticky; top: calc(var(--testata-h) + 20px); align-self: start; aspect-ratio: 4 / 5; overflow: clip; background: var(--sporco); }
.servizi__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease); }
.servizi__foto img.is-attiva { clip-path: inset(0 0 0 0); z-index: 1; }

/* --- 7 · La frase con le foto in riga ------------------------------------- */
.riga { padding: var(--sezione) var(--margine) 0; text-align: center; }
.riga__frase {
	margin: 26px 0 44px;
	font-size: clamp(2.1rem, 5.9vw, 6.6rem); font-weight: 600; letter-spacing: -.055em; line-height: .92;
	text-transform: uppercase;
}
.riga__r { display: block; overflow: clip; padding-bottom: .05em; }
.riga__r > span { display: block; }
.riga__img {
	display: inline-block; vertical-align: -.06em;
	width: 1.9em; height: .74em; overflow: clip; margin: 0 .1em;
}
.riga__img img { width: 100%; height: 100%; object-fit: cover; }

/* --- 8 · Persone ----------------------------------------------------------- */
.persone { padding-top: var(--sezione); overflow: clip; }
.persone__testa { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 var(--margine); }
.persone__testa .titolo-sezione { max-width: 14ch; }
.persone__aiuto { font-size: var(--t-piccolo); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding-bottom: .4em; }
.persone__pista { padding: clamp(40px, 4.5vw, 72px) var(--margine) 30px; cursor: grab; touch-action: pan-y; }
.persone__pista:active { cursor: grabbing; }
.persone__carte { display: flex; gap: clamp(20px, 1.8vw, 28px); width: max-content; }
.carta {
	display: flex; flex-direction: column;
	width: clamp(260px, 22vw, 340px);
	user-select: none; -webkit-user-select: none;
	transform-origin: 50% 80%;
}
/* La persona è la carta: foto a tutta larghezza, il tono della carta sta nella fascia sotto */
.carta__foto { aspect-ratio: 4 / 4.7; overflow: clip; background: var(--sporco); }
.carta__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; pointer-events: none; }
.carta__testo { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 1.6vw, 24px) clamp(18px, 1.6vw, 24px) clamp(22px, 2vw, 30px); }
.carta--giallo .carta__testo { background: var(--giallo); color: var(--carbone); }
.carta--carbone .carta__testo { background: var(--carbone); color: var(--bianco); }
.carta--chiaro .carta__testo { background: var(--sporco); color: var(--carbone); }
.carta--bianco .carta__testo { background: var(--bianco); color: var(--carbone); box-shadow: inset 0 0 0 1px var(--filo); }
.carta__chi { font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1.35; }
.carta__chi strong { display: block; font-size: var(--t-corpo-g); font-weight: 600; letter-spacing: -.035em; text-transform: none; line-height: 1.1; margin-bottom: 4px; }
.carta__frase { font-size: var(--t-corpo); font-weight: 400; letter-spacing: -.02em; line-height: 1.35; text-wrap: pretty; }

/* --- 9 · Contatto ---------------------------------------------------------- */
.contatto {
	position: relative; margin-top: var(--sezione);
	/* un banner, non una pagina: mai più di tre quarti di schermo */
	min-height: min(max(520px, 46vw), 78svh);
	display: grid; place-items: center; padding: calc(var(--testata-h) + 40px) var(--margine) 80px;
	color: var(--bianco); background: var(--carbone); overflow: clip; text-align: center;
}
/* Lo sfondo è il mosaico dell'hero (.mosaico, sezione 1), col suo stesso velo: più scuro solo dietro le parole */
.contatto::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 52%, rgba(10, 8, 6, .78), rgba(10, 8, 6, .42) 78%); }
.contatto__testo { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.contatto__titolo { max-width: 15ch; text-wrap: balance; font-size: var(--t-manifesto); font-weight: 600; letter-spacing: -.055em; line-height: .9; text-transform: uppercase; }
.contatto__sotto { max-width: 42ch; text-wrap: pretty; margin: 28px 0 34px; font-size: var(--t-corpo-g); font-weight: 400; line-height: 1.35; }
.contatto__azioni { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; }

/* --- Piede: giallo, sale da sotto ----------------------------------------- */
.piede { position: relative; background: var(--giallo); color: var(--carbone); overflow: clip; }
.piede__dentro { padding: clamp(40px, 4vw, 64px) var(--margine) calc(var(--margine) + env(safe-area-inset-bottom)); min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.piede__alto, .piede__basso { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; align-items: start; }
.piede__marchio { grid-column: 1 / 7; display: flex; align-items: flex-start; gap: .6em; }
.piede__ful { font-size: clamp(6rem, 21vw, 22rem); font-weight: 600; letter-spacing: -.07em; line-height: .76; margin-left: -.04em; }
.piede__agency { font-size: clamp(.8rem, 1.15vw, 1.1rem); font-weight: 600; padding-top: .2em; }
.piede__col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.piede__alto > .piede__col:not(.piede__col--piccola) { grid-column: 8 / 10; }
.piede__alto > .piede__col a { font-size: var(--t-corpo-g); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; text-transform: uppercase; }
.piede__alto > .piede__col--piccola { grid-column: 10 / 13; }
.piede__col--piccola a, .piede__col--piccola span, .piede__email { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1.5; }
.piede__alto > .piede__col--piccola a { font-size: .8125rem; letter-spacing: .02em; }
.piede__email { margin-top: 22px; display: inline-flex; flex-wrap: wrap; gap: 4px .8em; align-items: baseline; text-align: left; text-transform: none; letter-spacing: -.01em; }
.piede__email [data-copia-t] { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.piede__col a { transition: opacity .3s; }
@media (hover: hover) { .piede__col a:hover { opacity: .55; } }
/* La fascia tecnica: una riga da margine a margine, col filetto sopra, sulle colonne del piede alto */
.piede__basso { padding-top: 14px; border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.piede__basso > * { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1.5; }
.piede__firma { grid-column: 1 / 8; }
.piede__piva { display: inline-block; margin-left: .9em; opacity: .7; }
.piede__basso > a:nth-of-type(1) { grid-column: 8 / 10; }
.piede__basso > a:nth-of-type(2) { grid-column: 10 / 13; }
.piede__basso > a { transition: opacity .3s; }
@media (hover: hover) { .piede__basso > a:hover { opacity: .55; } }

/* La rivista e la riga finale stanno su una fascia scura, da bordo a bordo e fino in fondo: il giallo
   resta al marchio e al menu, e si capisce dove finisce il piede e comincia la rivista (Marco, 15/10/2026). */
.piede__dentro { padding-bottom: 0; }
.piede__scuro {
	margin: 0 calc(-1 * var(--margine)); padding: clamp(48px, 5vw, 80px) var(--margine) calc(var(--margine) + env(safe-area-inset-bottom));
	--testo: var(--bianco); background: var(--carbone); color: var(--bianco); display: flex; flex-direction: column; gap: clamp(48px, 5vw, 80px);
}
/* La rivista da cui nasce l'agenzia: copertine a sinistra, la storia e i numeri a destra */
.rivista { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; align-items: end; }
.rivista__foto { grid-column: 1 / 8; display: block; aspect-ratio: 4 / 3; overflow: clip; background: var(--carbone); }
.rivista__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease-esce); }
@media (hover: hover) { .rivista__foto:hover img { scale: 1.035; } }
.rivista__testo { grid-column: 9 / 13; display: flex; flex-direction: column; align-items: flex-start; }
.rivista__titolo { margin-top: 18px; max-width: 12ch; font-size: var(--t-titolo); font-weight: 600; letter-spacing: -.05em; line-height: .98; text-wrap: balance; }
.rivista__corpo { margin-top: 22px; max-width: 36ch; font-size: var(--t-corpo-g); line-height: 1.35; text-wrap: pretty; }
.rivista__numeri {
	display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; width: 100%;
	margin: clamp(32px, 3vw, 44px) 0 clamp(32px, 3vw, 44px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22);
}
.rivista__numeri dt { font-size: clamp(2rem, 3.2vw, 3.4rem); font-weight: 600; letter-spacing: -.055em; line-height: .9; font-variant-numeric: tabular-nums; }
.rivista__numeri dd { margin: 8px 0 0; font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
/* Al computer il piede sta tutto in uno schermo (Francesco): il FUL sale fino al 32% dell'altezza,
   proporzionato e senza la riga della rivista addosso (Marco, 15/10/2026: «viene schiacciata»); gli
   spazi seguono l'altezza, e le copertine prendono quella che resta (ritagliate, non rimpicciolite).
   Se il testo non ci sta, il piede cresce invece di tagliare. */
@media (min-width: 1001px) {
	.piede__dentro { padding-top: clamp(28px, 4.5svh, 56px); gap: clamp(24px, 4svh, 48px); }
	.piede__ful { font-size: min(21vw, 22rem, 32svh); }
	.piede__scuro { flex: 1 1 auto; padding-top: clamp(28px, 4.5svh, 64px); padding-bottom: calc(min(var(--margine), 3svh) + env(safe-area-inset-bottom)); gap: clamp(24px, 4svh, 56px); }
	.rivista { flex: 1 1 auto; align-items: stretch; }
	.rivista__foto { grid-column: 1 / 7; position: relative; aspect-ratio: auto; min-height: 240px; }
	.rivista__foto img { position: absolute; inset: 0; }
	.rivista__testo { grid-column: 8 / 13; justify-content: flex-end; }
	.rivista__titolo { max-width: 16ch; font-size: min(var(--t-titolo), 5.8svh); }
	.rivista__corpo { margin-top: clamp(14px, 2svh, 22px); max-width: 44ch; }
	.rivista__numeri { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 16px; margin: clamp(20px, 3svh, 36px) 0; padding-top: clamp(14px, 2svh, 22px); }
	.rivista__numeri dt { font-size: clamp(2rem, min(3vw, 5.4svh), 3.2rem); }
	.rivista__numeri dd { max-width: 11ch; }
}

/* --- Stati prima del movimento (li imposta solo chi ha JS e movimento) ----- */
.js .hero__riga, .js [data-hero-sotto] { visibility: hidden; }
.js.pronta .hero__riga, .js.pronta [data-hero-sotto] { visibility: visible; }
/* Finché il motore non parte la pagina non si mostra: prima si vedeva ferma (col carattere di
   ripiego e i riquadri ancora vuoti), poi il motore la rimetteva allo stato di partenza e la
   rifaceva entrare — lo «scatto». La classe .motore la mette ful.js alla prima riga. Visibilità e
   non display: le misure restano quelle vere. Se il motore non arriva, dopo 4 s si mostra da sola. */
.js:not(.motore) .pagina, .js:not(.motore) .home .testata { visibility: hidden; animation: ful-attesa 0s 4s forwards; }
@keyframes ful-attesa { to { visibility: visible; } }

/* --- Larghezze ------------------------------------------------------------- */
@media (max-width: 1000px) {
	.testata__nav { display: none; }
	.testata__apri { display: block; }
	.clienti__loghi { grid-template-columns: repeat(4, 1fr); }
	.intro .etichetta { grid-column: 1 / -1; padding: 0 0 18px; }
	.intro__testo { grid-column: 1 / -1; }
	.servizi__elenco { grid-column: 1 / -1; }
	.servizi__foto { display: none; }
	.servizi__elenco:hover .servizi__gruppo:not(:hover) { opacity: 1; }
	.piede__alto > .piede__col:not(.piede__col--piccola) { grid-column: 1 / 7; }
	.piede__alto > .piede__col--piccola { grid-column: 7 / 13; }
	.piede__marchio { grid-column: 1 / -1; margin-bottom: 48px; }
	.rivista__foto, .rivista__testo { grid-column: 1 / -1; }
	.rivista__testo { margin-top: 36px; }
	.rivista__titolo { max-width: 14ch; }
	.piede__firma { grid-column: 1 / 7; }
	.piede__basso > a:nth-of-type(1) { grid-column: 7 / 10; }
	.piede__basso > a:nth-of-type(2) { grid-column: 10 / 13; }
	.progetto__fianco { grid-column: 1 / -1; position: static; height: auto; gap: clamp(40px, 6vw, 64px); }
	.progetto__nome { font-size: min(var(--t-grande), calc(88vw / (var(--lettere) * .64))); }
	.progetto__racconto { grid-column: 1 / -1; margin-top: clamp(48px, 7vw, 72px); }
	.reparto__fianco { grid-column: 1 / -1; position: static; height: auto; }
	.reparto__nome { font-size: min(var(--t-grande), calc(88vw / 7.1)); }
	.reparto__foto { flex: none; aspect-ratio: 5 / 4; }
	/* Contatti al telefono: «Chiama» sotto il titolo, e senza la foto il modulo sale di una schermata. */
	.contatti__subito { display: flex; }
	.recapito .reparto__foto { display: none; }
	.reparto__voci { grid-column: 1 / -1; margin-top: clamp(48px, 7vw, 72px); }
	.chi__racconto, .chi__metodo { grid-column: 1 / -1; margin-top: clamp(48px, 7vw, 72px); }
	.chi__metodo .reparto__voci { margin-top: 0; }
	.squadra__carte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.squadra .carta__testo { padding: 14px 14px 18px; gap: 12px; }
	.squadra .carta__frase { font-size: .875rem; hyphens: auto; -webkit-hyphens: auto; }
	.progetto__dati { row-gap: 32px; }
	.capitolo__voci li { grid-template-columns: 2.2em minmax(0, 1fr); row-gap: 4px; }
	.capitolo__voci li > span:last-child { grid-column: 2; }
	.coppia { gap: 8px; }
	.riquadro--tinta img, .riquadro--carbone img { width: 76%; }
	.vetrina--desk .vetrina__schermo { width: 80%; border-radius: 4px; }
	.vetrina__nota { margin-top: 8px; }
	.shooting__fila { gap: 8px; }
	.shooting__fila + .shooting__fila { margin-top: 8px; }
	.shooting__foto { width: 42vw; }
	.avanti__nome, .avanti__disc { grid-column: 1 / -1; }
	.avanti__nome { font-size: min(var(--t-grande), calc(88vw / (var(--lettere) * .64))); }
	.avanti__foto { grid-column: 5 / -1; grid-row: 4; margin-top: 32px; }
	.clienti__loghi { grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
	.manifesto__video, .manifesto__testo { grid-column: 1 / -1; }
	.lavori__griglia { row-gap: 56px; }
	.lavori__griglia .scheda--larga { grid-column: 1 / -1; }
	.lavori__griglia .scheda--stretta { grid-column: 3 / -1; }
	.filtri { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.filtri__voce { flex: none; }
	.manifesto__testo { margin-top: 28px; gap: 28px; }
	.progetti__griglia { row-gap: 56px; }
	.scheda--1, .scheda--2, .scheda--3, .scheda--4 { grid-column: 1 / -1; margin-top: 0; }
	.scheda--2, .scheda--4 { grid-column: 3 / -1; }
	.servizi__gruppo { grid-template-columns: 1fr; row-gap: 12px; }
	.servizi__cat, .servizi__gruppo ul { grid-column: 1 / -1; }
	.parole-grandi { flex-direction: column; align-items: flex-start; }
	.parole-grandi > span:last-child { align-self: flex-end; }
	/* Una parola sola (Contatti, Grazie) a destra sembrava un errore: resta a sinistra */
	.parole-grandi > span:only-child { align-self: flex-start; }
	/* 404: una parola di tre cifre, al telefono, pesava meno del titolo sotto — la si fa grande e a sinistra */
	.parole-grandi--numero { font-size: 44vw; }
	.parole-grandi--numero > span:last-child { align-self: flex-start; }
	.hero__tag { position: static; display: block; margin: 12px 0 0; }
	.persone__aiuto { display: none; }
	.piede__basso { row-gap: 6px; }
	.piede__firma { grid-column: 1 / -1; order: 2; margin-top: 10px; }
	.piede__piva { display: block; margin: 2px 0 0; }
	.piede__basso > a:nth-of-type(1) { grid-column: 1 / 7; }
	.piede__basso > a:nth-of-type(2) { grid-column: 7 / 13; }
	.btn-testo [data-copia-t] { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.cursore { display: none; }
}

/* --- Pagine interne provvisorie (in attesa del disegno) -------------------- */
.interna { min-height: 70vh; padding: calc(var(--testata-h) + 120px) var(--margine) var(--sezione); }
.interna .corpo-grande { max-width: 60ch; margin-top: 32px; }

/* --- Journal: l'articolo ----------------------------------------------------
   La grammatica della scheda progetto (.progetto): a sinistra, fermi, titolo · indice · dati; a destra
   scorrono copertina, risposta, tabella e capitoli. Il titolo è una frase, ⛔ un nome: corpo dei
   titoli di sezione, in due toni (la parte fra parentesi in grigio, come la frase dei settori).
   In fondo FUL (.coda): il testo in prima persona e i lavori veri, a tutta gabbia. */
.articolo__journal { display: inline-flex; margin-bottom: clamp(20px, 2vw, 32px); }
.articolo__titolo { max-width: 13ch; font-size: var(--t-titolo); font-weight: 600; letter-spacing: -.05em; line-height: 1; text-wrap: balance; }
.articolo__resto { display: block; color: var(--grigio-frase); }
.articolo__indice ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filo); max-width: 30em; }
.articolo__indice a {
	display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: baseline;
	padding: 7px 0 8px; border-bottom: 1px solid var(--filo);
	font-size: .875rem; font-weight: 400; line-height: 1.25; color: var(--grigio);
	transition: color .4s var(--ease-esce);
}
.articolo__indice a span { font-size: var(--t-piccolo); font-weight: 600; }
.articolo__indice a[aria-current] { color: var(--testo); }
.articolo__indice a[aria-current] span { display: inline-flex; align-items: center; gap: 6px; }
.articolo__indice a[aria-current] span::before { content: ""; width: 7px; height: 7px; background: var(--giallo); }
@media (hover: hover) { .articolo__indice a:hover { color: var(--testo); } }
.articolo__copertina { aspect-ratio: 7 / 5; }
/* Senza copertina la risposta apre la colonna: niente rientro verso l'alto, parte in riga col titolo */
.articolo .progetto__attacco:first-child { margin-top: 0; }
.articolo .capitolo { scroll-margin-top: calc(var(--testata-h) + 24px); }
.articolo .capitolo__voci li > span:last-child { line-height: 1.38; }
/* Su uno schermo basso l'indice non ci sta insieme a titolo e dati: resta il fianco pulito */
@media (min-width: 1001px) and (max-height: 820px) { .articolo__indice { display: none; } }

/* La tabella «In breve»: la risposta intera a colpo d'occhio, subito sotto l'attacco */
.in-breve { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.35; }
.in-breve caption { padding-bottom: 14px; text-align: left; font-size: var(--t-piccolo); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.in-breve th, .in-breve td { padding: 12px 16px 14px 0; border-bottom: 1px solid var(--filo); text-align: left; vertical-align: top; font-weight: 300; }
.in-breve thead th { padding-top: 0; border-bottom-color: var(--carbone); font-size: var(--t-piccolo); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.in-breve tbody th { font-weight: 600; letter-spacing: -.02em; }
.in-breve td { color: var(--grigio); }
.in-breve td:nth-child(3) { color: var(--testo); font-weight: 400; }
.in-breve td:last-child { padding-right: 0; }

.coda {
	display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; align-items: start;
	margin-top: var(--sezione); padding: 0 var(--margine);
}
.coda::before { content: ""; grid-column: 1 / -1; height: 1px; background: var(--carbone); }
.coda__testa { grid-column: 1 / 6; padding-top: 18px; }
.coda__titolo { margin-top: clamp(24px, 2.6vw, 40px); max-width: 15ch; font-size: var(--t-titolo); font-weight: 600; letter-spacing: -.05em; line-height: 1; text-wrap: balance; }
.coda__testo { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 1em; padding-top: calc(18px + 1.5em + clamp(24px, 2.6vw, 40px)); font-size: var(--t-corpo-g); line-height: 1.42; }
.coda__testo p { max-width: 38em; text-wrap: pretty; }
.coda__testo strong { font-weight: 600; }
.coda__servizio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: .8em; }
.coda__lavori { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; margin-top: clamp(64px, 7vw, 120px); }
.coda__pista { display: contents; }
.coda__lavori-testa { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 18px; margin-bottom: clamp(24px, 2.6vw, 40px); border-top: 1px solid var(--filo); }

@media (max-width: 1000px) {
	.articolo__titolo { max-width: 16ch; }
	.articolo__indice { margin-top: 8px; }
	.coda__testa, .coda__testo { grid-column: 1 / -1; }
	.coda__testo { padding-top: 32px; }
}
@media (max-width: 700px) {
	/* La tabella si fa a schede: ogni riga un blocco, l'etichetta della colonna davanti al dato */
	.in-breve thead { display: none; }
	.in-breve tr { display: grid; grid-template-columns: 1fr; padding: 14px 0; border-bottom: 1px solid var(--filo); }
	.in-breve th, .in-breve td { padding: 0; border: 0; white-space: normal; }
	.in-breve tbody th { margin-bottom: 8px; }
	.in-breve td { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); column-gap: 12px; padding: 3px 0; }
	.in-breve td::before { content: attr(data-etichetta); font-size: var(--t-piccolo); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--testo); padding-top: .2em; }
	.coda__pista { grid-column: 1 / -1; display: flex; gap: 12px; margin-inline: calc(var(--margine) * -1); padding-inline: var(--margine); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margine); scrollbar-width: none; }
	.coda__scheda { flex: 0 0 78vw; scroll-snap-align: start; }
}

/* --- Journal: l'indice ------------------------------------------------------
   La testa di Progetti e Servizi, poi gli articoli come RIGHE sul filetto carbone (lo stesso della coda
   dell'articolo): a sinistra numero, data e argomenti · al centro la domanda in due toni e la risposta
   in una frase · a destra la copertina. Al passaggio la foto si avvicina e il numero prende il punto giallo. */
.pezzi { margin: 0; padding: clamp(56px, 6vw, 100px) var(--margine) 0; list-style: none; }
.pezzo { border-top: 1px solid var(--carbone); }
.pezzo:last-child { border-bottom: 1px solid var(--filo); }
.pezzo__link {
	display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; align-items: start;
	padding: 18px 0 clamp(40px, 4.4vw, 72px);
}
.pezzo__dati { grid-column: 1 / 4; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pezzo__n { display: inline-flex; align-items: center; margin-bottom: 10px; font-size: var(--t-piccolo); font-weight: 600; }
.pezzo__n::before { content: ""; width: 0; height: 7px; margin-right: 0; background: var(--giallo); transition: width .5s var(--ease), margin-right .5s var(--ease); }
.pezzo__arg { font-size: .8125rem; color: var(--grigio); }
.pezzo__testo { grid-column: 4 / 10; padding-right: clamp(0px, 2vw, 32px); }
.pezzo__titolo { max-width: 18ch; font-size: var(--t-titolo); font-weight: 600; letter-spacing: -.05em; line-height: 1; text-wrap: balance; }
.pezzo__resto { display: block; color: var(--grigio-frase); }
.pezzo__attacco { max-width: 34em; margin-top: clamp(20px, 2.2vw, 36px); font-size: var(--t-corpo-g); line-height: 1.42; color: var(--grigio); text-wrap: pretty; }
.pezzo__attacco strong { font-weight: 600; color: var(--testo); }
.pezzo__foto { grid-column: 10 / 13; position: relative; aspect-ratio: 5 / 4; overflow: clip; background: var(--sporco); }
.pezzo__foto img { position: absolute; top: -8%; left: 0; width: 100%; height: 116%; object-fit: cover; transition: scale 1.1s var(--ease-esce); }
@media (hover: hover) {
	.pezzo__link:hover .pezzo__foto img { scale: 1.035; }
	.pezzo__link:hover .pezzo__n::before { width: 7px; margin-right: 6px; }
}
.pezzi__pagine .nav-links { display: flex; gap: 8px; padding: 32px var(--margine) 0; font-size: var(--t-piccolo); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.pezzi__pagine .page-numbers { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; box-shadow: inset 0 0 0 1px var(--filo); }
.pezzi__pagine .current { background: var(--carbone); color: var(--bianco); box-shadow: none; }

@media (max-width: 1000px) {
	.pezzo__dati { grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 20px; }
	.pezzo__n { margin: 0; }
	.pezzo__testo { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; padding: 0; }
	.pezzo__foto { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 7 / 5; }
}