/*
 * Studio Arfia — home.css · v0.4.0 · 17/08/2026
 * Giro di eleganza (Rami: «effetto Awwwards»): layout editoriali su
 * hairline, numeri giganti col contatore, voci di Dimentica che si
 * sbarrano, form a due colonne, showreel alla Lusion prima del footer.
 */

/* ── 1 · Hero (biancastra, canvas, centrata) ───────────────────────────── */
.as-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: clip;
}
.as-hero__gl { position: absolute; inset: 0; pointer-events: none; }
.as-hero__gl canvas { width: 100%; height: 100%; display: block; }
.as-hero__in {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--as-sp-5);
	padding-top: var(--as-header-h);
}
.as-hero h1 { max-width: 16ch; }
.as-hero__sub { color: var(--as-grigio-testo); }
.as-hero__cta { display: flex; flex-wrap: wrap; gap: var(--as-sp-3); margin-top: var(--as-sp-2); }
/* v0.38: «Scorri» nell'angolo in basso a DESTRA: a sinistra, in basso, passa
   l'arco della linea (a 1280×720 gli finiva addosso). */
.as-hero__hint {
	position: absolute;
	right: var(--as-gutter);
	bottom: var(--as-sp-6);
	margin: 0;
	color: var(--as-grigio-testo);
}
/* Il bottone secondario ha il fondo pieno della hero: se la linea gli passa
   dietro (schermi fuori misura) il testo resta su bianco, mai sull'arancio. */
.as-hero__cta .as-btn--sec { background: var(--as-bg); }
.as-hero__cta.is-notte .as-btn--sec { background: var(--as-carbone); }

/* ── Hero da telefono (≤ 699px, v0.38, design/DIREZIONE-MOBILE.md) ─────────
   Il blocco sta IN BASSO, sopra il pollice: sopra resta il palco della linea
   (la sua versione verticale, home-hero.php). H1 a 40px (display-md), i due
   bottoni a tutta larghezza, uno sopra l'altro, alti 52. «Scorri» via: da
   telefono il gesto si sa già, e al bordo basso lo coprirebbe la barra. */
.as-hero__segno { display: none; }
@media (max-width: 699px) {
	.as-hero { align-items: stretch; }
	/* v0.52.2 (Rami, 20/10, dal suo iPhone): con la barra di Safari sospesa e trasparente (iOS 26) sotto la
	   hero si vedeva l'inizio dei numeri, nero. La fascia sotto la barra (circa 100px) sta fuori da ogni
	   unità vh/svh/lvh (registro condiviso, 17/09): la hero allunga il suo bianco di 128px in fondo, il
	   blocco dei testi resta alto 100svh e non si sposta niente. La marea parte da qui (home.js legge
	   questo padding). */
	.as-hero { padding-bottom: 128px; }
	.as-hero .as-linea--largo { display: none; }
	.as-hero__in {
		min-height: 100svh;
		justify-content: flex-end;
		gap: 18px;
		padding-top: calc(var(--as-header-h) + 8px);
		padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); /* v0.45 (Rami, dal telefono: «troppo in basso»): era 36 */
	}
	/* Il palco della linea: tutto lo spazio tra la barra e il titolo, a filo
	   dei bordi dello schermo (esce dal margine del contenitore). */
	/* v0.41 (Rami, 17/10): il segno copre tutta la hero e sta DIETRO ai testi (z-index -1 dentro il
	   contesto di .as-hero__in): la discesa dopo il nodo passa accanto ai bottoni, che la coprono. */
	.as-hero__segno {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
		z-index: -1;
		pointer-events: none;
	}
	.as-hero h1 { max-width: none; }
	.as-hero__sub { max-width: 34ch; }
	.as-hero__cta { flex-direction: column; gap: 10px; margin-top: 6px; }
	.as-hero__cta .as-btn { width: 100%; min-height: 52px; font-size: 15px; }
	.as-hero__hint { display: none; }
}

/* ── LA LINEA (scarabocchio alla Lusion, v0.17.0) ──────────────────────
   Un path arancio sfumato full-bleed dietro al contenuto: si disegna
   con lo scroll (home.js, dasharray+scrub). Senza JS: linea INTERA. */
.as-linea {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}
/* v0.38: solo il blocco centrale. «Scorri» resta absolute (riga 30): con
   relative finiva a destra del contenitore, fuori schermo a ogni larghezza. */
.as-hero__in { position: relative; z-index: 1; }
.as-presa { position: relative; overflow: clip; }
/* v0.23: a schermo intero, la linea sta intera (meet) e non viene mai tagliata. */
.as-presa .as-linea { inset: 0; height: 100%; }
.as-presa .as-container { position: relative; z-index: 1; }
/* v0.38 bis (29/09): da telefono la linea è tagliata a sinistra (slice, home.js):
   l'arco entra sopra il titolo e il giro sotto chiude la riga. Il blocco respira
   di più, così l'arco non tocca il titolo e il tratto di fondo non tocca la riga. */
/* v0.40 (Rami, 17/10): da telefono il segno disegnato per la colonna (home-presa.php), il
   disegno del desktop sparisce: niente più bande tagliate. */
.as-presa .as-linea--tel { display: none; }
@media (max-width: 699px) {
	.as-presa { padding-block: 112px 128px; overflow: visible; z-index: 2; } /* v0.43: la riga prosegue sotto, dentro Conosciamoci */
	.as-presa .as-linea--largo { display: none; }
	.as-presa .as-linea--tel { display: block; height: calc(100% + 280px); }
}

/* ── 2 · La firma: TOLTA dalla home (v0.31, Rami 27/09: «leva la sezione del referente»). */

/* ── 3 · La vetrina dei progetti (griglia di card, v0.13.1) ────────────
   Featured-Work alla Lusion nel NOSTRO sistema: 2 colonne SFALSATE di
   card DS §7 (squircle + tacca). Lo sfalso sta sul .as-tkw (figlio),
   non sulla cella: il reveal [data-scroll-in] anima il transform della
   cella e lo sovrascriverebbe. La lista-sipario è stata bocciata. */
/* La vetrina è la CONTINUAZIONE delle prove (un solo blocco scuro):
   sopra quasi niente aria, sotto il respiro di sezione. */
.as-vetrina { padding-block: var(--as-sp-6) var(--as-sect); }
/* Il PANNELLO (prove): fondo e colori PROPRI (niente flood: dietro deve
   restare il bianco). L'ingresso è quello di prima + LA GOCCIA (v0.15.2,
   idea di Rami): il bordo superiore entra BOMBATO al centro — una cupola
   che si spiana con lo scrub (home.js anima --as-goccia). */
.as-prove {
	background: var(--as-carbone);
	color: var(--as-bianco);
	--as-goccia: 0px;
	border-radius: 50% 50% 0 0 / var(--as-goccia) var(--as-goccia) 0 0;
}
.as-prove .as-meta { color: var(--as-grigio-testo-inv); }
.as-prove .as-display-sm em { color: var(--as-grigio-testo-inv); }
/* LA CONTRO-GOCCIA (v0.19.5): il blocco scuro SI CHIUDE col gesto
   speculare a come si è aperto — il bordo basso della vetrina forma una
   pancia a goccia (home.js anima --as-goccia2) mentre sotto il flood
   riapre il bianco della firma. Senza JS: bordo dritto, nulla di perso. */
.as-vetrina {
	background: var(--as-carbone);
	--as-goccia2: 0px;
	border-radius: 0 0 50% 50% / 0 0 var(--as-goccia2) var(--as-goccia2);
}
/* v0.19.0 (Rami): via la griglia sfalsata — le card si ALLINEANO A DESTRA
   in colonna singola; a sinistra resta il posto per il testo delle prove
   PINNATO (home.js). Senza JS: colonna destra e testo sopra, tutto fermo. */
.as-vetrina__griglia {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 6vh, 72px);
}
@media (min-width: 900px) {
	.as-vetrina__griglia { align-items: flex-end; }
	.as-vetrina__cella { width: min(58%, 820px); }
}
/* Il sottotitolo al posto dei numeri (v0.19.1: taglia da testo, non da
   display — «c'è già il titolo che è enorme», Rami). */
.as-prove__testa { max-width: min(36vw, 520px); }
/* In colonna il display-md pieno andrebbe a capo male: taglia da colonna. */
.as-prove__testa .as-display-md { font-size: clamp(40px, 4.7vw, 68px); }
.as-prove__sotto {
	margin-top: var(--as-sp-4);
	font-size: clamp(17px, 1.35vw, 21px);
	line-height: 1.5;
	max-width: 34ch;
	color: var(--as-grigio-testo-inv);
}
/* Le CTA fisse sotto il testo pinnato (v0.19.1). */
.as-prove__cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--as-sp-4);
	margin-top: var(--as-sp-5);
}
/* «Contatti» dev'essere SOTTOLINEATA anche a riposo (Rami): la riga del
   tlink qui parte piena invece che da zero. */
.as-prove__cta .as-tlink::after { transform: scaleX(1); }
@media (max-width: 899px) {
	.as-prove__testa { max-width: none; }
}
/* Lo SHADER sulle card (demo GSAP «shader on scroll», v0.19.0): il canvas
   copre il media col poster distorto dalla velocità di scroll; in hover
   sparisce e sotto c'è il VIDEO che parte (regia già esistente). */
.as-card__media { position: relative; }
.as-card__gl {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: opacity .35s ease;
}
.as-tkw:hover .as-card__gl { opacity: 0; }
/* La sezione progetti UNIFICATA in coda al blocco scuro (v0.15.5).
   Specificità .as-carbone: il blocco storico della sezione sta più in
   basso nel file e altrimenti rivincerebbe. */
.as-hprogetti.as-carbone {
	background: var(--as-carbone);
	color: var(--as-bianco);
	padding-top: var(--as-sp-6);
}
.as-hprogetti.as-carbone .as-hprogetti__testo { color: var(--as-grigio-testo-inv); }
.as-hprogetti.as-carbone .as-tlink { color: var(--as-bianco); }
/* 🔴 I TRE BLOCCHI SCURI TENGONO IL FONDO ANCHE SOTTO FLOOD: la legge
   html.as-flood [data-fondo]{background:transparent} di base.css li
   spegnerebbe — ma la goccia disegna la cupola col fondo PROPRIO prima
   che il flood scatti. Stessa specificità (0,2,1), dichiarata dopo:
   vince questa. */
