/*
 * Studio Arfia — base.css · v0.1.0 · 17/08/2026
 * Reset (una volta sola), utility, header, footer, componenti condivisi.
 * Solo token (tokens.css), classi .as- BEM, hover in @media (hover:hover).
 * Hidden-state delle animazioni: MAI qui — lo mette GSAP a runtime (§9.3).
 */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Margini azzerati SOLO su elementi di testo, mai div (playbook §8.4). */
h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

/* Niente scorrimento laterale: regola di ogni sito, una volta sola, qui (~/.claude/CLAUDE.md §9-bis).
   `hidden` è il ripiego per i browser senza `clip` (Safari < 16); `clip` vince dove c'è e clippa
   SENZA fare del body un contenitore di scorrimento, quindi senza staccare position:sticky. */
html, body {
	overflow-x: hidden !important;   /* ripiego: browser senza `clip` */
	overflow-x: clip !important;     /* la buona: non stacca position:sticky */
}

body {
	margin: 0;
	background: var(--as-bg);
	color: var(--as-ink);
	font-family: var(--as-font);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.55;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ── Il tocco (v0.38, 29/09, design/DIREZIONE-MOBILE.md «Tocchi») ──────────
   Niente rettangolo grigio di iOS e Android sopra bottoni squircle, voci di
   menu e card (la proprietà si eredita: basta la radice). La risposta al
   tocco la diamo noi, col dito (hover: none): i bottoni si schiacciano appena,
   i link e i bottoni-icona si abbassano a .6 finché il dito è giù. Tutto in
   :where(), cioè senza peso: qualunque stato :active di un componente vince.
   · i bottoni che hanno già lo schiacciamento di GSAP (data-arfia-squash,
     motion.js bootButtons: tutti quelli dentro la pagina) non lo raddoppiano;
     restano quelli di header, menu e footer, che GSAP non vede;
   · i link che contengono una foto o un video (card) non si spengono: a
     scorrere col dito sopra una card sarebbe uno sfarfallio.
   Su Safari :active si accende solo se la pagina ascolta touchstart: lo fa
   motion.js (il dito della banda «Prossima pagina»). */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
	:where(.as-btn:not([data-arfia-squash])):active { scale: .97; }
	:where(a:not(.as-btn):not(:has(img, video, picture)), button:not(.as-btn)):active { opacity: .6; }
}

/* ── Utility ────────────────────────────────────────────────────────────── */
.as-container {
	max-width: var(--as-container);
	margin-inline: auto;
	padding-inline: var(--as-gutter);
}

/* Ritmo delle sezioni (DS §5: firma 1.6× · lettura 1× · fascia 0.5×). */
.as-section { padding-block: var(--as-sect); }
.as-section--firma { padding-block: var(--as-sect-hero); }
.as-section--fascia { padding-block: calc(var(--as-sect) * .5); }

/* Sezione a schermo pieno col contenuto centrato (ritmo demo W&S-06):
   min-height, mai height — il contenuto può sempre crescere. */
.as-piena {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.as-piena > .as-container { width: 100%; }

/* Guardia schermi bassi (DS §5): niente 100svh sotto i 640 di altezza. */
@media (max-height: 640px) {
	.as-100, .as-piena { min-height: auto !important; /* deroga motivata: guardia di sistema */ }
}

/* La prima sezione di ogni pagina fa spazio all'header fixed (l'hero ha
   già il suo calcolo interno ed è esente).
   v0.38 (telaio header): --as-header-h ora è l'altezza VERA della barra,
   padding compreso (82px sul desktop, 64 sotto i 1080). Prima header.js
   misurava il solo contenuto (50 e 48) e qui si aggiungevano 48px. Il
   risultato visto resta identico: 98px sul desktop (82 + 16), 96 sul
   tablet (il minimo), 96 sul telefono (regola del ritmo qui sotto). */
.as-main > section:first-child:not(.as-hero) {
	padding-top: max(96px, calc(var(--as-header-h) + var(--as-sp-4)));
}

/* ── IL RITMO DA TELEFONO (v0.38, 29/09, design/DIREZIONE-MOBILE.md) ───────
   Il token --as-sect scende da solo (tokens.css: 76px per lato a 844 di
   altezza). Qui le due cose che il token non basta a fare:
   · una sezione «a schermo pieno» da telefono non impone più uno schermo
     intero se il contenuto è corto: centrava 400px di testo in 844 e
     lasciava 200-250px di nero sopra e sotto (presa in home, fascia finale
     di ogni pagina). Resta alta quanto il suo contenuto più il ritmo;
   · il titolo della prima sezione parte 32px sotto la barra (64px + 32 = 96),
     non 48: col valore del desktop sembrava staccato dall'header. max() tiene
     i 96px anche se l'altezza misurata dell'header fosse più bassa. */
@media (max-width: 699px) {
	/* .as-section.as-fascia: la regola della fascia sta più giù nel file. */
	.as-piena, .as-section.as-fascia { min-height: auto; }
	.as-main > section:first-child:not(.as-hero) {
		padding-top: max(96px, calc(var(--as-header-h) + var(--as-sp-6)));
	}
}

.as-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.as-skip {
	position: absolute;
	left: var(--as-sp-4); top: var(--as-sp-4);
	z-index: 200;
	background: var(--as-carbone);
	color: var(--as-bianco);
	padding: var(--as-sp-3) var(--as-sp-5);
	border-radius: var(--as-r-s);
	transform: translateY(-200%);
	transition: transform var(--as-t-micro) var(--as-ease-micro);
}
.as-skip:focus-visible { transform: none; }

/* ── Tipografia condivisa ───────────────────────────────────────────────── */
.as-display-xl, .as-cover, .as-display-lg, .as-display-md {
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.025em;
	text-wrap: balance;
}
.as-display-xl { font-size: var(--as-type-display-xl); }
.as-cover      { font-size: var(--as-type-cover); line-height: .95; letter-spacing: -.03em; }
.as-display-lg { font-size: var(--as-type-display-lg); }
.as-display-md { font-size: var(--as-type-display-md); }
.as-display-sm { font-size: var(--as-type-display-sm); font-weight: 400; line-height: 1; letter-spacing: -.025em; }
/* Titoli di componente (card, righe, accordion): mai in scala display. */
.as-title-card { font-size: var(--as-type-card); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
.as-lede { font-size: var(--as-type-lede); line-height: 1.5; max-width: var(--as-measure); }
.as-body { font-size: var(--as-type-body); line-height: 1.6; max-width: var(--as-measure); }
.as-meta { font-size: var(--as-type-meta); font-weight: 400; letter-spacing: .04em; color: var(--as-muted); }
.as-label { font-size: var(--as-type-label); font-weight: 400; letter-spacing: .2em; text-transform: uppercase; }

/* Due-toni dei titoli (DS §1): em = corsivo azzerato, −1 peso, grigio. */
.as-display-xl em, .as-cover em, .as-display-lg em, .as-display-md em, .as-display-sm em,
h1 em, h2 em, h3 em {
	font-style: normal;
	font-weight: 200;
	color: var(--as-grigio-display);
}

/* ── Icone C11 (DS §8): stroke sul CONTENITORE — shadow DOM di <use> ───── */
.as-ic {
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}
.as-ic-fill {
	fill: currentColor;
	stroke: none;
	width: 20px; height: 20px;
	flex: none;
}

/* ── Link nel testo: la riga che entra e esce (DS §11, da Obys) ─────────── */
.as-link {
	text-decoration: none;
	position: relative;
}
.as-link::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 100%; height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--as-t-azione) var(--as-ease-out);
}
@media (hover: hover) {
	.as-link:hover::after { transform: scaleX(1); transform-origin: left; }
}

/* ── Famiglia pulsanti (DS §4: forma B squircle, la CTA segue il fondo) ── */
.as-btn {
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: .01em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* v0.25: a destra c'è il posto del PALLINO (vedi sotto): il padding destro
	   è quello di prima + il pallino + lo stesso spazio che separa le parole
	   dalla freccia. */
	--as-btn-px: 28px;
	--as-btn-py: 15px;
	--as-btn-dot-s: 10px;
	--as-btn-flood-k: 70;
	padding: var(--as-btn-py) calc(var(--as-btn-px) + var(--as-btn-dot-s) + 10px) var(--as-btn-py) var(--as-btn-px);
	min-height: 48px;
	border: 0;
	cursor: pointer;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	white-space: nowrap;
	text-decoration: none;
	border-radius: calc(12px * var(--as-brm));
	transition: background var(--as-t-micro) ease, color .45s var(--as-ease-out), box-shadow var(--as-t-micro) ease;
	/* I colori del pallino, per contesto (Platinum: pallino = colore che allaga). */
	--as-btn-dot: var(--as-arancio);
	--as-btn-txt-hov: var(--as-carbone);
	--as-btn-dot-hov: var(--as-carbone);
}
@supports (corner-shape: squircle) {
	.as-btn { corner-shape: squircle; }
}
.as-btn--s { min-height: 40px; --as-btn-px: 20px; --as-btn-py: 11px; --as-btn-dot-s: 8px; --as-btn-flood-k: 87; font-size: 13px; }
.as-btn--l { min-height: 56px; --as-btn-px: 34px; --as-btn-py: 18px; --as-btn-dot-s: 11px; --as-btn-flood-k: 63; font-size: 15.5px; }
.as-btn__in { display: inline-flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
/* v0.53 (Rami, 21/10: «Perché affidarti a Studio Arfia» col toro sulla «a» finale, come in home, ma
   «sempre dentro il bottone e non invasivo»). Le stesse proporzioni e la stessa inclinazione del toro di
   Quattro motivi (.as-dimentica__toro), in em del bottone: alto poco più di una x, posato all'altezza
   delle maiuscole, quindi lontano dal bordo. Prende il colore del testo, anche quando il pallino allaga.
   Entra con lo stesso salto della home (motion.js, bootEffetti). */
.as-btn__toro {
	display: inline-block;
	position: relative;
	top: -.34em;
	width: .76em;
	height: .74em;
	margin-left: .06em;
	vertical-align: baseline;
	background: currentColor;
	-webkit-mask: url('../img/logo/toro.svg') center / contain no-repeat;
	mask: url('../img/logo/toro.svg') center / contain no-repeat;
	transform: rotate(16deg);
	transform-origin: 50% 85%;
	pointer-events: none;
}

/* IL PALLINO CHE ALLAGA (v0.25, Rami, 26/09: «i buttons così come sono ora,
   ma dentro il pallino che espande il proprio colore, esattamente come
   Platinum»). Il pallino (::after) sta a destra sul padding; il cerchio che
   invade (::before) nasce ESATTAMENTE lì, dello stesso colore, e in hover
   cresce fino a riempire il pulsante (.55s). Le parole cambiano colore, il
   pallino anche, per restare visibile sul colore nuovo. Tutti e due sono
   posizionati dal pulsante, non dal contenuto: restano allineati anche se il
   contenuto è centrato in un pulsante più largo, o si sposta col magnetismo.
   Sostituisce il fill H4 dal punto d'ingresso (DS §4) e il «fill sweep»
   bocciato il 15/08: questo l'ha chiesto Rami, dal vivo di Platinum. */
.as-btn::before,
.as-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--as-btn-px);
	width: var(--as-btn-dot-s);
	height: var(--as-btn-dot-s);
	margin-top: calc(var(--as-btn-dot-s) / -2);
	border-radius: 50%;
	background: var(--as-btn-dot);
	pointer-events: none;
}
.as-btn::before {
	z-index: 0;
	transform: scale(1);
	transform-origin: center;
	transition: transform .55s var(--as-ease-io), opacity .2s ease;
}
.as-btn::after {
	z-index: 2;
	transition: background .45s var(--as-ease-out), opacity .2s ease;
}
/* La scala porta il cerchio a ~350px di raggio in ogni taglia (quella di
   Platinum: 12px × 58), abbastanza per il pulsante più largo del sito (il form
   a tutta larghezza da telefono): stessa velocità di Platinum. In hover solo
   con un puntatore: su touch resterebbe appiccicato dopo il tap. Da tastiera
   lo stesso gesto del mouse. */
@media (hover: hover) {
	.as-btn:hover::before { transform: scale(var(--as-btn-flood-k)); }
	.as-btn:hover { color: var(--as-btn-txt-hov); }
	.as-btn:hover::after { background: var(--as-btn-dot-hov); }
}
.as-btn:focus-visible::before { transform: scale(var(--as-btn-flood-k)); }
.as-btn:focus-visible { color: var(--as-btn-txt-hov); }
.as-btn:focus-visible::after { background: var(--as-btn-dot-hov); }
/* Mentre invia e a invio riuscito il pulsante torna suo: spinner e spunta
   bianchi su un cerchio bianco non si vedrebbero. */
.as-btn.is-loading::before, .as-btn.is-ok::before,
.as-btn.is-loading::after, .as-btn.is-ok::after,
.as-btn:disabled::before, .as-btn:disabled::after { transform: scale(1); opacity: 0; }

/* Su bianco: CTA nera (pallino arancio che allaga in arancio, testo carbone). */
.as-btn--pri { background: var(--as-carbone); color: var(--as-bianco); }
.as-btn--sec { background: transparent; color: var(--as-ink); box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .22); --as-btn-dot: var(--as-carbone); --as-btn-txt-hov: var(--as-bianco); --as-btn-dot-hov: var(--as-bianco); }
@media (hover: hover) {
	.as-btn--pri:hover { background: #232323; }
	.as-btn--sec:hover { box-shadow: inset 0 0 0 1px var(--as-ink); background: rgba(10, 10, 10, .03); }
}
/* Su carbone: CTA arancio (testo nero); il pallino è bianco e allaga di bianco. */
.as-carbone .as-btn--pri, [data-fondo="carbone"] .as-btn--pri { background: var(--as-arancio); color: var(--as-carbone); --as-btn-dot: var(--as-bianco); --as-btn-txt-hov: var(--as-carbone); --as-btn-dot-hov: var(--as-arancio); }
.as-carbone .as-btn--sec, [data-fondo="carbone"] .as-btn--sec { color: var(--as-bianco); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); --as-btn-dot: var(--as-bianco); --as-btn-txt-hov: var(--as-carbone); --as-btn-dot-hov: var(--as-carbone); }
@media (hover: hover) {
	.as-carbone .as-btn--pri:hover { background: var(--as-arancio-attivo); }
	/* v0.83.1 (Rami, 01/11, dalla CTA «Scopri i servizi»: «se vado in hover il testo rimane bianco»): `.as-carbone .as-btn--sec` (due classi)
	   viene DOPO `.as-btn:hover` a pari specificità e si riprendeva il bianco sopra il riempimento bianco: il colore di hover va
	   ripetuto qui, dove la specificità è quella del contesto. Vale per ogni secondario sul carbone (Errori 1.75). */
	.as-carbone .as-btn--sec:hover, [data-fondo="carbone"] .as-btn--sec:hover { box-shadow: inset 0 0 0 1px var(--as-bianco); background: rgba(255, 255, 255, .05); color: var(--as-btn-txt-hov); }
}
.as-carbone .as-btn--sec:focus-visible, [data-fondo="carbone"] .as-btn--sec:focus-visible { color: var(--as-btn-txt-hov); }
/* Su arancio: CTA nera (testo bianco); il pallino arancio sparirebbe nel fondo: bianco. */
.as-arancio-fondo .as-btn--pri { background: var(--as-carbone); color: var(--as-bianco); --as-btn-dot: var(--as-bianco); --as-btn-txt-hov: var(--as-carbone); --as-btn-dot-hov: var(--as-arancio); }

/* Text-link bottone (as-tlink): riga sotto, per CTA leggere. */
.as-tlink {
	font-size: 14.5px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-block: 6px;
	position: relative;
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
}
.as-tlink::after {
	content: "";
	position: absolute;
	left: 0; bottom: 2px;
	height: 1px; width: 100%;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s var(--as-ease-io);
}
@media (hover: hover) {
	.as-tlink:hover::after { transform: scaleX(1); transform-origin: left; }
}

/* Roll ↗ (H6): due copie della freccia in slot mascherato. */
.as-rar {
	display: inline-grid;
	overflow: hidden;
	width: 1em; height: 1em;
	line-height: 1;
}
.as-rar > span { grid-area: 1 / 1; display: block; will-change: transform; }
.as-rar .cp { transform: translate(-115%, 115%); }

/* H4: il fill dal punto d'ingresso. Non più creato da v0.25 (lo sostituisce il
   pallino che allaga): la regola resta per non rompere markup vecchio in cache. */
.as-btn__fillc {
	position: absolute;
	border-radius: var(--as-r-pill);
	background: rgba(255, 255, 255, .1);
	transform: scale(0);
	pointer-events: none;
	z-index: 0;
}

/* Invio-wow (DS §4): spinner → onda verde → spunta stroke-draw. */
.as-btn .as-spin {
	position: absolute;
	left: 50%; top: 50%;
	width: 18px; height: 18px;
	margin: -9px 0 0 -9px;
	border-radius: var(--as-r-pill);
	border: 2px solid rgba(255, 255, 255, .3);
	border-top-color: #fff;
	opacity: 0;
	animation: as-spin .7s linear infinite;
	z-index: 2;
}
@keyframes as-spin { to { transform: rotate(1turn); } }
.as-btn.is-loading .as-btn__in { opacity: 0; }
.as-btn.is-loading .as-spin { opacity: 1; }
.as-btn .as-okwipe {
	position: absolute;
	inset: 0;
	border-radius: inherit; /* v0.51: col raggio a pillola restavano gli angoli arancio del bottone squircolato */
	background: var(--as-successo);
	transform: scale(0);
	pointer-events: none;
	z-index: 1;
}
.as-btn .as-okmark {
	position: absolute;
	left: 50%; top: 50%;
	width: 22px; height: 22px;
	margin: -11px 0 0 -11px;
	z-index: 3;
	opacity: 0;
}
/* La spunta resta la SUA: 2.6 round, stroke-draw (decisione C11). */
.as-btn .as-okmark path {
	stroke: #fff;
	stroke-width: 2.6;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 30;
	stroke-dashoffset: 30;
}
.as-btn.is-ok .as-btn__in { opacity: 0; }
.as-btn.is-ok .as-okmark { opacity: 1; }

/* Icon button (legge icone §4: squircle default, tondo dove la geometria lo chiede). */
.as-ib {
	width: 48px; height: 48px;
	border: 0;
	cursor: pointer;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--as-carbone);
	color: var(--as-bianco);
	border-radius: calc(10px * var(--as-brm));
	overflow: hidden;
	transition: background var(--as-t-micro) ease, box-shadow var(--as-t-micro) ease;
}
@supports (corner-shape: squircle) {
	.as-ib { corner-shape: squircle; }
	.as-ib--tonda { corner-shape: round; }
}
.as-ib--tonda { border-radius: var(--as-r-pill); }
.as-ib--ghost { background: transparent; color: var(--as-ink); box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .22); }
@media (hover: hover) {
	.as-ib--ghost:hover { box-shadow: inset 0 0 0 1px var(--as-ink); }
}

/* Chips filtro (DS §4 F★/F2: squircle, numerino in apice). */
.as-chip {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .04em;
	padding: 11px 18px;
	min-height: 44px;
	border-radius: calc(10px * var(--as-brm));
	border: 0;
	background: transparent;
	color: var(--as-ink);
	box-shadow: inset 0 0 0 1px var(--as-line);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow var(--as-t-micro) ease, background var(--as-t-micro) ease, color var(--as-t-micro) ease;
}
@supports (corner-shape: squircle) {
	.as-chip { corner-shape: squircle; }
}
@media (hover: hover) {
	.as-chip:hover { box-shadow: inset 0 0 0 1px var(--as-grigio-display); }
}
.as-chip sup { font-size: 9px; font-weight: 600; top: -5px; margin-left: 1px; opacity: .65; line-height: 1; position: relative; }
.as-chip[aria-pressed="true"], .as-chip.is-on {
	background: var(--as-carbone);
	color: var(--as-bianco);
	box-shadow: none;
}

/* Pill (mai squircle — DS §6). Icone di categoria SOLO qui (DS §8). */
.as-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--as-type-meta);
	font-weight: 400;
	letter-spacing: .04em;
	padding: 8px 16px;
	border-radius: var(--as-r-pill);
	box-shadow: inset 0 0 0 1px var(--as-line);
	color: var(--as-muted);
	text-decoration: none;
}
/* v0.23.7 (Rami, i 4 pulsanti dei due mondi): una freccia che non c'è a
   riposo e compare solo in hover, dinamica (cresce e scivola dentro, non un
   semplice apparire). Diversa dal roll dei bottoni grandi (.as-rar, sempre
   visibile, doppia copia che rulla): qui a riposo non c'è proprio nulla. */
.as-pill--vai { gap: 0; }
.as-pill__vai {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0;
	margin-left: 0;
	opacity: 0;
	overflow: hidden;
	transition: width var(--as-t-azione) var(--as-ease-out), margin-left var(--as-t-azione) var(--as-ease-out), opacity var(--as-t-micro) ease, transform var(--as-t-azione) var(--as-ease-out);
	transform: translateX(-4px);
}
@media (hover: hover) {
	.as-pill--vai:hover .as-pill__vai, .as-pill--vai:focus-visible .as-pill__vai { width: 14px; margin-left: 8px; opacity: 1; transform: translateX(0); }
}

/* ── Header (fixed sopra lo smoother; i colori li governa .is-inv) ─────── */
.as-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 60;
	pointer-events: none; /* i figli riattivano: la barra non copre la pagina */
	transition: transform .45s var(--as-ease-io);
}
/* Si nasconde scendendo, riappare risalendo (header.js). */
.as-header.is-nascosto { transform: translateY(-110%); }
.as-header__bar {
	/* Griglia 1fr auto 1fr: la nav sta nel CENTRO VERO della pagina,
	   qualunque larghezza abbiano logo e strumenti (Rami, 17/08). */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--as-sp-5);
	padding: var(--as-sp-4) var(--as-gutter);
}
.as-header__logo { justify-self: start; }
.as-header__tools { justify-self: end; }
.as-header__logo,
.as-header__tools button, .as-header__tools a { pointer-events: auto; }
.as-header__logo {
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -.02em;
	text-decoration: none;
	color: var(--as-carbone);
	transition: color var(--as-t-micro) ease;
}
.as-header__logo em { font-style: normal; font-weight: 300; color: var(--as-grigio-display); }
/* IL TORO accanto alla scritta, nell'header e nel footer (v0.30, Rami). Le
   stesse proporzioni del logo orizzontale del kit (Logos/): il toro è alto
   1,6 volte le maiuscole di Archivo (0,686em), cioè 1,098em, e lo separa
   dalla scritta il 30% della sua altezza. Tutto in em: segue la taglia della
   scritta, 19px nell'header, fino a 52px nel footer. Centrato sulla riga:
   con Archivo il centro della riga cade 0,009em sotto quello delle
   maiuscole, meno di un pixel anche nel footer. L'arancio resta arancio su
   ogni fondo, come nel kit. */
