/* PROFONDITÀ EDITORIALE — capacità OPZIONALE del verticale.
 *
 * ⚠⚠ Questo foglio arriva SOLO ai progetti che dichiarano `chrome.editorial_depth`. Un sito che non la
 * dichiara non riceve nemmeno il file, quindi i siti già consegnati restano identici: è la stessa forma
 * di `ambiti.css` e `contatti-inline.css`.
 *
 * PERCHÉ ESISTE. Il verticale nasce piatto: due colonne centrate, una figura, nessuno strato. Su un sito
 * corto questo produce i due difetti che si vedono a occhio — il vuoto sotto la colonna più bassa
 * (`align-items: center` con testi brevi) e l'assenza di gerarchia di profondità. Qui si aggiungono
 * STRATI e ARREDO EDITORIALE, non decorazione: ogni dispositivo o riempie uno spazio morto, o dichiara
 * una gerarchia, o risponde a un gesto.
 *
 * ⚠ Niente `transform` sulle figure a riposo: sposterebbe la superficie dipinta e romperebbe il
 * caricamento pigro (lezione del `clip-path` a larghezza zero). Il movimento sta sull'hover e sul
 * reveal, che sono momenti, non stati.
 */

/* ── 1. La riga a due colonne non si centra: si allinea in alto e si RIEMPIE ─────────────────────
 * `align-items: center` su una riga dove il testo è corto e la figura alta lascia il vuoto sopra E
 * sotto il testo. In alto il testo comincia dove comincia la figura, e la colonna corta viene chiusa
 * da un arredo che ha un mestiere: un filetto e un numerale d'indice. */
.studio__grid { align-items: stretch; }
.studio__body {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-block: var(--space-4);
}
.studio__body > :last-child { margin-bottom: 0; }

/* ⚠⚠ IL VUOTO SI ELIMINA, NON SI DECORA. Il primo tentativo chiudeva la colonna corta con un filetto
 * spinto in fondo da `margin-top:auto`: misurato, restavano 317px fra il testo e il filetto, e a occhio
 * diventava «un filetto sospeso nel nulla» — decorazione del vuoto, non sua soluzione.
 * Dove il testo è MOLTO più corto della figura, le due colonne smettono di essere due colonne: la
 * figura prende tutta la larghezza e il testo le sale sopra come PANNELLO. Il vuoto sparisce perché
 * non esiste più una colonna da riempire, e in cambio si guadagna lo strato.
 * ⚠ Il selettore è STRUTTURALE (la riga in cui la figura viene per prima), non dipendente dal testo:
 * il verticale alterna figura/testo, quindi è una riga stabile, non un caso fortunato di questo cliente.
 * ⚠ Il pannello porta il PROPRIO fondo opaco: il contrasto si misura sulla carta, non sulla fotografia
 * sottostante — un pannello trasparente sopra una foto è la strada per un testo illeggibile. */
@media (min-width: 1100px) {
  .studio__grid:has(> .studio__fig:first-child) {
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    padding-bottom: var(--space-8);
  }
  .studio__grid:has(> .studio__fig:first-child) > .studio__fig {
    margin-inline: calc(-1 * var(--bleed));
    grid-column: 1;
  }
  .studio__grid:has(> .studio__fig:first-child) > .studio__fig img { aspect-ratio: 21 / 8; }
  .studio__grid:has(> .studio__fig:first-child) > .studio__body {
    position: absolute; right: 0; bottom: 0;
    width: min(46%, 34rem);
    background: var(--paper);
    padding: var(--space-6) var(--space-6) var(--space-6) var(--space-6);
    box-shadow: var(--shadow-md);
    border-top: 2px solid var(--accent);
  }
}

/* ── 2. La figura ROMPE la scatola ───────────────────────────────────────────────────────────────
 * Una figura che arriva a filo pagina è il segno editoriale che distingue un sito composto da una
 * pagina impaginata a blocchi. Si applica al lato esterno, e solo dove c'è spazio per farlo. */