html.as-flood .as-prove,
html.as-flood .as-vetrina,
html.as-flood .as-hprogetti { background: var(--as-carbone); }
.as-card__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

/* ── 4 · I due mondi — LO SPLIT (v0.23, Rami: via le bande) ─────────────
   Due metà a tutta larghezza, foto in bianco e nero sotto un velo di
   carbone; in hover la metà che guardi si allarga e la foto si avvicina.
   Entrano dai lati con lo scroll (clip-path, motion.js). */
.as-mondi .as-container > .as-display-md { margin-bottom: var(--as-sp-6); }
.as-mondi__split {
	display: flex;
	height: min(84svh, 780px);
	overflow: clip;
}
.as-mondi__lato {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	isolation: isolate;
	color: var(--as-bianco);
	transition: flex-grow .9s var(--as-ease-out);
}
.as-mondi__lato + .as-mondi__lato { box-shadow: -1px 0 0 rgba(255, 255, 255, .16); }
.as-mondi__foto { position: absolute; inset: 0; margin: 0; z-index: 0; }
/* Foto A COLORI (Rami, secondo giro) con un velo in sfumatura bassa, solo in
   basso, dove stanno i testi. */
.as-mondi__foto img {
	display: block;
	width: 100%;
	height: 120%;
	margin-top: -10%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.4s var(--as-ease-out);
}
.as-mondi__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	/* v0.38 (29/09): velo più deciso, la riga sulla foto passava sul tablet e sulle mani */
	background: linear-gradient(180deg, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, .55) 60%, rgba(10, 10, 10, .88) 100%);
}
.as-mondi__in {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--as-sp-3);
	padding: clamp(24px, 4vw, 56px);
}
.as-mondi__eti { display: block; font-size: 14px; color: rgba(255, 255, 255, .75); }
.as-mondi__bt {
	font-size: clamp(36px, 4.6vw, 72px);
	font-weight: 300;
	letter-spacing: -.035em;
	line-height: 1;
	margin: 0;
}
.as-mondi__bt a { color: inherit; text-decoration: none; }
.as-mondi__lato .as-lede { max-width: 30ch; margin: 0; color: rgba(255, 255, 255, .9); }
.as-mondi__links { display: flex; flex-wrap: wrap; gap: var(--as-sp-2); margin: var(--as-sp-2) 0 0; }
.as-mondi__lato .as-pill {
	color: var(--as-bianco);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
	transition: background var(--as-t-micro) ease, color var(--as-t-micro) ease;
}
@media (hover: hover) {
	.as-mondi__split:hover .as-mondi__lato { flex-grow: .78; }
	.as-mondi__split .as-mondi__lato:hover { flex-grow: 1.55; }
	.as-mondi__lato:hover .as-mondi__foto img { transform: scale(1.07); }
	.as-mondi__lato .as-pill:hover { background: var(--as-bianco); color: var(--as-carbone); }
}
@media (max-width: 899px) {
	.as-mondi__split { flex-direction: column; height: auto; }
	.as-mondi__lato { min-height: 56svh; }
	.as-mondi__foto { will-change: transform; }
	.as-mondi__lato + .as-mondi__lato { box-shadow: 0 -1px 0 rgba(255, 255, 255, .16); }
}
/* La coda dei mondi: LE QUATTRO SOLUZIONI in card (v0.23.4, Rami: «diamogli
   attenzione, sono importantissimi: card sulla stessa riga, effetti Awwwards»).
   Cornice sempre (hairline), squircle; quattro in fila da 1100px, due sotto,
   una da telefono. Hover: la card si inclina verso il puntatore (home.js), una
   luce arancio lo segue dentro (--x/--y) e lungo il bordo, l'icona si accende,
   la freccia entra. All'arrivo salgono a ventaglio e l'icona si disegna. */
.as-soluzioni { margin-top: var(--as-sp-7); display: grid; gap: var(--as-sp-4); }
/* v0.38 (29/09): l'intro è una frase vera, non un'etichetta grigia a 13px. */
.as-soluzioni__eti { margin: 0; font-size: clamp(20px, 1.6vw, 24px); letter-spacing: -.01em; line-height: 1.3; color: var(--as-ink); }
.as-soluzioni__griglia {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 20px);
	perspective: 1200px;
}
@media (min-width: 1100px) { .as-soluzioni__griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.as-soluzioni__cella { min-width: 0; }
.as-soluzione {
	--as-r-out: calc(var(--as-r-card-lg) * var(--as-brm));
	--x: 50%;
	--y: 50%;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: var(--as-sp-6);
	min-height: clamp(240px, 21vw, 300px);
	padding: clamp(20px, 1.8vw, 28px);
	border-radius: var(--as-r-out);
	background: var(--as-sup);
	color: var(--as-ink);
	text-decoration: none;
	box-shadow: inset 0 0 0 1px var(--as-line);
	overflow: hidden;
	transform-style: preserve-3d;
	will-change: transform;
}
/* v0.23.6 (Rami: «due bordi di raggio diverso in hover»): `border-radius:
   inherit` copia solo il VALORE del raggio, non la resa a squircle, che è
   una proprietà a parte e vale solo dov'è dichiarata: il bordo luminoso
   (un elemento suo, non un pseudo del genitore) restava con l'angolo
   arrotondato «normale» mentre la carta sotto era squircle. Va dichiarata
   su ciascuno dei due, non solo sulla carta. */
@supports (corner-shape: squircle) { .as-soluzione, .as-soluzione__luce, .as-soluzione__bordo { corner-shape: squircle; } }
.as-soluzione__luce, .as-soluzione__bordo {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--as-t-azione) ease;
}
.as-soluzione__luce { background: radial-gradient(360px circle at var(--x) var(--y), rgba(243, 112, 34, .13), transparent 62%); }
.as-soluzione__bordo {
	padding: 1px;
	background: radial-gradient(240px circle at var(--x) var(--y), var(--as-arancio), transparent 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.as-soluzione__testa { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--as-sp-3); }
.as-soluzione__icona {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--as-bianco);
	box-shadow: inset 0 0 0 1px var(--as-line);
	transition: transform var(--as-t-azione) var(--as-ease-out), background var(--as-t-micro) ease, color var(--as-t-micro) ease, box-shadow var(--as-t-micro) ease;
}
.as-soluzione__n { color: var(--as-muted); }
.as-soluzione__corpo { display: grid; gap: var(--as-sp-2); align-self: end; padding-right: 44px; }
.as-soluzione__titolo {
	font-size: var(--as-type-card);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.1;
	transition: transform var(--as-t-azione) var(--as-ease-out);
}
.as-soluzione__riga { font-size: var(--as-type-body); line-height: 1.45; min-height: 2.9em; color: var(--as-muted); } /* due righe sempre: i titoli restano allineati */
.as-soluzione__vai {
	position: absolute;
	right: clamp(20px, 1.8vw, 28px);
	bottom: clamp(20px, 1.8vw, 28px);
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--as-ink);
	color: var(--as-bianco);
	opacity: 0;
	transform: translate(10px, 10px) scale(.7);
	transition: transform var(--as-t-azione) var(--as-ease-out), opacity var(--as-t-micro) ease;
}
@media (hover: hover) {
	.as-soluzione:hover .as-soluzione__luce, .as-soluzione:hover .as-soluzione__bordo,
	.as-soluzione:focus-visible .as-soluzione__luce, .as-soluzione:focus-visible .as-soluzione__bordo { opacity: 1; }
	.as-soluzione:hover .as-soluzione__icona, .as-soluzione:focus-visible .as-soluzione__icona { transform: translateY(-4px) rotate(-8deg); background: var(--as-arancio); color: var(--as-bianco); box-shadow: none; }
	.as-soluzione:hover .as-soluzione__titolo, .as-soluzione:focus-visible .as-soluzione__titolo { transform: translateY(-2px); }
	.as-soluzione:hover .as-soluzione__vai, .as-soluzione:focus-visible .as-soluzione__vai { opacity: 1; transform: none; }
}
/* v0.38 (29/09): con quattro card in fila le righe nuove (circa 60 caratteri) vanno anche su tre righe:
   il minimo sale a tre, e i titoli delle quattro card restano allineati. */
@media (min-width: 1100px) { .as-soluzione__riga { min-height: 4.35em; } }
/* v0.52: il layout da telefono delle soluzioni (riga compatta, v0.38) è sostituito dal 2×2 con la tacca, in coda al file. */

/* ── 5 · Dimentica: IL BINARIO ORIZZONTALE (v0.23.3; ripulito in v0.23.4,
      Rami: «l'orizzontale teniamolo, ma i testi così sono orribili e il
      barrato è pessimo: un lavoro pulito») ────────────────────────────────
   Il palco è alto un viewport e si ferma (pin, motion.js); il binario dei
   pannelli scorre in orizzontale col tuo scroll. Ogni pannello: il numero
   piccolo, la PAURA grande su una riga, il PERCHÉ sotto. Quando il pannello
   arriva al centro la paura si SVUOTA (dal pieno al solo contorno) e il
   perché sale, nero: resta lui. Niente barre, niente croci. Su touch e
   senza JS: pannelli in colonna. */
.as-dimentica { overflow: clip; }
/* Il palco ha il fondo ESPLICITO: i testi sono in fusione (difference) e dentro
   il gruppo del pin fondono solo con quello che c'è dipinto qui, non con la
   pagina (Errori §1.19). Sopra il fondo, la MAREA nera (clip a cupola, la
   muove motion.js: --as-marea-top / --as-marea-goccia); sopra ancora i testi,
   bianchi in difference: neri sul bianco, bianchi sotto la marea. */
/* v0.38 (29/09, revisione del 28): il titolo in ALTO invece che al centro. Centrato,
   tra le card delle soluzioni e «Dimentica:» restavano 360px di bianco; così arriva
   subito, e sotto il pannello resta lo spazio in cui cadono le lettere. */