.as-header__logo, .as-footer__mark { display: inline-flex; align-items: center; gap: calc(1.098em * .3); }
.as-logo__toro { display: block; flex: 0 0 auto; width: auto; height: 1.098em; }
.as-logo__scritta { white-space: nowrap; }
.as-header__tools { display: flex; align-items: center; gap: var(--as-sp-3); }
.as-header__tools .as-ib {
	background: transparent;
	color: var(--as-carbone);
	transition: color var(--as-t-micro) ease, background var(--as-t-micro) ease;
}
@media (hover: hover) {
	.as-header__tools .as-ib:hover { background: rgba(10, 10, 10, .05); }
}
/* Sul carbone (misurato dal JS) o a menu aperto: header in bianco. */
.as-header.is-inv .as-header__logo,
.as-header.is-inv .as-header__tools .as-ib { color: var(--as-bianco); }
/* A menu aperto il pannello è BIANCO: header in carbone, sopra tutto.
   v0.38: .as-header nella catena, così vince anche su .is-inv (pagine scure:
   aprendo il menu su /contatti/ «Studio» e la X restavano bianche sul bianco). */
html.as-menu-open .as-header .as-header__logo,
html.as-menu-open .as-header .as-header__tools .as-ib { color: var(--as-carbone); }
@media (hover: hover) {
	.as-header.is-inv .as-header__tools .as-ib:hover { background: rgba(255, 255, 255, .08); }
	html.as-menu-open .as-header .as-header__tools .as-ib:hover { background: rgba(10, 10, 10, .05); }
}
/* A menu aperto la barra nav e la CTA dell'header lasciano la scena. */
html.as-menu-open .as-nav,
html.as-menu-open .as-header__cta {
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s var(--as-ease-micro);
}

/* ── Nav desktop: BARRA a pillola come i filtri (Rami, 17/08) ──────────
   Stesso linguaggio delle chip dell'archivio: contenitore a pillola,
   la voce in hover si riempie come una chip attiva. */
.as-nav {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	pointer-events: auto;
	justify-self: center;
	background: var(--as-bianco);
	box-shadow: inset 0 0 0 1px var(--as-filo);
	/* Squircle su richiesta esplicita di Rami (17/08) — deroga alla legge
	   "mai squircle sui pill" (DS §6): qui è una barra, non un pill. */
	--as-nav-r: calc(16px * var(--as-brm));
	border-radius: var(--as-nav-r);
	padding: 5px;
	transition: background var(--as-t-micro) ease, box-shadow var(--as-t-micro) ease;
}
@supports (corner-shape: squircle) { .as-nav { corner-shape: squircle; } }
.as-header.is-inv .as-nav {
	background: var(--as-superficie-c);
	box-shadow: inset 0 0 0 1px var(--as-filo-c);
}
/* ⚠️ Niente z-index sulla voce: la farebbe una pila a sé, e il testo in
   «differenza» si fonderebbe col vuoto invece che con la barra e la pillola
   (banco 26/09: voci invisibili). Sopra la pillola ci stanno per ordine: la
   pillola è il primo figlio della barra. */
.as-nav__item { position: relative; }

/* LA PILLOLA CHE SCORRE (v0.25, Rami, 26/09: «nell'header ci deve essere
   continuità di colore di sfondo della selezione che passa da una voce
   all'altra, esattamente come l'header di Platinum»). Un fondo solo, dietro
   le voci, che scivola sotto quella indicata dal mouse (header.js, GSAP
   .45s power3.out) e a mouse fuori torna sulla sezione in cui sei, o sparisce
   se la pagina non è nel menu (home, contatti). Il testo è bianco in
   «differenza»: nero sulla barra bianca, chiaro sulla pillola, e mentre la
   pillola scorre la lettera si inverte esattamente dove ci passa sopra.
   ⛔ Nessuna transition CSS su transform/width: le scrive GSAP (Platinum). */
.as-nav__ind {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 0;
	opacity: 0;
	pointer-events: none;
	background: var(--as-carbone);
	border-radius: max(6px, calc(var(--as-nav-r) - 5px));
}
@supports (corner-shape: squircle) { .as-nav__ind { corner-shape: squircle; } }
.as-header.is-inv .as-nav__ind { background: var(--as-bianco); }
.as-nav--viva { isolation: isolate; }
.as-nav--viva .as-nav__voce,
.as-header.is-inv .as-nav--viva .as-nav__voce { color: var(--as-bianco); mix-blend-mode: difference; }
/* Ponte invisibile: il mouse può scendere dalla voce al pannello. */
.as-nav__item--sub::after {
	content: "";
	position: absolute;
	top: 100%;
	left: -16px; right: -16px;
	height: 22px;
}
.as-nav__voce {
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	color: var(--as-carbone);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	/* Raggio interno DERIVATO dal computato (concentricità, DS §6). */
	border-radius: max(6px, calc(var(--as-nav-r) - 5px));
	transition: color var(--as-t-micro) ease, background var(--as-t-micro) ease;
}
@supports (corner-shape: squircle) { .as-nav__voce { corner-shape: squircle; } }
/* v0.33.1 (Rami: «Soluzioni» diventa «Problemi & Soluzioni»): la barra è più
   lunga di 110px; fra 1081 e 1239px le voci si stringono un filo, così resta
   aria fra la barra e Conosciamoci (senza: 24px a 1100). */
@media (min-width: 1081px) and (max-width: 1239px) {
	.as-nav__voce { padding-inline: 13px; gap: 4px; }
}
.as-header.is-inv .as-nav__voce { color: var(--as-bianco); }
/* La voce si evidenzia come la chip attiva dei filtri. */
/* Senza JS (o prima che parta) ogni voce si riempie da sola, come prima. */
@media (hover: hover) {
	.as-nav:not(.as-nav--viva) .as-nav__voce:hover,
	.as-nav:not(.as-nav--viva) .as-nav__item--sub:hover .as-nav__voce {
		background: var(--as-carbone);
		color: var(--as-bianco);
	}
	.as-header.is-inv .as-nav:not(.as-nav--viva) .as-nav__voce:hover,
	.as-header.is-inv .as-nav:not(.as-nav--viva) .as-nav__item--sub:hover .as-nav__voce {
		background: var(--as-bianco);
		color: var(--as-carbone);
	}
}
.as-nav:not(.as-nav--viva) .as-nav__voce:focus-visible {
	background: var(--as-carbone);
	color: var(--as-bianco);
	outline: none;
}
/* Con la pillola viva il focus da tastiera la porta sulla voce (header.js):
   il segno del focus è la pillola stessa. */
.as-nav--viva .as-nav__voce:focus-visible { outline: none; }
.as-nav__chev { transition: transform var(--as-t-micro) var(--as-ease-micro); }
.as-nav__item--sub:hover .as-nav__chev,
.as-nav__item--sub:focus-within .as-nav__chev { transform: rotate(180deg); }
.as-nav__sub {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	min-width: 230px;
	background: var(--as-superficie-c);
	box-shadow: inset 0 0 0 1px var(--as-filo-c);
	border-radius: calc(var(--as-r-card) * var(--as-brm));
	padding: 10px;
	display: grid;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 10px);
	transition: opacity .25s var(--as-ease-micro), transform .25s var(--as-ease-micro), visibility 0s linear .25s;
}
@supports (corner-shape: squircle) { .as-nav__sub { corner-shape: squircle; } }
.as-nav__item--sub:hover .as-nav__sub,
.as-nav__item--sub:focus-within .as-nav__sub {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
	transition: opacity .25s var(--as-ease-micro), transform .25s var(--as-ease-micro);
}
/* v0.69 (Rami, 29/10): ogni voce interna ha la sua icona a sinistra, entra una dopo l'altra quando il pannello si apre,
   e in hover una freccia arancio si disegna a destra (asta che si traccia, punta che scivola dentro). */
.as-nav__sub a {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	text-decoration: none;
	color: var(--as-grigio-testo-inv);
	padding: 10px 12px;
	border-radius: var(--as-r-s);
	opacity: 0;
	transform: translateY(6px);
	transition: color .2s ease, background .2s ease;
}
.as-nav__sub a > span { flex: 1; }
.as-nav__sub .as-nav__ic { flex: none; width: 16px; height: 16px; opacity: .7; transition: opacity .35s ease, color .35s ease; } /* v0.72 (Rami): l'arancio arriva morbido, non di scatto */
.as-nav__freccia { flex: none; width: 16px; height: 16px; color: var(--as-arancio); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s ease; }
.as-nav__freccia-asta { stroke-dasharray: 10; stroke-dashoffset: 10; transition: stroke-dashoffset .3s var(--as-ease-micro); }
.as-nav__freccia-punta { opacity: 0; transform: translateX(-5px); transition: opacity .2s ease .08s, transform .3s var(--as-ease-micro) .08s; }
.as-nav__item--sub:hover .as-nav__sub a,
.as-nav__item--sub:focus-within .as-nav__sub a {
	opacity: 1;
	transform: translateY(0);
	transition: color .2s ease, background .2s ease, opacity .3s var(--as-ease-micro), transform .35s var(--as-ease-micro);
}
.as-nav__item--sub:hover .as-nav__sub a:nth-child(2), .as-nav__item--sub:focus-within .as-nav__sub a:nth-child(2) { transition-delay: 0s, 0s, .04s, .04s; }
.as-nav__item--sub:hover .as-nav__sub a:nth-child(3), .as-nav__item--sub:focus-within .as-nav__sub a:nth-child(3) { transition-delay: 0s, 0s, .08s, .08s; }
.as-nav__item--sub:hover .as-nav__sub a:nth-child(4), .as-nav__item--sub:focus-within .as-nav__sub a:nth-child(4) { transition-delay: 0s, 0s, .12s, .12s; }
.as-nav__item--sub:hover .as-nav__sub a:nth-child(5), .as-nav__item--sub:focus-within .as-nav__sub a:nth-child(5) { transition-delay: 0s, 0s, .16s, .16s; }
@media (hover: hover) {
	.as-nav__sub a:hover { color: var(--as-bianco); background: rgba(255, 255, 255, .06); }
	.as-nav__sub a:hover .as-nav__ic { opacity: 1; color: var(--as-arancio); }
	.as-nav__sub a:hover .as-nav__freccia { opacity: 1; }
	.as-nav__sub a:hover .as-nav__freccia-asta { stroke-dashoffset: 0; }
	.as-nav__sub a:hover .as-nav__freccia-punta { opacity: 1; transform: translateX(0); }
}
.as-nav__sub a:focus-visible { color: var(--as-bianco); background: rgba(255, 255, 255, .06); outline: none; }
.as-nav__sub a:focus-visible .as-nav__ic { opacity: 1; color: var(--as-arancio); }
.as-nav__sub a:focus-visible .as-nav__freccia { opacity: 1; }
.as-nav__sub a:focus-visible .as-nav__freccia-asta { stroke-dashoffset: 0; }
.as-nav__sub a:focus-visible .as-nav__freccia-punta { opacity: 1; transform: translateX(0); }
/* La CTA dell'header segue il fondo (DS §2 legge 4): esplicita, così
   nessuna regola di contesto può scavalcarla. */
.as-header__cta { background: var(--as-carbone); color: var(--as-bianco); pointer-events: auto; }
.as-header.is-inv .as-header__cta { background: var(--as-arancio); color: var(--as-carbone); --as-btn-dot: var(--as-bianco); --as-btn-txt-hov: var(--as-carbone); --as-btn-dot-hov: var(--as-arancio); }
@media (hover: hover) {
	.as-header.is-inv .as-header__cta:hover { background: var(--as-arancio-attivo); }
}

/* Sotto i 1080 la nav inline sparisce: comanda l'overlay. */
@media (max-width: 1080px) {
	.as-nav { display: none; }
}

/* ── LA BARRA DA TELEFONO E DA TABLET (v0.38, 29/09, design/DIREZIONE-MOBILE.md)
   Rami, 28/09: «da mobile è tutto orribile». Il difetto più visto: la griglia
   del desktop (1fr auto 1fr) senza la nav lasciava gli strumenti nella colonna
   di MEZZO, suono e burger a metà barra e 138px vuoti a destra. Qui la barra
   è a due colonne: il logo a sinistra, gli strumenti a filo del margine
   destro. Il burger sporge di 15px nel margine così la sua ICONA (18px in un
   tocco da 48) cade sulla stessa riga del testo, come il logo a sinistra.
   Barra alta 64px (8 + 48 + 8). Sopra i 1080 non cambia niente. */
@media (max-width: 1080px) {
	.as-header__bar {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--as-sp-2);
		padding-block: var(--as-sp-2);
	}
	.as-header__tools { gap: var(--as-sp-1); margin-right: -15px; }
	/* Il logo si tocca in 45px d'altezza senza che la barra cresca. */
	.as-header__logo { padding-block: var(--as-sp-2); margin-block: calc(-1 * var(--as-sp-2)); }
	/* Tablet: c'è posto per l'invito. Alto 44 (un tocco vero) e staccato dal suono. */
	.as-header__cta { min-height: 44px; margin-right: var(--as-sp-2); }
	/* Tocchi: niente rettangolo grigio di iOS, una risposta visibile al dito. */
	.as-header a, .as-header button { -webkit-tap-highlight-color: transparent; }
	.as-header__tools .as-ib { transition: color var(--as-t-micro) ease, background var(--as-t-micro) ease, transform .15s var(--as-ease-micro); }
	.as-header__tools .as-ib:active { transform: scale(.92); }
	.as-header__logo:active { opacity: .6; }

	/* LA CAPSULA (risalendo sopra foto e testo). In cima alla pagina la barra
	   resta trasparente; oltre gli 80px (header.js: is-staccato) quando
	   ricompare ha un fondo: una capsula squircle a 8px dai bordi, bianca o
	   carbone all'85% con la sfocatura, che segue il colore già calcolato
	   (is-inv). Prima logo e burger da 1,5px galleggiavano sul testo. È un
	   ::before dietro i figli: la barra non cambia misura, --as-header-h
	   resta ferma e la pagina non salta. */
	.as-header__bar { position: relative; }
	.as-header__bar::before {
		content: "";
		position: absolute;
		inset: 6px 8px;
		z-index: -1;
		pointer-events: none;
		border-radius: calc(16px * var(--as-brm));
		background: rgba(255, 255, 255, .85);
		-webkit-backdrop-filter: blur(16px) saturate(1.4);
		backdrop-filter: blur(16px) saturate(1.4);
		box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .07), 0 8px 24px -12px rgba(10, 10, 10, .18);
		opacity: 0;
		transition: opacity .3s var(--as-ease-micro), background .3s var(--as-ease-micro), box-shadow .3s var(--as-ease-micro);
	}
	.as-header.is-staccato .as-header__bar::before { opacity: 1; }
	.as-header.is-inv .as-header__bar::before {
		background: rgba(10, 10, 10, .85);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 24px -12px rgba(0, 0, 0, .5);
	}
	/* A menu aperto la capsula lascia la scena (il pannello è già bianco)… */
	html.as-menu-open .as-header .as-header__bar::before { opacity: 0; }
	/* …e torna come fascia bianca piena, col filo sotto, solo quando le voci
	   del menu scorrono sotto la barra (schermi bassi: header.js, as-menu-scorre). */
	html.as-menu-open.as-menu-scorre .as-header .as-header__bar::before {
		inset: 0;
		border-radius: 0;
		opacity: 1;
		background: var(--as-bianco);
		box-shadow: 0 1px 0 var(--as-filo);
	}
}
@supports (corner-shape: squircle) {
	@media (max-width: 1080px) { .as-header__bar::before { corner-shape: squircle; } }
}
/* Telefono: la barra è solo logo e burger. I suoni stanno nel menu, come
   interruttore con la sua etichetta (.as-menu__suono); anche l'invito. */
@media (max-width: 699px) {
	.as-header__cta, .as-header__audio { display: none; }
}

/* Toggle audio: di default si vede solo l'icona "on" (il JS scambia). */
.as-header__audio .as-ic--audio-off { display: none; }

/* Burger a 2 linee → X (dalla demo W&S 06, richiesta di Rami 17/08).
   Transition SOLO CSS: GSAP non tocca queste linee. */
.as-header__toggle { position: relative; }
.as-burger__linea {
	position: absolute;
	left: 50%; top: 50%;
	width: 18px; height: 1.5px;
	background: currentColor;
	border-radius: 2px;
	transform-origin: 50% 50%;
	transition: transform .34s var(--as-ease-io);
}
.as-burger__linea--t { transform: translate(-50%, calc(-50% - 4px)); }
.as-burger__linea--b { transform: translate(-50%, calc(-50% + 4px)); }
.as-header__toggle[aria-expanded="true"] .as-burger__linea--t { transform: translate(-50%, -50%) rotate(45deg); }
.as-header__toggle[aria-expanded="true"] .as-burger__linea--b { transform: translate(-50%, -50%) rotate(-45deg); }

/* ── Menu overlay BIANCO (v0.3.0, dalla demo W&S 06: cerchio dal burger,
   nav ENORME centrata, un hover diverso per voce) ───────────────────────
   Il pannello si rivela con un clip-path a cerchio dal centro del burger.
   Senza JS il menu resta raggiungibile: la visibility la governa la classe,
   il clip è solo la coreografia. */
.as-menu {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: var(--as-bianco);
	color: var(--as-carbone);
	visibility: hidden;           /* chiuso = invisibile E sordo (§9.5) */
	pointer-events: none;
	/* v0.38: il centro del cerchio è il CENTRO VERO del burger, misurato da
	   header.js (--as-menu-x/y); il calcolo resta come ripiego senza JS. */
	clip-path: circle(0% at var(--as-menu-x, calc(100% - var(--as-gutter) - 24px)) var(--as-menu-y, calc(var(--as-header-h) / 2)));
	transition: clip-path .64s var(--as-ease-io), visibility 0s linear .64s;
	overflow-y: auto;
	/* Il pannello scorre col dito sugli schermi bassi senza trascinare la pagina sotto. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
html.as-menu-open .as-menu {
	visibility: visible;
	pointer-events: auto;
	clip-path: circle(150% at var(--as-menu-x, calc(100% - var(--as-gutter) - 24px)) var(--as-menu-y, calc(var(--as-header-h) / 2)));
	transition: clip-path .64s var(--as-ease-io);
}
.as-menu__in {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	/* v0.38: --as-header-h ora è l'altezza vera (82 sul desktop, prima 50):
	   meno 16 invece di più 16, il pannello del desktop resta dov'era. */
	padding: calc(var(--as-header-h) - var(--as-sp-4)) var(--as-gutter) var(--as-sp-6);
}

/* Nav enorme CENTRATA (verticale e orizzontale). */
.as-menu__nav { margin: auto 0; text-align: center; padding-block: var(--as-sp-5); }
.as-menu__list {
	display: flex;
	flex-direction: column;
	gap: clamp(2px, .7vh, 10px);
	/* La voce più lunga deve stare su UNA riga anche a 390px; la quota rem
	   fa crescere il testo anche con lo zoom (WCAG 1.4.4 — dalla demo). */
	--as-menu-fs: min(calc(.75rem + 5.4vh), calc(.5rem + 5.6vw), 5.2rem);
}
.as-menu__voce {
	display: inline-block;
	font-size: var(--as-menu-fs);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.14;
	white-space: nowrap;
	text-decoration: none;
}
.as-menu__voce.is-current .as-menu__label { color: var(--as-grigio-display); }

/* Struttura uniforme della voce (serve agli hover):
   <a><span class="as-menu__label" data-testo="…"><span>…</span></span></a> */
.as-menu__label { display: block; position: relative; }
.as-menu__label > span { display: block; }

/* ═══ HOVER: una firma per voce (data-hover sul <li>) — gated su hover ═══ */
@media (hover: hover) {
	/* ROLL — il testo sale, da sotto entra la copia alleggerita. */
	.as-menu__list li[data-hover="roll"] .as-menu__label { overflow: hidden; }
	.as-menu__list li[data-hover="roll"] .as-menu__label > span,
	.as-menu__list li[data-hover="roll"] .as-menu__label::after {
		transition: transform .55s var(--as-ease-io);
	}
	.as-menu__list li[data-hover="roll"] .as-menu__label::after {
		content: attr(data-testo);
		position: absolute;
		inset: 0;
		transform: translateY(103%);
		font-weight: 200;
		color: var(--as-grigio-display);
	}
	.as-menu__list li[data-hover="roll"] a:hover .as-menu__label > span { transform: translateY(-103%); }
	.as-menu__list li[data-hover="roll"] a:hover .as-menu__label::after { transform: translateY(0); }

	/* PESO — morph dell'asse variabile di Archivo: 500 → 200 + grigio. */
	.as-menu__list li[data-hover="peso"] .as-menu__label > span {
		transition: font-weight .4s var(--as-ease-io), color .4s var(--as-ease-io);
	}
	.as-menu__list li[data-hover="peso"] a:hover .as-menu__label > span {
		font-weight: 200;
		color: var(--as-grigio-display);
	}

	/* ONDA e SCRAMBLE — GSAP in header.js: niente CSS qui. */

	/* DIM — a fuoco la voce, le ALTRE sfumano (richiede :has). */
	.as-menu__list .as-menu__label { transition: opacity .45s var(--as-ease-io); }
	.as-menu__list:has(li[data-hover="dim"] a:hover) li:not([data-hover="dim"]) .as-menu__label { opacity: .14; }

	/* OUTLINE — il pieno si svuota: resta il contorno del carattere. */
	.as-menu__list li[data-hover="outline"] .as-menu__label > span {
		transition: opacity .35s var(--as-ease-io);
	}
	.as-menu__list li[data-hover="outline"] .as-menu__label::after {
		content: attr(data-testo);
		position: absolute;
		inset: 0;
		-webkit-text-stroke: 1.5px var(--as-carbone);
		color: transparent;
		opacity: 0;
		transition: opacity .35s var(--as-ease-io);
	}
	.as-menu__list li[data-hover="outline"] a:hover .as-menu__label > span { opacity: 0; }
	.as-menu__list li[data-hover="outline"] a:hover .as-menu__label::after { opacity: 1; }

	/* FLOOD — pillola nera che allaga la voce, testo in negativo. */
	.as-menu__list li[data-hover="flood"] a { position: relative; padding: 0 .4em; }
	.as-menu__list li[data-hover="flood"] a::before {
		content: '';
		position: absolute;
		inset: .06em -.05em;
		border-radius: 999px;
		background: var(--as-carbone);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform .5s var(--as-ease-io);
	}
	.as-menu__list li[data-hover="flood"] .as-menu__label {
		position: relative;
		z-index: 1;
		transition: color .35s var(--as-ease-io), opacity .45s var(--as-ease-io);
	}
	.as-menu__list li[data-hover="flood"] a:hover::before { transform: scaleX(1); }
	.as-menu__list li[data-hover="flood"] a:hover .as-menu__label { color: var(--as-bianco); }
}