@media (min-width: 1100px) {
  .studio__grid > .studio__fig:first-child { margin-left: calc(-1 * var(--bleed)); }
  .studio__grid > .studio__fig:last-child  { margin-right: calc(-1 * var(--bleed)); }
  .studio__grid > .studio__fig:first-child img,
  .studio__grid > .studio__fig:last-child  img { box-shadow: var(--shadow-md); }
}

/* ── 3. Le materie diventano un INDICE numerato ──────────────────────────────────────────────────
 * Sei voci senza numerazione sono un elenco; numerate sono un indice, e un indice si legge come una
 * competenza organizzata. Il numerale è anche ciò che riempie la colonna dell'icona quando il testo
 * è corto. */
.areas-page__cols { counter-reset: materia; }
.area-row { counter-increment: materia; position: relative; transition: background var(--dur, .3s) var(--ease, ease); }
.area-row::before {
  content: counter(materia, decimal-leading-zero);
  position: absolute; right: 0; top: 0;
  font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1; color: var(--accent);
  opacity: .13; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.area-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.area-row:hover::before { opacity: .22; }

/* ── 4. Le figure della galleria si SOLLEVANO al gesto ───────────────────────────────────────────
 * L'elevazione a riposo dichiara lo strato; quella all'hover risponde al gesto. */
.areas-page__fig img,
.areas__fig img { box-shadow: var(--shadow-sm); }
.areas-page__fig a.zoom { display: block; transition: transform var(--dur, .35s) var(--ease, cubic-bezier(.2,.7,.3,1)), box-shadow var(--dur, .35s) var(--ease, ease); }
.areas-page__fig a.zoom:hover { transform: translateY(-6px); }
.areas-page__fig a.zoom:hover img { box-shadow: var(--shadow-md); }

/* ── 5. Il pannello delle aree scavalca DAVVERO ──────────────────────────────────────────────────
 * L'elevazione rende leggibile la sovrapposizione: senza ombra due superfici accostate si leggono
 * come due riquadri, non come uno strato sopra l'altro. */
.areas__panel { box-shadow: var(--shadow-md); }

/* ── 6. L'occhiello di sezione resta mentre il contenuto scorre ──────────────────────────────────
 * Su una sezione lunga l'etichetta sparisce subito e il lettore perde il filo. Appiccicata, resta a
 * dichiarare dove si trova — e occupa la colonna che altrimenti resterebbe vuota. */
/* ⚠⚠ RITIRATO DOPO SEGNALAZIONE OWNER («la nostra vision si vede male»). L'occhiello appiccicato
 * scivolava lungo la sezione e finiva SOPRA il filetto `.rule--light` che gli sta sotto: misurato,
 * l'occhiello a top -188 e il filetto (2px, 55px) a -175, cioè una riga che taglia in mezzo le parole.
 * ⭐ Un elemento appiccicato attraversa TUTTO ciò che sta nella sua sezione: prima di renderlo tale
 * bisogna guardare cosa incontrerà lungo il percorso, non solo dove parte. */
@media (min-width: 1100px) {
  .areas-page .page-head__lead, .areas-page__cols { position: relative; }
}

/* ── 7. I passi del metodo portano il proprio numero ─────────────────────────────────────────────*/
.timeline { counter-reset: passo; }
.tl-step { counter-increment: passo; }
.tl-step::before {
  content: counter(passo, decimal-leading-zero);
  display: block; margin-bottom: var(--space-3);
  font-family: var(--font-display); font-size: .92rem; letter-spacing: .18em;
  color: var(--accent-ink); font-variant-numeric: tabular-nums;
}

/* ── 8. Il filetto si DISEGNA quando entra ──────────────────────────────────────────────────────*/
.rule { transform-origin: left center; }
.reveal .rule, .rule.reveal { transform: scaleX(0); transition: transform .9s var(--ease, cubic-bezier(.2,.7,.3,1)) .1s; }
.reveal.is-visible .rule, .rule.reveal.is-visible { transform: scaleX(1); }

/* ── 9. Rispetto del gesto di chi non vuole movimento ────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .areas-page__fig a.zoom, .area-row { transition: none; }
  .areas-page__fig a.zoom:hover { transform: none; }
  .reveal .rule, .rule.reveal { transform: none; transition: none; }
}

/* ── 10. VITA AL GESTO ───────────────────────────────────────────────────────────────────────────
 * «Dinamico» non è «entra in dissolvenza»: è un'interfaccia che RISPONDE. Le comparse d'ingresso si
 * vedono una volta sola; la risposta al gesto si vede ogni volta che il lettore passa sopra qualcosa.
 * ⚠ Si anima solo ciò che è già interattivo o che porta un'informazione: animare tutto è rumore. */
.area__icon { transition: transform var(--dur, .4s) var(--ease, cubic-bezier(.2,.7,.3,1)); }
.area-row:hover .area__icon { transform: translateY(-2px) scale(1.08); }

.worklike__item { transition: color var(--dur, .3s) var(--ease, ease), padding-left var(--dur, .3s) var(--ease, cubic-bezier(.2,.7,.3,1)); }
.worklike__item:hover { padding-left: var(--space-3); }

.site-footer__col a, .contact-info a, .map-link { transition: color var(--dur, .25s) var(--ease, ease), letter-spacing var(--dur, .25s) var(--ease, ease); }

/* Il marchio nel piè e i recapiti reagiscono con misura */
.topbar__item a { transition: opacity var(--dur, .25s) var(--ease, ease); }
.topbar__item a:hover { opacity: .72; }

/* I pulsanti guadagnano profondità al gesto invece di cambiare solo colore */
.btn { transition: transform var(--dur, .3s) var(--ease, cubic-bezier(.2,.7,.3,1)), box-shadow var(--dur, .3s) var(--ease, ease), background-color var(--dur, .25s) var(--ease, ease), color var(--dur, .25s) var(--ease, ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* La figura della testata dei contatti respira al gesto */
.contact-band__fig img, .studio__fig img, .areas__fig img { transition: transform 1.1s var(--ease, cubic-bezier(.2,.7,.3,1)); }
.studio__fig:hover img, .contact-band__fig:hover img { transform: scale(1.015); }

/* ── 11. PROVATO E RITIRATO: moto legato allo scroll (`animation-timeline: view()`) ──────────────
 * ⚠⚠ RITIRATO DOPO SEGNALAZIONE OWNER, e la ragione è generale.
 * Un'animazione legata allo scorrimento tiene l'elemento al proprio stato INIZIALE finché non entra
 * nell'intervallo dichiarato. MISURATO: le figure delle materie stavano a `opacity: 0.55` e le righe a
 * `translateY(26px)` — cioè sbiadite e spostate — per tutta la parte di pagina non ancora percorsa.
 * A schermo si legge come «le immagini non si vedono», ed è esattamente così che l'ha vista l'owner.
 * ⭐ La regola che resta: uno stato iniziale DEGRADATO va bene solo se qualcosa ne garantisce il
 * completamento. `IntersectionObserver` lo garantisce (scatta una volta e lascia l'elemento a posto);
 * un intervallo di scorrimento no — se il lettore non percorre quell'intervallo, l'elemento resta
 * a metà per sempre. Su un sito che deve leggersi subito, il rischio non vale il guadagno.
 */

/* ── 12. LA PAGINA DEI CONTATTI: da due riquadri accostati a due STRATI ──────────────────────────
 * Misurato, era la pagina più piatta del sito: 2 strati contro 9 e 12 delle altre, e la scheda «Dove
 * siamo» finiva a metà lasciando ~500px di colonna vuota accanto al modulo.
 * Due dispositivi, ognuno con un mestiere:
 *  · la scheda SALE sulla fotografia della banda — lo strato si vede, e la banda smette di essere un
 *    rettangolo appoggiato fra due blocchi;
 *  · la scheda poi SEGUE la lettura del modulo: la colonna non resta più vuota per mezzo schermo, e i
 *    recapiti restano sotto gli occhi proprio mentre si scrive. Il vuoto sparisce perché la colonna ha
 *    di nuovo un contenuto, non perché è stata riempita di decorazione. */
@media (min-width: 1100px) {
  /* ⚠⚠ FERME E ALLINEATE, per decisione owner («falli fissi a sto punto per non rischiare»).
   * La scheda era appiccicata e tirata su da un margine negativo: partiva più in alto del modulo e i
   * due riquadri non condividevano una linea. Ora partono dalla STESSA quota e non si muovono — una
   * posizione che non cambia è una posizione che non può sbagliare. */
  .contact-cols { align-items: start; position: relative; }
  .contact-info {
    position: static;
    margin-top: 0;
    z-index: 2;
    box-shadow: var(--shadow-md);
    background: var(--paper);
  }
  /* Il modulo è l'altra superficie: un foglio posato, non un'area di sfondo. */
  .contact-form {
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    padding: var(--space-7);
    border-top: 2px solid var(--accent);
  }
}

/* La banda fotografica dei contatti respira mentre si scorre (la stessa grammatica della testata). */
.contact-band__fig img { will-change: transform; }

/* ── 13. I campi del modulo rispondono ───────────────────────────────────────────────────────────
 * Un campo che non reagisce al fuoco è un campo che sembra spento. */
.field input, .field textarea {
  transition: border-color var(--dur, .25s) var(--ease, ease), box-shadow var(--dur, .25s) var(--ease, ease), background-color var(--dur, .25s) var(--ease, ease);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field input:hover, .field textarea:hover { border-color: var(--accent-ink); }

/* ── 14. LA CUCITURA FRA BANDA E CONTENUTO ───────────────────────────────────────────────────────
 * Una fotografia a piena larghezza seguita da una banda di contenuto produce una CUCITURA netta: due
 * rettangoli accostati. Facendo salire il contenuto sulla fotografia la cucitura sparisce e al suo
 * posto resta uno strato — lo stesso gesto della scheda dei recapiti, applicato alla sezione intera.
 * ⚠ Solo da 1100px in su: sotto, le due bande si impilano e la sovrapposizione non avrebbe senso. */
@media (min-width: 1100px) {
  .contact-band + .section,
  .section:has(> .container > .contact-cols) {
    margin-top: calc(-1 * var(--space-8));
    position: relative;
    z-index: 1;
    background: transparent;
  }
  .section:has(> .container > .contact-cols) > .container {
    background: var(--paper);
    background-image: var(--grad-body, none);
    padding-top: var(--space-8);
  }
}

/* ── 15. IL TITOLO DI PAGINA PORTA IL PROPRIO SEGNO ──────────────────────────────────────────────
 * Un filetto d'accento sotto l'occhiello lega la testata di pagina al resto del linguaggio, e dà
 * all'apertura un appiglio visivo invece di lasciarla tutta testo. */
.page-head .eyebrow { position: relative; padding-bottom: var(--space-3); }
.page-head .eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 3.2rem; height: 2px; background: var(--accent);
  transform-origin: left center; transform: scaleX(0);
  transition: transform .8s var(--ease, cubic-bezier(.2,.7,.3,1)) .15s;
}
.page-head .reveal.is-visible .eyebrow::after,
.page-head .eyebrow::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .page-head .eyebrow::after { transition: none; } }

/* ── 16. LA STRISCIA SOPRA LA FOTOGRAFIA A PIENA LARGHEZZA ───────────────────────────────────────
 * MISURATO: la sezione porta 120px di passo verticale proprio, e la figura è a filo solo in
 * ORIZZONTALE — quella fascia tinta sopra e sotto l'immagine È la striscia. Non si copre: si toglie
 * il passo alla sezione, così la fotografia tocca davvero le bande vicine e diventa una banda essa
 * stessa. Il respiro lo dà il pannello che le sale sopra, non un margine vuoto.
 * ⚠ Solo dove la figura è davvero a piena larghezza: le altre sezioni conservano il proprio passo. */
@media (min-width: 1100px) {
  /* ⚠ `:has()` NON si annida dentro un altro `:has()`: la regola veniva scartata in silenzio e la
   * striscia restava (misurata: 120px sopra e sotto). Si usa un solo `:has` con il percorso a figli. */
  .section:has(> .container > .studio__grid > .studio__fig:first-child) {
    padding-top: 0;
    padding-bottom: 0;
  }
  .studio__grid:has(> .studio__fig:first-child) { padding-bottom: 0; }
  /* Il pannello scende sotto il filo dell'immagine: è lui a cucire la banda con ciò che segue. */
  .studio__grid:has(> .studio__fig:first-child) > .studio__body { bottom: calc(-1 * var(--space-6)); }
  .section:has(> .container > .studio__grid > .studio__fig:first-child) + * { padding-top: var(--space-9); }
}

/* ── 17. LE AREE: UN SOLO BLOCCO, NON DUE BANDE SCOLLEGATE ───────────────────────────────────────
 * La testata «Gli ambiti in cui lo Studio opera» e l'indice delle materie erano due fasce di colore
 * diverso separate da due passi sommati: si leggevano come due blocchi estranei. Diventano UNA sola
 * superficie arrotondata, rientrata dai bordi pagina — la testata ne è il cappello, l'indice il corpo.
 * È anche il «gioco di forme» chiesto: un blocco che si stacca dal fondo invece di una banda a filo. */
@media (min-width: 1100px) {
  #aree-di-attivita {
    background-color: var(--surface);
    background-image: none;
    margin-inline: var(--bleed);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-top: var(--space-8);
    padding-bottom: var(--space-5);
  }
  #aree-di-attivita > .container { padding-inline: var(--space-8); }
  #aree-di-attivita + .section {
    background-color: var(--surface);
    background-image: none;
    margin-inline: var(--bleed);
    margin-bottom: var(--space-9);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding-top: var(--space-6);
  }
  #aree-di-attivita + .section > .container { padding-inline: var(--space-8); }
}