.as-dimentica__palco {
	position: relative;
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: clamp(28px, 6vh, 64px);
	padding-top: max(calc(var(--as-header-h) + 40px), 15vh);
	overflow: clip;
	background: var(--as-bg);
}
.as-dimentica__marea {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--as-carbone);
	clip-path: inset(var(--as-marea-top, 100%) 0 0 0 round 50% 50% 0 0 / var(--as-marea-goccia, 0px) var(--as-marea-goccia, 0px) 0 0);
}
.as-dimentica__testa, .as-dimentica__binario { position: relative; z-index: 2; mix-blend-mode: difference; color: var(--as-bianco); --as-toro-c: var(--as-bianco); }
.as-dimentica__testa { width: 100%; /* i margini auto del container, dentro il flex, lo restringerebbero al contenuto */ display: flex; align-items: baseline; justify-content: space-between; gap: var(--as-sp-4); }
.as-dimentica__titolo { margin: 0; color: inherit; }
.as-nb { white-space: nowrap; } /* v0.43.1: «4 motivi» resta insieme */
/* v0.43: il toro accanto alla «a» di «Arfia»: alto, inclinato a destra, col colore del testo (maschera). Lo fa saltare dentro motion.js. */
.as-dimentica__toro {
	display: inline-block;
	position: relative;
	top: -.4em;
	width: .6em;
	height: .58em;
	margin-left: .06em;
	vertical-align: baseline;
	background: var(--as-toro-c, currentColor); /* v0.69: dentro l'<em> grigio il toro resta del colore del titolo */
	-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%;
}
/* In difference i grigi si scelgono al contrario: questo, sul bianco, diventa il muted. */
.as-dimentica__conta, .as-dimentica__n { color: var(--as-grigio-testo-inv); font-variant-numeric: tabular-nums; }
.as-dimentica__conta { white-space: nowrap; flex: 0 0 auto; } /* v0.40.1: col titolo lungo il contatore andava a capo («01 /» «04») */
/* v0.38 (29/09, revisione del 28: «7.500px di scroll per quattro righe, e metà del
   tempo sullo schermo c'è solo Dimentica:»). Il binario è più CORTO e più FITTO:
   pannelli da 58vw (erano 84), spazi da 4vw (erano 6), per cui quando una paura
   cade a sinistra la successiva sta già entrando al 62% dello schermo: non c'è più
   uno schermo vuoto. Il primo pannello parte al 60% (corsia di 50vw): ha lo stesso
   arrivo degli altri. Pin da 6.600 a circa 4.400px a 1440×900 (motion.js). */
.as-dimentica__binario {
	display: flex;
	align-items: stretch;
	gap: clamp(24px, 4vw, 64px);
	padding-inline: var(--as-gutter);
	will-change: transform;
}
/* v0.23.6: la corsia vuota prima del primo pannello (Rami: «dagli il tempo
   di arrivare»). Solo in orizzontale: in colonna sparisce, non serve. */
/* v0.38 bis (29/09): corsia da 34vw (era 50): il primo pannello è già letto quando la
   sezione si ferma, non c'è più uno schermo con solo «Dimentica:». */
.as-dimentica__apri { flex: 0 0 clamp(200px, 34vw, 640px); }
.as-dimentica__pannello {
	flex: 0 0 auto;
	width: min(58vw, 920px);
	display: grid;
	align-content: center;
	gap: var(--as-sp-4);
	padding-block: var(--as-sp-5);
	border-top: 1px solid var(--as-filo-c); /* in difference: sul bianco è il filo chiaro, sotto la marea il filo scuro */
}
.as-dimentica__paura {
	display: grid;
	margin: 0;
	font-size: clamp(36px, 4.8vw, 76px); /* v0.38: la paura più lunga (26 caratteri) sta nel pannello da 58vw */
	font-weight: 300;
	letter-spacing: -.035em;
	line-height: 1.02;
	white-space: normal; /* v0.43 (Rami: «Ne parliamo insieme, poi decidi tu»): le righe lunghe vanno a capo invece di uscire dal pannello */
	max-width: 100%;
	color: inherit;
}
.as-dimentica__paura > span { grid-area: 1 / 1; }
.as-dimentica__vuoto {
	color: transparent;
	-webkit-text-stroke: 1px var(--as-bianco);
	opacity: 0; /* la porta a 1 lo scrub (motion.js); in colonna, lo stato is-vista */
}
@supports not (-webkit-text-stroke: 1px black) { .as-dimentica__vuoto { display: none; } }
.as-dimentica__perche {
	margin: 0;
	max-width: 34ch;
	font-size: clamp(20px, 1.9vw, 30px);
	line-height: 1.3;
	letter-spacing: -.01em;
	color: inherit;
}
.as-dimentica__pannello--chiusa { border-top: 0; width: min(46vw, 760px); } /* v0.38 bis: la chiusa sta in 46vw su tre-quattro righe, il binario si accorcia */
.as-dimentica__chiusa { margin: 0; max-width: 22ch; }
/* In colonna: touch, e senza JS. Su touch la paura si svuota quando il pannello
   è in vista (is-vista dal reveal); senza JS resta piena, col perché sotto. */
.as-orizzontale--statico .as-dimentica__palco, html:not(.as-flood) .as-dimentica__palco { height: auto; padding-block: var(--as-sect); }
.as-orizzontale--statico .as-dimentica__binario, html:not(.as-flood) .as-dimentica__binario { flex-direction: column; gap: var(--as-sp-6); }
.as-orizzontale--statico .as-dimentica__apri, html:not(.as-flood) .as-dimentica__apri { display: none; }
.as-orizzontale--statico .as-dimentica__pannello, html:not(.as-flood) .as-dimentica__pannello { width: auto; }
.as-orizzontale--statico .as-dimentica__conta, html:not(.as-flood) .as-dimentica__conta { display: none; }
.as-orizzontale--statico .as-dimentica__paura, html:not(.as-flood) .as-dimentica__paura { white-space: normal; font-size: var(--as-type-display-sm); }
/* v0.38 bis (29/09): su touch NIENTE contorno (a 1px su un 300 sembrava un errore di stampa).
   In colonna niente fusione: colori veri. La paura resta piena in ink e, quando il pannello
   passa metà schermo (is-letta, motion.js), scolora in grigio mentre il perché sale e si
   scurisce: resta lui. */
.as-orizzontale--statico .as-dimentica__testa, .as-orizzontale--statico .as-dimentica__binario { mix-blend-mode: normal; color: var(--as-ink); --as-toro-c: var(--as-ink); }
.as-orizzontale--statico .as-dimentica__conta, .as-orizzontale--statico .as-dimentica__n { color: var(--as-muted); }
.as-orizzontale--statico .as-dimentica__pannello { border-top-color: var(--as-line); }
.as-orizzontale--statico .as-dimentica__vuoto { display: none; }
.as-orizzontale--statico .as-dimentica__pieno { transition: color .6s var(--as-ease-out); }
.as-orizzontale--statico .as-dimentica__perche { color: var(--as-muted); transform: translateY(12px); transition: color .6s var(--as-ease-out), transform .6s var(--as-ease-out); }
.as-orizzontale--statico .as-dimentica__pannello.is-letta .as-dimentica__pieno { color: var(--as-grigio-display); }
.as-orizzontale--statico .as-dimentica__pannello.is-letta .as-dimentica__perche { color: var(--as-ink); transform: none; }

/* v0.40 (Rami, 17/10): DIMENTICA PINNATA ANCHE DA TELEFONO (data-as-pin-touch, motion.js).
   Stesso binario, stesse fusioni, stessa caduta: pannelli da 82vw, la riga grande che va a
   capo (nowrap non ci sta in 390px), titolo e contatore impilati. Il contorno (vuoto) a 1.2px,
   più visibile del 1px che da telefono sembrava un errore di stampa. */
@media (max-width: 899px) {
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__palco { padding-top: calc(var(--as-header-h) + 20px); gap: 48px; } /* v0.45: più aria tra titolo e carte */
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__testa { flex-direction: column; align-items: flex-start; gap: 8px; }
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__titolo { max-width: none; } /* v0.45 (Rami): era 12ch, «sembra una colonna sola a sinistra» */
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__binario { gap: 6vw; }
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__apri { flex-basis: 14vw; }
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__pannello { width: 82vw; padding-block: var(--as-sp-4); gap: var(--as-sp-3); }
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__pannello--chiusa { width: 82vw; }
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__paura { white-space: normal; font-size: clamp(30px, 9vw, 40px); line-height: 1.04; }
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__vuoto { -webkit-text-stroke-width: 1.2px; }
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__perche { font-size: 18px; max-width: none; }
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__chiusa { font-size: 32px; max-width: none; }
}

/* ── 6 · Le prove (i numeri sono usciti in v0.19.0: resta il sottotitolo,
      stili nel blocco vetrina più su) ─────────────────────────────────── */
.as-prove__voci { display: grid; gap: var(--as-sp-6); margin-top: var(--as-sp-8); }
.as-prove__voce figcaption { margin-top: var(--as-sp-3); }