/* Sotto-voci: righe piccole centrate sotto Servizi/Soluzioni — desktop in
   hover/focus, touch SEMPRE visibili (resa identica). */
.as-menu__sotto {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--as-sp-2) var(--as-sp-5);
	transition: max-height .5s var(--as-ease-io), opacity .35s var(--as-ease-micro), padding .35s var(--as-ease-micro);
}
.as-menu__sotto a {
	font-size: 15px;
	color: var(--as-grigio-testo);
	text-decoration: none;
	transition: color .2s ease;
}
@media (hover: hover) {
	.as-menu__gruppo:hover .as-menu__sotto,
	.as-menu__gruppo:focus-within .as-menu__sotto {
		max-height: 120px;
		opacity: 1;
		padding-block: var(--as-sp-1) var(--as-sp-2);
	}
	.as-menu__sotto a:hover { color: var(--as-carbone); }
}
@media (hover: none) {
	.as-menu__sotto {
		max-height: none;
		opacity: 1;
		padding-block: var(--as-sp-1) var(--as-sp-2);
	}
}

/* Fascia bassa: email grande col punto · social · legale (griglia demo). */
.as-menu__foot {
	flex-shrink: 0;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: var(--as-sp-4) var(--as-sp-6);
	font-size: var(--as-type-meta);
	color: var(--as-grigio-testo);
}
.as-menu__mail {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 500;
	letter-spacing: -.02em;
	color: var(--as-carbone);
	text-decoration: none;
}
.as-menu__mail::before {
	content: '';
	width: .5em; height: .5em;
	border-radius: 50%;
	background: var(--as-arancio);
	flex-shrink: 0;
}
.as-menu__social { display: flex; gap: var(--as-sp-3); justify-self: center; }
.as-menu__social a { color: var(--as-carbone); display: inline-flex; padding: 10px; }
.as-menu__legal { justify-self: end; display: flex; gap: var(--as-sp-4); }
.as-menu__legal a { color: var(--as-grigio-testo); text-decoration: none; }
@media (max-width: 760px) {
	.as-menu__foot { grid-template-columns: 1fr; align-items: start; }
	.as-menu__social, .as-menu__legal { justify-self: start; }
}

/* ── IL MENU DA TELEFONO E DA TABLET (v0.38, 29/09, design/DIREZIONE-MOBILE.md)
   Prima era il menu del desktop ristretto: voci centrate, sottovoci da 15px
   grigie in grappoli che andavano a capo (tocchi da 20px), nessun invito.
   Qui, sotto i 1080px: una lista allineata a sinistra, una voce per riga
   (32px su righe da 56, 44 su righe da 70 dal tablet), Servizi e Problemi &
   Soluzioni a fisarmonica chiusa (la freccia a destra la apre, la voce
   resta il link alla sua pagina), in fondo sotto il pollice «Conosciamoci»
   largo quanto lo schermo, la mail, i suoni e la riga legale.
   Sopra i 1080px il menu resta com'era: questi pezzi lì non esistono. */
.as-menu__apri, .as-menu__cta, .as-menu__suono { display: none; }
.as-menu__sotto-in { display: contents; }
/* Col dito, a menu aperto la pagina sotto non scorre (header.js: al posto
   della pausa dello smoother, che col dito rimandava click finti). */
html.as-menu-blocco { overflow-y: hidden; }
html.as-scroll-blocco { overflow-y: hidden; } /* v0.85.1: il blocco dello scroll (atterraggio) su touch, dove non c'è lo smoother da mettere in pausa */
@media (max-width: 1080px) {
	.as-menu a, .as-menu button { -webkit-tap-highlight-color: transparent; }
	.as-menu__in {
		padding: calc(var(--as-header-h) + var(--as-sp-3)) var(--as-gutter) calc(var(--as-sp-5) + env(safe-area-inset-bottom, 0px));
	}
	.as-menu__nav { margin: 0; text-align: left; padding-block: 0 var(--as-sp-6); }
	.as-menu__list {
		gap: 0;
		/* 32px a 390, 28 a 320 («Problemi & Soluzioni» sta sempre su una riga
		   accanto alla freccia), 44 dal tablet. La quota in vh tiene basso il
		   testo sugli schermi bassi (telefono in orizzontale: 31px, non 44). */
		--as-menu-fs: clamp(28px, min(calc(6.4vw + 7px), calc(7vh + 4px)), 44px);
		--as-menu-riga: max(56px, calc(var(--as-menu-fs) * 1.6));
	}
	.as-menu__list > li {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		border-bottom: 1px solid var(--as-filo);
	}
	.as-menu__voce {
		display: flex;
		align-items: center;
		min-height: var(--as-menu-riga);
		font-weight: 400;
		letter-spacing: -.03em;
		line-height: 1.1;
		transition: opacity .15s ease;
	}
	.as-menu__voce:active { opacity: .6; }
	/* La freccia della fisarmonica: un tocco da 48, l'icona a filo del margine. */
	.as-menu__apri {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		margin-right: -14px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--as-carbone);
		cursor: pointer;
	}
	.as-menu__apri .as-ic { transition: transform .4s var(--as-ease-io); }
	.as-menu__apri:active { opacity: .6; }
	.as-menu__gruppo.is-aperto .as-menu__apri .as-ic { transform: rotate(180deg); }
	/* Le sottovoci: una per riga, 17px, un tocco da 44. Chiuse, non si vedono
	   e non prendono il fuoco (visibility). Senza JS restano aperte. */
	.as-menu__list .as-menu__gruppo .as-menu__sotto {
		grid-column: 1 / -1;
		display: grid;
		grid-template-rows: 1fr;
		justify-content: stretch;
		max-height: none;
		opacity: 1;
		padding: 0;
		transition: grid-template-rows .45s var(--as-ease-io), opacity .3s var(--as-ease-micro), visibility 0s linear .45s;
	}
	html.as-js .as-menu__list .as-menu__gruppo .as-menu__sotto {
		grid-template-rows: 0fr;
		opacity: 0;
		visibility: hidden;
	}
	html.as-js .as-menu__list .as-menu__gruppo.is-aperto .as-menu__sotto {
		grid-template-rows: 1fr;
		opacity: 1;
		visibility: visible;
		transition: grid-template-rows .45s var(--as-ease-io), opacity .35s var(--as-ease-micro) .05s;
	}
	html:not(.as-js) .as-menu__apri { display: none; }
	.as-menu__sotto-in {
		display: flex;
		flex-direction: column;
		min-height: 0;
		overflow: hidden;
	}
	.as-menu__sotto-in::after { content: ""; flex: none; height: var(--as-sp-3); }
	.as-menu__sotto a {
		display: flex;
		align-items: center;
		min-height: 44px;
		font-size: clamp(17px, calc(1.2vw + 12px), 20px); /* 17 al telefono, 20 al tablet */
		letter-spacing: -.01em;
		color: var(--as-grigio-testo);
		transition: opacity .15s ease, color .2s ease;
	}
	.as-menu__sotto a:active { opacity: .6; }
	.as-menu__sotto a.is-current { color: var(--as-carbone); font-weight: 500; }
	/* Col mouse su una finestra stretta: la pillola nera di «Contatti» era
	   pensata per la voce centrata; qui la riga resta pulita come le altre. */
	.as-menu__list li[data-hover="flood"] a { padding: 0; }
	.as-menu__list li[data-hover="flood"] a::before { display: none; }
	.as-menu__list li[data-hover="flood"] a:hover .as-menu__label { color: inherit; }

	/* Il piede: sotto il pollice, sempre in fondo al pannello. */
	.as-menu__foot {
		margin-top: auto;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0 var(--as-sp-4);
	}
	.as-menu__cta {
		display: inline-flex;
		grid-column: 1 / -1;
		width: 100%;
		min-height: 56px;
		--as-btn-py: 0px;
		margin-bottom: var(--as-sp-3);
		transition: background var(--as-t-micro) ease, color .45s var(--as-ease-out), transform .15s var(--as-ease-micro);
	}
	.as-menu__cta:active { transform: scale(.97); }
	.as-menu__mail {
		grid-column: 1;
		min-height: 44px;
		font-size: 17px;
		justify-self: start;
	}
	.as-menu__mail:active { opacity: .6; }
	.as-menu__social { grid-column: 1 / -1; justify-self: start; margin-left: -10px; }
	.as-menu__social:not(:has(a)) { display: none; }
	.as-menu__legal {
		grid-column: 1 / -1;
		justify-self: stretch;
		justify-content: space-between;
		align-items: center;
		margin-top: var(--as-sp-2);
		border-top: 1px solid var(--as-filo);
		font-size: 13px;
	}
	.as-menu__legal a { display: inline-flex; align-items: center; min-height: 44px; padding-right: var(--as-sp-4); }
}
/* L'interruttore dei suoni: solo da telefono, dove l'icona non è nella barra. */
@media (max-width: 699px) {
	.as-menu__suono {
		display: inline-flex;
		grid-column: 2;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		margin-right: -4px;
		padding: 0 4px;
		border: 0;
		background: none;
		font-size: 14px;
		color: var(--as-grigio-testo);
		cursor: pointer;
	}
	.as-menu__suono-stato { color: var(--as-carbone); margin-left: -6px; }
	.as-menu__suono-leva {
		position: relative;
		flex: none;
		width: 36px;
		height: 22px;
		border-radius: 999px;
		background: var(--as-carbone);
		transition: background .25s var(--as-ease-micro);
	}
	.as-menu__suono-leva::after {
		content: "";
		position: absolute;
		top: 3px;
		left: 3px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: var(--as-bianco);
		transform: translateX(14px);
		transition: transform .25s var(--as-ease-io);
	}
	.as-menu__suono[aria-pressed="false"] .as-menu__suono-leva { background: rgba(10, 10, 10, .18); }
	.as-menu__suono[aria-pressed="false"] .as-menu__suono-leva::after { transform: none; }
	.as-menu__suono[aria-pressed="false"] .as-menu__suono-stato { color: var(--as-grigio-testo); }
}
/* Schermi bassi (iPhone SE, telefono in orizzontale): righe un filo più basse,
   e il pannello scorre col dito (overscroll-behavior sul .as-menu). */
@media (max-width: 1080px) and (max-height: 700px) {
	.as-menu__list { --as-menu-riga: max(50px, calc(var(--as-menu-fs) * 1.4)); }
	.as-menu__nav { padding-bottom: var(--as-sp-5); }
}

/* ── Footer (carbone: momento-firma di chiusura) ───────────────────────── */
.as-footer { position: relative; }
.as-footer__cta { padding-block: var(--as-sect); }
/* Dove il form c'è già (home §9, contatti, grazie) la banda-invito non si
   ripete: selettore fratello sul namespace del main — regge anche il PJAX. */
/* …e dove la pagina chiude già con la fascia scura e la sua CTA (v0.22: servizi,
   servizio, soluzione): due inviti in fila sono uno di troppo. */
.as-main[data-barba-namespace="home"] ~ .as-footer .as-footer__cta,
.as-main[data-barba-namespace="contatti"] ~ .as-footer .as-footer__cta,
.as-main[data-barba-namespace="grazie"] ~ .as-footer .as-footer__cta,
.as-main[data-barba-namespace="servizi"] ~ .as-footer .as-footer__cta,
.as-main[data-barba-namespace="servizio"] ~ .as-footer .as-footer__cta,
.as-main[data-barba-namespace="soluzione"] ~ .as-footer .as-footer__cta,
.as-main[data-barba-namespace="studio"] ~ .as-footer .as-footer__cta { display: none; }
.as-footer__cta .as-display-lg { max-width: 14ch; }
/* v0.124.1 (Rami, 08/11: «lo stacco di sfondo tra l'ultima sezione e il footer è brutto, troppo netto»): sulle pagine generiche
   (page.php, la privacy) l'ultima sezione è bianca e sotto arriva la banda scura del footer: entra a cupola, come le sezioni scure del
   sito (stesso raggio di data-as-goccia: 150 px da computer, ~39 da telefono), invece dello stacco dritto. */
.as-main[data-barba-namespace="pagina"] ~ .as-footer .as-footer__cta { border-radius: 50% 50% 0 0 / clamp(39px, 10.4vw, 150px) clamp(39px, 10.4vw, 150px) 0 0; }
/* ── v0.27: LA LASTRA (dal footer di tavoloso.com v3.0, opera nostra, su
   richiesta di Rami: «uguale identico»). La cornice chiara fa galleggiare la
   lastra carbone arrotondata; dentro: testa col wordmark grande e il torna
   su, tre colonne coi link, la VETRINA scorrevole degli ultimi articoli del
   blog, la banda «Prossima pagina» e la strip legale a tre zone. Tipografia
   e colori nostri (Archivo, DS §1-2). ── */
/* v0.27.1 (Rami, coi 5 punti dallo screenshot del vivo): la cornice diventa
   NERA e la lastra si INVERTE in bianco, coi dettagli arancio. La geometria
   di Tavoloso resta tutta; i colori dentro sono semantici (token chiari). */
.as-footer__cornice {
	background: var(--as-carbone);
	padding: 0 24px 24px;
}
.as-footer__lastra {
	--as-lastra-px: clamp(24px, 3vw, 40px);
	--as-lastra-filo: rgba(10, 10, 10, .12);
	position: relative;
	background: var(--as-bianco);
	color: var(--as-ink);
	border-radius: calc(32px * var(--as-brm));
	padding: 24px var(--as-lastra-px) 14px;
}
@supports (corner-shape: squircle) { .as-footer__lastra { corner-shape: squircle; } }

/* Testa: wordmark grande a sinistra, torna-su a destra. */
.as-footer__testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--as-sp-4);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--as-lastra-filo);
}
.as-footer__mark {
	font-size: clamp(32px, 3.6vw, 52px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1;
}
.as-footer__mark em { font-style: normal; font-weight: 300; color: var(--as-grigio-display); }
/* v0.38: wordmark e frase di posizionamento in colonna (la frase si vede solo
   da telefono, @media 720 più giù; sul desktop resta nella strip). Flex, non
   blocco: il wordmark resta alto quanto prima, senza la riga di testo sotto. */
.as-footer__firmatesta { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.as-footer__motto { display: none; }

/* Corpo: colonne a sinistra, vetrina a destra (senza articoli: solo colonne). */
.as-footer__corpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 32px;
	padding: 20px 0;
	min-width: 0;
}
.as-footer__corpo--solo { grid-template-columns: 1fr; }
.as-footer__colonne {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 40px);
	align-self: start;
}
.as-footer__coltit {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--as-ink);
	opacity: .55;
	margin-bottom: 22px;
}
/* Il titolo cliccabile con la freccia che pulsa (la colonna Contatti). */
/* v0.33.1 (Rami: «Problemi & Soluzioni»): un titolo di colonna può andare su
   due righe. Le colonne condividono le righe della griglia (subgrid): i titoli
   stanno in una riga comune e gli elenchi partono tutti alla stessa altezza.
   Dove c'è posto il titolo lungo resta su una riga. */
.as-footer__col { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; } /* row-gap 0: la subgrid erediterebbe lo spazio fra le righe della griglia madre */
@media (min-width: 1300px) { .as-footer__coltit { white-space: nowrap; } }
.as-footer__coltit--link { opacity: 1; }
.as-footer__coltit--link a {
	position: relative;
	display: inline-block;
	padding-right: 30px;
	color: var(--as-ink);
	opacity: .55;
	text-decoration: none;
	transition: opacity .22s var(--as-ease-out);
}
.as-footer__pulsa {
	position: absolute;
	right: 0;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: var(--as-r-pill);
	color: var(--as-arancio);
	border: 1.2px solid currentColor;
	transform: translate(0, -50%);
	animation: as-pulsa-freccia 2s var(--as-ease-out) infinite;
	transition: background .22s var(--as-ease-out), color .22s var(--as-ease-out);
}
@keyframes as-pulsa-freccia {
	0%, 100% { transform: translate(0, -50%); }
	50% { transform: translate(4px, -50%); }
}
@media (hover: hover) {
	.as-footer__coltit--link a:hover { opacity: 1; }
	.as-footer__coltit--link a:hover .as-footer__pulsa {
		transform: translate(0, -50%) rotate(-45deg) scale(1.1);
		animation-play-state: paused;
		background: var(--as-arancio);
		color: var(--as-carbone);
	}
}
.as-footer__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.as-footer__lista a {
	font-size: 15px;
	color: var(--as-ink);
	text-decoration: none;
	transition: opacity .22s var(--as-ease-out), color .35s var(--as-ease-out);
}
@media (hover: hover) { .as-footer__lista a:hover { color: var(--as-arancio); } }
.as-footer__social { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
/* v0.72 (Rami, 29/10, regola per tutto il sito): quando in hover una cosa diventa arancio, lo diventa in ~.35 s, mai di scatto. */
.as-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--as-r-pill);
	border: 1px solid rgba(10, 10, 10, .18);
	color: var(--as-ink);
	transition: background .35s var(--as-ease-out), color .35s var(--as-ease-out), border-color .35s var(--as-ease-out);
}
@media (hover: hover) {
	.as-footer__social a:hover { background: var(--as-arancio); color: var(--as-carbone); border-color: var(--as-arancio); }
}

/* Vetrina: testata + fila di card che scorre, con lo sbordo a destra. */
.as-footer__vetrina {
	align-self: start;
	min-width: 0;
	margin-right: calc(var(--as-lastra-px) * -1);
}
.as-footer__vettesta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 12px;
	padding-right: var(--as-lastra-px);
}
.as-footer__vetlabel {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--as-ink);
	opacity: .55;
}
.as-footer__tutti {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--as-ink);
	text-decoration: none;
	transition: opacity .22s var(--as-ease-out);
}
.as-footer__tuttichip {
	width: 28px;
	height: 28px;
	border-radius: var(--as-r-pill);
	border: 1.5px solid var(--as-arancio);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--as-arancio);
	flex-shrink: 0;
	transition: transform .36s var(--as-ease-out), background .35s var(--as-ease-out), color .35s var(--as-ease-out);
}
@media (hover: hover) {
	.as-footer__tutti:hover { opacity: 1; }
	.as-footer__tutti:hover .as-footer__tuttichip { transform: rotate(45deg); background: var(--as-arancio); color: var(--as-carbone); }
}
.as-footer__carte {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	overflow-y: visible;
	padding: 10px var(--as-lastra-px) 8px 0;
	scroll-snap-type: x mandatory;
	scroll-padding-right: var(--as-lastra-px);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}
.as-footer__carte::-webkit-scrollbar { display: none; }
.as-fcard {
	flex: 0 0 auto;
	width: 210px;
	aspect-ratio: 3 / 4;
	border-radius: calc(22px * var(--as-brm));
	overflow: hidden;
	position: relative;
	scroll-snap-align: start;
	background: rgba(10, 10, 10, .05);
	text-decoration: none;
	transition: transform .32s var(--as-ease-out);
}
@supports (corner-shape: squircle) { .as-fcard { corner-shape: squircle; } }
@media (hover: hover) { .as-fcard:hover { transform: translateY(-6px); } }
.as-fcard__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.as-fcard__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 50%);
	z-index: 1;
}
/* Senza copertina: un gradino sopra la lastra chiara, col titolo in inchiostro. */
.as-fcard--nuda { background: rgba(10, 10, 10, .04); box-shadow: inset 0 0 0 1px var(--as-lastra-filo); }
.as-fcard--nuda .as-fcard__titolo { color: var(--as-ink); }
.as-fcard__titolo {
	position: absolute;
	left: 18px;
	bottom: 16px;
	z-index: 2;
	font-size: 19px;
	font-weight: 500;
	color: var(--as-bianco);
	line-height: 1.15;
	letter-spacing: -.02em;
	max-width: calc(100% - 36px);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.as-fcard__chip {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 32px;
	height: 32px;
	border-radius: var(--as-r-pill);
	background: var(--as-arancio);
	color: var(--as-carbone);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .36s var(--as-ease-out);
}
@media (hover: hover) { .as-fcard:hover .as-fcard__chip { transform: rotate(45deg); } }

/* L'hint «Scorri»: solo dove la fila non si vede intera (sotto i 1025px). */
.as-footer__scorri {
	display: flex;
	align-items: center;
	gap: 6px;
	justify-content: flex-end;
	padding: 12px 10px 0 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--as-ink);
	opacity: .5;
	transition: opacity .4s var(--as-ease-out);
}
.as-footer__scorri.is-hidden { opacity: 0; pointer-events: none; }
.as-footer__scorri .as-ic { color: var(--as-arancio); animation: as-scorri-spinta 1.6s var(--as-ease-out) infinite; }
@keyframes as-scorri-spinta {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(5px); }
}
@media (min-width: 1025px) { .as-footer__scorri { display: none; } }

/* La banda «Prossima pagina» dentro la lastra (v0.27.3, Rami: «devono stare
   entrambe nella stessa sezione, in linea»): UNA riga sola con
   etichetta+titolo a sinistra, l'hint accanto e la freccia in fondo a
   destra; SOTTO, la barra di scorrimento com'era prima. */
.as-footer__lastra .as-next { margin-top: 6px; padding-block: 16px; display: block; border-top-color: var(--as-lastra-filo); }
.as-footer__lastra .as-next__link { display: block; }
.as-next__testa {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 12px clamp(18px, 3vw, 40px);
}
.as-next__sx { display: grid; gap: 10px; }
/* Hint e freccia si posano sulla linea di base del titolo. */
.as-next__testa .as-next__hint { margin-bottom: 4px; }
.as-next__testa .as-rar { margin-left: auto; margin-bottom: 8px; color: var(--as-ink); flex-shrink: 0; }
.as-footer__lastra .as-next__bar { display: block; margin-top: 14px; }
/* v0.38 (29/09): il cerchio della freccia esiste solo da telefono (@media 720):
   qui il contenitore non c'è, e la freccia resta la stessa di prima. */