/* ── 18. ROTONDITÀ E GIOCO DI COLORI ─────────────────────────────────────────────────────────────
 * ⚠ Il verticale nasce a spigolo vivo per scelta di categoria («il raggio zero È il registro»).
 * Decisione owner 2026-09-14: si introduce una rotondità MISURATA — morbida sulle superfici che
 * portano contenuto, nulla sui filetti e sui segni, che devono restare netti. Non è una pill: è un
 * raggio che ammorbidisce l'angolo senza togliere l'istituzionale. */
.studio__fig img, .areas__fig img, .contact-band__fig img { border-radius: var(--radius-lg); }
.studio__grid:has(> .studio__fig:first-child) > .studio__fig img { border-radius: 0; }
.contact-info, .contact-form, .areas__panel { border-radius: var(--radius-lg); }
.studio__grid:has(> .studio__fig:first-child) > .studio__body { border-radius: var(--radius-lg); }
.field input, .field textarea { border-radius: var(--radius); }
.area-row { border-radius: var(--radius); }

/* Il colore gioca con DUE tinte della stessa famiglia: la carta per il contenuto, la superficie oliva
 * per i blocchi che si staccano. Il terzo tono è l'accento, e resta un segno — mai una campitura. */
.area-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.areas-page__fig img { border-radius: var(--radius-lg); }
.page-head .eyebrow::after { border-radius: 2px; }