/* ── 7 · I progetti (testata editoriale: titolo a sx, CTA a dx) ────────── */
.as-hprogetti__testa {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--as-sp-4);
}
.as-hprogetti__testo { margin-top: var(--as-sp-4); color: var(--as-muted); }
.as-hprogetti__grid { margin-top: var(--as-sp-7); }
@media (min-width: 1400px) {
	.as-hprogetti__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.as-hprogetti__cta { margin-top: var(--as-sp-7); }

/* ── 8 · Il metodo SUL VIDEO FERMO (v0.23) ───────────────────────────────
   Il quadro cresce mentre arriva (scale + raggio), poi il palco si ferma
   (pin) e i passi compaiono uno alla volta (home.js). I testi stanno sul
   video in difference: neri sul foglio, bianchi sull'inchiostro.
   Senza JS/GSAP (html senza .as-flood) e da telefono (.as-metodo--statico):
   quadro fermo e passi in colonna coi colori normali. */
.as-metodo {
	position: relative;
	overflow: clip;
	/* v0.23.3 (Rami): blocco NERO con la goccia in testa, così il video (nuvola
	   chiara su nero) si mimetizza e il quadro non ha bordi. */
	--as-goccia: 0px;
	border-radius: 50% 50% 0 0 / var(--as-goccia) var(--as-goccia) 0 0;
}
.as-metodo__palco { position: relative; height: 100svh; overflow: clip; }
/* v0.52.10 (Rami, 21/10, dal suo iPhone: «da Cosa aspettarti in giù una barra bianca fissa in basso», poi «intorno
   alla pill deve essere tutto trasparente»). Su touch Quattro motivi e il palco di Cosa aspettarti si FISSANO
   durante il pin: Safari li prenderebbe come contenitori delle sue fasce e, dopo il pin, li terrebbe in memoria
   (la barra bianca). Nascosti come contenitori e visibili nei figli (tutti posizionati: hanno un layer proprio),
   Safari li salta e mostra la pagina. A occhio nulla cambia: il bianco di Quattro motivi è quello del body, il
   carbone del palco è quello della sezione. Il perché completo in base.css, «Safari su iPhone». */
@media (hover: none) {
	.as-dimentica, .as-metodo__palco { visibility: hidden; }
	.as-dimentica > *, .as-dimentica::before, .as-metodo__palco > * { visibility: visible; }
}
.as-metodo__quadro {
	--as-r-out: calc(var(--as-r-card-lg) * var(--as-brm));
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--as-r-out);
	background: var(--as-carbone);
	transform-origin: 50% 50%;
	will-change: transform;
}
@supports (corner-shape: squircle) { .as-metodo__quadro { corner-shape: squircle; } }
/* Il nero del video (#000) non è il carbone: in lighten i neri lasciano vedere il
   fondo e resta solo la nuvola chiara, senza il bordo del riquadro. */
.as-metodo__quadro video { mix-blend-mode: lighten; }
.as-metodo__quadro video { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-metodo__testi { position: absolute; inset: 0; pointer-events: none; }
/* Il titolo FISSO in alto a sinistra con la barra di avanzamento (v0.23.4, Rami):
   una tacca per passo, si riempie mentre il passo compare (--as-tacca, home.js).
   Bianco in difference come i passi: nero dove passa la nuvola. */
.as-metodo__testa {
	position: absolute;
	left: var(--as-gutter);
	top: clamp(88px, 13vh, 140px);
	z-index: 3;
	display: grid;
	gap: var(--as-sp-4);
	pointer-events: none;
	color: #fff;
	mix-blend-mode: difference;
}
.as-metodo__titolo { margin: 0; color: inherit; }
.as-metodo__progresso { display: flex; gap: 6px; width: min(260px, 40vw); }
.as-metodo__progresso i {
	position: relative;
	flex: 1;
	height: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, .28);
}
.as-metodo__progresso i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	transform: scaleX(var(--as-tacca, 0)); /* il default sta qui, non sull'elemento: lo script lo eredita (Errori §1.22) */
	transform-origin: left center;
}
.as-metodo__passo {
	position: absolute;
	left: var(--as-gutter);
	right: var(--as-gutter);
	bottom: clamp(48px, 11vh, 128px);
	max-width: 48ch;
	visibility: hidden; /* lo stato lo governa home.js (clip a sipario); il ripiego sotto rimette tutto in flusso */
	color: #fff;
	mix-blend-mode: difference;
}
/* Le posizioni (Rami: «da parti a caso dello schermo»): fisse per indice, così
   la resa è identica per tutti. Niente transform qui: lo usa lo script. */
.as-metodo__passo--c  { left: 0; right: 0; top: 0; bottom: 0; max-width: none; display: grid; place-items: center; text-align: center; }
.as-metodo__passo--bl { left: var(--as-gutter); right: auto; bottom: clamp(48px, 11vh, 128px); }
.as-metodo__passo--tr { left: auto; right: var(--as-gutter); top: clamp(48px, 12vh, 128px); bottom: auto; text-align: right; }
.as-metodo__passo--tl { left: var(--as-gutter); right: auto; top: clamp(48px, 12vh, 128px); bottom: auto; }
.as-metodo__passo--br { left: auto; right: var(--as-gutter); bottom: clamp(48px, 11vh, 128px); text-align: right; }
/* Il contrasto dinamico vale per TUTTI i testi (Rami): la fusione sta sul
   contenitore, che è trasformato e clippato e farebbe da gruppo isolante se
   fosse sui figli (misurato al banco: testi bianchi sul bianco). Mai opacità
   sopra: la spegnerebbe; l'ingresso è un sipario (clip). */
.as-metodo__titolo, .as-metodo__voce, .as-metodo__riga, .as-metodo__n { color: inherit; margin: 0; }
.as-metodo__n {
	display: block;
	font-size: var(--as-type-display-xl);
	font-weight: 200;
	line-height: .9;
	letter-spacing: -.03em;
	margin-bottom: var(--as-sp-3);
}
.as-metodo__riga { margin-top: var(--as-sp-3); }
/* Ripiego: senza JS e da telefono, tutto nel flusso, colori normali. */
html:not(.as-flood) .as-metodo__palco, .as-metodo--statico .as-metodo__palco { height: auto; padding-block: var(--as-sect); }
html:not(.as-flood) .as-metodo__quadro, .as-metodo--statico .as-metodo__quadro {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 560px;
	margin-inline: auto;
	transform: none;
}
html:not(.as-flood) .as-metodo__testi, .as-metodo--statico .as-metodo__testi {
	position: static;
	pointer-events: auto;
	display: grid;
	gap: var(--as-sp-6);
	margin: var(--as-sp-7) auto 0;
	max-width: 560px;
	padding-inline: var(--as-gutter);
}
html:not(.as-flood) .as-metodo__testa, .as-metodo--statico .as-metodo__testa {
	position: static;
	margin: var(--as-sp-7) auto 0;
	max-width: 560px;
	padding-inline: var(--as-gutter);
	color: var(--as-ink);
	mix-blend-mode: normal;
}
html:not(.as-flood) .as-metodo__progresso, .as-metodo--statico .as-metodo__progresso { display: none; }
/* Il passo «al centro» (--c) in colonna torna un blocco a sinistra come gli altri (misurato da telefono: restava centrato). */
html:not(.as-flood) .as-metodo__passo--c, .as-metodo--statico .as-metodo__passo--c { display: block; place-items: initial; text-align: left; inset: auto; }
html:not(.as-flood) .as-metodo__passo, .as-metodo--statico .as-metodo__passo {
	position: static;
	visibility: visible;
	transform: none;
	clip-path: none;
	max-width: none;
	display: block;
	text-align: left; /* le posizioni sparse (--tr, --br) allineano a destra: in colonna no */
}
html:not(.as-flood) .as-metodo__passo, .as-metodo--statico .as-metodo__passo { color: var(--as-ink); mix-blend-mode: normal; }
html:not(.as-flood) .as-metodo__n, .as-metodo--statico .as-metodo__n { font-size: var(--as-type-display-sm); color: var(--as-grigio-display); }
html:not(.as-flood) .as-metodo__riga, .as-metodo--statico .as-metodo__riga { color: var(--as-muted); }
@media (max-width: 899px) {
	.as-metodo__passo { max-width: none; }
}
/* v0.40 (Rami, 17/10): COME LAVOREREMO INSIEME PINNATO ANCHE DA TELEFONO (data-as-pin-touch,
   home.js): il quadro cresce, il palco si ferma, i passi uno alla volta. Da telefono i passi
   stanno tutti in basso a sinistra (le posizioni sparse finivano sotto il titolo), il numero
   grande è meno grande, il titolo va a capo entro 10 caratteri. */