.as-next__vai { display: contents; }
/* La frase giusta per il dispositivo: col dito non si «clicca». */
.as-next__hint-dito { display: none; }
@media (hover: none) {
	.as-next__hint-mouse { display: none; }
	.as-next__hint-dito { display: inline; }
}
/* Una riga sola fra la banda e le note legali: sotto la banda la sua barra fa
   già da filo, e il bordo della strip 14px più giù sembrava un doppio divisore. */
.as-next:not([hidden]) + .as-footer__strip { border-top: 0; margin-top: 0; }

/* Strip legale a tre zone: ©, voci, firma. */
.as-footer__strip {
	padding-top: 14px;
	margin-top: 14px;
	border-top: 1px solid var(--as-lastra-filo);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px 32px;
	font-size: 13px;
	color: var(--as-ink);
}
.as-footer__legalsx { opacity: .78; }
.as-footer__legalvoci { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; opacity: .78; }
.as-footer__legalvoci a { color: inherit; text-decoration: none; transition: opacity .22s var(--as-ease-out); }
@media (hover: hover) { .as-footer__legalvoci a:hover { opacity: .6; } }
.as-footer__firma { text-align: right; opacity: .78; }

/* Sotto i 1025px: corpo in colonna, vetrina con lo sbordo simmetrico e la
   lastra che clippa (le card non devono dipingersi sul chiaro della cornice). */
@media (max-width: 1024px) {
	.as-footer__lastra { overflow: hidden; }
	.as-footer__corpo { grid-template-columns: 1fr; gap: 56px; }
	.as-footer__vetrina { margin-right: 0; }
	.as-footer__vettesta { padding-right: 0; }
	.as-footer__carte {
		margin-inline: calc(var(--as-lastra-px) * -1);
		padding-left: var(--as-lastra-px);
		scroll-padding-left: var(--as-lastra-px);
		width: auto;
		max-width: none;
	}
}
@media (max-width: 720px) {
	.as-footer__cornice { padding: 0 12px 12px; }
	.as-footer__lastra { padding: 28px 20px 8px; border-radius: calc(24px * var(--as-brm)); --as-lastra-px: 20px; }
	/* v0.38 (29/09, DIREZIONE-MOBILE «Footer da telefono»): da un muro di due
	   schermi a una lastra che si legge col pollice. */
	/* La testa: wordmark e, sotto, la frase di posizionamento (dalla strip). */
	.as-footer__testa { align-items: flex-start; padding-bottom: 20px; }
	.as-footer__motto { display: block; max-width: 30ch; font-size: 15px; line-height: 1.4; color: var(--as-grigio-testo); }
	.as-footer__corpo { gap: 28px; padding: 12px 0 20px; }
	.as-footer__colonne { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
	.as-footer__colonne > nav:nth-child(3) { grid-column: 1 / -1; }
	/* Titoli di colonna in frase normale a 13px, grigi pieni: il maiuscoletto
	   spaziato a 12px andava a capo («PROBLEMI & / SOLUZIONI») e sembrava
	   un'etichetta decorativa. */
	.as-footer__coltit {
		font-size: 13px;
		letter-spacing: 0;
		text-transform: none;
		color: var(--as-grigio-testo);
		opacity: 1;
		margin-bottom: 4px;
		white-space: nowrap;
	}
	/* «Contatti →»: il testo grigio come gli altri titoli, il cerchio arancio
	   pieno (l'opacità stava su tutto il link e lo sbiadiva); tocco da 44px. */
	.as-footer__coltit--link a { opacity: 1; color: var(--as-grigio-testo); padding-block: 12px; margin-block: -12px; }
	/* Ogni link è una riga da 44px a 16px: prima si toccava solo il testo, 16px. */
	.as-footer__lista { gap: 0; }
	.as-footer__lista a { display: block; padding-block: 12px; font-size: 16px; line-height: 20px; }
	.as-footer__social { margin-top: 8px; }
	.as-footer__social a { width: 44px; height: 44px; }
	/* La strip: una riga sola, © a sinistra e Privacy a destra (la frase è salita
	   sotto il wordmark). Privacy si tocca su 44px. */
	.as-footer__strip { grid-template-columns: minmax(0, 1fr) auto; text-align: left; gap: 0 16px; font-size: 14px; padding-top: 4px; }
	.as-footer__legalvoci { justify-content: flex-end; }
	.as-footer__legalvoci a { display: inline-block; padding-block: 12px; }
	.as-footer__firma { display: none; }
	/* La banda «Prossima pagina» (solo dove c'è una pagina dopo): un bersaglio
	   grande. Etichetta, il nome della pagina a 32px e la freccia in un cerchio
	   da 48px sulla stessa riga; sotto la frase e la barra che si riempie. */
	.as-footer__lastra .as-next { margin-top: 0; padding-block: 12px 16px; }
	.as-footer__lastra .as-next__link { min-height: 96px; }
	.as-next__testa { align-items: center; gap: 8px 16px; }
	.as-next__sx { flex: 1 1 0; min-width: 0; gap: 2px; }
	.as-next .as-next__title { font-size: 32px; font-weight: 300; letter-spacing: -.03em; line-height: 1.1; }
	.as-next__vai {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		order: 2;
		flex: none;
		width: 48px;
		height: 48px;
		border-radius: var(--as-r-pill);
		box-shadow: inset 0 0 0 1.5px var(--as-arancio);
		color: var(--as-arancio);
	}
	.as-next__testa .as-rar { margin: 0; color: inherit; font-size: 16px; }
	.as-next__testa .as-next__hint { order: 3; flex-basis: 100%; margin: 0; font-size: 14px; }
	.as-footer__lastra .as-next__bar { margin-top: 14px; }
	/* La vetrina del blog (dal primo articolo pubblicato): etichetta come i
	   titoli di colonna, «Tutti gli articoli» toccabile su 44px, card più basse. */
	.as-footer__vetlabel { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--as-grigio-testo); opacity: 1; }
	.as-footer__vettesta { align-items: center; margin-bottom: 4px; }
	.as-footer__tutti { padding-block: 8px; }
	/* Card larghe ~54vw: la successiva resta sempre tagliata sul bordo, si
	   capisce a colpo d'occhio che la fila scorre. In 4:5, non 3:4: la fila
	   non occupa più mezzo schermo. */
	.as-fcard { width: 54vw; max-width: 224px; aspect-ratio: 4 / 5; }
	.as-footer__scorri { padding-top: 8px; }
}

/* Torna-su: l'anello di progresso È il bordo (DS §4) — conic arancio su filo. */
.as-topbtn {
	width: 56px; height: 56px;
	border-radius: var(--as-r-pill);
	border: 0;
	cursor: pointer;
	position: relative;
	background: transparent;
	color: var(--as-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.as-topbtn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		conic-gradient(var(--as-arancio) calc(var(--as-scroll, 0) * 1turn), var(--as-line) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}

/* ── Card progetto con tacca (DS §5 v3.4 + §7: la cornice, sempre) ─────── */
@property --as-ntw { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --as-nth { syntax: '<length>'; inherits: true; initial-value: 0px; }

.as-tkw {
	position: relative;
	/* Tile a px fissi (freccia 44 → tile 84×76); mobile più sotto. */
	--as-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 76'%3E%3Cpath d='M84 0A16 16 0 0 1 68 16L36 16C30 16 26.54 16 23.62 16.78C19.92 17.76 17.76 19.92 16.78 23.62C16 26.54 16 30 16 36L16 60A16 16 0 0 1 0 76L84 76Z' fill='%23000'/%3E%3C/svg%3E");
	--as-tile-w: 84px;
	--as-tile-h: 76px;
	--as-ntw: 0px;
	--as-nth: 0px;
	transition: --as-ntw .45s cubic-bezier(.4, 0, .2, 1) .17s, --as-nth .45s cubic-bezier(.4, 0, .2, 1) .17s;
}
.as-card {
	--as-r-out: calc(var(--as-r-card) * var(--as-brm));
	display: flex;
	flex-direction: column;
	background: var(--as-sup);
	color: var(--as-ink);
	text-decoration: none;
	border-radius: var(--as-r-out);
	padding: clamp(20px, 2vw, 28px);
	min-height: 100%;
	mask: var(--as-tile) right bottom / var(--as-ntw) var(--as-nth) no-repeat,
	      linear-gradient(#000 0 0);
	mask-composite: exclude;
}
@supports (corner-shape: squircle) {
	.as-card { corner-shape: squircle; }
}
/* Media in cornice: raggio interno DERIVATO dal computato (DS §6). */
.as-card__media {
	aspect-ratio: 16 / 10;
	inline-size: 100%;
	overflow: hidden;
	border-radius: max(6px, calc(var(--as-r-out) - clamp(20px, 2vw, 28px)));
	background: var(--as-line);
}
@supports (corner-shape: squircle) {
	.as-card__media { corner-shape: squircle; }
}
.as-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.as-card__bot {
	margin-top: auto;
	padding-top: var(--as-sp-6);
	/* Riserva tacca: il testo si ferma sempre 16px prima del ritaglio (v3.4). */
	padding-right: calc(var(--as-tile-w) - 4px);
}
.as-card__title { font-size: 18px; font-weight: 400; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; overflow-wrap: break-word; }
.as-card__meta { font-size: var(--as-type-meta); color: var(--as-muted); margin-top: var(--as-sp-2); letter-spacing: .04em; }

/* Il controllo vive SOPRA la card, mai dentro (legge ① — Errori §1.1). */
.as-tkctrl {
	position: absolute;
	right: 8px; bottom: 6px;
	width: 44px; height: 44px;
	border-radius: var(--as-r-pill);
	background: var(--as-carbone);
	color: var(--as-bianco);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(.6);
	transition: opacity .28s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear .28s;
}
.as-carbone .as-card { background: var(--as-superficie-c); }
.as-carbone .as-tkctrl { background: var(--as-arancio); color: var(--as-carbone); }

/* Desktop: scava in hover (.45s, freccia a +.34s, uscita inversa). */
@media (hover: hover) {
	.as-tkw:hover, .as-tkw:focus-within {
		--as-ntw: var(--as-tile-w);
		--as-nth: var(--as-tile-h);
		transition-delay: 0s, 0s;
	}
	.as-tkw:hover .as-tkctrl, .as-tkw:focus-within .as-tkctrl {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition-delay: .34s, .34s, .34s;
	}
}

/* Touch: pre-scavo senza JS (rete di sicurezza), poi il JS lo spegne e
   guida la variante scroll-in per card (.is-in), sequenza .75s / +.6s. */
@media (hover: none) {
	.as-tkw { --as-ntw: var(--as-tile-w); --as-nth: var(--as-tile-h); }
	.as-tkw .as-tkctrl { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

	html.as-tk-io .as-tkw {
		--as-ntw: 0px; --as-nth: 0px;
		transition: --as-ntw .75s cubic-bezier(.33, 0, .2, 1) .1s, --as-nth .75s cubic-bezier(.33, 0, .2, 1) .1s;
	}
	html.as-tk-io .as-tkw .as-tkctrl { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.6); transition: none; }
	html.as-tk-io .as-tkw.is-in { --as-ntw: var(--as-tile-w); --as-nth: var(--as-tile-h); }
	html.as-tk-io .as-tkw.is-in .as-tkctrl {
		opacity: 1; visibility: visible; pointer-events: auto; transform: none;
		transition: opacity .34s ease .62s, transform .34s cubic-bezier(.34, 1.56, .64, 1) .62s, visibility 0s linear .62s;
	}
	/* Nella stessa riga (griglia 2 col) la seconda parte un soffio dopo. */
	html.as-tk-io .as-grid-cards .as-tkw:nth-child(even) { transition-delay: .32s, .32s; }
	html.as-tk-io .as-grid-cards .as-tkw:nth-child(even).is-in .as-tkctrl { transition-delay: .94s, .94s, .94s; }
}

/* Mobile: tile ridotto (68×60, freccia 36 — DS §5). */
@media (max-width: 768px) {
	.as-tkw {
		--as-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 60'%3E%3Cpath d='M68 0A12 12 0 0 1 56 12L28 12C23.2 12 20.43 12 18.1 12.62C15.14 13.41 13.41 15.14 12.62 18.1C12 20.43 12 23.2 12 28L12 48A12 12 0 0 1 0 60L68 60Z' fill='%23000'/%3E%3C/svg%3E");
		--as-tile-w: 68px;
		--as-tile-h: 60px;
	}
	.as-tkctrl { width: 36px; height: 36px; }
	.as-card__bot { padding-right: calc(var(--as-tile-w) - 8px); }
}

/* Griglia card: 2 colonne base, 3 sul desktop largo, 1 su mobile (DS §7). */
.as-grid-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--as-gap-cards);
}
@media (min-width: 1400px) { .as-grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .as-grid-cards { grid-template-columns: 1fr; } }

/* Righe che si fanno da parte (liste, progetto successivo — DS §11). */
.as-rows .as-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--as-sp-4);
	padding-block: var(--as-sp-4);
	border-bottom: 1px solid var(--as-line);
	text-decoration: none;
	transition: opacity var(--as-t-micro) ease;
}
.as-rows .as-row > * { transition: transform var(--as-t-micro) ease; }
@media (hover: hover) {
	.as-rows:hover .as-row { opacity: .33; }
	.as-rows:hover .as-row:hover { opacity: 1; }
	.as-rows .as-row:hover .as-row__t { transform: translateX(12px); }
	.as-rows .as-row:hover .as-row__m { transform: translateX(-12px); }
}

/* ── Form (contatti = conversione: stati dal giorno uno, DS §2) ────────── */
.as-form { display: grid; gap: var(--as-sp-5); max-width: 640px; }
/* v0.23.6 (Rami: «il campo per quando è altissimo»): `.as-form__campo` è una
   griglia di suo (etichetta poi controllo); senza `align-content: start`,
   quando l'accoppiata `.as-form__due` la stira in altezza per pareggiarla al
   fratello (il default di un grid è allineare gli item allo stiramento), lo
   spazio in più cade tutto sull'unico figlio che può crescere: la select.
   Misurato: 355×119px, con la select sola a 70px invece dei 47 del vicino. */
.as-form__campo { display: grid; align-content: start; gap: var(--as-sp-2); }
.as-form__campo label { font-size: var(--as-type-meta); font-weight: 400; letter-spacing: .04em; }
.as-form input[type="text"],
.as-form input[type="email"],
.as-form input[type="tel"],
.as-form input[type="url"],
.as-form select,
.as-form textarea {
	width: 100%;
	min-width: 0;
	background: var(--as-bg);
	border: 0;
	box-shadow: inset 0 0 0 1px var(--as-line);
	border-radius: calc(var(--as-r-s) * var(--as-brm));
	padding: 14px 16px;
	font-size: 16px; /* iOS non zooma sotto i 16 (Errori §0.4) */
	font-weight: 300;
	transition: box-shadow var(--as-t-micro) ease;
}
@supports (corner-shape: squircle) {
	.as-form input[type="text"], .as-form input[type="email"], .as-form input[type="tel"], .as-form input[type="url"], .as-form select, .as-form textarea { corner-shape: squircle; }
}
/* v0.23.6 (Rami: «le frecce attaccate ai bordi»): la freccia nativa del
   browser non si stacca mai dal bordo e non si tinge. Una nostra, ferma a
   16px, con lo spazio suo (padding-right); due colori fissi (non currentColor:
   dentro una background-image affidarsi non è garantito ovunque) per i due
   fondi, chiaro e carbone. */
.as-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 11px 7px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.as-carbone .as-form select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.as-form input:focus-visible, .as-form select:focus-visible, .as-form textarea:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--as-ink);
}
.as-form .is-errore input, .as-form .is-errore select, .as-form .is-errore textarea {
	box-shadow: inset 0 0 0 2px var(--as-errore);
}
.as-form__err { font-size: var(--as-type-meta); color: var(--as-errore); }
.as-form__micro { font-size: var(--as-type-meta); color: var(--as-muted); }
.as-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.as-form__avviso {
	padding: var(--as-sp-4);
	border-radius: var(--as-r-s);
	box-shadow: inset 0 0 0 1px var(--as-errore);
	color: var(--as-errore);
	font-size: var(--as-type-body);
}

/* ── Velo di transizione .as-velo (C10 — nome IMMUNE, Errori §1.3) ───────
   Da fermo è INVISIBILE (visibility): a riposo la sua finestra-ellisse
   superiore sporgerebbe 48px nel viewport — la "barra nera" (Errori §1.5). */
.as-velo {
	position: fixed;
	left: 0; top: 100%;
	width: 100%; height: 100%;
	z-index: 80;
	pointer-events: none;
	visibility: hidden;
}
/* v0.52.10: a vedersi sono i FIGLI (riempimento ed ellissi, tutti posizionati); il velo in sé resta hidden,
   così Safari su iPhone non lo prende mai come contenitore delle sue fasce (vedi «Safari su iPhone», sotto). */
.as-velo.is-cover > *, .as-velo.is-leave > * { visibility: visible; }
.as-velo__fill { position: absolute; inset: 0; background: var(--as-carbone); }
.as-velo__edge { position: absolute; left: 0; width: 100%; height: 48px; overflow: hidden; }
.as-velo__edge--t { bottom: 100%; }
.as-velo__edge--b { top: 100%; }
.as-velo__ell {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 160%; height: 900%;
	border-radius: 50%;
	background: var(--as-carbone);
}
.as-velo__edge--t .as-velo__ell { top: 0; }
.as-velo__edge--b .as-velo__ell { bottom: 0; }
.as-velo.is-cover { transform: translateY(-100%); transition: transform .5s var(--as-ease-in); }
.as-velo.is-leave { transform: translateY(-235%); transition: transform .8s var(--as-ease-io); }
.as-velo__title {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--as-bianco);
	font-size: clamp(24px, 3.4vw, 42px);
	font-weight: 300;
	letter-spacing: -.025em;
	opacity: 0;
	transition: opacity .25s var(--as-ease-micro);
	text-align: center;
	padding-inline: var(--as-gutter);
}
.as-velo__title.is-on { opacity: 1; }

/* ── Preloader .as-pre (solo primo load — C10) ───────────────────────────
   Reti di sicurezza (regola CLAUDE.md n.3): esiste SOLO con JS attivo
   (html.as-js, messo da uno script inline nell'head) e comunque si
   autospegne via CSS dopo 4s — se il JS muore, la pagina resta visibile. */
.as-pre { display: none; }
html.as-js .as-pre {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	animation: as-pre-safety .4s ease 4s forwards;
}
@keyframes as-pre-safety { to { opacity: 0; visibility: hidden; } }
.as-pre__fill { position: absolute; inset: 0; background: var(--as-carbone); }
.as-pre__edge { position: absolute; left: 0; width: 100%; height: 48px; overflow: hidden; top: 100%; }
.as-pre__ell {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 160%; height: 900%;
	border-radius: 50%;
	background: var(--as-carbone);
}
.as-pre.is-leave { transform: translateY(-135%); transition: transform .8s var(--as-ease-io); }

/* ── SAFARI SU iPHONE: NESSUNO STRATO FISSO È UN «CONTENITORE» (v0.52.10, 21/10) ─────────────────────
   Rami: «intorno alla pill del dominio deve essere tutto trasparente». Safari 26 dipinge una fascia piena
   sotto l'orario e sotto la sua barra solo se, 4px dentro il bordo, trova uno strato fixed/sticky largo
   almeno il 90%; e se poi non trova più nulla TIENE l'ultimo finché esiste ed è visibile (letto in WebKit:
   LocalFrameView::fixedContainerEdges, Page::updateFixedContainerEdges). Senza contenitore mostra la pagina
   sotto le barre, che è quello che vogliamo. Un contenitore con `visibility: hidden` viene saltato anche se i
   suoi figli sono visibili, purché ogni figlio visibile abbia un layer proprio (qui lo hanno: sono tutti
   posizionati), e non resta nemmeno in memoria. Quindi, solo su touch: header, preloader, velo e le sezioni
   che si fissano durante il pin (home.css) sono nascosti come contenitori e visibili nei figli. Niente
   cambia a occhio: i fondi propri di questi contenitori non si dipingono, ma dietro c'è lo stesso colore. */
@media (hover: none) {
	.as-header { visibility: hidden; }
	.as-header__bar { visibility: visible; }
	html.as-js .as-pre { visibility: hidden; }
	html.as-js .as-pre > * { visibility: visible; }
}
.as-pre__mark {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--as-bianco);
	font-size: clamp(28px, 4vw, 52px);
	font-weight: 300;
	letter-spacing: -.025em;
}
.as-pre__mark em { font-style: normal; font-weight: 200; color: var(--as-grigio-display); }
.as-pre__cnt {
	position: absolute;
	right: clamp(18px, 3vw, 36px);
	bottom: 16px;
	color: var(--as-grigio-testo-inv);
	font-size: var(--as-type-meta);
	letter-spacing: .04em;
}

/* ── Prossima pagina (overscroll-to-next, ridisegnato 17/08) ─────────────
   Banda IN PAGINA a fine footer: si vede, si legge, si CLICCA — e in più
   si può "caricare" continuando a scorrere (barra arancio in scaleX).
   Niente più barra fixed invisibile: l'affordance viene prima del gesto. */
.as-next {
	padding-block: var(--as-sp-6) var(--as-sp-5);
	border-top: 1px solid var(--as-line);
	display: grid;
	gap: var(--as-sp-3);
}
/* v0.38 (29/09): la banda si vede SOLO dove c'è una pagina dopo (catena home →
   progetti → studio → contatti). Sulle altre motion.js la lascia `hidden`, ma
   il display di qui e di `.as-footer__lastra .as-next` batteva la regola del
   browser: su 13 pagine su 16 c'era una banda senza titolo che portava a «#». */
