/* shell.css: caratteri, token, testata, pannello Servizi, menu del telefono, pie' di pagina.
   Uguale per tutte le pagine (nel sito diventa la parte comune di css/base.css). Si carica PRIMA del css della pagina.
   Transizioni tra le pagine: sezione 8 (con js/vt.js). Consenso: non nel mockup, si aggiunge al passaggio in base.css (SPEC-HOME §16, PIANO-PAGINE 8.4). */

/* ---------- 1. caratteri ---------- */
@font-face { font-family: 'Hanken Grotesk'; src: url('../fonts/HankenGrotesk-var-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('../fonts/HankenGrotesk-var-latinext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
/* Pixelify solo per le cifre (e . :). Tutto il resto, anche ’ × →, cade su Hanken. Stesso file gia' precaricato. */
@font-face { font-family: 'NS Cifre'; src: url('../fonts/PixelifySans-var-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0030-0039, U+002E, U+003A; }

/* ---------- 2. token ---------- */
:root {
  --ink: #1a1e24;
  --paper: #f5f3ee;
  --cyan: #00ffe5;
  --blue: #1a68f4;
  --panel: #1a1e24;
  --foot-bg: #0e1014;

  --fg: var(--ink);
  --fg-mute: #3d424a;
  --accent-text: var(--fg);
  --hl: rgb(0 255 229 / .38);
  --mark-prob: #b3412a;
  --mark-sol: #1a68f4;
  --focus: var(--ink);

  --font: 'Hanken Grotesk', system-ui, sans-serif;
  --pixel: 'NS Cifre', 'Hanken Grotesk', system-ui, sans-serif;

  --t-xs:   .875rem;
  --t-sm:   1rem;
  --t-base: clamp(1.0625rem, 1rem + .15vw, 1.125rem);
  --t-lead: clamp(1.125rem, 1rem + .4vw, 1.3125rem);
  --t-step: clamp(1.3125rem, 1.05rem + 1vw, 1.75rem);
  --t-h3:   clamp(1.375rem, 1.05rem + 1.2vw, 2rem);
  --t-h2:   clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --t-h1:   clamp(2rem, 1.35rem + 3vw, 3.75rem);
  --t-num:  clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --t-date: clamp(3rem, 1.5rem + 5.5vw, 6.5rem);

  --s-1: .5rem; --s-2: .75rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2rem; --s-6: 3rem;
  --measure: 60ch;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --ease: cubic-bezier(.2, .7, .1, 1);

  --bar-h: 4.5rem;
  --bar: rgb(218 212 196);
  --bar-line: rgb(26 30 36 / .12);
}
html.dark {
  --fg: var(--paper); --fg-mute: #b8bec7; --accent-text: var(--cyan); --hl: transparent;
  --mark-prob: #ff8a6b; --mark-sol: var(--cyan); --focus: var(--cyan);
  --bar: rgb(20 23 28); --bar-line: rgb(245 243 238 / .10);
}
@media (max-width: 47.99rem) { :root { --bar-h: 3.75rem; } }
@media (prefers-contrast: more) { :root, html.dark { --fg-mute: var(--fg); } }

/* ---------- 3. base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 1rem); }
html.menu-open { overflow: hidden; }
body { font-family: var(--font); font-size: var(--t-base); line-height: 1.6; color: var(--fg); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 1rem; z-index: 50; background: var(--ink); color: #fff; padding: .6rem 1rem; }
.skip-link:focus { left: 1rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.35rem; border-radius: 999px; font: 700 var(--t-sm)/1.25 var(--font); text-decoration: none; text-align: center; text-wrap: balance; transition: transform .2s var(--ease), background-color .2s, color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline-offset: 4px; }
.btn-primary { background: var(--ink); color: #fff; }
html.dark .btn-primary { background: var(--cyan); color: var(--ink); }
.btn-ghost { border: 2px solid currentColor; }

/* ---------- 4. testata ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 10; height: var(--bar-h); display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.25rem); padding: 0 var(--pad); background-color: var(--bar); border-bottom: 1px solid var(--bar-line); color: var(--fg); transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.logo { display: block; flex: none; width: 5rem; } /* 80 px: il minimo del marchio, uguale a ogni larghezza e nel menu del telefono (--bar-h non si tocca: regge anche scroll-padding-top) */
.logo img { width: 100%; height: auto; }
.logo-lt, html.dark .logo-dk { display: none; }
html.dark .logo-lt { display: block; }
/* il marchio orizzontale della testata (7 ott 2026): il simbolo a sinistra e la scritta NetSource, dai tracciati del logo ufficiale (logo-anim/crea.py).
   Il bianco e' currentColor: scuro sui temi chiari, chiaro sul tema scuro */
.topbar .logo { width: auto; display: flex; align-items: center; color: #1d232b; }
html.dark .topbar .logo { color: #f5f5f5; }
.topbar .logo .nsl { display: block; height: 2.15rem; width: auto; overflow: visible; }
@media (max-width: 760px) { .topbar .logo .nsl { height: 1.8rem; } }
/* telefoni stretti: il marchio piu' piccolo; sotto i 370 px solo il simbolo (preserveAspectRatio slice: restringendo la larghezza resta la parte sinistra),
   altrimenti il pulsante del menu usciva dallo schermo */
@media (max-width: 400px) { .topbar .logo .nsl { height: 1.55rem; } }
@media (max-width: 370px) { .topbar .logo .nsl { height: 1.7rem; width: 3.2rem; overflow: hidden; } }

/* ---------- la costruzione del sito, alla prima pagina della sessione (html.costruisci, da vt.js) ----------
   0.2 s le parentesi si aprono dal centro del simbolo; 0.6 s i tasselli del puzzle entrano uno dopo l'altro, col rimbalzo; 0.95 s la scritta si compone
   lettera per lettera; 1.2 s la testata (menu, telefono, Scriveteci) scende al suo posto; la pagina sotto appare insieme */
.nsl-chev, .nsl-pz, .nsl-l { transform-box: fill-box; transform-origin: 50% 50%; }
html.costruisci .nsl-chev0 { animation: lg-chev-l .75s cubic-bezier(.2, .9, .3, 1.15) .2s backwards; }
html.costruisci .nsl-chev1 { animation: lg-chev-r .75s cubic-bezier(.2, .9, .3, 1.15) .2s backwards; }
html.costruisci .nsl-pz { animation: lg-pz .5s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(.6s + var(--i) * .09s); }
html.costruisci .nsl-l { animation: lg-l .42s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: calc(.95s + var(--i) * .055s); }
html.costruisci .topbar > :not(.logo) { animation: ns-giu .5s cubic-bezier(.22, 1, .36, 1) backwards; }
html.costruisci .topbar > :nth-child(2) { animation-delay: 1.2s; } html.costruisci .topbar > :nth-child(3) { animation-delay: 1.28s; }
html.costruisci .topbar > :nth-child(4) { animation-delay: 1.36s; } html.costruisci .topbar > :nth-child(5) { animation-delay: 1.44s; }
html.costruisci .topbar > :nth-child(n+6) { animation-delay: 1.5s; }
html.costruisci .topbar { animation: ns-barra .5s ease-out backwards; }
html.costruisci main { animation: ns-appare .8s ease-out .5s backwards; }
@keyframes lg-chev-l { from { transform: translateX(210%) scaleY(.4); opacity: 0; } 25% { opacity: 1; } }
@keyframes lg-chev-r { from { transform: translateX(-210%) scaleY(.4); opacity: 0; } 25% { opacity: 1; } }
@keyframes lg-pz { from { transform: scale(.2) translateY(30%); opacity: 0; } 50% { opacity: 1; } }
@keyframes lg-l { from { transform: translateY(-70%) scale(.6); opacity: 0; } 60% { opacity: 1; } }
@keyframes ns-giu { from { transform: translateY(-1.2rem); opacity: 0; } }
@keyframes ns-barra { from { background-color: transparent; border-bottom-color: transparent; } }
@keyframes ns-appare { from { opacity: 0; } }

.nav { display: flex; align-items: center; gap: .125rem; margin-left: auto; font-weight: 600; }
.nav > a, .nav-svc { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: 0 .6rem; background: none; border: 0; font: 600 var(--t-sm)/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.nav > a:hover, .nav-svc:hover { text-decoration: underline; text-underline-offset: .3em; }
.nav > a[aria-current="page"]::after, .nav > a.cur::after, .nav-svc.cur::after { content: ''; position: absolute; left: .6rem; right: .6rem; bottom: .3rem; height: 3px; background: var(--mark-sol); }
.nav-svc .chev { transition: transform .2s var(--ease); }
.nav-svc[aria-expanded="true"] .chev { transform: rotate(180deg); }
html:not(.js) .nav-svc, .js .nav-svc-link { display: none; }

.lang { display: flex; align-items: center; font: 600 var(--t-xs)/1 var(--font); }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2.75rem; text-decoration: none; color: var(--fg-mute); }
.lang a:hover { color: var(--fg); }
@media (pointer: coarse) { .lang a { min-width: 2.75rem; } }
.lang a[aria-current] { color: var(--fg); text-decoration: underline 2px; text-underline-offset: .4em; }

.tel-btn { display: inline-flex; align-items: center; gap: .45rem; flex: none; min-height: 2.75rem; padding: 0 1rem; border: 2px solid currentColor; border-radius: 999px; font: 760 var(--t-sm)/1 var(--font); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.tel-btn svg { flex: none; }
.tel-short { display: none; }
.tel-btn:focus-visible, .top-cta:focus-visible { outline-offset: 4px; }
.top-cta { display: inline-flex; align-items: center; flex: none; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; background: var(--ink); color: #fff; font: 700 var(--t-sm)/1 var(--font); text-decoration: none; white-space: nowrap; }
html.dark .top-cta { background: var(--cyan); color: var(--ink); }
.nav-toggle, .nav-jump, .sheet-close { display: none; align-items: center; justify-content: center; gap: .45rem; flex: none; min-height: 2.75rem; padding: 0 .95rem; border: 2px solid currentColor; border-radius: 999px; background: none; font: 700 var(--t-sm)/1 var(--font); text-decoration: none; cursor: pointer; }

@media (max-width: 69.99rem) {
  .nav, .lang { display: none; }
  .tel-btn { margin-left: auto; }
  .js .nav-toggle { display: inline-flex; }
  html:not(.js) .nav-jump { display: inline-flex; }
}
/* telefono: nella barra solo il marchio e il Menu; il numero e' dentro il menu (il primo pulsante, «Chiamate lo …»). 8 ott 2026, Noah: su un iPhone 17
   (402 px) numero e Menu non ci stavano e il Menu usciva dallo schermo */
@media (max-width: 47.99rem) {
  .top-cta, .tel-btn { display: none; }
  .js .nav-toggle, html:not(.js) .nav-jump { margin-left: auto; }
}
/* telefono in orizzontale (844x390): la barra come sul telefono in verticale */
@media (orientation: landscape) and (max-height: 30rem) { :root { --bar-h: 3.75rem; } }
@media (max-width: 24.99rem) {
  .nav-toggle { width: 2.75rem; padding: 0; }
  .nav-toggle-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 20.99rem) { .tel-num { display: none; } .tel-short { display: inline; } }

/* ---------- 5. pannello Servizi (desktop, sempre scuro) ---------- */
.svc-panel { position: fixed; top: var(--bar-h); left: 0; right: 0; z-index: 11; max-height: calc(100vh - var(--bar-h)); overflow-y: auto; overscroll-behavior: contain; background: var(--panel); color: #f5f5f5; --focus: var(--cyan); box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .35); }
.svc-panel-in { display: grid; grid-template-columns: repeat(3, minmax(0, 22rem)) minmax(0, 24rem); justify-content: space-between; gap: 1.5rem 2.5rem; margin: 0 var(--pad); padding: 1.75rem 0 1.25rem; } /* stessi margini della barra (--pad) a sinistra e a destra: i bordi coincidono a ogni larghezza */
.sp-h { font: 650 var(--t-xs)/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #b8bec7; margin-bottom: .5rem; }
.sp-list { list-style: none; display: grid; gap: .125rem; }
.sp-list li { position: relative; padding: .5rem .75rem; margin: 0 -.75rem; border-radius: .5rem; line-height: 1.3; } /* il li ereditava 1.6 dal body: un nome su due righe sembrava due voci. Il link resta in linea (con display:block la descrizione si attacca al titolo) */
.sp-list li:hover { background: rgb(255 255 255 / .06); }
.sp-list a { font: 650 var(--t-sm)/1.3 var(--font); color: #f5f5f5; text-decoration: none; }
.sp-list a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.sp-list a:focus-visible { outline: none; }
.sp-list li:has(a:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 0; }
.sp-list a[aria-current="page"] { text-decoration: underline 3px var(--cyan); text-underline-offset: .3em; }
.sp-foot a[aria-current="page"], .sheet-all a[aria-current="page"] { text-decoration-thickness: 3px; text-decoration-color: var(--cyan); }
.sp-list p { font-size: .9375rem; line-height: 1.4; color: #b8bec7; margin-top: .25rem; }
.sp-case { align-self: start; padding: 1.25rem; border-radius: .75rem; background: rgb(255 255 255 / .05); }
.sp-eyebrow { font-size: var(--t-xs); color: #b8bec7; }
.sp-case-txt { font: 650 var(--t-lead)/1.35 var(--font); margin: .35rem 0 .75rem; text-wrap: balance; } /* insieme ai   nell'HTML: "404’784 file" e "0 persi" non si spezzano mai */
.sp-case a, .sp-foot a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; font-weight: 650; color: #f5f5f5; text-underline-offset: .25em; }
/* le tre colonne di voci occupano due righe; la scheda del caso e i due link in fondo stanno nella quarta colonna, dove c'era spazio vuoto: il pannello e' una riga piu' basso
   (circa 77 px) e non scorre fino a ~600 px di altezza della finestra (portatili 1366x768 con le barre del browser: ~650), senza rimpicciolire il testo */
.sp-col:not(.sp-case) { grid-row: span 2; }
.sp-case { grid-column: 4; grid-row: 1; }
.sp-foot { grid-column: 4; grid-row: 2; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 0 2rem; padding-top: 0; position: sticky; bottom: 0; z-index: 1; background: var(--panel); }
@media (max-height: 40rem) { .svc-panel-in { padding-top: 1.25rem; } .sp-list li { padding-block: .35rem; } }

/* ---------- 6. menu del telefono (sempre scuro, a tutto schermo) ---------- */
.nav-sheet { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--pad) 2rem; background: var(--panel); color: #f5f5f5; --focus: var(--cyan); }
/* resta ferma in cima mentre il menu scorre (con "Servizi" aperto supera lo schermo): sul telefono non c'e' Esc */
.sheet-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex: none; height: var(--bar-h); margin: 0 calc(-1 * var(--pad)) .5rem; padding: 0 var(--pad); background: var(--panel); border-bottom: 1px solid rgb(255 255 255 / .1); }
.sheet-close { display: inline-flex; color: #f5f5f5; }
.sheet-list { list-style: none; }
.sheet-list > li > a, .sheet-acc { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3rem; padding: .25rem 0; border: 0; border-bottom: 1px solid rgb(255 255 255 / .08); background: none; font: 600 1.25rem/1.2 var(--font); color: #f5f5f5; text-align: left; text-decoration: none; cursor: pointer; }
.sheet-list > li > a[aria-current="page"], .sheet-acc.cur { text-decoration: underline 3px var(--cyan); text-underline-offset: .3em; }
.sheet-acc[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sheet-sub { padding: .25rem 0 .75rem 1rem; border-bottom: 1px solid rgb(255 255 255 / .08); }
.sheet-sub ul { list-style: none; }
.sheet-h { margin-top: .75rem; font: 650 var(--t-xs)/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #b8bec7; }
.sheet-sub a { display: flex; align-items: center; min-height: 3rem; font: 500 1.125rem/1.25 var(--font); text-decoration: none; }
.sheet-sub a[aria-current="page"] { font-weight: 700; text-decoration: underline 3px var(--cyan); text-underline-offset: .3em; }
.sheet-all a { font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }
.btn-block { display: flex; width: 100%; margin-top: .75rem; }
.nav-sheet .btn-primary { margin-top: 1.5rem; background: var(--cyan); color: var(--ink); }
.nav-sheet .btn-ghost { border-color: #f5f5f5; }
.sheet-hours { margin-top: 1.25rem; font-size: var(--t-sm); color: #b8bec7; }
.sheet-lang { margin-top: .5rem; color: #b8bec7; }
.sheet-lang a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #f5f5f5; text-underline-offset: .25em; }
.sheet-lang a[aria-current] { text-decoration-thickness: 2px; }
.sheet-lang a:not([aria-current]) { text-decoration: none; }

/* ---------- 7. pie' di pagina ---------- */
.foot { position: relative; z-index: 9; background: var(--foot-bg); color: #b8bec7; font-size: var(--t-sm); line-height: 1.5; --focus: var(--cyan); }
.foot a { color: #b8bec7; text-decoration: none; }
.foot a:hover { color: #f5f3ee; text-decoration: underline; text-underline-offset: .25em; }
.foot ul { list-style: none; }
.foot li a, .foot-all a, .foot-lang a { display: inline-block; padding-block: .3rem; }
.foot li a { text-wrap: balance; } /* "Macchine CNC in / rete" e simili: balance, non pretty (pretty lascia "Programmi su / misura") */
@media (pointer: coarse) { .foot li a, .foot-all a, .foot-lang a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0; } }
/* fascia di chiusura: su tutte le pagine tranne home e contatti */
.foot-cta { padding: clamp(3rem, 8vw, 5rem) var(--pad); background: var(--panel); color: #f5f3ee; }
.foot-cta > * { max-width: 80rem; margin-inline: 0; }
.foot-cta h2 { font: 720 var(--t-h2)/1.1 var(--font); letter-spacing: -.02em; text-wrap: balance; }
.foot-cta p { margin-top: var(--s-2); color: #b8bec7; }
.foot-cta .foot-phone { display: inline-block; margin-top: var(--s-4); font: 760 max(2.4rem, var(--t-num))/1 var(--font); letter-spacing: -.02em; color: var(--cyan); text-decoration: none; white-space: nowrap; }
.foot-cta .btn-primary { background: var(--cyan); color: var(--ink); }
/* il link dentro la frase si distingue dal testo (WCAG 1.4.1: non solo il colore); specificita' piu' alta di .foot a e .foot a:hover. Il bottone non e' toccato. */
.foot-cta p a:not(.btn) { color: #f5f3ee; text-decoration: underline; text-underline-offset: .25em; }
.foot-cta p .btn { margin-right: .75rem; }
/* .foot a:hover (specificita' piu' alta) metteva il testo chiaro sul ciano: illeggibile al passaggio del mouse */
.foot a.btn:hover { color: var(--ink); text-decoration: none; }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem 2rem; margin: 0 var(--pad); padding: 4rem 0 3rem; }
.foot-contact { grid-column: span 3; }
.foot-svc { grid-column: span 5; }
.foot-co, .foot-legal { grid-column: span 2; }
.foot-logo { display: block; width: 7rem; margin-bottom: 1rem; }
.foot-contact > p, .foot-contact address > p { margin-bottom: .75rem; }
.foot address { font-style: normal; }
/* i social: pillole con l'icona sotto l'indirizzo (8 ott 2026, Noah non li trovava: erano due righe di testo tra le voci di Azienda) */
.foot-social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.foot .foot-social a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem 0 .85rem; border-radius: 999px; border: 1px solid rgb(245 243 238 / .2); color: #f5f3ee; font-weight: 650; text-decoration: none; transition: border-color .15s, color .15s; }
.foot .foot-social a:hover { border-color: var(--cyan); color: var(--cyan); text-decoration: none; }
.foot-social svg { flex: none; }
.foot-h { margin-bottom: .75rem; font: 650 var(--t-xs)/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #f5f3ee; }
.foot-sub { margin: 0 0 .25rem; font: 650 var(--t-xs)/1.3 var(--font); color: #f5f3ee; }
.foot-sub ~ .foot-sub { margin-top: 1rem; }
.foot-svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.foot-all { margin-top: .75rem; }
.foot-contact > p { text-wrap: pretty; }
.foot-all a { color: #f5f3ee; text-decoration: underline; text-underline-offset: .25em; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 2rem; margin: 0 var(--pad); padding: 1.25rem 0 2rem; border-top: 1px solid rgb(255 255 255 / .08); font-size: var(--t-xs); }
.foot-lang a[aria-current] { color: #f5f3ee; text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 69.99rem) {
  .foot-contact, .foot-svc { grid-column: span 12; }
  .foot-co, .foot-legal { grid-column: span 6; }
}
@media (max-width: 47.99rem) {
  .foot-grid { gap: 2rem 1.25rem; padding-top: 3rem; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* contrasto elevato (forced-colors): gli sfondi spariscono, quindi la sottolineatura della voce attiva (e' uno sfondo) prende CanvasText */
@media (forced-colors: active) {
  .nav > a[aria-current="page"]::after, .nav > a.cur::after, .nav-svc.cur::after { background: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar, .btn, .nav-svc .chev { transition: none; }
  .btn:hover { transform: none; }
}

/* ---------- 8. transizioni tra le pagine (PIANO-PAGINE 3b, 8.3) ----------
   Navigazioni interne: la barra, il logo e il bottone del telefono restano fermi (nomi propri, una volta sola per pagina, solo dentro .topbar);
   il resto della pagina cambia con un movimento di camera: "avanti" (verso un servizio) entra con uno zoom in avanti, "indietro" il contrario.
   Il tipo lo mette js/vt.js al pagereveal; senza tipo c'e' solo la dissolvenza. Senza supporto del browser la pagina si carica normalmente. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: ns-bar; }
.topbar .logo { view-transition-name: ns-logo; }
.topbar .tel-btn { view-transition-name: ns-tel; }
html.menu-open .topbar, html.menu-open .topbar .logo, html.menu-open .topbar .tel-btn { view-transition-name: none; }
html.menu-open .sheet-top { view-transition-name: ns-bar; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--ease); }
::view-transition-old(root) { animation: .38s var(--ease) both ns-vt-out; }
::view-transition-new(root) { animation: .45s var(--ease) both ns-vt-in; }
html:active-view-transition-type(avanti)::view-transition-old(root) { animation-name: ns-vt-zoom-out; }
html:active-view-transition-type(avanti)::view-transition-new(root) { animation-name: ns-vt-zoom-in; }
html:active-view-transition-type(indietro)::view-transition-old(root) { animation-name: ns-vt-back-out; }
html:active-view-transition-type(indietro)::view-transition-new(root) { animation-name: ns-vt-back-in; }
@keyframes ns-vt-out { to { opacity: 0; transform: scale(.98); } }
@keyframes ns-vt-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes ns-vt-zoom-out { to { opacity: 0; transform: scale(1.05); } }   /* la camera entra: la pagina vecchia si avvicina e sparisce */
@keyframes ns-vt-zoom-in { from { opacity: 0; transform: scale(.95); } }   /* la nuova arriva da piu' lontano */
@keyframes ns-vt-back-out { to { opacity: 0; transform: scale(.95); } }
@keyframes ns-vt-back-in { from { opacity: 0; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}