@media (max-width: 899px) {
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__testa { top: calc(var(--as-header-h) + 20px); }
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__titolo { max-width: 10ch; }
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__passo,
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__passo--tr,
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__passo--br,
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__passo--bl {
		left: var(--as-gutter);
		right: var(--as-gutter);
		top: auto;
		bottom: calc(40px + env(safe-area-inset-bottom, 0px));
		text-align: left;
	}
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__n { font-size: 56px; margin-bottom: 6px; }
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__voce { font-size: 34px; }
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__riga { font-size: 17px; line-height: 1.45; }
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__quadro video {
		-webkit-mask-image: radial-gradient(ellipse 60% 44% at 50% 48%, #000 40%, transparent 100%);
		mask-image: radial-gradient(ellipse 60% 44% at 50% 48%, #000 40%, transparent 100%);
	}
}
/* v0.38 bis (29/09, revisione del 28). DESKTOP: la riga a peso pieno (400), e la nuvola si
   spegne verso i bordi (maschera radiale) dove stanno i testi, così nessuna parola in
   difference finisce sul grigio medio. */
.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__riga { font-weight: 400; }
.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__quadro video {
	-webkit-mask-image: radial-gradient(ellipse 36% 42% at 54% 52%, #000 40%, transparent 100%);
	mask-image: radial-gradient(ellipse 36% 42% at 54% 52%, #000 40%, transparent 100%);
}
/* TELEFONO e tablet stretto in colonna: prima il titolo, con il video come una banda
   16:9 dietro (velo scuro in basso), non più la nuvola a schermo intero; poi i passi
   con una barra verticale a sinistra che si riempie scorrendo (--as-metodo-fill, home.js).
   Senza JS la barra è piena e i passi sono tutti visibili. */
@media (max-width: 899px) {
	html:not(.as-flood) .as-metodo__palco, .as-metodo--statico .as-metodo__palco { display: grid; grid-template-columns: minmax(0, 1fr); }
	html:not(.as-flood) .as-metodo__quadro, .as-metodo--statico .as-metodo__quadro {
		grid-area: 1 / 1;
		width: 100%;
		max-width: none;
		aspect-ratio: 16 / 9;
		border-radius: 0;
	}
	html:not(.as-flood) .as-metodo__quadro::after, .as-metodo--statico .as-metodo__quadro::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, .6) 70%, var(--as-carbone) 100%);
	}
	html:not(.as-flood) .as-metodo__testa, .as-metodo--statico .as-metodo__testa {
		grid-area: 1 / 1;
		align-self: end;
		position: relative;
		top: auto;
		left: auto;
		z-index: 1;
		width: 100%;
		margin: 0;
		max-width: none;
		padding-bottom: 4px;
	}
	html:not(.as-flood) .as-metodo__testi, .as-metodo--statico .as-metodo__testi {
		--as-metodo-fill: 1;
		position: relative;
		width: calc(100% - 2 * var(--as-gutter));
		max-width: none;
		margin: var(--as-sp-6) var(--as-gutter) 0;
		padding: 0 0 0 24px;
		gap: var(--as-sp-6);
	}
	html:not(.as-flood) .as-metodo__testi::before, .as-metodo--statico .as-metodo__testi::before,
	html:not(.as-flood) .as-metodo__testi::after, .as-metodo--statico .as-metodo__testi::after {
		content: "";
		position: absolute;
		left: 0;
		top: 6px;
		bottom: 6px;
		width: 2px;
		background: rgba(255, 255, 255, .18);
	}
	html:not(.as-flood) .as-metodo__testi::after, .as-metodo--statico .as-metodo__testi::after {
		background: var(--as-arancio);
		transform: scaleY(var(--as-metodo-fill));
		transform-origin: top center;
	}
	html:not(.as-flood) .as-metodo__n, .as-metodo--statico .as-metodo__n { font-size: 28px; margin-bottom: var(--as-sp-2); }
	html:not(.as-flood) .as-metodo__voce, .as-metodo--statico .as-metodo__voce { font-size: 36px; }
	html:not(.as-flood) .as-metodo__riga, .as-metodo--statico .as-metodo__riga { font-size: 17px; line-height: 1.5; }
}

/* ── 9 · La presa di posizione (una parola accesa) ─────────────────────── */
.as-presa__titolo { max-width: 24ch; }
.as-presa__riga { margin-top: var(--as-sp-6); color: var(--as-muted); }

/* ── 10 · Conosciamoci: il componente è in base.css (v0.24, lo usa anche /contatti/). */

/* ── 10 · Il device col robot è TRASLOCATO nella hero di /contatti/ (v0.28,
   Rami): stili in contatti.css, modulo in home.js (ramo hero, namespace contatti). */

/* ── LA MAREA (v0.22, Rami 25/09: «il nero deve espandersi dalla seconda
   sezione in su») ─────────────────────────────────────────────────────────
   Strato carbone dentro la hero, clippato con la cupola della goccia: lo
   muove home.js (--as-marea-top, --as-marea-goccia). Ordine dei piani:
   fumo WebGL (0) · marea (1) · linea arancio (2, resta sopra il nero) ·
   testi (3). Senza JS: inset 100% = strato invisibile, hero bianca. */
.as-hero { isolation: isolate; }
.as-hero__gl { z-index: 0; }
.as-hero__marea {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--as-carbone);
	pointer-events: none;
	clip-path: inset(var(--as-marea-top, 100%) 0 0 0 round 50% 50% 0 0 / var(--as-marea-goccia, 0px) var(--as-marea-goccia, 0px) 0 0);
}
.as-hero .as-linea { z-index: 2; }
.as-hero__in, .as-hero__hint { z-index: 3; }
/* I testi si invertono pixel per pixel: il colore è un gradiente clippato
   sui glifi che ricalca la cupola (lo scrive home.js elemento per elemento). */
.as-marea-testo {
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
/* I bottoni si ribaltano quando il bordo della marea li ha sommersi
   (stesso vestito dei bottoni su .as-carbone, base.css). */
.as-hero__cta .as-btn { transition: background-color .25s ease, color .45s var(--as-ease-out), box-shadow .25s ease; }
.as-hero__cta.is-notte .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-hero__cta.is-notte .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); }
/* v0.83.2 (stesso baco di Errori 1.75): la variante «notte» (0,3,0) copriva anche il colore di hover di `.as-btn:hover`: in hover il testo
   restava bianco sul riempimento bianco. Il colore di hover si ripete qui, con la specificità del contesto. */
@media (hover: hover) { .as-hero__cta.is-notte .as-btn--sec:hover { color: var(--as-btn-txt-hov); } }
.as-hero__cta.is-notte .as-btn--sec:focus-visible { color: var(--as-btn-txt-hov); }

/* L'ultimo blocco scuro resta FERMO (pin, data-as-copri) mentre la sezione
   dopo gli sale sopra: lui sotto (z 1), lei sopra (z 2, classe .as-copre di
   base.css messa da motion.js) col fondo suo e la cupola in testa. */
.as-wip { position: relative; z-index: 1; }

/* ── IL PORTFOLIO SU APPUNTAMENTO (v0.31, Rami 27/09): scena notturna a
   schermo intero, testo a sinistra e la ruota dei mestieri a destra. ── */
.as-appuntamento {
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: clip;
	--as-goccia2: 0px;
	/* la pancia in fondo mentre sale la fascia delle parole (motion.js) */
	border-radius: 50% 50% 50% 50% / var(--as-goccia) var(--as-goccia) var(--as-goccia2) var(--as-goccia2);
}
.as-appuntamento > .as-container { width: 100%; }
.as-appuntamento__griglia { display: grid; gap: var(--as-sp-7); }
@media (min-width: 1000px) {
	.as-appuntamento__griglia { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: var(--as-sp-8); align-items: center; }
}
.as-appuntamento__testa { min-width: 0; }
/* Taglia sua: «appuntamento» è una parola lunga e deve stare nella colonna
   sinistra senza invadere la ruota (display-lg pieno la sforava). */
.as-appuntamento__titolo { margin: 0; font-size: clamp(40px, 4.6vw, 76px); line-height: 1; letter-spacing: -.03em; }
.as-appuntamento__titolo em { font-style: normal; color: var(--as-grigio-testo-inv); }
.as-appuntamento__testo { margin-top: var(--as-sp-5); max-width: 40ch; color: var(--as-grigio-testo-inv); }
.as-appuntamento__cta { margin-top: var(--as-sp-6); }
.as-appuntamento__modulo { margin-top: var(--as-sp-6); }
.as-appuntamento__ruota { margin: 0; min-width: 0; }
/* In colonna (v0.38, prima era nascosta): la ruota è lo spettacolo di questa
   sezione e ha un gesto suo anche col dito, perché scegliere un settore la
   fa girare fino a lui. Sta tra il testo e il modulo, così ruota e pillole
   si vedono insieme: tocchi «Moda» e la ruota ci va. La testa si scioglie
   (display: contents) per mettere la ruota in mezzo ai suoi figli. */
@media (max-width: 999px) {
	.as-appuntamento__griglia { gap: 0; }
	.as-appuntamento__testa { display: contents; }
	.as-appuntamento__titolo { order: 1; }
	.as-appuntamento__testo { order: 2; }
	.as-appuntamento__ruota { order: 3; margin-top: var(--as-sp-6); }
	.as-appuntamento__modulo { order: 4; }
}
/* Da telefono (v0.38): alta quanto il contenuto (era uno schermo intero col
   contenuto al centro: 120px di nero sotto il bottone), titolo di sezione a
   32, ruota più piccola, e il modulo si apre a tappe (sotto). */
@media (max-width: 699px) {
	.as-appuntamento { min-height: auto; }
	.as-appuntamento__titolo { font-size: var(--as-type-display-sm); }
	.as-appuntamento__testo { margin-top: 16px; }
	.as-appuntamento__ruota { margin-top: 20px; }
	.as-appuntamento__ruota .as-ruota { font-size: 34px; }
	.as-appuntamento__ruota .as-ruota__didascalia { margin-top: 4px; font-size: 14px; }
	.as-appuntamento__modulo { margin-top: 28px; }
}

/* ── LA RICHIESTA DEL PORTFOLIO (v0.33): il modulo breve ──────────────── */
.as-richiesta { gap: var(--as-sp-5); max-width: 620px; }
.as-richiesta[hidden] { display: none !important; } /* .as-form ha un display suo: senza questa l'attributo non nasconde */
.as-richiesta__domanda { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: var(--as-sp-3); font-size: var(--as-type-body); letter-spacing: 0; color: var(--as-ink); }
.as-richiesta__nota { font-size: var(--as-type-meta); letter-spacing: .04em; color: var(--as-muted); }
.as-richiesta .as-form__pill span { min-height: 42px; padding: 9px 16px; }
.as-richiesta__fondo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--as-sp-4) var(--as-sp-5); }
.as-richiesta__fondo .as-form__consenso { flex: 1 1 220px; }
/* Da telefono (v0.38): il modulo A TAPPE. A prima vista domanda, pillole e
   bottone; nome, email e consenso si aprono appena scegli un settore (il
   primo errore del modulo è comunque «scegli un settore»: contatti.js). Solo
   col JS acceso (html.as-flood) e mai se il server ha rimandato un errore:
   senza JS il modulo resta tutto aperto. Consenso a 15px su una riga da 44,
   casella da 24; bottone a tutta larghezza. */