.as-next[hidden] { display: none !important; /* deroga motivata: [hidden] deve vincere sui display di sopra */ }
.as-next__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--as-sp-4);
	text-decoration: none;
	color: var(--as-ink);
}
.as-next__title { font-size: var(--as-type-card); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
/* Barra e riempimento in BLOCCO, sempre: dalla v0.27.3 sono <span> dentro il
   link, e su un elemento in linea transform e height non fanno nulla: la
   barra non si riempiva più (Rami, 27/09, dal vivo). */
.as-next__bar { display: block; height: 2px; background: var(--as-line); overflow: hidden; }
.as-next__fill {
	display: block;
	height: 100%;
	background: var(--as-arancio);
	transform: scaleX(0);
	transform-origin: left;
}
.as-next__hint { color: var(--as-muted); }

/* ── Cursore (v0.3.1: COPIA della demo W&S-06, coi colori dal fondo) ────
   Punto 6px fedele (quickTo .1s) + anello 38px che insegue (.4s power3).
   Sui link/bottoni: anello scala 1.5, punto sparisce. Sulle card
   (data-cursor="apri"): anello PIENO bianco con label «Apri», scala 2.4,
   blend normale — niente negativi (lezione della demo stessa e di Rami).
   Il colore segue il fondo via html.as-cur-dark (mai blend difference). */
.as-cur-dot, .as-cur-ring {
	position: fixed;
	top: 0; left: 0;
	z-index: 100;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0;
}
.as-cur-dot {
	width: 6px; height: 6px;
	margin: -3px 0 0 -3px;
	background: var(--as-carbone);
}
.as-cur-ring {
	width: 38px; height: 38px;
	margin: -19px 0 0 -19px;
	border: 1px solid rgba(10, 10, 10, .75);
	display: flex;
	align-items: center;
	justify-content: center;
}
html.as-cur-dark .as-cur-dot { background: var(--as-bianco); }
html.as-cur-dark .as-cur-ring { border-color: rgba(255, 255, 255, .8); }
.as-cur-ring span {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--as-carbone);
	opacity: 0;
}
/* Stato pieno (card «Apri»): FUORI da ogni blend — bianco con label ink. */
.as-cur-ring.is-filled {
	background: var(--as-bianco);
	border-color: rgba(10, 10, 10, .4);
}
.as-cur-ring.is-filled span { color: var(--as-carbone); }
/* Assorbito su un controllo: la forma segue il raggio del controllo
   (inline dal JS) e in Chromium anche la curva squircle. */
@supports (corner-shape: squircle) {
	.as-cur-ring.is-snap { corner-shape: squircle; }
	/* v0.25: sui controlli tondi (torna su, controlli delle card, icone tonde)
	   l'anello resta un cerchio: copia la curva del controllo (motion.js). */
	.as-cur-ring.is-snap.is-tondo { corner-shape: round; }
}
/* Il puntatore NATIVO resta SEMPRE visibile (come nella demo W&S-06,
   richiesta esplicita di Rami): punto e anello sono un accompagnamento,
   non un rimpiazzo. Niente cursor:none da nessuna parte. */
@media (hover: none), (pointer: coarse) {
	.as-cur-dot, .as-cur-ring { display: none; }
}

/* ── Scroll-hint hero (testo essenziale, pattern Exo Ape) ──────────────── */
.as-hint {
	font-size: var(--as-type-meta);
	letter-spacing: .04em;
	color: var(--as-muted);
}

/* ── I BLOCCHI SCURI (v0.22, Rami 25/09: «lo sfondo cambia più volte nello
   stesso viewport», «in modo secco») ──────────────────────────────────────
   Fino alla v0.21 il COLOR FLOOD sfumava l'intera pagina nel fondo della
   sezione attiva (tween dei token sul root al 55% del viewport). Ora ogni
   sezione data-fondo="carbone" è un BLOCCO PIENO coi token locali (come
   .as-carbone) e i passaggi sono geometrici: la marea nella hero, le gocce ai
   bordi dei blocchi (home.js). Con e senza JS la resa è la stessa. motion.js
   marca solo html[data-fondo-now] (chi sta sotto l'header) per la barra. */
[data-fondo="carbone"] {
	--as-bg:    var(--as-carbone);
	--as-ink:   var(--as-bianco);
	--as-sup:   var(--as-superficie-c);
	--as-line:  var(--as-filo-c);
	--as-muted: var(--as-grigio-testo-inv);
	background: var(--as-bg);
	color: var(--as-ink);
	/* Un pixel di carbone sotto il bordo: due blocchi scuri adiacenti, mossi
	   dallo smoother a coordinate frazionarie, lasciavano una riga chiara
	   di anti-aliasing sul bianco della pagina (misurato al banco, 25/09).
	   v0.23.9 (Rami: «righe sottili bianche tra hero e prove, e tra dimentica
	   e come lavoro, solo mentre si scorre»): la stessa riga c'è anche SOPRA,
	   quando il blocco scuro segue una sezione che è bianca di base e viene
	   annerita da una marea (la hero, Dimentica): il bordo sotto la marea
	   non è del blocco che sta sopra, quindi non lo copre nessuno. Il blocco
	   scuro si allunga di 2px anche verso l'alto: dove sopra c'è del bianco
	   il bordo si sposta di 2px, dove c'è del nero non cambia niente.
	   Misurato con fotogrammi presi durante il glide dello smoother
	   (banco/sonda-righe.js): 19 fotogrammi su 64 con la riga, dopo zero. */
	box-shadow: 0 -2px 0 0 var(--as-carbone), 0 1px 0 0 var(--as-carbone);
}

/* Regole discrete che seguono il fondo corrente (non sfumabili): */
html[data-fondo-now="carbone"] ::selection { background: var(--as-bianco); color: var(--as-carbone); }
html[data-fondo-now="carbone"] .as-main .as-btn--pri,
html[data-fondo-now="carbone"] .as-footer .as-btn--pri { background: var(--as-arancio); color: var(--as-carbone); --as-btn-dot: var(--as-bianco); --as-btn-txt-hov: var(--as-carbone); --as-btn-dot-hov: var(--as-arancio); }
@media (hover: hover) {
	html[data-fondo-now="carbone"] .as-main .as-btn--pri:hover,
	html[data-fondo-now="carbone"] .as-footer .as-btn--pri:hover { background: var(--as-arancio-attivo); }
}

/* La parola ACCESA nei titoli sul carbone (DS §2 legge 3: la brace —
   una per titolo al massimo, mai sul bianco). */
[data-fondo="carbone"] .as-acceso,
.as-carbone .as-acceso { color: var(--as-arancio); font-weight: inherit; font-style: normal; }

/* ── Fascia arancio (punteggiatura: max una per pagina) ────────────────── */
.as-arancio-fondo {
	background: var(--as-arancio);
	color: var(--as-carbone);
}

/* ── Accordion domande (details nativo — usato dalle pagine servizio) ──── */
.as-domande__lista { margin-top: var(--as-sp-7); }
.as-domande__voce { border-bottom: 1px solid var(--as-line); }
.as-domande__voce:first-child { border-top: 1px solid var(--as-line); }
.as-domande__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--as-sp-4);
	padding-block: var(--as-sp-5);
	cursor: pointer;
	list-style: none;
}
.as-domande__q::-webkit-details-marker { display: none; }
.as-domande__q::marker { content: ""; }
.as-domande__q .as-title-card { transition: transform .5s var(--as-ease-out); }
/* v0.37: il più disegnato coi due tratti del set (1,6px, estremi tondi): aprendo,
   il verticale ruota e si posa sull'orizzontale, e resta il meno. */
.as-domande__segno { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.as-domande__segno::before, .as-domande__segno::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.6px; margin-top: -.8px; border-radius: 2px; background: currentColor; transition: transform .5s var(--as-ease-out); }
.as-domande__segno::after { transform: rotate(90deg); }
/* v0.56 (Rami, 22/10): sotto i 1000px il titolo delle domande è il bottone che apre tutta la lista (motion.js), col segno
   più grande accanto: + chiusa, − aperta. */
.as-domande__apri { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--as-sp-5); width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.as-domande__apri-t { min-width: 0; }
.as-domande__segno--tutte { width: 30px; height: 30px; margin-bottom: .18em; }
.as-domande__segno--tutte::before, .as-domande__segno--tutte::after { left: 4px; right: 4px; height: 2px; margin-top: -1px; }
.as-domande.is-aperte .as-domande__segno--tutte::after { transform: rotate(0deg); }
.as-domande__voce[open] .as-domande__segno::after { transform: rotate(0deg); }
.as-domande--vive .as-domande__voce[open]:not(.is-aperta) .as-domande__segno::after { transform: rotate(90deg); }
.as-domande--vive .as-domande__voce.is-aperta .as-domande__segno::after { transform: rotate(0deg); }
@media (hover: hover) { .as-domande__q:hover .as-title-card { transform: translateX(6px); } }
.as-domande__corpo { overflow: hidden; }
.as-domande__a { margin: 0; padding-bottom: var(--as-sp-5); }
/* v0.84 (01/11, la pagina /faq/): in fondo alla lista i link alle pagine dei servizi (sulla pagina delle FAQ) o alla
   pagina delle FAQ (sulle altre pagine). Come «Tutti gli articoli» del footer: la parola e il cerchio arancio con la
   freccia, che in hover ruota e si riempie. La ricerca della pagina /faq/ nasconde le domande che non c'entrano. */
.as-domande__oltre { list-style: none; margin: var(--as-sp-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--as-sp-2) var(--as-sp-6); }
.as-domande__vai { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--as-ink); text-decoration: none; }
.as-domande__vaichip { width: 28px; height: 28px; border-radius: var(--as-r-pill); border: 1.5px solid var(--as-arancio); display: inline-flex; align-items: center; justify-content: center; color: var(--as-arancio); flex-shrink: 0; transition: transform .36s var(--as-ease-out), background .35s var(--as-ease-out), color .35s var(--as-ease-out); }
@media (hover: hover) { .as-domande__vai:hover .as-domande__vaichip { transform: rotate(45deg); background: var(--as-arancio); color: var(--as-carbone); } }
.as-domande__vai:focus-visible .as-domande__vaichip { transform: rotate(45deg); background: var(--as-arancio); color: var(--as-carbone); }
.as-domande[hidden], .as-domande__voce[hidden] { display: none; }
.as-domande__voce.is-primo { border-top: 1px solid var(--as-line); }
/* v0.38 (29/09). Da computer due colonne come «Ti è mai successo?»: titolo a sinistra, lista a
   destra, il più vicino alla domanda (prima le righe erano larghe 1.268px e l'occhio
   attraversava lo schermo per trovarlo). Da telefono righe da almeno 64px, domanda con
   l'interlinea per le due righe, risposta a 17px. */
/* v0.53: da computer il titolo resta fermo mentre la lista scorre (pin di motion.js): ScrollTrigger lo
   avvolge in un .pin-spacer, quindi le regole valgono anche per il titolo dentro lo spacer. */
@media (min-width: 1000px) {
	.as-domande > .as-container:has(> h2, > .pin-spacer > h2) { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); column-gap: var(--as-sp-8); align-items: start; }
	.as-domande > .as-container:has(> h2, > .pin-spacer > h2) > h2,
	.as-domande > .as-container > .pin-spacer > h2 { margin: 0; text-wrap: balance; }
	.as-domande .as-container .as-domande__lista { margin-top: 0; }
}
@media (max-width: 699px) {
	.as-domande__lista { margin-top: var(--as-sp-6); }
	.as-domande__q { min-height: 64px; padding-block: 18px; }
	.as-domande__q .as-title-card { line-height: 1.3; }
	.as-domande .as-domande__a { font-size: 17px; line-height: 1.6; padding-bottom: 22px; }
}

/* ── Testo lungo (privacy, articoli): misura 66ch, ritmo di lettura ────── */
.as-testo-lungo {
	margin-top: var(--as-sp-7);
	max-width: var(--as-measure);
	display: grid;
	gap: var(--as-sp-4);
}
.as-testo-lungo h2 { font-size: var(--as-type-display-sm); font-weight: 400; letter-spacing: -.025em; margin-top: var(--as-sp-5); }
.as-testo-lungo h3 { font-size: var(--as-type-lede); font-weight: 500; margin-top: var(--as-sp-4); }
.as-testo-lungo a { text-decoration: underline; text-underline-offset: 3px; }
.as-testo-lungo img { border-radius: calc(var(--as-r-card) * var(--as-brm)); }

/* Utility di spazio usate dai partial condivisi (niente stili inline). */
.as-mt-2 { margin-top: var(--as-sp-2); }
.as-mt-6 { margin-top: var(--as-sp-6); }

/* ── CONOSCIAMOCI (due colonne editoriali sul carbone): la fine della home e,
   dalla v0.24, la pagina /contatti/ intera (.as-conosciamoci--pagina). ── */
/* v0.23.1 (Rami): il form sta in UN viewport e respira dalla colonna del testo. */
.as-conosciamoci { min-height: 100svh; display: flex; align-items: center; padding-block: clamp(2.5rem, 6vh, 5rem); }
.as-conosciamoci > .as-container { width: 100%; }
.as-conosciamoci__grid { display: grid; gap: var(--as-sp-7); }
@media (min-width: 1000px) {
	.as-conosciamoci__grid { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr); column-gap: clamp(56px, 8vw, 140px); align-items: center; }
}
/* v0.23.5 (Rami: «le colonne sono sovrapposte»): non riprodotto a nessuna
   larghezza né in Chrome né in WebKit con la sonda del banco (sempre 80-115px
   di distanza), ma le celle di un grid ereditano `min-width: auto`, cioè il
   contenuto minimo dei loro figli: un form ricco (select, fieldset) è il
   caso classico in cui questo sfora la traccia e scavalca la colonna
   accanto. Azzerato per sicurezza su entrambe le celle. */
.as-conosciamoci__testa, .as-conosciamoci__form { min-width: 0; }
/* v0.23.7 (terza segnalazione di Rami, la stessa cosa): il fix sopra non
   bastava perché non era la causa. «Conosciamoci.» è UNA PAROLA sola, senza
   spazi: a `--as-type-display-md` (fino a 88px) il testo vero (misurato nel
   banco) tocca il bordo della colonna .8fr con pochissimo margine, e basta un
   millimetro in più — un font di scorta mentre Archivo carica, un pixel di
   differenza tra Chrome e il Chromium del banco — perché sfori senza che
   nessuna metrica di grid lo impedisca: non è un contenitore che si stira, è
   UNA SCRITTA che dipinge oltre il proprio riquadro, e min-width:0 non c'entra
   con quello. Due reti, non una sola: il titolo qui prende una taglia sua,
   più piccola e con margine vero rispetto alla colonna; overflow-wrap come
   ultima rete, nel caso peggiore va a capo dentro la parola piuttosto che
   uscire. */
.as-conosciamoci__testa .as-display-md { font-size: clamp(30px, 3.6vw, 60px); overflow-wrap: anywhere; }
.as-conosciamoci__testo { margin-top: var(--as-sp-5); color: var(--as-muted); }
/* v0.38 (29/09, DIREZIONE-MOBILE): la taglia ridotta qui sopra serve SOLO
   nella colonna .8fr del desktop. Sotto i 1000px c'è una colonna sola larga
   quanto la pagina, e il titolo della pagina che converte era il più piccolo
   del sito da telefono (30px contro i 40 di ogni altro H1): torna al token,
   come gli H1 delle altre pagine (40px a 390, 46 a 768). */
@media (max-width: 999px) {
	.as-conosciamoci__testa .as-display-md { font-size: var(--as-type-display-md); }
	.as-conosciamoci__testo { margin-top: var(--as-sp-4); }
}
/* Da telefono la sezione non si centra in uno schermo intero: il contenuto è
   comunque più alto di uno schermo, e il centrare lasciava 50px sopra il
   titolo anche dove la sezione precedente ne lascia già. */
@media (max-width: 699px) {
	.as-conosciamoci { min-height: auto; align-items: flex-start; }
	.as-conosciamoci__grid { gap: var(--as-sp-6); }
}

/* ── LA RUOTA DEI MESTIERI (v0.24 su /progetti/, v0.31 anche in home) ── */
.as-ruota__didascalia { margin-top: var(--as-sp-4); color: var(--as-muted); }
/* La ruota ferma (senza JS): i mestieri a righe, in solo contorno. */
.as-ruota {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .1em .45em;
	font-size: clamp(28px, 3.4vw, 52px);
	font-weight: 300;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: transparent;
	-webkit-text-stroke: 1px var(--as-ink);
}
.as-ruota--viva { position: relative; }
/* Viva (motion.js): il cilindro. La prospettiva la calcola lo script in 2D
   (v0.33: col 3D del CSS Chrome storceva la ruota della home, Errori §1.43):
   ogni voce sta al centro della lista e lo script la sposta, la schiaccia e
   la rimpicciolisce; si riempie quanto più è davanti (--as-fronte, 0-1). */
.as-ruota--viva .as-ruota {
	position: relative;
	display: block;
	/* Alta quanto il cilindro visibile (±90° = ±un raggio), non di più:
	   la didascalia resta attaccata alla ruota. */
	height: calc(var(--as-ruota-r, 170px) * 2.1);
	font-size: clamp(40px, 5.2vw, 84px);
	-webkit-text-stroke: 1px color-mix(in srgb, var(--as-ink) 45%, transparent);
}
.as-ruota--viva .as-ruota__voce {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1.2em;
	margin-top: -.6em;
	line-height: 1.2;
	white-space: nowrap;
	transform-origin: 50% 50%;
	will-change: transform, opacity;
	color: color-mix(in srgb, var(--as-ink) calc(var(--as-fronte, 0) * 100%), transparent);
}
/* Sul desktop la ruota sta al centro della sua colonna; da telefono resta a
   sinistra come la pagina, e ogni voce si schiaccia verso sinistra. */
@media (min-width: 1000px) {
	.as-ruota--viva .as-ruota__voce, .as-ruota--viva .as-cantiere__didascalia, .as-ruota--viva .as-ruota__didascalia { text-align: center; }
}
@media (max-width: 999px) {
	.as-ruota--viva .as-ruota__voce { transform-origin: 0 50%; }
}

/* ── 404 e GRAZIE (v0.24): scena notturna a schermo intero ─────────────── */
.as-404 {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: clip;
}
.as-404__testa { position: relative; z-index: 1; width: 100%; display: grid; gap: var(--as-sp-5); justify-items: start; }
/* v0.38 (29/09): l'H1 è in .as-display-md (al massimo 88px, regola di Rami;
   era display-lg, 130px a 1440). */
.as-404__testa .as-display-lg, .as-404__testa .as-display-md { max-width: 14ch; }
.as-404__testa .as-lede { max-width: 42ch; color: var(--as-muted); }
.as-404__testa p { margin: 0; }
/* Il numero dietro: enorme, in solo contorno. v0.38: non più tagliato di netto
   dal fondo della sezione (una riga orizzontale in mezzo al nero sembrava un
   errore di disegno) ma SFUMATO nel buio, e allineato al margine destro della
   pagina invece di sbordare di 20px (un taglio troppo piccolo per sembrare
   voluto). */
.as-404__numero {
	position: absolute;
	right: var(--as-gutter);
	bottom: -.2em;
	font-size: clamp(220px, 42vw, 640px);
	font-weight: 200;
	line-height: 1;
	letter-spacing: -.05em;
	color: transparent;
	-webkit-text-stroke: 1.5px color-mix(in srgb, var(--as-ink) 22%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 82%);
	mask-image: linear-gradient(to bottom, #000 30%, transparent 82%);
	pointer-events: none;
	user-select: none;
}
/* Da telefono (DIREZIONE-MOBILE): niente schermo intero con tre righe
   centrate nel vuoto (300px di nero sopra il titolo, 230 sotto il bottone).
   La scena parte dall'alto (32px sotto la barra, regola della prima sezione),
   è alta quanto il suo contenuto, e il 404 sta DIETRO il titolo, in alto a
   destra, invece che sotto il bottone a fare un secondo schermo vuoto. */
@media (max-width: 699px) {
	.as-404 { align-items: flex-start; min-height: auto; padding-bottom: var(--as-sect); }
	.as-404__numero {
		top: calc(var(--as-header-h) + var(--as-sp-2));
		bottom: auto;
		font-size: 46vw;
		-webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
	}
}

/* ── GRAZIE: la spunta in contorno (v0.38, 29/09), gemella del «404» ──
   Da desktop la metà destra della conferma era vuota. Ora c'è un cerchio in
   contorno col filo del 404 e la spunta arancio dentro, che si disegnano da
   soli all'arrivo (animazione CSS: senza JS gira lo stesso). Da telefono sta
   dietro il titolo, in alto a destra, come il 404. */
.as-grazie__segno {
	position: absolute;
	right: var(--as-gutter);
	top: 50%;
	translate: 0 -50%;
	width: clamp(240px, 30vw, 460px);
	height: auto;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}
.as-grazie__cerchio {
	stroke: color-mix(in srgb, var(--as-ink) 22%, transparent);
	stroke-width: .7;
	stroke-dasharray: 1;
	animation: as-grazie-traccia 1.6s var(--as-ease-out, cubic-bezier(.22, 1, .36, 1)) .2s both;
}
.as-grazie__spunta {
	stroke: var(--as-arancio);
	stroke-width: 2.4;
	stroke-dasharray: 1;
	animation: as-grazie-traccia .7s var(--as-ease-out, cubic-bezier(.22, 1, .36, 1)) 1.2s both;
}
@keyframes as-grazie-traccia { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* Da telefono dietro il titolo incrociava il testo: diventa il segno piccolo
   della conferma, SOPRA il titolo, a filo del margine sinistro (56px). */
@media (max-width: 699px) {
	.as-main > section.as-grazie.as-404:first-child { padding-top: calc(max(96px, calc(var(--as-header-h) + 32px)) + 56px + var(--as-sp-5)); } /* sopra la regola della prima sezione */
	.as-grazie__segno {
		top: max(96px, calc(var(--as-header-h) + 32px));
		left: var(--as-gutter);
		right: auto;
		translate: none;
		width: 56px;
	}
	.as-grazie__cerchio { stroke-width: 5; stroke: color-mix(in srgb, var(--as-ink) 30%, transparent); }
	.as-grazie__spunta { stroke-width: 9; }
}
/* Su /contatti/ e /grazie/ l'invito «Conosciamoci» dell'header porterebbe alla
   pagina in cui si è già: si nasconde senza far saltare la griglia. Solo CSS
   (:has sul container di barba), quindi segue anche i cambi pagina PJAX. */
html:has(.as-main[data-barba-namespace="contatti"]) .as-header__cta,
html:has(.as-main[data-barba-namespace="grazie"]) .as-header__cta { visibility: hidden; pointer-events: none; }

/* ══ I COMPONENTI CINEMATOGRAFICI DI SITO (v0.22, nati nella home il 25/09
   e promossi qui: ogni pagina ne monta almeno tre). Il movimento lo dà
   motion.js (bootEffetti); senza JS ogni pezzo è fermo e intero. ══ */

/* ── L'APERTURA senza foto: titolo e lede (contatti e simili). */
.as-apertura { padding-bottom: calc(var(--as-sect-hero) * .35); }
.as-apertura__lede { margin-top: var(--as-sp-5); }

/* ── LA FINESTRA (v0.24, Rami: «parola chiave: immersione») ────────────────
   La foto sta DIETRO la pagina e il titolo la lascia vedere da una finestra;
   scorrendo (pagina ferma) la finestra si spalanca a tutto schermo, sopra
   compare la promessa in bianco, poi la sezione dopo sale sopra la foto
   ferma con la cupola. Il movimento è di motion.js (data-as-finestra), che aggiunge
   .as-finestra--viva solo con un puntatore (hover): è lui a portare il
   layout immersivo. Di base (touch, e senza JS) la sezione è in COLONNA:
   titolo, lede, foto intera. */
.as-finestra { position: relative; padding-bottom: var(--as-sect); }
.as-finestra__palco {
	display: flex;
	flex-direction: column;
	gap: var(--as-sp-7);
}
.as-finestra__testa { width: 100%; }
.as-finestra__titolo { max-width: 18ch; }
.as-finestra__lede { margin-top: var(--as-sp-5); max-width: 44ch; }
.as-finestra__foto {
	--as-r-out: calc(var(--as-r-card-lg) * var(--as-brm));
	position: relative;
	margin: 0 var(--as-gutter);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--as-r-out);
	background: var(--as-carbone);
}
@supports (corner-shape: squircle) { .as-finestra__foto { corner-shape: squircle; } }
.as-finestra__foto picture { display: contents; } /* v0.72: la foto da telefono (foto_m) passa da <picture>, l'img resta figlia diretta per il layout */
.as-finestra__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 55%;
}
/* v0.111: il video della hero, sopra il suo fermo immagine (stesse misure, stesso centro per l'apertura di motion.js) */
.as-finestra__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 55%; }
/* Il velo (v0.38, 29/09): misurato perché la promessa bianca si legga anche
   sulle foto chiare e su quelle nuove a colori. Prima scuriva solo il fondo
   (.15 → .72) e la frase, che sta nel terzo basso a sinistra, cadeva su muri
   chiari e schizzi a matita (contrasto 2,3:1). Ora: un fondo leggero su tutta
   la foto, la sfumatura che sale dal basso e una macchia ancorata in basso a
   sinistra, sotto la frase. */