/* ── 19. LA GIUNZIONE FRA TESTATA DI PAGINA E PRIMA RIGA ─────────────────────────────────────────
 * MISURATO: fra il fondo della testata e l'inizio del contenuto passavano 102px di passo vuoto, a
 * piena larghezza e senza nulla dentro — «un po' vuoto», ed è vero.
 * Due mosse: si stringe il passo, e la testata CHIUDE con un angolo morbido invece che con un taglio
 * netto. L'angolo è il gioco di forme: la fascia smette di essere un rettangolo accostato e diventa
 * una superficie che si posa su quella sotto. */
.page-head { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
@media (min-width: 1100px) {
  .page-head + .section { padding-top: var(--space-7); }
}

/* ── 20. IL SEGNO D'ACCENTO CHE LEGA LE SEZIONI ──────────────────────────────────────────────────
 * Un filetto corto in accento sopra il primo titolo di ogni riga: è il terzo tono della palette usato
 * come SEGNO, non come campitura — lega le sezioni fra loro senza aggiungere superfici colorate. */
.studio__body > h3:first-child::before {
  content: ""; display: block; width: 2.6rem; height: 2px;
  background: var(--accent); border-radius: 2px;
  margin-bottom: var(--space-4);
}

/* ── 21. LA BANDA DEI CONTATTI PRENDE LA STESSA FORMA DEL RESTO ──────────────────────────────────
 * La fotografia dei contatti era l'ultimo rettangolo a filo pagina rimasto: con l'indice delle aree
 * diventato un blocco arrotondato e rientrato, quella banda stonava. Prende la stessa forma — così il
 * linguaggio è UNO: superfici che si posano sul fondo, non fasce che lo tagliano.
 * ⚠ È anche l'unico modo di dare a questa pagina gli strati che le mancavano: misurata, era ferma a 4
 * contro 9 e 12 delle altre due. */
/* ⚠⚠ PROVATO E RITIRATO. Rientrare anche questa banda sembrava coerente, ma MISURATO ha fatto crollare
 * la coerenza foto↔testo da 10,0 a 6,7: una fotografia a piena larghezza è una SUPERFICIE e il testo le
 * sta sopra; la stessa fotografia rientrata e arrotondata diventa un'IMMAGINE, e un'immagine pretende un
 * testo accanto — che qui non c'è. Il raggio non è gratis: cambia il mestiere dell'elemento.
 * La banda resta quindi a filo pagina, ed è la scheda che le sale sopra a portare la forma morbida. */
@media (min-width: 1100px) {
  .contact-info { border-radius: var(--radius-lg); }
}

/* ── 22. IL PIÈ SI POSA, NON TAGLIA ──────────────────────────────────────────────────────────────
 * Ultimo elemento del linguaggio: anche la chiusura della pagina prende l'angolo morbido in alto, così
 * il verde profondo entra come una superficie e non come un taglio netto. */
@media (min-width: 1100px) {
  .site-footer { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .cta-band { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* ── 23. IL GIOCO DI FORME E COLORI ──────────────────────────────────────────────────────────────
 * Due forme morbide, grandi e quietissime, nel terzo tono della famiglia oliva: stanno DIETRO al
 * contenuto e non lo toccano mai. Servono a due cose insieme — danno alla pagina dei contatti gli
 * strati che le mancavano (era la più piatta: 4 contro 9 e 12) e portano il colore come FORMA invece
 * che come campitura, che è il modo elegante di usarlo su un sito istituzionale.
 * ⚠ `z-index: 0` e contenuto a `1`: una forma decorativa non deve mai finire sopra un testo, e nessun
 * contrasto si sposta perché i pannelli che le stanno sopra hanno fondo opaco proprio.
 * ⚠ `aria-hidden` non serve: è uno pseudo-elemento, quindi non entra nell'albero di accessibilità. */
@media (min-width: 1100px) {
  /* ⚠⚠ `overflow: hidden` QUI RITAGLIAVA LA SCHEDA. Serviva a contenere la forma decorativa, ma la
   * scheda dei recapiti sale sulla banda con un margine NEGATIVO, cioè sborda dal lato ALTO: nascondere
   * l'eccedenza la riportava dentro, e lo strato spariva. Si ritaglia il solo asse ORIZZONTALE, dove il
   * rischio (una barra di scorrimento) è reale, e si lascia libero il verticale, dove sta il disegno.
   * ⚠ `overflow-x: clip` + `overflow-y: visible` è la coppia ammessa: con `hidden` su un asse l'altro
   * verrebbe promosso ad `auto` e il ritaglio tornerebbe da dove l'avevamo tolto. */
  .section:has(> .container > .contact-cols) { position: relative; overflow-x: clip; overflow-y: visible; }
  .section:has(> .container > .contact-cols)::before {
    content: "";
    position: absolute; z-index: 0; pointer-events: none;
    right: calc(-1 * var(--space-9)); top: calc(-1 * var(--space-8));
    width: min(46vw, 34rem); aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, color-mix(in srgb, var(--accent) 6%, transparent) 58%, transparent 72%);
  }
  .section:has(> .container > .contact-cols) > .container { position: relative; z-index: 1; }

  /* ⚠⚠ RITIRATA DOPO SEGNALAZIONE OWNER: la forma tonda sotto l'indice delle materie non si leggeva
   * come un fondo ma come un SEGNO — un bordo curvo netto che tagliava l'angolo del blocco. Una forma
   * decorativa funziona finche' resta impercettibile; appena se ne vede il contorno smette di essere
   * atmosfera e diventa un artefatto. Qui il contorno si vedeva, quindi esce.
   * (Quella della pagina dei contatti resta: e' piu' piccola, sta in un angolo e non taglia nulla.) */
}
@media (prefers-reduced-motion: reduce) {
  .section:has(> .container > .contact-cols)::before,
  #aree-di-attivita + .section::after { transition: none; }
}

/* ── 24. PROVATO E RITIRATO: moto legato allo scroll sulla pagina dei contatti ───────────────────
 * Aggiungere `animation-timeline: view()` su modulo, banda e sommario doveva dare a questa pagina il
 * movimento che le manca. MISURATO: il punteggio di dinamismo e' SCESO (8,7 -> 8,6) e i tipi distinti
 * di movimento su contatti da 6 a 5.
 * ⭐ La ragione e' generale e vale la pena scriverla: il verticale fa gia' comparire quegli elementi con
 * IntersectionObserver. Due meccanismi di movimento sullo STESSO elemento non si sommano — il secondo
 * fissa lo stato finale del primo, e quello che era un ingresso diventa un elemento fermo. Il moto
 * legato allo scorrimento va messo su elementi che NON hanno gia' una comparsa propria (ed e' il caso
 * di `.area-row` e `.areas-page__fig`, dove infatti funziona).
 */

/* ── 25. UNA SUPERFICIE POSATA HA UN'OMBRA ───────────────────────────────────────────────────────
 * Il raggio da solo non basta: un blocco rientrato e arrotondato ma senza elevazione si legge come un
 * rettangolo di colore diverso, non come una superficie appoggiata sul fondo. L'ombra è ciò che chiude
 * il gesto — ed è la stessa che portano già la scheda dei recapiti e il pannello delle aree.
 * ⚠ Ombra MORBIDA e larga, mai marcata: su un sito istituzionale l'elevazione si deve sentire, non vedere. */
@media (min-width: 1100px) {
  #aree-di-attivita { box-shadow: 0 -2px 40px -28px rgba(20,28,16,.5); }
  #aree-di-attivita + .section { box-shadow: 0 26px 54px -40px rgba(20,28,16,.45); }
  .page-head { box-shadow: 0 18px 40px -34px rgba(20,28,16,.4); }
}

/* ── 26. LE QUATTRO FIGURE COPRONO TUTTE E SEI LE MATERIE ────────────────────────────────────────
 * MISURATO: la colonna delle figure era alta 1013px contro i 1624 delle sei righe, e finiva a 2846
 * mentre l'indice arrivava a 3484 — le ultime due materie (amministrativo, infortunistica) restavano
 * senza immagine accanto, e la colonna moriva a due terzi.
 * Le figure non sono sei e non si inventano: si DISTRIBUISCONO. La colonna si stira all'altezza vera
 * delle righe e ripartisce lo spazio fra le figure, così ognuna sta accanto a una materia diversa e
 * nessuna parte di indice resta spaiata.
 * ⚠ `align-content` distribuisce le RIGHE di una griglia: funziona solo se la griglia ha un'altezza
 * definita, quindi serve anche lo stiramento. Senza, le due dichiarazioni non fanno nulla. */
@media (min-width: 1100px) {
  .areas-page__gallery {
    align-self: stretch;
    height: 100%;
    align-content: space-between;
  }
}

/* ── 27. LA PRIMA FIGURA PARTE ALLA QUOTA DELLA SUA MATERIA ──────────────────────────────────────
 * `components.css` alza OGNI figura della colonna con un `margin-top` negativo (`-var(--space-7)`):
 * per le figure di mezzo e' il ritmo voluto, e infatti le altre tre stanno bene. Per la PRIMA no:
 * misurata, partiva 48px SOPRA la propria riga — e sopra la galleria stessa — finendo all'altezza del
 * sommario invece che del titolo «Diritto civile».
 * ⚠ Si annulla il rialzo sulla SOLA prima figura: le altre conservano lo sfalsamento del verticale. */
@media (min-width: 1100px) {
  .areas-page__gallery > .areas-page__fig:first-child { margin-top: 0; }
}