@media (max-width: 699px) {
	.as-richiesta { gap: 20px; }
	.as-richiesta__domanda { margin-bottom: 14px; }
	.as-richiesta .as-form__pills { gap: 8px; }
	.as-richiesta .as-form__pill span { min-height: 44px; padding: 10px 16px; }
	.as-richiesta__fondo { display: grid; justify-content: stretch; align-items: stretch; gap: 16px; }
	.as-richiesta__fondo .as-form__bottone .as-btn { width: 100%; }
	.as-richiesta .as-form__check { align-items: center; min-height: 44px; font-size: 15px; line-height: 1.4; }
	.as-richiesta .as-form__check input { width: 24px; height: 24px; margin: 0; }
	.as-richiesta .as-form__check .as-link { display: inline-block; padding-block: 12px; margin-block: -12px; }
	html.as-flood .as-richiesta:not(:has(.as-form__avviso:not([hidden]))) :is(.as-form__due, .as-form__consenso) {
		max-height: 420px;
		overflow: hidden;
		transition: max-height .5s var(--as-ease-out), opacity .35s ease .1s, margin .5s var(--as-ease-out), visibility 0s linear 0s;
	}
	html.as-flood .as-richiesta:not(:has(.as-form__avviso:not([hidden]))):not(:has(.as-form__pill input:checked)) :is(.as-form__due, .as-form__consenso) {
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		margin-top: -20px; /* toglie anche il gap del modulo: niente buco al posto dei campi */
		transition: max-height .4s var(--as-ease-io), opacity .2s ease, margin .4s var(--as-ease-io), visibility 0s linear .4s;
	}
	html.as-flood .as-richiesta:not(:has(.as-form__avviso:not([hidden]))):not(:has(.as-form__pill input:checked)) .as-form__consenso { margin-top: 0; margin-bottom: -16px; }
}
/* Il grazie al posto del modulo: la spunta che si disegna e due righe. */
.as-richiesta__grazie { display: flex; align-items: center; gap: var(--as-sp-4); max-width: 620px; padding: var(--as-sp-5) 0; }
.as-richiesta__grazie[hidden] { display: none; }
.as-richiesta__spunta {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--as-arancio);
}
.as-richiesta__spunta svg { width: 26px; height: 26px; fill: none; stroke: var(--as-carbone); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.as-richiesta__spunta path { stroke-dasharray: 20; stroke-dashoffset: 0; }
.as-richiesta__grazie-testo { margin: 0; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.35; letter-spacing: -.01em; color: var(--as-ink); }

/* ── 2 · I NUMERI, bento (v0.22, riciclata dalla seconda sezione di Platinum
      Energy: LIBRERIA/03-sezioni/numeri-bento-contorno-barre.html) ──────────
   Sul carbone coi token dello studio: card in superficie-carbone con hairline,
   UNA card accesa in arancio (DS §2: l'arancio è l'unico colore, e va usato
   una volta), numeri in solo contorno, due media sfalsati in bianco e nero,
   otto barre per lato dietro. Il collage esiste da 821px in su; sotto, le
   quattro tessere sono una colonna. */
.as-numeri { position: relative; overflow: clip; }
html.as-flood .as-numeri { background: var(--as-carbone); }
.as-numeri__in { position: relative; z-index: 1; }
.as-numeri__deco {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	color: var(--as-bianco);
	opacity: .07;
}
.as-numeri__deco--tl { top: 34%; left: clamp(16px, 3vw, 56px); width: clamp(180px, 22vw, 340px); }
.as-numeri__deco--br { bottom: 30%; right: clamp(16px, 3vw, 56px); width: clamp(180px, 22vw, 340px); }
.as-numeri__testa { margin-bottom: clamp(40px, 5vw, 72px); }
.as-numeri__riga {
	display: block;
	width: 100%;
	height: 1px;
	background: var(--as-bianco);
	opacity: .45;
	transform-origin: left center;
	margin-bottom: clamp(28px, 3.4vw, 52px);
}
.as-numeri__testa { text-align: center; } /* 01/11 (Rami): il titolo «Dietro ogni progetto, anni di esperienza.» al centro */
.as-numeri__testa .as-display-md { max-width: 20ch; margin-inline: auto; }
.as-numeri__testa .as-display-md em { color: var(--as-grigio-testo-inv); }
.as-numeri__griglia {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(16px, 2.2vw, 30px);
}
.as-numeri__card {
	--as-r-out: calc(var(--as-r-card-lg) * var(--as-brm));
	border-radius: var(--as-r-out);
	padding: clamp(24px, 2.6vw, 40px);
	display: flex;
	flex-direction: column;
	background: var(--as-superficie-c);
	box-shadow: inset 0 0 0 1px var(--as-filo-c);
}
.as-numeri__media {
	--as-r-out: calc(var(--as-r-card) * var(--as-brm));
	border-radius: var(--as-r-out);
	overflow: hidden;
	margin: 0;
	background: var(--as-superficie-c);
}
@supports (corner-shape: squircle) {
	.as-numeri__card, .as-numeri__media { corner-shape: squircle; }
}
.as-numeri__card--acceso { background: var(--as-arancio); color: var(--as-carbone); box-shadow: none; }
.as-numeri__eti {
	display: block;
	padding-bottom: 12px;
	border-bottom: 1px dashed var(--as-filo-c);
	color: var(--as-grigio-testo-inv);
}
.as-numeri__card--acceso .as-numeri__eti { border-bottom-color: rgba(10, 10, 10, .35); color: var(--as-carbone); }
/* Etichetta in alto, numero e didascalia in fondo, stesso stacco su entrambe. */
.as-numeri__fondo { margin-top: clamp(28px, 3vw, 48px); }
.as-numeri__num {
	font-weight: 400;
	font-size: clamp(60px, 7vw, 112px); /* v0.42 (Rami, 17/10): 238 non deve occupare molto spazio, era clamp(72px, 9.5vw, 160px) */
	line-height: .95;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: transparent;
	-webkit-text-stroke: 2px var(--as-bianco);
}
.as-numeri__card--acceso .as-numeri__num { -webkit-text-stroke-color: var(--as-carbone); }
@supports not (-webkit-text-stroke: 1px black) {
	.as-numeri__num { color: var(--as-bianco); }
	.as-numeri__card--acceso .as-numeri__num { color: var(--as-carbone); }
}
.as-numeri__did {
	margin-top: 10px;
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.5;
	max-width: 34ch;
	color: var(--as-grigio-testo-inv);
}
.as-numeri__card--acceso .as-numeri__did { color: var(--as-carbone); }
.as-numeri__media--a { aspect-ratio: 4 / 3; }
.as-numeri__media--b { aspect-ratio: 16 / 10; }
.as-numeri__media img, .as-numeri__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 821px) {
	.as-numeri__media--a      { grid-column: 3 / 7;  grid-row: 1; align-self: end;   margin-top: clamp(70px, 9vw, 150px); }
	.as-numeri__card--acceso  { grid-column: 7 / 13; grid-row: 1; }
	.as-numeri__card--quiete  { grid-column: 2 / 8;  grid-row: 2; margin-top: clamp(10px, 1.5vw, 24px); }
	.as-numeri__media--b      { grid-column: 8 / 11; grid-row: 2; align-self: start; margin-top: clamp(10px, 1.5vw, 24px); }
}
.as-numeri__coda {
	margin-top: clamp(44px, 5vw, 72px);
	padding-top: clamp(26px, 2.8vw, 36px);
	border-top: 1px solid var(--as-filo-c);
	text-align: center; /* 01/11 (Rami): la nota «Un referente solo…» al centro, come il titolo */
}
.as-numeri__nota {
	font-size: var(--as-type-lede);
	font-weight: 300;
	line-height: 1.5;
	max-width: 52ch;
	margin-inline: auto;
	color: var(--as-grigio-testo-inv);
}
@media (max-width: 820px) {
	.as-numeri__griglia { grid-template-columns: 1fr; gap: clamp(16px, 4vw, 24px); }
	.as-numeri__num { font-size: clamp(56px, 14vw, 88px); -webkit-text-stroke-width: 1.5px; }
	.as-numeri__deco--tl, .as-numeri__deco--br { width: clamp(120px, 34vw, 200px); }
}
/* Da telefono (v0.38): il bento in UNO schermo. Prima quattro tessere in
   colonna, uno schermo e mezzo per due numeri, e le barre dietro spuntavano
   tra le card come rettangoli fantasma. Ora: la card accesa, sotto le due
   foto affiancate e quadrate (il collage resta, piccolo), poi la card quieta.
   Nelle card il numero a sinistra e la didascalia accanto, in basso. */
@media (max-width: 699px) {
	.as-numeri__deco { display: none; }
	.as-numeri__testa { margin-bottom: 28px; }
	.as-numeri__riga { margin-bottom: 28px; }
	.as-numeri__griglia {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "acceso acceso" "a b" "quiete quiete";
		gap: 12px;
	}
	.as-numeri__card--acceso { grid-area: acceso; }
	.as-numeri__card--quiete { grid-area: quiete; }
	.as-numeri__media--a { grid-area: a; }
	.as-numeri__media--b { grid-area: b; }
	.as-numeri__media { aspect-ratio: 1 / 1; }
	.as-numeri__card { padding: 20px 20px 22px; }
	.as-numeri__eti { padding-bottom: 10px; font-size: 14px; }
	.as-numeri__fondo { margin-top: 18px; display: flex; align-items: center; gap: 18px; } /* v0.43 (Rami): il testo centrato sul numero, non appeso in alto */
	.as-numeri__num { flex: 0 0 auto; margin: 0; font-size: 56px; line-height: .86; }
	.as-numeri__did { margin: 0 0 2px; font-size: 16px; line-height: 1.4; }
	.as-numeri__coda { margin-top: 28px; padding-top: 24px; }
}

/* La PRESA entra con la goccia (v0.15.2, ora qui): bordo alto a cupola che
   si spiana mentre il blocco sale (home.js anima --as-goccia). */
.as-presa {
	--as-goccia: 0px;
	border-radius: 50% 50% 0 0 / var(--as-goccia) var(--as-goccia) 0 0;
}



/* ══ v0.45 (17/10/2026, Rami dal telefono vero) ═══════════════════════════════════════════════════
   TOUCH: le due scene pinnate senza fusione dei colori e senza la marea (costavano scatti su iPhone),
   alte quanto la finestra GRANDE (lvh) così sotto non spunta il bianco quando Safari nasconde la barra;
   i numeri con la nota nella seconda card; i mondi col velo più deciso; le lettere che cadono più morbide. */