.as-finestra__velo {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(95% 85% at 0% 100%, rgba(10, 10, 10, .56) 0%, rgba(10, 10, 10, .3) 45%, rgba(10, 10, 10, 0) 75%),
		linear-gradient(180deg, rgba(10, 10, 10, .14) 0%, rgba(10, 10, 10, .2) 38%, rgba(10, 10, 10, .52) 70%, rgba(10, 10, 10, .78) 100%);
	opacity: 0;
}
.as-finestra__promessa { display: none; }
/* v0.38 (29/09, foto a colori): all'ombra larga se ne aggiunge una stretta, che
   stacca il filo delle lettere (peso 300) dai punti chiari (un neon, una finestra). */
.as-finestra__promessa p { text-shadow: 0 1px 3px rgba(10, 10, 10, .28), 0 2px 28px rgba(10, 10, 10, .4); }

/* IN COLONNA (touch, e senza JS) · v0.38 (29/09, DIREZIONE-MOBILE): la foto ha
   la sua promessa sul fondo, sopra il velo, e da telefono va da bordo a bordo.
   Il ritaglio (--as-fin-su: il sipario d'entrata dal basso; --as-fin-lato e
   --as-fin-r: incassata nei margini con gli angoli tondi) lo muove motion.js;
   senza JS le variabili non ci sono e la foto è intera e ferma. */
.as-finestra:not(.as-finestra--viva) .as-finestra__palco { position: relative; }
.as-finestra:not(.as-finestra--viva) .as-finestra__foto {
	clip-path: inset(var(--as-fin-su, 0%) var(--as-fin-lato, 0px) 0% var(--as-fin-lato, 0px) round var(--as-fin-r, 0px));
}
.as-finestra:not(.as-finestra--viva) .as-finestra__velo { opacity: 1; }
.as-finestra:not(.as-finestra--viva) .as-finestra__promessa {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding-bottom: clamp(28px, 4vw, 56px);
	pointer-events: none;
	color: var(--as-bianco);
}
.as-finestra:not(.as-finestra--viva) .as-finestra__promessa p {
	margin: 0 0 0 clamp(16px, 3vw, 40px);
	max-width: 15ch;
	font-size: var(--as-type-display-sm);
	font-weight: 300;
	line-height: 1.06;
	color: inherit;
}
@media (max-width: 899px) {
	/* Alta quanto basta a una persona intera, mai più di due terzi dello schermo
	   (sul tablet in verticale il 4:5 a tutta larghezza faceva 1000px di foto). */
	.as-finestra__foto { aspect-ratio: auto; height: min(125vw, 68svh); margin-inline: 0; border-radius: 0; }
	/* v0.71: viva anche da telefono (motion.js): la foto riempie il palco, non la misura da colonna */
	.as-finestra--viva .as-finestra__foto { height: auto; }
	.as-finestra:not(.as-finestra--viva) .as-finestra__promessa p { margin-left: 16px; }
	/* il taglio da telefono ('pos_m' di apertura.php e quadro.php): deve battere
	   l'object-position in linea del desktop, per questo !important (deroga motivata) */
	.as-finestra__foto img.as-pos-m, .as-quadro__cornice .as-pos-m { object-position: var(--as-pos-m) !important; }
}
@media (max-width: 699px) {
	/* Da telefono la foto chiude la sezione: niente ritmo in più sotto (si
	   sommava a quello della sezione dopo: 152px di bianco dopo la foto). */
	.as-finestra:not(.as-finestra--viva) { padding-bottom: 0; }
	.as-finestra:not(.as-finestra--viva) .as-finestra__palco { gap: var(--as-sp-6); }
}

/* Viva: pagina ferma, foto a tutto schermo DIETRO, finestra in clip-path
   (i valori li calcola motion.js dal titolo vero, --as-fin-*). Lo spazio per
   l'header lo tiene il palco: niente padding della «prima sezione» (98px di
   foto spostata in giù nel pin, misurato al banco). */
.as-main > section.as-finestra.as-finestra--viva:first-child, .as-finestra.as-finestra--viva { padding: 0; } /* specificità sopra .as-main > section:first-child:not(.as-hero) */
/* La sezione è alta il palco + la CORSA dell'apertura: il palco resta fermo
   (pin senza spazio aggiunto, motion.js) e la sezione dopo arriva quando la
   corsa è finita, salendogli sopra (.as-copre). Dietro: z 1; davanti: z 2. */
.as-finestra.as-finestra--viva { --as-fin-corsa: 110vh; height: calc(100vh + var(--as-fin-corsa)); position: relative; z-index: 1; }
.as-copre {
	position: relative;
	z-index: 2;
	background: var(--as-bg);
	overflow: clip;
	--as-goccia: 0px;
	border-radius: 50% 50% 50% 50% / var(--as-goccia) var(--as-goccia) var(--as-goccia2, 0px) var(--as-goccia2, 0px);
}
.as-finestra--viva .as-finestra__palco {
	position: relative;
	display: block;
	height: 100svh;
	height: 100lvh; /* v0.71: su touch il palco è fisso: alto quanto la finestra grande, così sotto non spunta il bianco quando Safari nasconde la barra */
	padding: 0;
	overflow: clip;
	background: var(--as-bg);
}
/* v0.84 (01/11, Errori 1.76): su touch il palco non è più un pin fixed di ScrollTrigger (dopo la barra di Safari o un secondo
   refresh il suo inizio saltava di migliaia di px e la foto tornava fissa oltre le domande di /servizi/). Lo tiene fermo il
   browser: palco sticky in cima, la sezione alta un palco in più e la sezione dopo (.as-copre) che risale di un palco, così
   le sale sopra allo stesso scroll di prima. Una finestra senza sezione dopo (--sola) resta alta com'era. Solo touch: da
   computer, sotto lo smoother, resta il pin a transform. */
@media (hover: none) {
	.as-finestra--viva.as-finestra--sticky .as-finestra__palco { position: sticky; top: 0; }
	/* v0.87.5 (Rami: «è lo stesso problema che hai risolto nella sezione coi quattro settori»): Safari 26 colora le sue barre
	   (sopra e sotto) col fondo dello strato FERMO che trova ai bordi. Il palco della foto, fermo col suo fondo bianco dietro
	   la sezione nera che gli sale sopra (Landing page), faceva saltare le barre tra bianco e nero mentre si scorreva: i
	   «lampi bianchi». Come i palchi fissati della home e il binario di /servizi/ (base.css «Safari su iPhone», servizi.css):
	   il contenitore è nascosto e i figli, tutti posizionati, restano visibili. Il bianco intorno alla finestra lo dà la pagina. */
	.as-finestra--viva.as-finestra--sticky .as-finestra__palco { visibility: hidden; }
	.as-finestra--viva.as-finestra--sticky .as-finestra__palco > * { visibility: visible; }
	.as-finestra--viva.as-finestra--sticky:not(.as-finestra--sola) { height: calc(100vh + var(--as-fin-corsa) + 100lvh); }
	.as-finestra--viva.as-finestra--sticky:not(.as-finestra--sola) + .as-copre { margin-top: -100lvh; }
}
.as-finestra--viva .as-finestra__foto {
	position: absolute;
	inset: 0;
	margin: 0;
	aspect-ratio: auto;
	border-radius: 0;
	z-index: 1;
	clip-path: inset(var(--as-fin-t, 58%) var(--as-fin-r, 8%) var(--as-fin-b, 7%) var(--as-fin-l, 8%) round var(--as-fin-raggio, 28px));
}
.as-finestra--viva .as-finestra__testa {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--as-sect-hero) * .9);
	z-index: 2;
	margin-inline: auto;
}
.as-finestra--viva .as-finestra__titolo { max-width: 20ch; }
/* v0.38 (29/09): sugli schermi bassi (portatili 1280×720, 1366×768) titolo e
   lede lasciavano alla finestra meno di un quinto dello schermo, e la finestra
   copriva l'ultima riga della lede. Il titolo scende col lato corto dello
   schermo (68px a 720 invece di 77): la finestra parte sempre sotto la lede. */
@media (max-height: 820px) {
	.as-finestra--viva .as-finestra__titolo { font-size: min(var(--as-type-display-md), 9.5vh); }
}
.as-finestra--viva .as-finestra__promessa {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(56px, 12vh, 140px);
	z-index: 3;
	margin-inline: auto;
	pointer-events: none;
	color: var(--as-bianco);
}
.as-finestra--viva .as-finestra__promessa p { margin: 0; max-width: 16ch; color: inherit; }
/* Su touch (v0.101, Rami 04/11: «la frase va a scatti quando scrollo»): la frase non segue più lo scroll fotogramma per fotogramma
   (il palco sticky lo muove Safari, la frase la muoveva lo script: fuori tempo). Entra a tempo quando la foto è aperta
   (.is-promessa, motion.js) e se ne va a tempo quando la sezione dopo si affaccia (.is-promessa-via). Solo opacità e
   trasformazione: le muove la scheda grafica, non lo script. */
.as-finestra--viva.as-finestra--sticky .as-finestra__promessa { transition: opacity .45s ease, transform .7s var(--as-ease-out); will-change: transform, opacity; }
.as-finestra--viva.as-finestra--sticky .as-finestra__promessa p { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .8s ease, transform 1.1s var(--as-ease-out); }
.as-finestra--viva.as-finestra--sticky.is-promessa .as-finestra__promessa p { opacity: 1; transform: none; }
.as-finestra--viva.as-finestra--sticky.is-promessa-via .as-finestra__promessa { opacity: 0; transform: translate3d(0, -40px, 0); }

/* ── LE TACCHE d'avanzamento (una per passo; si riempie con --as-tacca, che
   motion.js anima SULLA TACCA: lo pseudo la eredita, Errori §1.22). ── */
.as-tacche { display: flex; gap: 6px; width: min(220px, 40%); }
.as-tacche i { --as-tacca: 0; position: relative; flex: 1; height: 2px; overflow: hidden; background: var(--as-line); }
.as-tacche i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--as-ink);
	transform: scaleX(var(--as-tacca));
	transform-origin: left center;
}

/* ── IL PERCORSO (v0.37, al posto del racconto): le voci come righe di una
   tabella al buio, numero · titolo · testo. Nessuna pagina ferma: ogni riga si
   accende arrivando a metà schermo (.is-accesa, motion.js), il filo in alto si
   disegna e il numero si riempie d'arancio. Il titolo va a capo nella sua
   colonna. Senza JS (e senza .as-percorso--vivo) tutto è acceso. */
.as-percorso {
	--as-goccia: 0px;
	--as-goccia2: 0px;
	position: relative;
	overflow: clip;
	border-radius: 50% 50% 50% 50% / var(--as-goccia) var(--as-goccia) var(--as-goccia2) var(--as-goccia2);
}
.as-percorso__palco { padding-block: var(--as-sect); }
.as-percorso__testa { display: grid; gap: var(--as-sp-5); margin-bottom: clamp(32px, 4.5vw, 64px); }
@media (min-width: 1000px) {
	.as-percorso__testa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--as-sp-8); }
}
.as-percorso__titolo { margin: 0; max-width: 14ch; }
.as-percorso__sotto { margin: 0; max-width: 40ch; color: var(--as-muted); }
.as-percorso .as-percorso__passi { list-style: none; margin: 0; padding: 0; }
.as-percorso__passo { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; row-gap: 10px; padding-block: clamp(26px, 3vw, 40px); }
.as-percorso__passo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .16); transform-origin: left center; transition: transform 1.1s var(--as-ease-out); }
.as-percorso__passo:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.as-percorso__n { grid-row: 1 / span 2; font-size: 48px; font-weight: 300; line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; transition: color .6s ease, -webkit-text-stroke-color .6s ease; }
.as-percorso__nome { margin: 0; font-size: clamp(26px, 2.5vw, 38px); font-weight: 300; line-height: 1.12; letter-spacing: -.025em; color: var(--as-ink); }
.as-percorso__testo { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--as-muted); }
.as-percorso__nome, .as-percorso__testo { transition: opacity .7s ease, transform .9s var(--as-ease-out); }
@media (min-width: 1000px) {
	.as-percorso__passo { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--as-sp-7); align-items: start; }
	.as-percorso__n { grid-row: auto; font-size: 64px; }
	.as-percorso__testo { padding-top: .45em; }
}
.as-percorso__passo.is-accesa .as-percorso__n { color: var(--as-arancio); -webkit-text-stroke-color: var(--as-arancio); }
.as-percorso--vivo .as-percorso__passo::before { transform: scaleX(0); }
.as-percorso--vivo .as-percorso__passo .as-percorso__nome,
.as-percorso--vivo .as-percorso__passo .as-percorso__testo { opacity: .28; transform: translateY(14px); }
.as-percorso--vivo .as-percorso__passo.is-vista::before { transform: scaleX(1); }
.as-percorso--vivo .as-percorso__passo.is-vista .as-percorso__nome,
.as-percorso--vivo .as-percorso__passo.is-vista .as-percorso__testo { opacity: 1; transform: none; }
.as-percorso--vivo .as-percorso__passo.is-vista .as-percorso__testo { transition-delay: .08s; }
/* Da telefono (v0.38, 29/09): la colonna del numero (64+18px) si mangiava un quarto della
   larghezza e un testo di due righe ne faceva quattro. Numero e titolo sulla stessa riga
   (numero 32px, cifre tabellari), testo sotto a tutta larghezza, righe da 22px. */
@media (max-width: 699px) {
	.as-percorso__palco { padding-bottom: 48px; } /* la «pancia»: sotto l'ultima riga solo il respiro, la curva fa il resto */
	.as-percorso__testa { margin-bottom: 28px; }
	.as-percorso__passo { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 8px; padding-block: 22px; align-items: baseline; }
	.as-percorso__n { grid-row: auto; font-size: 32px; line-height: 1; -webkit-text-stroke-width: .8px; }
	.as-percorso__nome { font-size: 24px; line-height: 1.2; }
	.as-percorso__testo { grid-column: 1 / -1; max-width: none; font-size: 16px; line-height: 1.55; }
}
/* L'ENTRATA DA TELEFONO (v0.101, Rami 04/11: «da mobile rendila sempre in lista verticale sì, ma con un'animazione wow di entrata
   per ogni punto»). Ogni riga, quando entra nello schermo (.is-vista, motion.js; a cascata se ne entrano più insieme, --rit):
   la riga si raddrizza salendo, il filo si disegna in arancio e poi si raffredda, il numero sale da dietro una linea e si riempie
   d'arancio dal basso, il titolo sale da dietro il suo bordo, il testo arriva per ultimo. Tutto a tempo, niente legato al dito
   (su iPhone le animazioni trascinate dallo scroll vanno a scatti). Senza JS (niente .as-percorso--vivo) le righe sono ferme. */
@media (max-width: 699px) {
	.as-percorso--vivo .as-percorso__passi { perspective: 900px; }
	.as-percorso--vivo .as-percorso__passo { --rit: 0s; opacity: 0; transform: translate3d(0, 48px, 0) rotateX(-16deg); transform-origin: 50% 0; transition: opacity .7s ease var(--rit), transform 1.15s var(--as-ease-out) var(--rit); }
	.as-percorso--vivo .as-percorso__passo.is-vista { opacity: 1; transform: none; }
	.as-percorso--vivo .as-percorso__passo::before { background: var(--as-arancio); transition: transform 1s var(--as-ease-out) calc(var(--rit) + .12s), background-color 1s ease calc(var(--rit) + 1.4s); }
	.as-percorso--vivo .as-percorso__passo.is-vista::before { background: rgba(255, 255, 255, .16); }
	.as-percorso--vivo .as-percorso__n { position: relative; display: inline-block; font-size: 40px; clip-path: inset(0 -10% 100% -10%); transform: translate3d(0, 60%, 0); transition: clip-path .95s var(--as-ease-out) calc(var(--rit) + .14s), transform .95s var(--as-ease-out) calc(var(--rit) + .14s); }
	.as-percorso--vivo .as-percorso__passo.is-vista .as-percorso__n { clip-path: inset(-20% -10% -20% -10%); transform: none; }
	.as-percorso--vivo .as-percorso__n::after { content: attr(data-n); position: absolute; inset: 0; color: var(--as-arancio); -webkit-text-stroke-color: var(--as-arancio); clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .25, 1) calc(var(--rit) + .6s); }
	.as-percorso--vivo .as-percorso__passo.is-vista .as-percorso__n::after { clip-path: inset(-20% -10% -20% -10%); }
	/* da telefono il numero lo riempie l'arancio che sale (::after): l'accensione a metà schermo lo colorava di colpo prima */
	.as-percorso--vivo .as-percorso__passo.is-accesa .as-percorso__n { color: transparent; -webkit-text-stroke-color: rgba(255, 255, 255, .55); }
	.as-percorso--vivo .as-percorso__passo .as-percorso__nome { opacity: 1; transform: none; clip-path: inset(-.15em -.3em -.3em -.3em); }
	.as-percorso--vivo .as-percorso__nome > span { display: block; transform: translate3d(0, 115%, 0); transition: transform 1.05s var(--as-ease-out) calc(var(--rit) + .24s); }
	.as-percorso--vivo .as-percorso__passo.is-vista .as-percorso__nome > span { transform: none; }
	.as-percorso--vivo .as-percorso__passo .as-percorso__testo { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .8s ease calc(var(--rit) + .5s), transform 1s var(--as-ease-out) calc(var(--rit) + .5s); }
	.as-percorso--vivo .as-percorso__passo.is-vista .as-percorso__testo { opacity: 1; transform: none; }
}

/* ── LO SFOGLIO (v0.24; v0.33.2 senza pagina ferma: la voce si apre col
   mouse sul titolo). Di base (touch, senza JS) in colonna, foto sopra ogni
   voce; .as-sfoglio--viva (motion.js, con un puntatore): nomi enormi a
   sinistra, uno acceso; a destra la foto alta quanto la lista, che cambia a
   sipario. La sezione scorre come le altre. */
.as-sfoglio__griglia { display: grid; gap: var(--as-sp-7); }
.as-sfoglio__testa {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: var(--as-sp-4);
	row-gap: var(--as-sp-4);
}
/* Titolo e contatore sulla prima riga (il titolo lungo va a capo dentro la
   sua colonna, non spinge il contatore); la riga sotto il titolo (lo studio)
   prende la seconda riga intera. Posti fissi: l'ordine nel DOM non conta. */
.as-sfoglio__titolo { margin: 0; grid-column: 1; grid-row: 1; }
.as-sfoglio__conta { grid-column: 2; grid-row: 1; }
.as-sfoglio__lede { grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: 34ch; color: var(--as-muted); }
.as-sfoglio__conta { display: none; font-variant-numeric: tabular-nums; }
.as-sfoglio__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--as-sp-7); }
.as-sfoglio__voce { display: grid; gap: var(--as-sp-4); }
.as-sfoglio__foto {
	--as-r-out: calc(var(--as-r-card-lg) * var(--as-brm));
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--as-r-out);
	background: var(--as-sup);
}
@supports (corner-shape: squircle) { .as-sfoglio__foto { corner-shape: squircle; } }
.as-sfoglio__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-sfoglio__link { display: grid; gap: var(--as-sp-2); color: var(--as-ink); text-decoration: none; }
.as-sfoglio__n { color: var(--as-muted); }
.as-sfoglio__nome { font-size: var(--as-type-display-sm); font-weight: 300; letter-spacing: -.03em; line-height: 1.02; }
.as-sfoglio__riga { font-size: var(--as-type-lede); color: var(--as-muted); max-width: 36ch; }
.as-sfoglio__vai { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--as-line); margin-top: var(--as-sp-2); }