@media (hover: none) {
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__palco { height: 100lvh; }
	/* v0.75 (31/10, Rami: «uno scatto entrando in Brutte esperienze»): su touch le due scene non sono più pin di ScrollTrigger
	   (position fixed messo e tolto dal JS, con lo spacer): le tiene ferme il browser. La sezione è alta uno schermo più la
	   corsa (la variabile la scrive il JS) e il palco è sticky in cima finché la corsa non è finita. Niente spacer, niente
	   fotogramma in ritardo, nessun refresh che sposti gli inizi. Regola del registro condiviso (Grimaris, 08/10/2026). */
	.as-dimentica.as-orizzontale--sticky { height: calc(100lvh + var(--as-corsa, 0px)); }
	.as-dimentica.as-orizzontale--sticky .as-dimentica__palco { position: sticky; top: 0; }
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__marea { display: none; }
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__testa,
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__binario { mix-blend-mode: normal; color: var(--as-ink); --as-toro-c: var(--as-ink); }
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__n { color: var(--as-muted); }
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__pannello { border-top-color: var(--as-line); padding-top: var(--as-sp-6); }
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__vuoto { -webkit-text-stroke-color: var(--as-ink); }
	.as-dimentica:not(.as-orizzontale--statico) { background: var(--as-bg); }
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__palco { height: 100lvh; }
	.as-metodo.as-metodo--sticky { height: calc(100lvh * (1 + var(--as-metodo-corsa, 0))); }
	.as-metodo.as-metodo--sticky .as-metodo__palco { position: sticky; top: 0; }
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__testa,
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__passo { mix-blend-mode: normal; color: var(--as-bianco); }
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__quadro::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(10, 10, 10, .35) 0%, rgba(10, 10, 10, .05) 35%, rgba(10, 10, 10, .78) 100%);
	}
	.pin-spacer:has(> .as-dimentica) { background: var(--as-bg); } /* v0.51: col nero spuntava una riga scura prima di Cosa aspettarti */
	.pin-spacer:has(> .as-metodo) { background: var(--as-carbone); }
}
.as-dimentica__lettera { will-change: transform; }
.as-numeri__nota-m { display: none; }
@media (max-width: 699px) {
	.as-numeri__card--quiete .as-numeri__eti, .as-numeri__card--quiete .as-numeri__fondo, .as-numeri__coda, .as-numeri__nota { display: none; }
	.as-numeri__nota-m { display: block; margin: 0; font-size: 18px; line-height: 1.45; color: var(--as-bianco); text-align: center; } /* 01/11 (Rami): al centro anche da telefono */
	.as-mondi__foto img { height: 100%; margin-top: 0; }
	.as-mondi__foto::after { background: linear-gradient(180deg, rgba(10, 10, 10, 0) 18%, rgba(10, 10, 10, .72) 52%, rgba(10, 10, 10, .96) 100%); }
	.as-mondi__in { padding: 20px 20px 24px; gap: 10px; }
	/* v0.57 (Rami, 26/10): da telefono, nei mondi Fuori e Dentro, solo titoli e pill: via la riga sotto il titolo. */
	.as-mondi__lato .as-lede { display: none; }
}


/* ══ v0.46 (17/10/2026, ancora dal suo iPhone) ═══════════════════════════════════════════════════ */
/* «4 motivi per…» a capo, sempre. */
.as-dimentica__titolo em { display: block; }
/* Un divisore tra i numeri e «Richiedi il Portfolio progetti». */
.as-appuntamento { position: relative; }
.as-appuntamento::before { content: ""; position: absolute; left: var(--as-gutter); right: var(--as-gutter); top: 0; height: 1px; background: rgba(255, 255, 255, .16); }
@media (hover: none) {
	/* Su touch la paura resta piena: il contorno (text-stroke) non si dipinge mai. */
	.as-dimentica:not(.as-orizzontale--statico) .as-dimentica__vuoto { display: none; }
}
@media (max-width: 899px) {
	/* I mondi: il testo in fondo alla foto anche su Safari (height: 100% dentro un min-height non vale: si usa margin-top auto). */
	.as-mondi__lato { display: flex; flex-direction: column; }
	.as-mondi__in { height: auto; margin-top: auto; flex: 0 0 auto; }
}

/* v0.47.1 (Rami, 17/10): da telefono via la riga sotto «Richiedi il Portfolio progetti» («Scegli il tuo settore e ricevi…»). Da computer resta. */
/* v0.50: la riga del portfolio non c'è più (default vuoto): la regola che la nascondeva da telefono non serve. */

/* v0.50 (Rami, 18/10, dal telefono: «il video è molto strano, tirato in alto: lascialo naturale e aggiungi del nero
   sopra e sotto per riempire la sezione»): su touch il video tiene le sue proporzioni (contain), centrato nel palco
   nero; niente maschera; resta solo un velo in basso per leggere i passi. */