.as-sfoglio--viva .as-sfoglio__griglia {
	position: relative;
	min-height: min(78vh, 760px);
	box-sizing: border-box;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: var(--as-sp-8);
	row-gap: var(--as-sp-6);
}
.as-sfoglio--viva .as-sfoglio__testa { grid-column: 1; }
.as-sfoglio--viva .as-sfoglio__conta { display: inline; }
.as-sfoglio--viva .as-sfoglio__lista { grid-column: 1; grid-row: 2; align-self: center; gap: clamp(6px, 1.4vh, 14px); }
.as-sfoglio--viva .as-sfoglio__link { cursor: pointer; }
.as-sfoglio--viva .as-sfoglio__voce { display: block; }
/* v0.38 (29/09): la foto non è più alta quanto tutta la colonna (900px a
   1440×900, mai intera in uno schermo, metà di uno schermo bianco di
   portatile): al massimo il 72% dello schermo, centrata sulla lista. */
.as-sfoglio--viva .as-sfoglio__foto {
	position: absolute;
	top: 0;
	bottom: 0;
	right: var(--as-gutter);
	width: calc((100% - 2 * var(--as-gutter) - var(--as-sp-8)) / 2);
	height: min(100%, 72vh, 660px);
	margin-block: auto;
	aspect-ratio: auto;
	clip-path: inset(100% 0% 0% 0%);
}
.as-sfoglio--viva .as-sfoglio__link { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--as-sp-4); row-gap: 0; align-items: baseline; }
.as-sfoglio--viva .as-sfoglio__n { grid-column: 1; }
/* v0.38 (29/09): nomi da 88 a 55px (49 a 1280): ognuno sta su una riga
   («Software su misura» e «Chatbot per il sito» andavano a capo e la lista
   sembrava un errore d'impaginazione), e non pesano più del titolo. */
.as-sfoglio--viva .as-sfoglio__nome {
	grid-column: 2;
	font-size: clamp(36px, 3.8vw, 60px);
	text-wrap: balance;
	color: var(--as-grigio-display);
	transition: color .5s var(--as-ease-out);
}
.as-sfoglio--viva .as-sfoglio__riga {
	grid-column: 2;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .6s var(--as-ease-out), opacity .4s ease, margin .6s var(--as-ease-out);
}
.as-sfoglio--viva .as-sfoglio__vai { display: none; }
.as-sfoglio--viva .is-attiva .as-sfoglio__nome { color: var(--as-ink); } /* v0.38: niente più 8px a destra, fuori riga con le frasi */
.as-sfoglio--viva .is-attiva .as-sfoglio__riga { max-height: 6em; opacity: 1; margin-block: var(--as-sp-2) var(--as-sp-3); }
@media (hover: hover) {
	.as-sfoglio--viva .as-sfoglio__link:hover .as-sfoglio__nome { color: var(--as-ink); }
}
/* v0.35 (servizi): le frasi in cui riconoscersi e l'invito di ogni voce, e la
   riga in fondo. Di base sotto ogni voce; col puntatore si aprono con la voce
   accesa, allineate al nome (la colonna del numero ha una misura fissa). */
.as-sfoglio__per { display: grid; justify-items: start; gap: var(--as-sp-5); }
.as-sfoglio__frasi { display: grid; gap: 10px; }
.as-sfoglio__frasi li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.45; color: var(--as-ink); }
.as-sfoglio__frasi li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--as-arancio); }
.as-sfoglio--per .as-sfoglio__vai { display: none; }
.as-sfoglio__chiusa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--as-sp-5) var(--as-sp-7); margin-top: var(--as-sp-8); padding-top: var(--as-sp-6); border-top: 1px solid var(--as-line); }
.as-sfoglio__chiusa-t { margin: 0; max-width: 46ch; font-size: var(--as-type-lede); line-height: 1.4; }
.as-sfoglio--per.as-sfoglio--viva .as-sfoglio__link { grid-template-columns: 2.4rem minmax(0, 1fr); }
.as-sfoglio--viva .as-sfoglio__per {
	margin-left: calc(2.4rem + var(--as-sp-4));
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transition: max-height .6s var(--as-ease-out), opacity .4s ease, margin .6s var(--as-ease-out), visibility 0s linear .6s;
}
.as-sfoglio--viva .is-attiva .as-sfoglio__per { max-height: 24em; opacity: 1; visibility: visible; margin-bottom: var(--as-sp-5); transition-delay: 0s; }
.as-sfoglio--viva .as-sfoglio__per .as-btn { margin-bottom: 2px; } /* l'ombra del bordo del bottone non si taglia */

/* LA FILA (v0.38, 29/09, DIREZIONE-MOBILE: «quattro card identiche impilate che
   occupano tre schermi vanno ripensate»). Senza puntatore, fino al tablet, le
   voci non sono più quattro schede in colonna (3,5 schermi di foto, nome,
   frasi, bottone ripetuti): sono una FILA che scorre col dito, una card alla
   volta, quella dopo che si vede per un dito. Ogni card è tutta un link alla
   sua pagina (la foto compresa): foto, numero, nome, riga, e le frasi del
   cliente con l'invito dove ci sono. Sotto, il contatore con la barra (lo
   scrive motion.js, come quello dei vantaggi). Senza JS la fila scorre lo
   stesso, solo senza contatore. La pagina non scorre mai di lato: scorre la fila. */
@media (max-width: 1079px) {
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__griglia { gap: var(--as-sp-6); }
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__lista {
		display: flex;
		align-items: stretch;
		gap: 12px;
		margin-inline: calc(-1 * var(--as-gutter));
		padding: 0 var(--as-gutter) 2px;
		scroll-padding-inline: var(--as-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__lista::-webkit-scrollbar { display: none; }
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__voce {
		position: relative;
		flex: 0 0 clamp(290px, 42vw, 400px);
		scroll-snap-align: start;
		display: flex;
		flex-direction: column;
		gap: 0;
		overflow: hidden;
		border-radius: calc(24px * var(--as-brm));
		background: var(--as-sup);
	}
	@supports (corner-shape: squircle) { .as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__voce { corner-shape: squircle; } }
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__foto { flex: none; aspect-ratio: 16 / 11; border-radius: 0; }
	/* v0.56.1: nella fila viva (motion.js) la foto scorre più lenta della card, quindi è un po' più grande della sua
	   cornice (1.2: il 10% per lato copre la parallasse, che arriva al 9%). La card che aspetta cresce dal suo bordo
	   sinistro: così il pezzo che si vede a destra resta largo un dito. */
	.as-fila--viva .as-sfoglio__foto { overflow: hidden; }
	.as-fila--viva .as-sfoglio__foto img { scale: 1.2; }
	.as-fila--viva > .as-sfoglio__voce { transform-origin: 0 50%; }
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__link { position: static; gap: 6px; padding: 20px 20px 0; }
	/* la card intera è il link (la foto sta fuori dall'<a> nel markup: il velo del link la copre) */
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
	/* v0.56 (Rami, 22/10: «quando scrollo la card diventa più piccola perché rileva il dito sopra, non mi piace»): niente
	   più rimpicciolimento al tocco (la card intera è il link, e lo stato «premuto» scattava anche solo scorrendo). */
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__link:active { opacity: 1; }
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__nome { font-size: 28px; line-height: 1.05; letter-spacing: -.025em; }
	/* v0.56 (Rami): nelle card da telefono solo il nome e le tre frasi del cliente, senza la riga sotto il nome. */
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__riga { display: none; }
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__vai { margin: 14px 0 20px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--as-ink) 18%, transparent); }
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__per { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 18px 20px 20px; }
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__frasi { gap: 10px; }
	/* v0.56 (Rami: «i button sono tutti diversi tra loro, software quasi esce sulla destra»): quattro bottoni uguali, larghi
	   quanto la card, con «Scopri di più» e il pallino a destra; il resto della frase resta per lettori di schermo e Google. */
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__per .as-btn { position: relative; z-index: 2; width: 100%; margin-top: auto; justify-content: flex-start; }
	.as-sfoglio:not(.as-sfoglio--viva) .as-btn__coda { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__chiusa { margin-top: var(--as-sp-7); }
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__guida { display: flex; align-items: center; gap: 12px; margin-top: -8px; font-size: 13px; letter-spacing: .06em; color: var(--as-muted); font-variant-numeric: tabular-nums; }
	/* v0.56 (Rami: «porta lo 0/4 alla destra, allineato al titolo»): il contatore sta nella testa, a destra, sulla riga
	   dell'ultima parola del titolo (motion.js lo mette lì); la barretta non serve più. */
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__testa .as-sfoglio__guida { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 .35em; font-size: 14px; }
	.as-sfoglio__testa .as-sfoglio__barra { display: none; }
	.as-sfoglio__guida b { font-weight: 400; color: var(--as-ink); }
	.as-sfoglio__barra { position: relative; flex: 0 1 140px; height: 2px; overflow: hidden; background: var(--as-line); }
	.as-sfoglio__barra i { position: absolute; inset: 0; background: var(--as-ink); transform: scaleX(var(--p, .25)); transform-origin: left; transition: transform .35s var(--as-ease-out); }
}
@media (max-width: 699px) {
	.as-sfoglio:not(.as-sfoglio--viva) .as-sfoglio__voce { flex-basis: min(84vw, 360px); }
}
.as-sfoglio__guida { display: none; } /* fuori dalla fila (desktop, tablet grandi) il contatore non serve */

/* ── LE PAROLE IN CORSA (horizontal text): due righe enormi che corrono in
   orizzontale con lo scroll, la prima piena, la seconda in solo contorno.
   La sezione clippa: mai scorrimento laterale. */
.as-parole {
	overflow: clip;
	padding-block: clamp(2rem, 6vh, 5rem);
	display: grid;
	gap: clamp(0px, 1vw, 12px);
}
.as-parole__riga {
	display: flex;
	white-space: nowrap;
	will-change: transform;
	font-size: var(--as-type-display-xl);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.035em;
	color: var(--as-ink);
}
.as-parole__testo { flex: 0 0 auto; padding-right: .35em; }
.as-parole__riga--contorno {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--as-ink);
}
@supports not (-webkit-text-stroke: 1px black) {
	.as-parole__riga--contorno { color: var(--as-grigio-display); }
}
/* v0.38 (29/09): parole al buio subito dopo un blocco scuro che si chiude a
   pancia (il percorso di Problemi & Soluzioni): gli angoli della pancia
   lascerebbero vedere il bianco della pagina tra due neri. Un'ombra piena
   del carbone, spostata in su sotto il blocco di prima, li riempie (il
   percorso è posizionato e le dipinge sopra: si vede solo negli angoli). */
.as-percorso + .as-parole.as-carbone { box-shadow: 0 -160px 0 0 var(--as-carbone); }
/* la riga che è un indirizzo email (parole.php): un link mailto, stesso aspetto */
a.as-parole__riga { text-decoration: none; }
a.as-parole__riga:focus-visible { outline: 2px solid var(--as-ink); outline-offset: 6px; }
/* v0.38 (29/09): da telefono 48px (non 56) e una corsa dimezzata (motion.js):
   le parole si leggono intere mentre passano. */
@media (max-width: 699px) {
	.as-parole { padding-block: 40px; gap: 2px; }
	.as-parole__riga { font-size: clamp(40px, 12.3vw, 52px); }
	.as-parole__riga--contorno { -webkit-text-stroke-width: 1.2px; }
}

/* ── IL QUADRO CHE CRESCE: largo quanto la pagina nel layout; motion.js lo
   scala da .62 a 1 e porta il raggio a zero mentre entra. Sotto, la didascalia. */
.as-quadro { overflow: clip; padding-block: clamp(1rem, 4vh, 3rem) var(--as-sect); }
.as-quadro__cornice {
	--as-r-out: calc(var(--as-r-card-lg) * var(--as-brm));
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--as-r-out);
	background: var(--as-sup);
	transform-origin: 50% 50%;
	will-change: transform;
}
@supports (corner-shape: squircle) { .as-quadro__cornice { corner-shape: squircle; } }
.as-quadro__cornice video, .as-quadro__cornice img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.as-quadro__coda {
	margin-top: clamp(24px, 4vh, 48px);
	display: grid;
	gap: var(--as-sp-3);
}
.as-quadro__did { max-width: 40ch; color: var(--as-ink); }
.as-quadro__meta { color: var(--as-muted); }
@media (max-width: 899px) {
	.as-quadro__cornice { aspect-ratio: 4 / 5; }
}

/* ── LA FASCIA SCURA: dichiarazione + CTA, entra con la goccia. */
.as-fascia {
	position: relative;
	overflow: clip;
	--as-goccia: 0px;
	--as-goccia2: 0px;
	/* v0.24: anche la pancia in fondo (data-as-contro-goccia), per quando la
	   fascia non chiude la pagina ma lascia il posto a una sezione chiara (lo studio). */
	border-radius: 50% 50% 50% 50% / var(--as-goccia) var(--as-goccia) var(--as-goccia2) var(--as-goccia2);
}
.as-fascia__titolo { max-width: 18ch; line-height: 1; }
.as-fascia__riga { margin-top: var(--as-sp-6); color: var(--as-muted); }
.as-fascia__cta { margin-top: var(--as-sp-6); }
/* v0.24: a schermo intero, il contenuto al centro (la lettura si ferma qui). */
.as-fascia { min-height: 100svh; display: flex; align-items: center; }
.as-fascia > .as-container { width: 100%; }

/* ── Tendine chiuse mentre scorri e dopo un click (header.js: is-scroll, v0.23) ── */
.as-header.is-scroll .as-nav__item--sub .as-nav__sub {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 10px);
	transition: opacity .2s var(--as-ease-micro), transform .2s var(--as-ease-micro), visibility 0s linear .2s;
}
.as-header.is-scroll .as-nav__item--sub .as-nav__chev { transform: none; }

/* ── Il form DINAMICO (v0.23, strada B): pillole, rami, due colonne ──────── */
.as-form--dinamico { max-width: 720px; }
.as-form__legend {
	font-size: var(--as-type-meta);
	font-weight: 400;
	letter-spacing: .04em;
	padding: 0;
	margin-bottom: var(--as-sp-2);
}
.as-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.as-form__pills { display: flex; flex-wrap: wrap; gap: var(--as-sp-2); }
.as-form__pill { position: relative; cursor: pointer; }
.as-form__pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.as-form__pill span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: var(--as-r-pill);
	box-shadow: inset 0 0 0 1px var(--as-line);
	background: var(--as-bg);
	color: var(--as-ink);
	font-size: var(--as-type-body);
	line-height: 1.2;
	transition: background var(--as-t-micro) ease, color var(--as-t-micro) ease, box-shadow var(--as-t-micro) ease, transform var(--as-t-micro) var(--as-ease-micro);
}
.as-form__pills--grandi span { min-height: 52px; padding: 12px 22px; font-size: var(--as-type-lede); }
@media (hover: hover) {
	.as-form__pill:hover span { box-shadow: inset 0 0 0 1px var(--as-ink); }
}
.as-form__pill input:checked + span { background: var(--as-ink); color: var(--as-bg); box-shadow: inset 0 0 0 1px var(--as-ink); }
.as-form__pill input:focus-visible + span { outline: 2px solid var(--as-ink); outline-offset: 3px; }
.as-form__pill input:active + span { transform: scale(.97); }
.as-form__ramo { display: grid; gap: var(--as-sp-5); overflow: hidden; }
.as-form__due { display: grid; align-items: start; gap: var(--as-sp-5); }
@media (min-width: 700px) { .as-form__due { grid-template-columns: 1fr 1fr; } }
.as-form__check { display: flex; gap: var(--as-sp-3); align-items: flex-start; cursor: pointer; font-size: var(--as-type-body); color: var(--as-muted); }
.as-form__check input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--as-ink); }
.as-form__check .as-link { color: var(--as-ink); }
.as-form__riepilogo { color: var(--as-muted); }
.as-form__riepilogo::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--as-arancio); margin-right: 10px; vertical-align: middle; }
.as-form .is-errore .as-form__pill span { box-shadow: inset 0 0 0 1px var(--as-errore); }
.as-form .is-errore .as-form__check { color: var(--as-errore); }

/* Compatto (v0.23.1, Rami: «dovrebbe entrare tutto in un viewport»): spazi più
   fitti, tempi e fascia fianco a fianco, consenso e bottone sulla stessa riga.
   La scelta «Cosa ti serve?» è una domanda a sé, sotto una hairline. */
.as-form--dinamico { gap: var(--as-sp-4); max-width: none; }
.as-form--dinamico .as-form__campo { gap: 6px; }
.as-form--dinamico textarea { min-height: 96px; resize: vertical; }
.as-form__scelta { padding-top: var(--as-sp-4); border-top: 1px solid var(--as-line); }
.as-form__legend--grande { font-size: var(--as-type-body); letter-spacing: 0; margin-bottom: var(--as-sp-3); color: var(--as-ink); }
.as-form__pills--grandi span { min-height: 48px; padding: 10px 20px; font-size: var(--as-type-body); }
.as-form__bottone { margin: 0; flex: 0 0 auto; }

/* ── I PASSI (v0.23.9, Rami: «fallo a più step, così non risulta così alto») ──
   Tre passi: chi sei · cosa ti serve (coi suoi rami) · gli ultimi dettagli.
   contatti.js li accende aggiungendo .as-form--passi. SENZA JS i tre passi
   sono `display: contents`: i loro figli tornano figli diretti del form e
   la pagina è quella di prima (un solo invio, tutto in colonna). I bottoni
   Indietro/Avanti e la barra nascono `hidden`: senza JS non servono. */
.as-form [hidden] { display: none !important; } /* .as-btn ha un display suo: senza !important l'attributo non vince */
.as-form__passi { display: grid; gap: var(--as-sp-4); }
.as-form__passo { display: contents; }
.as-form--passi .as-form__passo { display: none; }
.as-form--passi .as-form__passo.is-attivo { display: grid; align-content: start; gap: var(--as-sp-4); }
.as-form__progresso { display: flex; align-items: center; justify-content: space-between; gap: var(--as-sp-4); }
.as-form__passo-eti { margin: 0; font-variant-numeric: tabular-nums; }
.as-form__barra { display: flex; gap: 6px; width: min(180px, 42%); }
.as-form__barra i { position: relative; flex: 1; height: 2px; overflow: hidden; background: var(--as-line); }
.as-form__barra i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--as-ink);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .6s var(--as-ease-out);
}
.as-form__barra i.is-fatta::after { transform: scaleX(1); }
.as-form__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--as-sp-4); }
.as-form__nav .as-form__bottone, .as-form__nav .as-form__avanti { margin-left: auto; }
.as-form__indietro { color: var(--as-muted); }
.as-form__avanti .as-ic { transition: transform var(--as-t-azione) var(--as-ease-out); }
@media (hover: hover) {
	.as-form__indietro:hover { color: var(--as-ink); }
	.as-form__avanti:hover .as-ic { transform: translateX(4px); }
}
.as-form__riepilogo { margin-top: var(--as-sp-2); }
.as-form__diretta { color: var(--as-muted); }
.as-form__diretta .as-link { color: var(--as-ink); }
/* v0.45 (Rami, 17/10): la riga del preventivatore a capo, col link che porta la freccia in alto a destra. */
.as-form__diretta-prev { display: block; margin-top: 8px; }
.as-link__freccia { display: inline-block; width: .78em; height: .78em; margin-left: .22em; vertical-align: -.06em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── IL FORM A PASSI DA TELEFONO (v0.38, 29/09, DIREZIONE-MOBILE) ────────────
   Era il form del desktop rimpicciolito: etichette a 13px spaziate, campi col
   filo del carbone (#262626 su #0A0A0A, 1,3:1: si vedevano appena), «Avanti»
   un bottone da 160px appoggiato a destra, lontano dal pollice, e la via
   diretta a 13px con un tocco alto 16. Solo il form dei contatti (home e
   /contatti/): quello del portfolio in home ha le sue misure in home.css.
   · etichette 15px, in frase normale, col colore del testo;
   · campi un tono sopra il fondo (#141414) con un bordo che si vede (bianco
     al 22%, sopra i 3:1 del minimo per i bordi dei campi), alti 54px;
     il fuoco e l'errore restano a 2px, come sul desktop;
   · la riga di navigazione: «Avanti» e l'invio larghi tutta la riga (56px),
     «Indietro» un tasto quadrato da 56 con la sola freccia (il nome resta per
     chi usa lo screen reader), sulla stessa riga, a sinistra;
   · la barra dei passi a 14px, le tacche più spesse;
   · la via diretta a 15px, con l'indirizzo toccabile per 44px d'altezza. */
@media (max-width: 699px) {
	.as-form--dinamico { gap: var(--as-sp-5); }
	.as-form--dinamico .as-form__campo { gap: var(--as-sp-2); }
	.as-form--passi .as-form__passo.is-attivo, .as-form--dinamico .as-form__passi { gap: var(--as-sp-5); }
	.as-form--dinamico .as-form__due { gap: var(--as-sp-5); }
	.as-form--dinamico .as-form__campo label,
	.as-form--dinamico .as-form__legend {
		font-size: 15px;
		letter-spacing: 0;
		line-height: 1.3;
		color: var(--as-ink);
	}
	.as-form--dinamico .as-form__legend--grande { font-size: 17px; }
	.as-form--dinamico :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea) {
		min-height: 54px;
		padding: 15px 16px;
		background-color: var(--as-sup);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--as-ink) 22%, transparent);
	}
	.as-form--dinamico select { padding-right: 44px; }
	.as-form--dinamico :is(input, select, textarea):focus-visible { box-shadow: inset 0 0 0 2px var(--as-ink); }
	.as-form--dinamico .is-errore :is(input, select, textarea) { box-shadow: inset 0 0 0 2px var(--as-errore); }
	.as-form--dinamico .as-form__pill span { background: var(--as-sup); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--as-ink) 22%, transparent); }
	.as-form--dinamico .as-form__pill input:checked + span { background: var(--as-ink); box-shadow: inset 0 0 0 1px var(--as-ink); }
	.as-form--dinamico .is-errore .as-form__pill span { box-shadow: inset 0 0 0 1px var(--as-errore); }
	.as-form__progresso { padding-bottom: var(--as-sp-1); }
	.as-form__passo-eti { font-size: 14px; color: var(--as-ink); }
	.as-form__barra { width: min(132px, 38%); gap: 5px; }
	.as-form__barra i { height: 3px; border-radius: 2px; }
	.as-form__nav { gap: var(--as-sp-3); margin-top: var(--as-sp-2); }
	.as-form__nav .as-form__avanti,
	.as-form__nav .as-form__bottone { flex: 1 1 auto; margin-left: 0; }
	.as-form__nav .as-form__avanti,
	.as-form__nav .as-form__bottone .as-btn { width: 100%; min-height: 56px; }
	.as-form__indietro {
		flex: 0 0 56px;
		width: 56px;
		height: 56px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: calc(12px * var(--as-brm));
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--as-ink) 22%, transparent);
		color: var(--as-ink);
	}
	@supports (corner-shape: squircle) { .as-form__indietro { corner-shape: squircle; } }
	.as-form__indietro::after { display: none; } /* il filo del link testuale: qui è un tasto */
	.as-form__indietro span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.as-form__indietro .as-ic { width: 20px; height: 20px; }
	.as-form__check { font-size: 15px; line-height: 1.45; }
	.as-form__check input { width: 22px; height: 22px; margin-top: 1px; }
	.as-form__check .as-link { display: inline-block; padding-block: 10px; margin-block: -10px; }
	.as-form__riepilogo { font-size: 14px; }
	.as-form__micro { font-size: 14px; }
	.as-form__diretta { font-size: 15px; line-height: 1.5; letter-spacing: 0; }
	.as-form__diretta .as-link { display: inline-block; padding-block: 11px; margin-block: -11px; }
}

/* ── Pezzi comuni delle schermate dimostrative (Studio, Problemi & Soluzioni, v0.33.2) ── */
/* La spunta tonda, arancio. */
.as-sch__ok {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	background: var(--as-arancio) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5 L10.2 16.5 L18 8' fill='none' stroke='%230A0A0A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 64% no-repeat;
}
@keyframes as-battito {
	0% { box-shadow: 0 0 0 0 rgba(243, 112, 34, .55); }
	70% { box-shadow: 0 0 0 10px rgba(243, 112, 34, 0); }
	100% { box-shadow: 0 0 0 0 rgba(243, 112, 34, 0); }
}
@keyframes as-su { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes as-dentro { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.as-domande h2 em { font-style: normal; color: var(--as-grigio-display); }

/* ── ANCHE DOPO, CI PENSO IO (site/dopo; dalla v0.36 qui, serve a Studio e ai servizi) ────────────────────────────────────────────── */
.as-dopo__griglia { display: grid; gap: var(--as-sp-7); }
@media (min-width: 1000px) {
	.as-dopo__griglia { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: var(--as-sp-8); align-items: center; }
}
.as-dopo__titolo { margin: 0; max-width: 13ch; }
.as-dopo__titolo em { font-style: normal; color: var(--as-grigio-display); }
.as-dopo__sotto { margin: var(--as-sp-5) 0 0; max-width: 40ch; color: var(--as-muted); }
.as-dopo__voci { list-style: none; margin: var(--as-sp-7) 0 0; padding: 0; display: grid; gap: var(--as-sp-5) var(--as-sp-6); }
@media (min-width: 700px) { .as-dopo__voci { grid-template-columns: 1fr 1fr; } }
.as-dopo__voce { padding-top: var(--as-sp-4); border-top: 1px solid var(--as-line); }
.as-dopo__nome { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.as-dopo__riga { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--as-muted); text-wrap: pretty; }
/* v0.38 (29/09). Sotto i 1000px il pannello arrivava dopo quattro blocchi di testo (circa
   700px da telefono): ora sale subito dopo la frase sotto il titolo, e le voci lo spiegano
   dopo. La testa si scioglie nella griglia; il pannello (l'ultimo figlio) non si tocca. */
@media (max-width: 999px) {
	.as-dopo__griglia { gap: 0; }
	.as-dopo__testa { display: contents; }
	.as-dopo__griglia > :last-child { order: 2; margin-top: var(--as-sp-6); }
	.as-dopo__voci { order: 3; }
}
@media (max-width: 699px) {
	.as-dopo__titolo { max-width: none; }
	/* v0.86.4 (Rami, 01/11, Ecommerce da telefono: «non mi garba l'elenco in questo modo, trovagli un bel layout»): le quattro
	   voci diventano riquadri 2×2 numerati, sul grigio della superficie, come le mini card delle scene. Da computer niente cambia. */
	.as-dopo__voci { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--as-sp-6); counter-reset: as-dopo; }
	.as-dopo__voce { counter-increment: as-dopo; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; border-top: 0; border-radius: calc(var(--as-r-card, 20px) * var(--as-brm)); background: var(--as-sup); }
	.as-dopo__voce::before { content: counter(as-dopo, decimal-leading-zero); font-size: 12px; letter-spacing: .06em; color: var(--as-muted); font-variant-numeric: tabular-nums; }
	.as-dopo__nome { font-size: 16px; line-height: 1.25; }
	.as-dopo__riga { margin: 0; font-size: 14px; line-height: 1.45; text-wrap: wrap; } /* «pretty» qui lasciava righe di due parole */
}
/* Il pannello del tuo sito (v0.38, 29/09; Rami, 28/09: «AI slop»): la pagina di stato di
   un monitoraggio vero, col tema scuro dello strumento e il suo font di sistema. Numeri e
   date, non aggettivi. Da telefono (container query) 30 giorni invece di 90, righe più
   grandi, ombra corta che non si taglia sul bordo dello schermo. */
.as-pannello {
	--pn-testo: #E6EDF3;
	--pn-muto: #8B949E;
	--pn-filo: rgba(255, 255, 255, .08);
	--pn-verde: #3FB950;
	--pn-rosso: #F85149;
	container-type: inline-size;
	overflow: hidden;
	border-radius: calc(18px * var(--as-brm));
	background: #111214;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 90px -56px rgba(0, 0, 0, .6);
	font: 13px/1.35 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: var(--pn-testo);
	-webkit-font-smoothing: antialiased;
}
@supports (corner-shape: squircle) { .as-pannello { corner-shape: squircle; } }
@media (max-width: 699px) { .as-pannello { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 50px -36px rgba(0, 0, 0, .5); } }
.as-pannello p, .as-pannello ol, .as-pannello ul { margin: 0; }
.as-pannello ol, .as-pannello ul { list-style: none; padding: 0; }
.as-pannello b { font-weight: 600; }
.as-pannello__testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 18px 22px; }
.as-pannello__sito { display: flex; align-items: center; gap: 11px; min-width: 0; }
.as-pannello__sito > span:last-child { display: grid; min-width: 0; }
.as-pannello__sito b { font-size: 15px; letter-spacing: -.005em; }
.as-pannello__sito small, .as-pannello__stato small { font-size: 11.5px; color: var(--pn-muto); }
.as-pannello__fav { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #F4F1EC; font: 13px 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; color: #6E1F2B; }
.as-pannello__fav.is-negozio, .as-pannello__fav.is-software, .as-pannello__fav.is-gestionale { font-family: inherit; font-size: 12px; font-weight: 600; }
.as-pannello__fav.is-negozio { background: #F1E9E3; color: #7A4430; }
.as-pannello__fav.is-software, .as-pannello__fav.is-gestionale { background: #E8EAED; color: #3C4043; }
.as-pannello__stato { display: grid; justify-items: end; gap: 2px; }
.as-pannello__stato > span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--pn-verde); }
.as-pannello__stato i { width: 8px; height: 8px; border-radius: 50%; background: var(--pn-verde); box-shadow: 0 0 0 3px rgba(63, 185, 80, .18); }
.as-pannello__stato small b { font-weight: 400; font-variant-numeric: tabular-nums; }
.as-pannello__blocco { padding: 16px 22px 18px; border-top: 1px solid var(--pn-filo); }
.as-pannello__k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px !important; font-size: 12px; color: var(--pn-muto); }
.as-pannello__k > b { font-size: 13px; color: var(--pn-testo); font-variant-numeric: tabular-nums; }
.as-pannello .is-30 { display: none; }
.as-pannello__barre { display: flex; gap: 2px; height: 30px; }
.as-pannello__barre li { flex: 1 1 0; border-radius: 1.5px; background: var(--pn-verde); transform-origin: 50% 100%; }
.as-pannello__barre li.is-giu { background: var(--pn-rosso); }
.as-pannello__asse { display: flex; justify-content: space-between; margin-top: 6px !important; font-size: 11px; color: var(--pn-muto); }
.as-pannello__nota { display: flex; align-items: center; gap: 7px; margin-top: 10px !important; font-size: 11.5px; color: var(--pn-muto); }
.as-pannello__nota i { width: 7px; height: 7px; border-radius: 50%; background: var(--pn-rosso); }
.as-pannello__grafico { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 88px auto; column-gap: 10px; }
.as-pannello__y { display: flex; flex-direction: column; justify-content: space-between; margin: -6px 0 !important; font-size: 11px; text-align: right; color: var(--pn-muto); font-variant-numeric: tabular-nums; }
.as-pannello__grafico svg { display: block; width: 100%; height: 88px; overflow: visible; }
.as-pannello__righe { fill: none; stroke: var(--pn-filo); stroke-width: 1; vector-effect: non-scaling-stroke; }
.as-pannello__area { fill: url(#as-pn-sfuma); }
.as-pannello__linea { fill: none; stroke: var(--as-arancio); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.as-pannello__x { grid-column: 2; display: flex; justify-content: space-between; margin-top: 6px !important; font-size: 11px; color: var(--pn-muto); }
.as-pannello__backup li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--pn-filo); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.as-pannello__backup li > span:first-of-type { flex: 1; }
.as-pannello__backup i { flex: none; width: 15px; height: 15px; border-radius: 50%; background: rgba(63, 185, 80, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.7l4.6-5' fill='none' stroke='%233FB950' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.as-pannello__backup small { font-size: 11.5px; color: var(--pn-muto); }
.as-pannello__backup u { font-size: 12px; text-decoration: none; color: #58A6FF; }
.as-pannello__backup li:not(:first-child) u { visibility: hidden; }
.as-pannello__altri { padding-top: 8px; border-top: 1px solid var(--pn-filo); font-size: 11.5px; color: var(--pn-muto); }
.as-pannello__piede { display: grid; padding: 6px 22px 10px; border-top: 1px solid var(--pn-filo); }
.as-pannello__piede p { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 12.5px; }
.as-pannello__piede p + p { border-top: 1px solid var(--pn-filo); }
.as-pannello__piede span { color: var(--pn-muto); }
.as-pannello__piede b { font-weight: 500; text-align: right; }
.as-pannello__piede span { flex: none; }
@container (max-width: 460px) {
	.as-pannello .is-90, .as-pannello__barre li:nth-child(-n+60) { display: none; }
	.as-pannello .is-30 { display: inline; }
	.as-pannello__testa { padding: 16px 18px; }
	.as-pannello__stato { justify-items: start; }
	.as-pannello__blocco { padding: 14px 18px 16px; }
	.as-pannello__piede { padding-inline: 18px; }
	.as-pannello__barre { gap: 3px; height: 34px; }
	.as-pannello__k { font-size: 12.5px; }
	.as-pannello__backup li, .as-pannello__piede p { font-size: 13.5px; }
	.as-pannello__backup small { display: none; }
	.as-pannello__grafico { grid-template-rows: 90px auto; }
	.as-pannello__grafico svg { height: 90px; }
}
/* Vivo (motion.js): le barrette salgono da sinistra, la linea si disegna, il backup di
   stanotte entra in cima. Prima di partire il pannello è già pieno (barrette basse e spente,
   come mentre carica), mai vuoto. */
.as-dopo--vivo .as-pannello__barre li { opacity: .3; transform: scaleY(.18); }
.as-dopo.is-vivo .as-pannello__barre li { opacity: 1; transform: none; transition: transform .5s calc(var(--i) * 7ms) cubic-bezier(.2, .8, .2, 1), opacity .3s calc(var(--i) * 7ms); }
/* La linea si scopre da sinistra (clip, non stroke-dasharray: col tratto che non scala il
   trattino si fermava a metà, v0.37). */
.as-dopo--vivo .as-pannello__grafico svg { clip-path: inset(-4px 100% -4px 0); }
.as-dopo.is-vivo .as-pannello__grafico svg { clip-path: inset(-4px 0 -4px 0); transition: clip-path 1.5s .35s cubic-bezier(.45, 0, .2, 1); }
.as-dopo--vivo:not(.is-vivo) .as-pannello__backup .is-nuovo { max-height: 0; padding-block: 0; border-top-width: 0; opacity: 0; overflow: hidden; }
.as-dopo.is-vivo .as-pannello__backup .is-nuovo { animation: as-pn-backup .5s 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes as-pn-backup { from { max-height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; opacity: 0; } to { max-height: 60px; opacity: 1; } }
 /* v0.34: la parte grigia dei titoli delle domande, su tutte le pagine */

/* ── LOGHI E VOLTI (v0.39, 29/09, inc/loghi.php) ─────────────────────────────
   Rami, 29/09: loghi fittizi e foto vere al posto delle iniziali nei cerchi delle
   schermate. Il segno (SVG quadrato col suo fondo) e il volto (foto quadrata) riempiono
   il contenitore che prima aveva le lettere: è lui a ritagliarli tondi o col suo raggio. */
.as-lg { display: block; flex: none; width: 100%; height: 100%; }
.as-lg--studio { display: grid; place-items: center; background: #1C1C1A; }
.as-lg--studio img { display: block; width: 64%; height: auto; }
.as-volto { display: block; flex: none; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.as-lg-intero { display: inline-flex; align-items: center; gap: .5em; line-height: 1.05; white-space: nowrap; }
.as-lg-intero > .as-lg { width: 1.9em; height: 1.9em; }
.as-lg-intero__nome { display: grid; gap: .24em; }
.as-lg-intero__n { font-weight: 600; letter-spacing: .005em; }
.as-lg-intero.is-maiu .as-lg-intero__n { font-size: .84em; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.as-lg-intero__nome small { font: 400 .56em/1.1 -apple-system, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .02em; opacity: .72; }
:is(.as-wm__av, .as-br__fav, .as-br__profilo, .as-wa__marchio i, .as-wa__utente i, .as-pv__carta-marchio i, .as-nuovo__logo i, .as-sitonuovo__logo i, .as-cs__logo, .as-vd-g__testa i, .as-pr-fav, .as-pr-tela__chi span, .as-pr-commento__risp > span:first-child, .as-foglio__avatar, .as-pannello__fav, .as-ai__fonte i, .as-cf__fav, .as-cf__profilo, .as-cc__av):has(> .as-lg, > .as-volto) { overflow: hidden; padding: 0; background: none; }
.as-cf__fav:has(> .as-lg)::after { content: none; }
/* Nei risultati di Google il favicon sta piccolo dentro il suo cerchio, come dal vero. */
:is(.as-serp__favicon, .as-vd-g__fav) > .as-lg { width: 18px; height: 18px; border-radius: 5px; }


/* v0.46 (Rami, dal telefono): nel footer le voci sotto «Contatti» su due colonne: email e Chi c'è dietro a sinistra, Progetti e Blog a destra. */
@media (max-width: 899px) {
	.as-footer__colonne > nav:nth-child(3) .as-footer__lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
}

/* v0.49 (kit moduli): il messaggio sotto il campo scritto male, che dice cosa fare. */
.as-form__msg { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--as-errore); }

/* v0.51: a invio riuscito il bottone È verde (non solo coperto): niente angoli arancio. */
.as-btn.is-ok, .as-carbone .as-btn--pri.is-ok, [data-fondo="carbone"] .as-btn--pri.is-ok, .as-hero__cta.is-notte .as-btn--pri.is-ok { background: var(--as-successo); color: #fff; box-shadow: none; }

/* ── Il POPUP dei settori (v0.51 tendina in flusso; v0.52 popup. Rami: «quando si apre spinge tutto giù, e le
   scelte evidenziate così attaccate non mi piacciono: anche un mini popup va benissimo»). Il bottone è vestito
   come i campi accanto (stessi token: regge il fondo chiaro e il carbone). Il pannello è ASSOLUTO, sotto il
   bottone, sopra quello che segue: non sposta niente. Due colonne (anche da telefono: 6 righe, niente
   scorrimento interno); ogni voce ha l'icona, il nome e un cerchietto a destra che si riempie d'arancio quando
   è scelta: niente fondi pieni, due scelte vicine restano due. In fondo il conto e «Fatto». Gli input sono i
   soliti checkbox (as_settori[]). */
.as-tendina { position: relative; }
.as-tendina.is-aperta { z-index: 40; }
.as-tendina__bottone {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	border: 0;
	border-radius: calc(var(--as-r-s) * var(--as-brm));
	background: var(--as-bg);
	box-shadow: inset 0 0 0 1px var(--as-line);
	color: var(--as-ink);
	font: inherit;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: box-shadow var(--as-t-micro) ease;
}
@supports (corner-shape: squircle) { .as-tendina__bottone, .as-tendina__pannello { corner-shape: squircle; } }
.as-tendina__bottone:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--as-ink); }
.as-tendina.is-aperta .as-tendina__bottone { box-shadow: inset 0 0 0 2px var(--as-ink); }
.as-tendina__bottone > svg { flex: 0 0 auto; width: 14px; height: 14px; transition: transform .3s var(--as-ease-out); }
.as-tendina.is-aperta .as-tendina__bottone > svg { transform: rotate(180deg); }
.as-tendina__valore { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-tendina__valore.is-vuoto { color: var(--as-muted); }
.as-tendina__pannello {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	z-index: 40;
	padding: 8px;
	border-radius: calc(var(--as-r-card) * var(--as-brm));
	background: var(--as-bg);
	box-shadow: inset 0 0 0 1px var(--as-line), 0 30px 70px -24px rgba(0, 0, 0, .55);
	transform-origin: 50% 0;
	transition: opacity .18s ease, transform .24s var(--as-ease-out);
}
@starting-style { .as-tendina__pannello:not([hidden]) { opacity: 0; transform: translateY(-6px) scale(.985); } }
.as-tendina__pannello[hidden] { display: none; }
.as-tendina__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.as-tendina__voce {
	position: relative;
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) 20px;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	padding: 6px 10px;
	border-radius: calc(var(--as-r-s) * var(--as-brm));
	color: var(--as-ink);
	font-size: 15px;
	font-weight: 300;
	cursor: pointer;
	transition: background var(--as-t-micro) ease;
}
@media (hover: hover) { .as-tendina__voce:hover { background: color-mix(in srgb, var(--as-ink) 5%, transparent); } }
.as-tendina__voce input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.as-tendina__voce:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--as-ink); }
.as-tendina__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-tendina__icona svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--as-muted); transition: color var(--as-t-micro) ease; }
.as-tendina__spunta { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--as-line); transition: background .2s ease, box-shadow .2s ease; }
.as-tendina__spunta svg { display: block; width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .25s var(--as-ease-out); }
.as-tendina__voce:has(input:checked) .as-tendina__nome { font-weight: 500; }
.as-tendina__voce:has(input:checked) .as-tendina__icona svg { color: var(--as-arancio); }
.as-tendina__voce:has(input:checked) .as-tendina__spunta { background: var(--as-arancio); box-shadow: inset 0 0 0 1px var(--as-arancio); }
.as-tendina__voce:has(input:checked) .as-tendina__spunta svg { opacity: 1; transform: none; }
.as-tendina__piede { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 10px 10px 4px; border-top: 1px solid var(--as-line); }
.as-tendina__conta { font-size: 13px; color: var(--as-muted); }
.as-tendina__fatto { border: 0; border-radius: var(--as-r-pill); min-height: 34px; padding: 7px 16px; background: var(--as-ink); color: var(--as-bg); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--as-t-micro) ease, color var(--as-t-micro) ease; }
@media (hover: hover) { .as-tendina__fatto:hover { background: var(--as-arancio); color: #fff; } }
.as-tendina__fatto:focus-visible { outline: 2px solid var(--as-ink); outline-offset: 2px; }
.as-form .is-errore .as-tendina__bottone { box-shadow: inset 0 0 0 2px var(--as-errore); }
@media (max-width: 599px) {
	.as-tendina__lista { gap: 2px 4px; }
	.as-tendina__voce { grid-template-columns: 18px minmax(0, 1fr) 18px; gap: 8px; min-height: 40px; padding: 6px; font-size: 14px; }
	.as-tendina__icona svg { width: 18px; height: 18px; }
	.as-tendina__spunta { width: 18px; height: 18px; }
}

/* v0.52 (base.css, i sei punti dal telefono): le PAROLE IN CORSA respirano di più sopra e sotto (Rami: «ha bisogno di
   un po' più di spazio nella parte alta e quella sotto»). */
.as-parole { padding-block: clamp(3.5rem, 9vh, 7.5rem); }
@media (max-width: 699px) { .as-parole { padding-block: 60px; } }

/* ── ANCHE DOPO, PIÙ VIVO (v0.87, 01/11, Rami: «manca qualche effetto wow, rendi un po' più animato quel blocco nero») ──
   Solo con la sezione accesa (.is-vivo, motion.js): il punto verde di «Operativo» batte con un alone, una luce passa sulle
   barre della disponibilità ogni 4 secondi, in fondo alla linea del tempo di risposta il punto «adesso» pulsa. L'entrata del
   pannello (sale inclinato e si raddrizza) e quella delle quattro voci (salgono da una fessura) le fa motion.js; senza script
   tutto è fermo e acceso. */
.as-pannello__alone, .as-pannello__adesso { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.as-pannello__adesso { stroke: #F37022; stroke-width: 7px; }
.as-pannello__alone { stroke: rgba(243, 112, 34, .35); stroke-width: 7px; opacity: 0; }
.as-dopo.is-vivo .as-pannello__alone { animation: as-pn-alone 2.2s 1.6s ease-out infinite; }
@keyframes as-pn-alone { 0% { stroke-width: 7px; opacity: .9; } 100% { stroke-width: 26px; opacity: 0; } }
.as-pannello__stato i { position: relative; }
.as-pannello__stato i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(63, 185, 80, .55); opacity: 0; }
.as-dopo.is-vivo .as-pannello__stato i::after { animation: as-pn-battito 2s ease-out infinite; }
@keyframes as-pn-battito { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(63, 185, 80, .55); } 100% { opacity: 0; box-shadow: 0 0 0 9px rgba(63, 185, 80, 0); } }
.as-pannello__barre { position: relative; }
.as-pannello__barre::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: 0; width: 22%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent); mix-blend-mode: overlay; opacity: 0; transform: translateX(-100%); }
.as-dopo.is-vivo .as-pannello__barre::after { animation: as-pn-luce 4s 1.8s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes as-pn-luce { 0% { opacity: 0; transform: translateX(-100%); } 8% { opacity: 1; } 42% { opacity: 1; transform: translateX(460%); } 46%, 100% { opacity: 0; transform: translateX(460%); } }