@media (hover: none) {
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__quadro video { object-fit: contain; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
	.as-flood .as-metodo:not(.as-metodo--statico) .as-metodo__quadro::after { background: linear-gradient(180deg, rgba(10, 10, 10, 0) 55%, rgba(10, 10, 10, .7) 100%); }
}


/* ══ v0.51 (18/10/2026) ═══════════════════════════════════════════════════════════════════════════ */
/* I numeri: etichetta con la data di oggi a destra. */
.as-numeri__eti--data { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.as-numeri__eti--data time { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* I mondi: la freccia nelle pillole è sempre visibile e punta in alto a destra; in hover si raddrizza. */
.as-mondi__links .as-pill--vai { gap: 8px; }
.as-mondi__links .as-pill__vai { width: 14px; margin-left: 0; opacity: 1; transform: rotate(-45deg); transition: transform var(--as-t-azione) var(--as-ease-out); }
@media (hover: hover) {
	.as-mondi__links .as-pill--vai:hover .as-pill__vai, .as-mondi__links .as-pill--vai:focus-visible .as-pill__vai { width: 14px; margin-left: 0; transform: rotate(0deg); }
}
/* Il divisore tra i mondi e Quattro motivi. */
.as-dimentica { position: relative; }
.as-dimentica::before { content: ""; position: absolute; left: var(--as-gutter); right: var(--as-gutter); top: 0; height: 1px; background: var(--as-line); z-index: 3; }
/* Quattro motivi: dopo l'ultima carta una corsia vuota, così anche l'ultima arriva al punto in cui cade
   (motion.js: la caduta parte quando il bordo sinistro della carta passa il 16% dello schermo, il 4% su touch).
   A fine corsa il bordo destro della coda tocca il bordo dello schermo (misurato al banco: lo scrollWidth non
   conta il padding destro del binario): la coda è quanto manca perché il bordo sinistro dell'ultima carta
   arrivi al 10% dello schermo (su touch a -4vw), con la carta ancora quasi tutta in vista. */
.as-dimentica__coda { flex: 0 0 calc(90vw - min(58vw, 920px) - clamp(24px, 4vw, 64px)); }
.as-orizzontale--statico .as-dimentica__coda, html:not(.as-flood) .as-dimentica__coda { display: none; }
@media (hover: none) { .as-dimentica:not(.as-orizzontale--statico) .as-dimentica__coda { flex-basis: 16vw; } }
/* La hero su touch: i testi si ribaltano di colore parola per parola (home.js). */
@media (hover: none) { .as-hero__in h1 .as-w, .as-hero__in > p, .as-hero__hint { transition: color .22s linear; } }
/* La ruota dei settori da telefono: centrata (Rami, 18/10). base.css sotto i 1000px la tiene a sinistra
   con l'origine delle trasformazioni a sinistra: qui, in home, voce e origine tornano al centro. */
@media (max-width: 999px) {
	.as-appuntamento__ruota .as-ruota { text-align: center; }
	.as-appuntamento__ruota .as-ruota--viva .as-ruota__voce, .as-appuntamento__ruota .as-ruota__voce { text-align: center; transform-origin: 50% 50%; }
}

/* ══ v0.52 (18/10/2026) ═══════════════════════════════════════════════════════════════════════════ */
/* «E se ti serve una cosa precisa» da telefono e tablet: 2×2 con la TACCA (Rami: «esattamente come le quattro card
   della home di Platinum Energy, con gli angoli invertiti; da desktop non toccarla»). Sotto i 1100px la card si
   scava in alto a destra: mask a due strati con composite exclude e il tile a px fissi (skill inverted-corners,
   Pattern A; stessi tile di Platinum: 74 per il dischetto da 44, 62 per quello da 36). Nel buco sta il dischetto
   con la freccia, FRATELLO della card nel <li> (dentro, la mask lo cancellerebbe); il testo non entra mai nella
   fascia della tacca perché l'icona sta a sinistra e titolo e riga sono in fondo. Da desktop (≥1100) nulla cambia. */
.as-soluzione__disco { display: none; }
@media (max-width: 1099px) {
	.as-soluzioni__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.as-soluzioni__cella { position: relative; display: grid; } /* la card riempie la cella: le due card di una riga sono alte uguali */
	/* v0.75 (Rami, 31/10, solo nel 2×2 da telefono e tablet): sopra Integrazioni AI e Restyling, sotto Chatbot e SEO.
	   Da computer l'ordine resta quello del Customizer (01 AI · 02 Chatbot · 03 Restyling · 04 SEO); qui i numeri non si vedono. */
	.as-soluzioni__cella:nth-child(1) { order: 1; }
	.as-soluzioni__cella:nth-child(3) { order: 2; }
	.as-soluzioni__cella:nth-child(2) { order: 3; }
	.as-soluzioni__cella:nth-child(4) { order: 4; }
	.as-soluzione {
		--notch-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 74'%3E%3Cpath d='M72 74A16 16 0 0 0 56 58L50 58A34 34 0 0 1 16 24L16 18A16 16 0 0 0 0 2L0 0L74 0L74 74Z' fill='%23000'/%3E%3C/svg%3E");
		--notch-tile-w: 74px;
		--notch-tile-h: 74px;
		/* -2px per lato: il bordo dell'immagine, col suo antialias, cade fuori. */
		-webkit-mask: var(--notch-tile) right -2px top -2px / var(--notch-tile-w) var(--notch-tile-h) no-repeat, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask: var(--notch-tile) right -2px top -2px / var(--notch-tile-w) var(--notch-tile-h) no-repeat, linear-gradient(#000 0 0);
		mask-composite: exclude; /* dopo la shorthand, che lo resetta */
		grid-template-rows: auto 1fr;
		gap: var(--as-sp-5);
		min-height: clamp(210px, 26vw, 260px);
		padding: 18px 18px 20px;
		box-shadow: none; /* pannello pieno, come Platinum: il filo sparirebbe comunque lungo la tacca */
	}
	.as-soluzione__testa { min-height: 44px; padding-right: 64px; } /* la fascia della tacca resta libera */
	.as-soluzione__n { display: none; }
	.as-soluzione__icona { width: 44px; height: 44px; }
	.as-soluzione__icona svg { width: 22px; height: 22px; }
	.as-soluzione__corpo { gap: 6px; align-self: end; padding-right: 0; }
	.as-soluzione__titolo { font-size: clamp(18px, 2.4vw, 22px); line-height: 1.15; }
	.as-soluzione__riga { font-size: 14px; line-height: 1.45; min-height: 0; }
	.as-soluzione__vai { display: none; } /* la freccia sta nel dischetto */
	.as-soluzione__disco {
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--as-ink);
		color: var(--as-bianco);
	}
	.as-soluzione__disco svg { width: 16px; height: 16px; }
}
@media (max-width: 640px) {
	/* Resta 2×2 anche qui (Platinum: una colonna sola allungherebbe la sezione per niente). Si ridefiniscono
	   SOLO le custom property: la mask e il composite restano. */
	.as-soluzione {
		--notch-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 62'%3E%3Cpath d='M60 62A12 12 0 0 0 48 50L42 50A30 30 0 0 1 12 20L12 14A12 12 0 0 0 0 2L0 0L62 0L62 62Z' fill='%23000'/%3E%3C/svg%3E");
		--notch-tile-w: 62px;
		--notch-tile-h: 62px;
		min-height: clamp(170px, 46vw, 220px);
		padding: 14px 14px 16px;
		gap: var(--as-sp-4);
	}
	.as-soluzione__testa { min-height: 36px; padding-right: 52px; }
	.as-soluzione__icona { width: 36px; height: 36px; }
	.as-soluzione__icona svg { width: 18px; height: 18px; }
	.as-soluzione__titolo { font-size: 17px; }
	.as-soluzione__riga { font-size: 13px; }
	.as-soluzione__disco { width: 36px; height: 36px; }
	.as-soluzione__disco svg { width: 14px; height: 14px; }
}
/* Il popup dei settori può sporgere dal modulo: finché è aperto la sezione non clippa. Da telefono, dove il modulo è
   a tappe e sotto il bottone c'è poco, il popup si apre VERSO L'ALTO, sopra la ruota: resta dentro il nero. */
.as-appuntamento:has(.as-tendina.is-aperta) { overflow: visible; }
/* v0.52.4 (Rami, 20/10, dal suo iPhone: «il popup dei settori ha sfondo trasparente, deve essere nero»): il pannello
   è carbone, ma da telefono si apre sopra la ruota, e Safari dipingeva le parole della ruota (posizionate, con
   will-change, dopo il modulo nell'albero) SOPRA di lui; Chrome no. Il modulo sta sopra la ruota in ogni motore.
   Altrove i due non si toccano: lo z-index non cambia altro. */
.as-appuntamento__modulo { position: relative; z-index: 2; }
@media (max-width: 699px) {
	/* v0.122.1 (Rami, 07/11: «dovrebbe aprirsi in basso»): niente più popup verso l'alto da telefono, si apre sotto il bottone. */
}

/* ══ 1-bis · I DISPOSITIVI, LA BASE com'era (v0.75.0, 31/10/2026; rimessa nella v0.81 del 01/11: Rami, «rimetti i mockup dentro le card
   come erano inizialmente, card anche da mobile, anche per il Mac») ═══════════════════════════════════════════════════
   Rami: «prima dei numeri una griglia con 3 mockup: il Mac che stiamo usando, iper realistico con l'isola, e due
   iPhone veri, cinematografici, inclinati, tagliati». Tre card su carbone in fila: iPhone · MacBook · iPhone (1 · 2,1 · 1).
   Le immagini sono i mockup fotografici già montati (risorse-tecniche/mockup/componi.py): la card del Mac decide
   l'altezza della riga col suo rapporto, i telefoni la riempiono ancorati in basso, e i loro tagli coincidono col bordo
   della card, che li clippa (squircle). Dietro ogni dispositivo una luce bianca bassa, neutra: niente arancio di scatto.
   Da telefono: i due iPhone affiancati sopra e il Mac a tutta larghezza sotto; la sezione comincia vicino ai bottoni della hero
   (Rami, 31/10: «tra il divisore e il pulsante preventivatore c'è una lunghissima distanza»).
   ⛔ v0.75.3 (misurato in WebKit, banco e dal vivo): una card con SOLI figli assoluti e aspect-ratio in Safari esce 0×0 e la sezione
   resta vuota (Rami dall'iPhone: «i mockup non si vedono»). Le immagini stanno nel flusso e portano il rapporto della card dentro
   il file (tela 3:4 trasparente per i telefoni, risorse-tecniche/mockup/incornicia.py): la card prende la misura dal contenuto. */
.as-dispo { position: relative; overflow: clip; padding-bottom: calc(var(--as-sect) * .55); } /* due sezioni carbone di fila: un padding solo tra le card e il divisore dei numeri */
.as-dispo__griglia {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr);
	gap: var(--as-sp-4);
	align-items: stretch;
}
.as-dispo__card {
	--as-r-out: calc(var(--as-r-card-lg) * var(--as-brm));
	position: relative;
	margin: 0;
	min-height: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	border-radius: var(--as-r-out);
	background: var(--as-superficie-c);
	box-shadow: inset 0 0 0 1px var(--as-filo-c);
	overflow: clip;
}
@supports (corner-shape: squircle) { .as-dispo__card { corner-shape: squircle; } }
.as-dispo__card::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(70% 60% at 50% 112%, rgba(255, 255, 255, .07), transparent 70%);
}
.as-dispo__card img { position: relative; display: block; width: 100%; height: auto; }
.as-dispo__card--mac { align-items: center; padding: 3% 3% 1.5%; }
@media (max-width: 899px) {
	.as-dispo__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.as-dispo__card--mac { grid-column: 1 / -1; order: 1; } /* v0.75.1 (Rami): gli iPhone sopra, affiancati; il Mac sotto a tutta larghezza */
	/* v0.81 (Rami, 01/11): la card c'è anche sul Mac da telefono (la v0.76 l'aveva tolta). */
}
@media (max-width: 699px) {
	.as-dispo { padding-top: 16px; }
}

/* ══ 1-bis · LA SCENA «DAL GRANDE AL PICCOLO» (v0.81-v0.83, 01/11/2026) ═══════════════════════════════════════════════
   Rami, 01/11: fra cinque proposte cinematografiche dentro le card (nel git, a4fcab8: nastro, sipario, luce, mazzo) ha scelto la 1,
   con due richieste: «falla partire col Mac senza la card e più piccolo» e poi «da telefono centra il titolo; da computer leva il
   titolo e metti una CTA centrata verso i servizi, in basso». Riferimento Awwwards: «Zoom In» di Egeon, le scene che cambiano scalando.
   Scena ferma: sezione alta 100lvh + corsa, palco alto 100lvh; con puntatore il pin di ScrollTrigger (sotto lo smoother lo sticky
   non regge), su touch lo sticky del CSS (nessun pin: scattano). Lo scrub sta in home.js (cinemaInit, modo zoom).
   Senza JS: le tre card ferme, intere, al loro posto; titolo (telefono) e CTA (computer) visibili. */
.as-dispo--scena { height: calc(100lvh + var(--corsa, 120vh)); padding: 0; }
.as-dispo__palco { position: relative; height: 100lvh; overflow: clip; display: grid; grid-template-rows: 1fr auto; padding-top: var(--as-sp-8); padding-bottom: var(--as-sp-8); }
@media (hover: none) { .as-dispo__palco { position: sticky; top: 0; } }
.as-dispo__centro { width: 100%; align-self: center; }
.as-dispo__titolo { display: none; } /* da computer niente titolo: parla la scena, in fondo la CTA */
.as-dispo__cta { display: flex; justify-content: center; margin: 0; align-self: end; }
/* 1 · dal grande al piccolo: all'inizio il Mac è NUDO (Rami, 01/11: «falla partire col Mac senza la card e più piccolo»): fondo, filo
   e luce della card seguono --cardon (0 → 1), scritto dallo scrub; a riposo (e senza JS) la card è intera. */
.as-dispo--scena .as-dispo__card--mac {
	background: color-mix(in srgb, var(--as-superficie-c) calc(var(--cardon, 1) * 100%), transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--as-filo-c) calc(var(--cardon, 1) * 100%), transparent);
}
.as-dispo--scena .as-dispo__card--mac::before { opacity: var(--cardon, 1); }
@media (max-width: 899px) {
	.as-dispo__palco { padding-top: var(--as-sp-7); padding-bottom: var(--as-sp-7); }
	.as-dispo__titolo { display: block; margin: 0 0 var(--as-sp-6); text-align: center; } /* da telefono il titolo c'è, centrato (Rami, 01/11) */
	.as-dispo__cta { display: none; }
}

/* v0.75.1 (31/10, Rami: «da mobile leva il titolo Richiedi il portfolio»): da telefono il modulo parla da solo. */
@media (max-width: 699px) {
	.as-appuntamento__titolo { display: none; }
}

/* ── v0.120 (06/11): la chat (site/chat.php, chiara) sta fra la presa e il form (Rami: «mettila anche nella home prima del form
   conosciamoci»). La presa si chiude a pancia, il form entra a cupola (motion.js, data-as-contro-goccia e data-as-goccia); da
   telefono la riga della presa non prosegue più dentro il form: finisce sul bordo della sua sezione. */
.as-presa { --as-goccia2: 0px; border-radius: 50% 50% 50% 50% / 0 0 var(--as-goccia2) var(--as-goccia2); }
.as-conosciamoci[data-as-goccia] { position: relative; overflow: clip; --as-goccia: 0px; border-radius: 50% 50% 50% 50% / var(--as-goccia) var(--as-goccia) 0 0; }
@media (max-width: 699px) {
	.as-presa { overflow: clip; }
	.as-presa .as-linea--tel { height: 100%; }
}