/* ============================================================================
   FRAME ASSET MANAGEMENT — frame-2026.css
   ----------------------------------------------------------------------------
   STRATO FINALE: modernizzazione tecnica + accessibilita'.

   REGOLA D'ORO DI QUESTO FILE
   Non cambia l'identita' visiva del sito (palette scura, oro/champagne,
   Nunito Sans, fotografie, impaginazione). Interviene solo su:
     1. piattaforma e token   — scala tipografica fluida, spazi, movimento
     2. leggibilita'          — dimensioni minime, contrasto, veli sulle foto
     3. accessibilita'        — focus, target tattili, movimento ridotto,
                                alto contrasto, forced-colors, stampa
     4. modernita' tecnica    — vetro liquido dell'header, view transitions,
                                animazioni guidate dallo scorrimento,
                                container query, :has(), color-mix()

   ORDINE DI CARICAMENTO
   Va caricato SEMPRE per ultimo (dopo css/v22-hero.css). Essendo l'ultimo
   foglio non "layered", vince sui precedenti a parita' di specificita'.
   Dove i fogli v15/v17/v18 usano !important si usa !important anche qui.

   COME DISATTIVARE UN BLOCCO
   Ogni sezione e' numerata e indipendente: si puo' commentare da sola.
   ========================================================================== */


/* ==========================================================================
   1. TOKEN — colori accessibili, scala tipografica fluida, movimento
   --------------------------------------------------------------------------
   I colori esistenti non vengono sostituiti: si aggiungono varianti
   "-text" verificate a norma WCAG 2.2 AA per l'uso su testo.
   Rapporti di contrasto misurati su fondo --ink (#0d0d0c):
     --gold-text  #c3a978 ->  8.6:1     --muted-text #c1b8a6 ->  9.9:1
     --gold-soft  #d0c1a0 -> 10.9:1     --cream-text #e7dfce -> 14.7:1
     --focus-ring #f0d79b -> 13.8:1
   ========================================================================== */
:root{
  /* ========================================================================
     SCALA DI VISUALIZZAZIONE  —  UNICO VALORE DA REGOLARE
     ------------------------------------------------------------------------
     0.90 = il sito si presenta al 90%: titoli, spaziature, fotografie e
            impaginazione risultano leggermente piu' compatti, con piu'
            contenuto visibile a schermo.
     1     = dimensione naturale.

     COME FUNZIONA. La riduzione e' applicata con "zoom" sull'elemento radice
     (riga "html{zoom:...}" nella sezione 2). NON e' l'attributo
     initial-scale del viewport, che agiva solo sui telefoni e non sul
     desktop: cosi' l'effetto e' identico su tutti gli schermi ed espresso in
     un solo punto.

     COSA NON VIENE RIMPICCIOLITO, e perche'.
     Alcune misure sono soglie minime di leggibilita' e di usabilita': se
     scendessero del 10% il sito perderebbe la conformita' raggiunta. Vengono
     quindi divise per la scala, cosi' la loro dimensione A SCHERMO resta
     quella verificata:
       - corpo del testo, incipit, etichette minime   (>= 16px / 12,5px resi)
       - aree di tocco dei comandi                    (>= 24px resi, WCAG 2.5.8)
       - spessore dell'anello di focus                (>= 3px resi)
       - altezza delle sezioni a tutto schermo        (100svh resi)
     In pratica: si rimpicciolisce l'impaginazione, non la leggibilita'.

     ATTENZIONE: lo zoom del browser e l'ingrandimento del testo di sistema
     continuano a funzionare e si moltiplicano su questo valore. Chi porta il
     browser al 200% vede il sito al 180% del disegno originale: se in
     futuro servisse piu' margine, alzare questo numero verso 1.
     ======================================================================== */
  --frame-zoom:.90;

  /* Misure espresse nello spazio di coordinate zoomato: dividendo per la
     scala si ottiene la dimensione desiderata A SCHERMO. */
  --vh-100:calc(100svh / var(--frame-zoom));   /* schermo pieno            */
  --vh-100d:calc(100dvh / var(--frame-zoom));  /* schermo pieno, dinamico  */
  --tap-min:calc(24px / var(--frame-zoom));    /* minimo normativo         */
  --tap:calc(44px / var(--frame-zoom));         /* target confortevole      */
  --focus-w:calc(3px / var(--frame-zoom));      /* anello di focus          */

  /* --- Colori del testo verificati AA -------------------------------------- */
  --gold-text:#c3a978;          /* oro leggibile: sostituisce --gold-2 nei testi */
  --gold-ink:#7a6544;           /* oro leggibile su fondo chiaro (5.3:1)         */
  --muted-text:#c1b8a6;         /* testo secondario su fondo scuro               */
  --muted-strong:#d7cfc1;       /* testo secondario su fotografia                */
  --pos:#8fd0b0;               /* variazione positiva (10.9:1)                  */
  --neg:#e79c93;               /* variazione negativa (8.9:1)                   */
  --focus-ring:#f0d79b;
  --focus-halo:rgba(8,8,7,.78);

  /* --- Scala tipografica fluida -------------------------------------------
     Minimo assoluto 12,5px A SCHERMO: sotto quella soglia le maiuscole
     spaziate del sito diventano illeggibili, soprattutto per ipovedenti.
     I valori sono divisi per --frame-zoom, quindi le misure indicate nei
     commenti sono quelle effettivamente rese sullo schermo e non cambiano
     se si modifica la scala di visualizzazione. */
  --fs-micro:calc(clamp(.78rem,.74rem + .12vw,.86rem) / var(--frame-zoom));  /* 12,5 -> 13,8px  etichette */
  --fs-small:calc(clamp(.86rem,.82rem + .14vw,.94rem) / var(--frame-zoom));  /* 13,8 -> 15,0px  didascalie */
  --fs-body:calc(clamp(1rem,.96rem + .18vw,1.09rem) / var(--frame-zoom));    /* 16,0 -> 17,4px  corpo      */
  --fs-lead:calc(clamp(1.08rem,1rem + .34vw,1.22rem) / var(--frame-zoom));   /* 17,3 -> 19,5px  incipit    */

  /* --- Tracciatura: si riduce quando il corpo cresce, per non allargare
         le etichette maiuscole rispetto all'impaginazione originale. ------- */
  --ls-micro:.14em;
  --ls-eyebrow:.2em;

  /* --- Movimento (un solo punto di controllo) ------------------------------ */
  --dur-fast:.16s;
  --dur:.32s;
  --dur-slow:.6s;
  --motion-scale:1;             /* portato a 0 da "riduci movimento"          */

  /* --- Veli sulle fotografie ----------------------------------------------
     Un solo token per tutti i veli: alzarlo scurisce le foto e migliora il
     contrasto del testo sovrapposto; abbassarlo le rende piu' presenti. */
  --scrim:.62;
  --scrim-strong:.76;

  /* --- Trattamento fotografico unificato ----------------------------------
     Le fotografie del sito arrivano da fonti diverse: alcune fredde (blu),
     altre calde (Lugano al tramonto). Una desaturazione minima e un filo di
     calore le riportano alla stessa famiglia cromatica dell'oro/avorio,
     senza alterarne il soggetto. Per annullare: --photo-filter:none. */
  --photo-filter:saturate(.9) contrast(1.03);

  /* --- Soglia del menu a tendina ------------------------------------------
     Unico punto di verita': js/main.js legge questa variabile per sapere
     quando il menu si comporta da tendina (trappola del focus, chiusura con
     Esc, blocco dello scorrimento). Modificando qui si aggiorna anche il
     comportamento da tastiera. */
  --nav-drawer-bp:1360px;

  /* --- Superfici in vetro (strato funzionale) ------------------------------ */
  --glass-blur:22px;
  --glass-bg:color-mix(in srgb, var(--ink) 62%, transparent);
  --glass-line:rgba(244,236,219,.14);

  color-scheme:dark;
}

/* Consente l'animazione di height/width verso auto (fisarmoniche fluide). */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
}


/* ==========================================================================
   2. BASE — comportamenti di piattaforma
   ========================================================================== */
/* SCALA DI VISUALIZZAZIONE — vedi il commento su --frame-zoom nella sezione 1.
   "zoom" sulla radice riduce tutto il disegno mantenendo il sito a tutta
   larghezza (il browser compensa la larghezza dell'elemento radice) e senza
   toccare i punti di rottura responsive, che continuano a leggere la
   larghezza reale della finestra: le regole per telefono restano quindi
   allineate al dispositivo vero.
   Lo zoom del browser e l'ingrandimento del testo di sistema continuano a
   funzionare e si moltiplicano su questo valore.
   Firefox prima della versione 126 ignora "zoom": in quel caso il sito si
   presenta al 100%, cioe' semplicemente senza la riduzione. */
html{zoom:var(--frame-zoom)}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:clamp(92px,12vh,124px);
}

/* Le sezioni che devono coprire esattamente lo schermo usano unita' di
   viewport: quelle NON sono compensate dallo zoom, quindi senza questa
   correzione una copertina "100svh" verrebbe disegnata al 90% dell'altezza
   dello schermo, lasciando affiorare una striscia della sezione seguente. */
.page-cover,
body.v13-home .lux-hero{min-height:var(--vh-100)}
.access-page{min-height:calc(var(--vh-100) - 96px)}
body:has(.gate-footer) .access-page{min-height:calc(var(--vh-100) - 96px - 108px)}
@media (max-width:900px){
  .page-cover,
  body.v13-home .lux-hero{min-height:calc(92svh / var(--frame-zoom))}
}
@media (max-width:1024px){
  .access-page{min-height:calc(var(--vh-100) - 72px)}
  body:has(.gate-footer) .access-page{min-height:calc(var(--vh-100) - 72px - 104px)}
}
body{
  font-size:var(--fs-body);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
  overflow-wrap:break-word;
}
/* Nunito Sans e' una variable font con asse "opsz": va lasciata decidere
   al motore, altrimenti i corpi piccoli risultano troppo sottili. */
*{font-synthesis-weight:none}

::selection{background:color-mix(in srgb, var(--gold-soft) 34%, transparent);color:#fff}
:root{accent-color:var(--gold);caret-color:var(--gold-soft)}

/* Titoli: bilanciamento delle righe (moderno, migliora anche la lettura). */
h1,h2,h3,.section-title,.page-head-title,.page-cover-title,.lux-hero-title{
  text-wrap:balance;
}
p,li,figcaption,dd,blockquote{text-wrap:pretty}

/* Cifre allineate dove i numeri vanno confrontati a colpo d'occhio. */
.lux-tick-val,.lux-tick-chg,.lux-stat-value,.amc-metric-value,
table td,table th,time,.pm-date,.dn-date{
  font-variant-numeric:tabular-nums;
}


/* --------------------------------------------------------------------------
   POSIZIONE DEL BLOCCO GENERATO — importante
   Il blocco automatico sta QUI, prima delle sezioni scritte a mano, non in
   coda al file: in CSS, a parita' di specificita', vince l'ultima regola.
   Se il blocco generato stesse in fondo sovrascriverebbe le scelte
   deliberate delle sezioni successive (per esempio le voci del menu a
   tendina, che nel menu devono essere piu' grandi).
   -------------------------------------------------------------------------- */
/* >>> PAVIMENTO TIPOGRAFICO — generato da tools/genera-pavimento-tipografico.py */
/* Ogni selettore qui sotto veniva RESO a schermo sotto i 12.5px
   (font-size dichiarato inferiore a 13.9px, con scala 0.90).
   Le regole di primo livello riportano il corpo al minimo leggibile;
   quelle dentro una @media (telefono, tablet) si limitano a compensare
   lo zoom, cosi' la dimensione resa torna quella voluta in origine, e
   usano !important perche' i fogli v17/v18 lo usano a loro volta.
   NON modificare a mano: rigenerare con
       python3 tools/genera-pavimento-tipografico.py */

/* --- regole di primo livello (enhance.css, experience.css, restyle.css, style.css, v10.css, v13.css, v15-audit.css, v19-legale.css) --- */
.acc-num,
.footer-bottom .footer-consent,
.footer-bottom-links a,
.footer-reg,
.fx-strata-note,
.index,
.monthly-years a,
.placeholder-note,
.skip-link{
  font-size:calc(12.8px / var(--frame-zoom));
}
.amc-chart .amc-chart-fallback,
.amc-more-row,
.footer-bottom .footer-copy,
.gate-legal .consent-reset,
.gate-legal a,
.lux-tick-val,
.svc-num,
.v10-charter-tab em,
.v13-frame-media figcaption{
  font-size:calc(13.12px / var(--frame-zoom));
}
.amc-spec,
.legal-nav a,
.map-embed .map-placeholder-actions .btn,
.monthly-check{
  font-size:calc(13.44px / var(--frame-zoom));
}
.fx-acc-rom,
.hero-fact .label,
.legal-wrap .legal-date,
.monthly-form .small,
.product-note,
.recaptcha-error{
  font-size:calc(13.76px / var(--frame-zoom));
}
.access-button,
.access-field label,
.amc-btn,
.amc-cat,
.amc-chart .amc-chart-tag,
.amc-explain-tags span,
.amc-filter,
.amc-manager,
.amc-more-inner h5,
.amc-perf .amc-perf-lab,
.amc-updated,
.article-meta,
.author-content span,
.bio-toggle,
.btn,
.card-num,
.cert-badge .cb-meta,
.cert-badge .cb-title,
.cert-chip .cw-wrap small,
.cert-citywire small,
.contact-list .label,
.cookie-actions .btn,
.date,
.dn-tag,
.eyebrow,
.fchart-period,
.fchart-tip-chg,
.fchart-tip-chg span,
.fchart-tip-date,
.field label,
.footer-col h3,
.footer-col h4,
.fx-acc-k,
.fx-acc-word,
.fx-eyebrow,
.fx-hint,
.fx-layer-name,
.fx-layer-num,
.fx-orbit-core small,
.fx-panel-num b,
.fx-panel-tags li,
.fx-sat-btn b,
.fx-shot-k,
.fx-step-name,
.fx-stratum-k,
.fx-value-k,
.gate-copy,
.globe-label .gl-eyebrow,
.hero-fact .num,
.impact-link,
.lang-opt,
.lang-sep,
.lang-switch,
.lux-btn,
.lux-eyebrow,
.lux-hero-eyebrow,
.lux-mission-label,
.lux-pillar-k,
.lux-scroll-hint,
.lux-stat-label,
.lux-tick-chg,
.lux-tick-sym,
.lux-world-go,
.lux-world-tag,
.main-nav .nav-cta,
.main-nav a,
.member-role,
.mission-label,
.monthly-date,
.monthly-disclaimer strong,
.monthly-form>label,
.monthly-input-row button,
.monthly-link,
.page-cover-scroll,
.pm-btn,
.pm-eyebrow,
.pm-month,
.pm-pdf,
.pm-read,
.pm-reader-author em,
.pm-reader-author span,
.pm-reader-eyebrow,
.pm-reader-meta,
.pm-reader-note,
.pm-year,
.pm-year .pm-year-n,
.product-label,
.rs-source,
.service-label,
.svc-eyebrow,
.svc-tab,
.team-group-title,
.trustbar span,
.v10-charter-panel span,
.v10-charter-tab strong,
.v10-dial-point,
.v10-method-k,
.v10-method-panel li,
.v10-method-panel>span,
.v10-method-step em,
.v10-method-step strong,
.v10-service-card b,
.v10-service-card em,
.v10-service-reader-k,
.v10-service-reader-nav button,
.v10-service-reader-note,
.v13-addr-city,
.v13-addr-country,
.v13-mark span,
.v13-panel-cta,
.v13-panel-nav a,
.v13-pill,
body.v13-home .cfm-eyebrow,
body.v13-home .cfm-feature em,
body.v13-home .cfm-link{
  font-size:var(--fs-micro);
}
.access-button,
.btn,
.cert-chip .cw-wrap small,
.cert-citywire small,
.eyebrow,
.fx-acc-k,
.fx-acc-word,
.fx-eyebrow,
.fx-orbit-core small,
.fx-shot-k,
.fx-step-name,
.fx-stratum-k,
.fx-value-k,
.globe-label .gl-eyebrow,
.lux-eyebrow,
.lux-hero-eyebrow,
.lux-mission-label,
.lux-pillar-k,
.lux-scroll-hint,
.mission-label,
.page-cover-scroll,
.product-label,
.service-label,
.svc-eyebrow,
.team-group-title,
.v10-charter-panel span,
.v10-method-panel>span,
.v13-addr-city,
.v13-addr-country,
.v13-mark span,
.v13-panel-cta,
body.v13-home .cfm-eyebrow,
body.v13-home .cfm-feature em,
body.v13-home .cfm-link{
  letter-spacing:.16em;
}

/* --- @media (max-width:1024px)  (v17-mobile.css, v18-mobile-editorial.css) --- */
@media (max-width:1024px){
  .amc-cat,
  .cfm-eyebrow,
  .eyebrow,
  .fx-eyebrow,
  .fx-shot-k,
  .lux-world-tag,
  .pm-eyebrow,
  .svc-eyebrow,
  .v10-service-reader-k{
    font-size:calc(12.8px / var(--frame-zoom)) !important;
  }
  .author-content span,
  .bio-toggle,
  .cfm-feature em,
  .contact-list .label,
  .footer-col h3,
  .fx-layer-name,
  .fx-strata-note,
  .fx-value-k span,
  .lux-eyebrow,
  .lux-mission-label span,
  .lux-stat-label,
  .lux-tick-sym,
  .member-role,
  .page-cover-scroll span,
  .pm-card-top .pm-eyebrow,
  .pm-month,
  .rs-source,
  .v10-service-card em{
    font-size:calc(13.76px / var(--frame-zoom)) !important;
  }
}

/* --- @media (max-width:1240px)  (style.css) --- */
@media (max-width:1240px){
  .lang-switch,
  .main-nav .nav-cta{
    font-size:calc(12.8px / var(--frame-zoom)) !important;
  }
}

/* --- @media (max-width:520px)  (restyle.css) --- */
@media (max-width:520px){
  .fchart-period{
    font-size:var(--fs-micro) !important;
  }
}

/* --- @media (max-width:600px)  (v18-mobile-editorial.css, v19-legale.css) --- */
@media (max-width:600px){
  .btn{
    font-size:calc(12.8px / var(--frame-zoom)) !important;
  }
  .gate-legal .consent-reset,
  .gate-legal a{
    font-size:calc(13.76px / var(--frame-zoom)) !important;
  }
  .fx-panel-tags li,
  .page-cover-scroll span{
    font-size:var(--fs-micro) !important;
  }
}

/* --- @media (max-width:760px)  (v13.css) --- */
@media (max-width:760px){
  .v13-pill{
    font-size:var(--fs-micro) !important;
  }
}

/* --- @media (max-width:900px)  (v18-mobile-editorial.css) --- */
@media (max-width:900px){
  .lux-tick-chg,
  .lux-tick-val{
    font-size:calc(12.8px / var(--frame-zoom)) !important;
  }
  .access-button,
  .access-field label,
  .check label,
  .field label{
    font-size:calc(13.12px / var(--frame-zoom)) !important;
  }
  .footer-bottom-links a{
    font-size:calc(13.44px / var(--frame-zoom)) !important;
  }
  .footer-reg,
  .lang-opt{
    font-size:calc(13.76px / var(--frame-zoom)) !important;
  }
  .amc-btn,
  .amc-explain-tags span,
  .amc-perf .amc-perf-lab,
  .amc-updated,
  .bio-toggle,
  .contact-list .label,
  .cookie-actions .btn,
  .fchart-period,
  .footer-col h3,
  .fx-layer-name,
  .fx-layer-num,
  .fx-sat-btn b,
  .lux-stat-label,
  .lux-tick-sym,
  .member-role,
  .page-cover-scroll,
  .pm-pdf,
  .pm-read,
  .team-group-title,
  .v13-pill,
  body.v13-home .cfm-link{
    font-size:var(--fs-micro) !important;
  }
}

/* --- @media (max-width:960px)  (experience.css) --- */
@media (max-width:960px){
  .fx-sat-btn b,
  .fx-step-name{
    font-size:var(--fs-micro) !important;
  }
}

/* --- @media (max-width:980px)  (restyle.css) --- */
@media (max-width:980px){
  .lang-opt{
    font-size:calc(12.8px / var(--frame-zoom)) !important;
  }
}

/* --- @media (min-width:1241px)  (v14-unified.css) --- */
@media (min-width:1241px){
  body.v13-home .lux-tick-val{
    font-size:calc(13.76px / var(--frame-zoom)) !important;
  }
  body.v13-home .lux-tick-chg,
  body.v13-home .lux-tick-sym,
  body:not(.v13-home) .page-hero .eyebrow,
  body[data-page="chi"] .fx-sat-btn b{
    font-size:var(--fs-micro) !important;
  }
}

/* --- @media (min-width:1241px) and (max-width:1439px)  (v14-unified.css) --- */
@media (min-width:1241px) and (max-width:1439px){
  body .site-header .lang-switch,
  body .site-header .main-nav .nav-cta,
  body .site-header .main-nav a{
    font-size:var(--fs-micro) !important;
  }
}

/* <<< FINE PAVIMENTO TIPOGRAFICO */


/* ==========================================================================
   3. LEGGIBILITA' — dimensioni minime per le etichette
   --------------------------------------------------------------------------
   Prima di questo strato molte etichette maiuscole erano fra 9,6px e 11,2px
   con tracciatura fino a .32em. Sotto i 12px, con lettere spaziate e peso
   medio su fondo nero, il testo non e' leggibile per una parte del pubblico
   (WCAG 2.2 — 1.4.4 Ridimensionamento del testo, e HIG: minimo 11pt).
   Qui si porta tutto a >= 12,5px e si riduce la tracciatura in proporzione,
   cosi' la larghezza complessiva resta quella dell'impaginazione originale.
   ========================================================================== */
.eyebrow,
.fx-eyebrow,
.cfm-eyebrow,
body.v13-home .cfm-eyebrow,
.lux-eyebrow,
.pm-eyebrow,
.svc-eyebrow,
.dn-eyebrow,
.rs-eyebrow,
.page-head-eyebrow,
.page-cover-eyebrow{
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-eyebrow);
  line-height:1.4;
}
.lux-world-tag,
.fx-shot-k,
.lux-stat-label,
.amc-cat,
.v10-service-reader-k,
.v13-addr-country,
.v13-addr-city,
.lux-world-go,
.cfm-link,
.footer-col h3,
.cb-meta,
.nav-cta,
.lang-opt,
.main-nav a,
.v13-pill,
.lux-tick-sym,
.lux-tick-val,
.lux-tick-chg,
.footer-reg,
.footer-bottom-links a,
.small,
figcaption{
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-micro);
}
/* Il corpo del nastro di mercato e i valori restano leggermente piu' grandi
   dei simboli, per conservare la gerarchia originale. */
.lux-tick-val{font-size:var(--fs-small);letter-spacing:.02em}
.footer-col a,.footer-col p{font-size:var(--fs-small)}
.footer-reg{font-size:var(--fs-micro);line-height:1.65}

/* Navigazione: leggibile senza cambiare il ritmo dell'header. */
.main-nav a{letter-spacing:.1em}
.nav-cta{letter-spacing:.14em}

/* Incipit e testi lunghi: interlinea e misura di riga da lettura editoriale.
   45-80 caratteri per riga e' l'intervallo raccomandato (WCAG 1.4.8). */
.lux-hero-sub,.page-head-lead,.page-cover-lead,.cfm-block-copy>p,
.fx-orbit-copy>p,.legal-content p,.card p,.lux-world p{
  font-size:var(--fs-lead);
  line-height:1.68;
}
.legal-content p,.legal-content li{max-width:74ch}
/* Ritmo verticale dei documenti legali: elenchi e paragrafi devono restare
   distinti a colpo d'occhio (prima il paragrafo dopo un elenco sembrava
   l'ultimo punto dell'elenco stesso). */
.legal-content ul,.legal-content ol{margin:0 0 22px;padding-inline-start:22px}
.legal-content li{margin-bottom:10px}
.legal-content li::marker{color:var(--gold-text)}
.legal-content ul+p,.legal-content ol+p{margin-top:22px}
.legal-content h2{margin-top:40px}


/* ==========================================================================
   4. CONTRASTO — testo secondario e accenti
   --------------------------------------------------------------------------
   Sostituisce i grigi e gli ori piu' deboli SOLO dove sono usati come testo.
   I bordi, le ombre e i fondi restano quelli originali.
   ========================================================================== */
.lux-stat-label,
.v13-addr-country,
.cb-meta,
.form-status,
.monthly-form .small,
.small,
.site-footer .footer-col p,
.site-footer .footer-col a,
.footer-reg,
.fx-acc-item em,
.v10-charter-tab em,
.v10-service-card p{
  color:var(--muted-text);
}
.lux-tick-sym,.lux-tick-chg{color:var(--muted-strong)}
.lux-tick-chg.up{color:var(--pos)}
.lux-tick-chg.down{color:var(--neg)}

/* L'oro --gold-2 (#8c7550) e' sotto 4,5:1 su fondo scuro: nei testi si usa
   la variante verificata. Resta invariato su bordi e sfondi.
   NB: il selettore e' limitato a <main> e lo skip-link e' escluso: quel link
   ha il fondo oro pieno e con un testo oro diventerebbe illeggibile. */
.cfm-link,.lux-world-go,.svc-link,.pm-more,.dn-more,
main a[class*="-link"]:not(.skip-link):not(.btn),
main a[class*="-more"]:not(.btn){
  color:var(--gold-text);
}
/* Su fondo avorio/carta l'oro chiaro non e' leggibile: variante scura. */
.legal-content a,.card a:not(.btn),
.cb-sub,
body:not([data-bg3d="on"]) .paper a:not(.btn){
  color:var(--gold-ink);
}
/* Lo skip-link mantiene il proprio abbinamento verificato (5,5:1). */
.skip-link{background:var(--gold);color:#141005}

/* SUPERFICI CHIARE (carta / avorio)
   Alcuni riquadri hanno fondo chiaro: la scheda dell'autore del Punto
   mensile, le schede .card, il marchio Citywire, il riquadro dei grafici
   AMC. Su quel fondo l'oro chiaro (--gold-soft, 1,7:1) e anche --gold-2
   (4,2:1) sono illeggibili: si usa la variante scura, che conserva il tono
   caldo del marchio. */
.monthly-author .author-content span,      /* style.css:262 / restyle.css:272 */
.card .eyebrow,.card .label,.card .date,
.product-row .product-label,
.cert-badge .cb-sub,
.amc-chart .amc-chart-tag,
.amc-chart .fchart-period,
.paper .eyebrow{
  color:var(--gold-ink) !important;        /* restyle.css:273 usa !important */
}

/* Contatore degli anni sul filtro attivo: il velo scuro (.22) sopra il
   fondo oro portava il testo nero a 3,96:1. Con un velo chiaro il fondo
   si schiarisce e il rapporto sale sopra 8:1. */
.pm-year.active .pm-year-n,
.pm-year[aria-pressed="true"] .pm-year-n{
  background:rgba(255,255,255,.38);
  color:#141005;
}

/* ---------------------------------------------------------------------------
   20.8  TENDINA DEGLI ANNI PRECEDENTI
   ---------------------------------------------------------------------------
   Con l'archivio completo il punto mensile arriva a quindici anni: in fila
   diventano una muraglia che su telefono occupa tre righe e spinge le schede
   sotto la piega. Gli anni dal 2023 in poi restano caselle; i precedenti
   stanno qui dentro.
   E' un <select> nativo, non un menu costruito a mano: la navigazione da
   tastiera, i lettori di schermo e il selettore a rotella dei telefoni
   funzionano gia', e non c'e' codice di apertura/chiusura che possa
   intrappolare il fuoco.
   --------------------------------------------------------------------------- */
.pm-year-sel{
  -webkit-appearance:none; appearance:none;
  padding-right:calc(34px / var(--frame-zoom));
  /* freccia disegnata come sfondo: nessuna icona da caricare */
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  /* il menu a discesa lo disegna il sistema: cosi' lo disegna scuro */
  color-scheme:dark;
  max-width:min(100%,calc(280px / var(--frame-zoom)));
  text-overflow:ellipsis;
}
.pm-year-sel:not(.active){ background-color:rgba(255,255,255,.04); }
.pm-year-sel.active{ background-color:var(--gold); color:var(--ink); border-color:var(--gold); }
.pm-year-sel:hover:not(.is-empty):not(.active){ border-color:var(--gold-soft); color:var(--gold-soft); }
.pm-year-sel option{ background:#141210; color:var(--cream-text); }
.pm-year-sel option:disabled{ color:var(--muted-text); }
/* Nel filtro anni il bersaglio tattile minimo vale anche per la tendina. */
.pm-years .pm-year-sel{ min-height:var(--tap-min); }


/* Non affidarsi al solo colore per la direzione del mercato (WCAG 1.4.1):
   si aggiunge un simbolo geometrico prima della percentuale. */
.lux-tick-chg.up::before{content:"\25B2\00a0";font-size:.78em}
.lux-tick-chg.down::before{content:"\25BC\00a0";font-size:.78em}


/* ==========================================================================
   5. VELI SULLE FOTOGRAFIE — il testo deve restare leggibile sempre
   --------------------------------------------------------------------------
   Diverse sezioni appoggiano testo su fotografie ad alto dettaglio (skyline,
   grafici, bandiera). Il velo esistente era troppo leggero: nei punti chiari
   dell'immagine il rapporto scendeva sotto 3:1. Qui il velo diventa un
   gradiente piu' profondo e, soprattutto, coerente fra le sezioni.
   ========================================================================== */
.cfm-block::before,
.fx-vista::before,
.lux-mission::before,
.lux-worlds::before,
.v13-stage::before,
.lux-cta::before{
  background-image:linear-gradient(
    180deg,
    color-mix(in srgb, var(--ink) calc(var(--scrim) * 78%), transparent),
    color-mix(in srgb, var(--ink) calc(var(--scrim) * 96%), transparent)
  ) !important;
}
/* Colonne di testo su fotografia: velo locale morbido, cosi' il paragrafo
   resta leggibile anche dove l'immagine e' chiara. */
.cfm-block-copy,
.fx-orbit-copy,
.lux-mission-inner,
.v10-charter-copy{
  position:relative;
  isolation:isolate;
}
.cfm-block-copy::before,
.fx-orbit-copy::before{
  content:"";
  position:absolute;
  inset:-24px -28px;
  z-index:-1;
  border-radius:28px;
  background:radial-gradient(120% 100% at 0% 40%,
    color-mix(in srgb, var(--ink) 78%, transparent) 0%,
    transparent 78%);
  pointer-events:none;
}

/* Trattamento fotografico unificato (vedi token --photo-filter). */
.lux-photo,
.cfm-block-media img,
.fx-shot img,
.v10-service-card img,
.v13-frame-media img,
.card-media img,
.page-cover-media img{
  filter:var(--photo-filter);
}

/* COPERTINE DI PAGINA (.page-cover)
   Il velo esistente e' lineare e nella fascia centrale — proprio dove sta il
   testo — scende al 46%: sopra le fotografie chiare (lago, cielo, bandiera)
   il sopratitolo oro e l'incipit non raggiungevano il contrasto minimo.
   Si aggiunge un velo RADIALE dietro al solo blocco di testo: la fotografia
   resta luminosa ai bordi e il testo guadagna il fondo che gli serve. */
.page-cover-inner{position:relative;isolation:isolate}
.page-cover-inner::before{
  content:"";
  position:absolute;
  inset:-8vh -8vw;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(64% 62% at 50% 50%,
    color-mix(in srgb, var(--ink) 72%, transparent) 0%,
    color-mix(in srgb, var(--ink) 38%, transparent) 56%,
    transparent 80%);
}
.page-cover-lead{
  font-weight:400;
  color:#f1ece1;
}
.page-cover .eyebrow,.page-cover .eyebrow.light{
  color:#e8d9b6;                       /* oro chiaro: 12,3:1 sul velo */
  font-weight:600;
}
/* L'invito a scorrere era a 10,2px con opacita' 0,82: illeggibile. */
.page-cover-scroll{
  font-size:var(--fs-micro);
  letter-spacing:.16em;
  opacity:1;
  color:#e8d9b6;
  min-height:var(--tap);
  padding:6px 14px;
  border-radius:999px;
}
.page-cover-scroll:hover,.page-cover-scroll:focus-visible{color:#fff}

/* Hero: il titolo sta sopra un cielo al tramonto molto chiaro. Un velo
   verticale sotto il testo (non sull'intera immagine) mantiene il contrasto
   senza spegnere la fotografia. */
.lux-hero-inner{position:relative;isolation:isolate}
.lux-hero-inner::before{
  content:"";
  position:absolute;
  inset:-6vh -6vw;
  z-index:-1;
  background:radial-gradient(70% 60% at 50% 46%,
    color-mix(in srgb, var(--ink) 66%, transparent) 0%,
    color-mix(in srgb, var(--ink) 30%, transparent) 52%,
    transparent 76%);
  pointer-events:none;
}
.lux-hero-sub{color:#f3efe6}


/* ==========================================================================
   6. FOCUS — un solo anello, visibile su qualunque fondo
   --------------------------------------------------------------------------
   Anello doppio: oro chiaro all'esterno, alone scuro all'interno. Cosi'
   resta visibile sia sul nero dell'header sia sul cielo chiaro della hero.
   Copre anche i componenti custom che avevano outline:none.
   ========================================================================== */
:where(a,button,input,select,textarea,summary,[tabindex],[role="button"],
       [role="tab"],[role="link"],[contenteditable="true"]):focus-visible,
.fx-step-btn:focus-visible,
.fx-acc-item:focus-visible,
.fx-shot:focus-visible,
.v10-service-card:focus-visible,
.v10-method-step:focus-visible,
.v10-charter-tab:focus-visible,
.pm-card:focus-visible{
  outline:var(--focus-w) solid var(--focus-ring) !important;
  outline-offset:var(--focus-w) !important;
  box-shadow:0 0 0 calc(var(--focus-w) * 2) var(--focus-halo) !important;
  border-radius:max(6px, var(--r-xs,8px));
}
/* Il contenitore principale riceve il focus dallo skip-link ma non deve
   disegnare l'anello: non e' un comando. */
#main:focus,#main:focus-visible,#main[tabindex="-1"]:focus{
  outline:0 !important;box-shadow:none !important;
}
/* Lo skip-link diventa un vero pulsante quando compare. */
.skip-link{
  font-size:var(--fs-small);
  min-height:var(--tap);
  display:inline-flex;
  align-items:center;
  transition:top var(--dur) var(--ease,ease);
}
.skip-link:focus,.skip-link:focus-visible{top:16px}


/* ==========================================================================
   7. TARGET TATTILI — WCAG 2.2 · 2.5.8 (minimo 24px) e HIG (44px)
   --------------------------------------------------------------------------
   Prima: link del footer alti 23px, selettore lingua 34px, voci di menu 36px,
   pulsante "Preferenze cookie" 25px. La regola introdotta in v15-audit era
   annullata dai fogli caricati dopo: qui viene ripristinata in coda.
   ========================================================================== */
.main-nav a:not([data-cms-hidden]),
.nav-cta:not([data-cms-hidden]),
.lang-opt,
.footer-col a:not([data-cms-hidden]),
.footer-bottom-links a:not([data-cms-hidden]),
.consent-reset,
.bio-toggle,
.cookie-actions .btn,
.pm-read,
.dn-read,
.rs-read{
  min-height:var(--tap) !important;
  display:inline-flex !important;
  align-items:center;
  gap:.5em;
}
.footer-col a{padding-block:2px}
/* Ampliamento dell'area cliccabile senza spostare il testo: pseudo-elemento
   trasparente. Utile per i link in linea nei paragrafi. */
.cfm-link,.lux-world-go,.svc-link{position:relative;min-height:var(--tap);display:inline-flex;align-items:center}
.lang-opt{min-width:var(--tap);justify-content:center}
.lang-sep{align-self:center}
.menu-toggle{min-width:calc(48px / var(--frame-zoom));min-height:calc(48px / var(--frame-zoom))}
/* Spaziatura fra target adiacenti: evita i tocchi accidentali. */
.footer-col{display:flex;flex-direction:column;gap:2px}
.footer-bottom-links{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center}


/* ==========================================================================
   8. MODULI — etichette, errori e stati comprensibili
   ========================================================================== */
.field label,.check label,.access-field label,.monthly-input-row label{
  font-size:var(--fs-small);
  color:#efe7d8;
}
.field input,.field select,.field textarea,
.access-field select,.monthly-input-row input{
  font-size:max(calc(16px / var(--frame-zoom)), var(--fs-body));  /* 16px evita lo zoom automatico iOS */
  min-height:calc(48px / var(--frame-zoom));
  color:#f5f1e9;
}
.field textarea{min-height:132px}
@supports (field-sizing: content){
  .field textarea{field-sizing:content;max-height:40vh}
}
/* Campo obbligatorio segnalato anche in forma testuale, non solo dal bordo. */
.field:has(input[required],textarea[required],select[required])>label::after,
.check:has(input[required])>label::after{
  content:" *";
  color:var(--gold-text);
  font-weight:700;
}
/* Errore: bordo + icona + testo. Mai il solo colore. */
:where(input,select,textarea):user-invalid,
:where(input,select,textarea)[aria-invalid="true"]{
  border-color:var(--neg) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--neg) 22%, transparent) !important;
}
.field:has(:user-invalid)>label::before,
.field:has([aria-invalid="true"])>label::before{
  content:"\26A0\00a0";
  color:var(--neg);
}
.form-status,.access-message{
  min-height:1.6em;
  font-size:var(--fs-small);
  line-height:1.55;
}
.form-status.is-error,.access-message.is-error{
  color:var(--neg);
  display:flex;gap:.5em;align-items:flex-start;
}
.form-status.is-error::before,.access-message.is-error::before{content:"\26A0";flex:0 0 auto}
.form-status.is-ok,.access-message.is-ok{
  color:var(--pos);display:flex;gap:.5em;align-items:flex-start;
}
.form-status.is-ok::before,.access-message.is-ok::before{content:"\2713";flex:0 0 auto}
/* Riepilogo errori in testa al modulo (creato da js/frame-2026.js). */
.form-errors{
  margin:0 0 20px;
  padding:16px 18px;
  border:1px solid var(--neg);
  border-radius:14px;
  background:color-mix(in srgb, var(--neg) 12%, transparent);
  font-size:var(--fs-small);
}
.form-errors[hidden]{display:none !important}
.form-errors .form-errors-title{
  margin:0 0 8px;
  font-size:var(--fs-small);
  color:var(--neg);
  letter-spacing:.06em;
  line-height:1.4;
}
.form-errors ol{margin:0;padding-left:20px;display:grid;gap:4px}
.form-errors a{color:var(--neg);text-decoration:underline;text-underline-offset:3px}


/* ==========================================================================
   9. STRATO FUNZIONALE IN VETRO — header e controlli sopra il contenuto
   --------------------------------------------------------------------------
   Ispirato alla distinzione HIG fra "content layer" e "functional layer":
   il vetro si usa solo per la navigazione, mai per le schede di contenuto.
   ========================================================================== */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .site-header{
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
    backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  }
  /* NIENTE sfumatura aggiuntiva sotto l'header.
     Una versione precedente aggiungeva qui una striscia sfumata di 22px al
     di sotto della barra: sommata al bordo inferiore che l'header ha gia'
     (css/style.css riga 79) produceva una riga scura visibile. Rimossa: il
     bordo esistente basta. */
  .cookie-banner,.main-nav.open{
    -webkit-backdrop-filter:blur(26px) saturate(140%);
    backdrop-filter:blur(26px) saturate(140%);
  }
}
/* Chi ha attivato "riduci trasparenza" riceve fondi pieni. */
@media (prefers-reduced-transparency: reduce){
  .site-header,.cookie-banner,.main-nav.open{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:var(--ink) !important;
  }
  .lux-hero-inner::before{background:color-mix(in srgb,var(--ink) 72%,transparent)}
}
/* HOME — header trasparente sopra la fotografia: nessun fondo aggiunto.
   ----------------------------------------------------------------------------
   STORIA DI UN ERRORE, da non ripetere.
   Per alzare il contrasto delle voci di menu sopra il cielo chiaro del
   tramonto era stato aggiunto qui un fondo sfumato sull'header. Ma il fondo
   di un elemento e' ritagliato sul suo riquadro: l'header e' alto 93px,
   quindi la sfumatura finiva di netto e produceva una fascia scura con un
   bordo dritto in cima alla pagina — l'opposto dell'effetto voluto.

   Il velo giusto esisteva gia': css/v13.css riga 261 disegna
   "body.v13-home .site-header::after" con top:0 e height:220%, cioe' un velo
   che si estende BEN OLTRE il bordo dell'header e si dissolve nel nulla
   ("cosi' non c'e' nessuna linea di stacco", dice il commento originale).
   Qui si interviene solo su quel velo, rendendolo un filo piu' profondo in
   cima per il contrasto del menu. Il degradare resta lo stesso, quindi non
   compare alcuna riga. */
body.v13-home .site-header::after{
  background:linear-gradient(180deg,
    rgba(6,8,12,.72)  0%,
    rgba(6,8,12,.54) 24%,
    rgba(6,8,12,.34) 44%,
    rgba(6,8,12,.18) 62%,
    rgba(6,8,12,.06) 80%,
    rgba(6,8,12,0)  100%);
}
/* Il logo resta nitido anche sopra i punti piu' chiari della fotografia. */
body.v13-home .site-header:not(.scrolled) .brand-logo{
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
}


/* ==========================================================================
   10. MOVIMENTO — riduzione mirata, non spegnimento totale
   --------------------------------------------------------------------------
   Storia del problema: nella v1.3.6 il blocco "prefers-reduced-motion"
   azzerava OGNI animazione e transizione. Su macOS e Windows l'impostazione
   "Riduci movimento" e' spesso attiva, quindi il sito appariva immobile e
   spento; la committente ha chiesto di rimuovere il blocco, lasciando tutte
   le animazioni sempre attive. Cosi' pero' chi soffre di disturbi
   vestibolari resta senza tutela (WCAG 2.2 — 2.3.3).

   Soluzione adottata qui: si distingue il movimento DECORATIVO da quello
   FUNZIONALE.
     - si disattiva  : parallasse, tilt, orbite, sfarfallii, animazioni in
                       ciclo infinito, nastro di mercato, intro del logo,
                       comparse al passaggio dello sguardo
     - si conserva   : transizioni brevi di stato (hover, focus, apertura
                       menu, fisarmoniche), ridotte a 120-160ms
   Il risultato e' un sito calmo ma vivo, non congelato.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  :root{--motion-scale:0;--dur-fast:.1s;--dur:.14s;--dur-slow:.16s}

  html{scroll-behavior:auto !important}

  /* 1. Movimento decorativo: annullato. */
  .logo-intro,
  .lux-orb,
  .lux-grain,
  .lux-scroll-hint,
  .page-cover-scroll svg,
  .page-cover-inner,
  .site-header::before{
    animation:none !important;
    transition:none !important;
  }
  .logo-intro{display:none !important}
  html.introing{overflow:auto !important}
  html.introing .site-header .brand-logo{opacity:1 !important}

  /* 2. Cicli infiniti: fermi in posizione leggibile. */
  .lux-ticker-track,
  [class*="marquee"],
  [class*="-track"]{
    animation:none !important;
    transform:none !important;
  }
  .lux-photo,.v13-frame,.v13-frame-media img{animation:none !important;transform:none !important}

  /* 3. Comparse al passaggio dello sguardo: contenuto subito visibile. */
  .reveal,.reveal-up,.reveal-in,[class*="reveal"],
  .fx-in,.is-in,.lux-line,.lux-line .w{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
    animation:none !important;
    transition:none !important;
  }

  /* 4. Parallasse e inclinazioni legate al puntatore. */
  [data-parallax],[data-tilt],[style*="--tilt"],
  .fx-layer,.fx-sat,.fx-sat-btn,.fx-orbit-rotor,.fx-orbit-core,
  .lux-hero-bg{
    transform:none !important;
    animation:none !important;
  }
  /* L'orbita dei principi (chi-siamo) ruotava in continuo: da fermo resta
     comunque leggibile e utilizzabile, i cerchi sono pulsanti veri. */
  .fx-orbit-rotor{rotate:none !important}

  /* 5. Transizioni funzionali: conservate, ma brevi. */
  a,button,input,select,textarea,summary,
  .card,.member-card,.lux-world,.v13-pill,.btn,
  .main-nav,.main-nav a,.menu-toggle,.cookie-banner,
  .fx-acc-item,.v10-charter-tab,.v10-method-step{
    transition-duration:var(--dur) !important;
    animation-duration:var(--dur) !important;
    animation-iteration-count:1 !important;
  }
  /* Nessun movimento di posizione al passaggio del mouse: solo colore. */
  .card:hover,.member-card:hover,.lux-world:hover,
  .v10-service-card:hover,.pm-card:hover,.btn:hover,
  .v10-charter-tab:hover,.v10-method-step:hover{
    transform:none !important;
  }
}

/* Animazioni guidate dallo scorrimento: sostituiscono l'IntersectionObserver
   dove il browser le supporta. Nessun JavaScript, nessun rischio di
   contenuto invisibile, e si fermano da sole con "riduci movimento". */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal,.reveal-up{
      animation:frameRise linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 26%;
    }
  }
}
@keyframes frameRise{
  from{opacity:0;transform:translateY(calc(18px * var(--motion-scale)))}
  to{opacity:1;transform:none}
}


/* ==========================================================================
   11. ROBUSTEZZA — il contenuto non deve dipendere da JavaScript
   --------------------------------------------------------------------------
   PROBLEMA TROVATO IN AUDIT: le classi .reveal / .reveal-up partono da
   opacity:0 e vengono rese visibili solo da un IntersectionObserver. Se lo
   script non parte (errore di rete, CSP, estensione, JS disattivato) oppure
   se l'osservatore non scatta, la pagina resta NERA sotto la hero. Lo stesso
   vale per i motori di rendering che non eseguono JS.

   Rete di sicurezza: senza la classe "js" sul tag <html> (aggiunta da
   boot.js) tutto e' visibile; con "js" attivo la comparsa resta.
   In piu' js/frame-2026.js impone la visibilita' dopo 2,5 secondi.
   ========================================================================== */
html:not(.js) .reveal,
html:not(.js) .reveal-up,
html:not(.js) .reveal-in,
html:not(.js) [class*="reveal"],
html:not(.js) .lux-line,
html:not(.js) .lux-line .w,
html:not(.js) .fx-in,
html:not(.js) .logo-intro{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  clip-path:none !important;
}
html:not(.js) .logo-intro{display:none !important}
/* Interruttore di emergenza usato da js/frame-2026.js (dopo 2,5 s). */
html.frame-reveal-all .reveal,
html.frame-reveal-all .reveal-up,
html.frame-reveal-all .reveal-in,
html.frame-reveal-all [class*="reveal"],
html.frame-reveal-all .lux-line,
html.frame-reveal-all .lux-line .w,
html.frame-reveal-all .fx-in{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  clip-path:none !important;
}


/* ==========================================================================
   12. NASTRO DI MERCATO — WCAG 2.2 · 2.2.2 (Metti in pausa, ferma, nascondi)
   --------------------------------------------------------------------------
   Il nastro scorreva in ciclo infinito senza alcun comando di pausa e con
   aria-hidden, quindi i valori non erano disponibili agli screen reader.
   js/frame-2026.js aggiunge il pulsante; qui c'e' il suo aspetto.
   ========================================================================== */
.lux-ticker{position:relative}
.lux-ticker-pause{
  position:absolute;
  inset-block-start:50%;
  inset-inline-end:8px;
  translate:0 -50%;
  z-index:4;
  inline-size:var(--tap);                     /* target minimo raccomandato HIG */
  block-size:var(--tap);
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(244,236,219,.34);
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  color:var(--gold-soft);
  cursor:pointer;
  transition:border-color var(--dur), color var(--dur), background var(--dur);
}
.lux-ticker-pause:hover{border-color:var(--gold-soft);color:#fff}
.lux-ticker-pause svg{width:15px;height:15px;fill:currentColor}
.lux-ticker[data-paused="true"] .lux-ticker-track{animation-play-state:paused !important}
/* Pozzetto sfumato dietro al pulsante: le quotazioni scompaiono sotto di lui
   con una dissolvenza, invece di sovrapporsi al simbolo. */
.lux-ticker::after{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-end:0;
  inline-size:96px;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(270deg,
    color-mix(in srgb, var(--ink) 92%, transparent) 0%,
    color-mix(in srgb, var(--ink) 70%, transparent) 46%,
    transparent 100%);
}
@media (max-width:520px){
  .lux-ticker-pause{inline-size:34px;block-size:34px;inset-inline-end:5px}
  .lux-ticker::after{inline-size:72px}
}


/* ==========================================================================
   13. TORNA IN ALTO — comando visibile solo quando serve
   ========================================================================== */
.to-top{
  position:fixed;
  inset-block-end:clamp(16px,3vh,28px);
  inset-inline-end:clamp(16px,3vw,28px);
  z-index:900;
  inline-size:calc(52px / var(--frame-zoom));
  block-size:calc(52px / var(--frame-zoom));
  display:grid;
  place-items:center;
  border:1px solid var(--glass-line);
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 78%, transparent);
  color:var(--gold-soft);
  cursor:pointer;
  opacity:0;
  translate:0 12px;
  pointer-events:none;
  transition:opacity var(--dur), translate var(--dur), border-color var(--dur), color var(--dur);
}
@supports (backdrop-filter: blur(1px)){
  .to-top{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
}
.to-top.is-on{opacity:1;translate:0;pointer-events:auto}
.to-top:hover{border-color:var(--gold-soft);color:#fff}
.to-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
@media print{.to-top{display:none}}


/* ==========================================================================
   14. CONTAINER QUERY — le schede si adattano al proprio spazio
   --------------------------------------------------------------------------
   Piu' moderno e piu' robusto delle media query: una scheda impaginata in
   una colonna stretta si comporta come su mobile anche su schermo grande.
   ========================================================================== */
.cards,.lux-worlds-grid,.member-grid,.pm-grid,.dn-grid,.rs-grid,.footer-grid{
  container-type:inline-size;
}
@container (max-width: 380px){
  .card,.lux-world,.member-card,.pm-card{padding-inline:18px}
  .card h3,.lux-world h3{font-size:1.22rem}
}


/* ==========================================================================
   15. TRANSIZIONI DI PAGINA — navigazione fra documenti
   --------------------------------------------------------------------------
   Dissolvenza breve fra le pagine dove il browser la supporta. Non e' un
   movimento di posizione, quindi non disturba; con "riduci movimento" resta
   solo il cambio di opacita' molto rapido.
   ========================================================================== */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.24s;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.01ms}
}
/* L'header non deve "lampeggiare" fra una pagina e l'altra. */
.site-header{view-transition-name:frame-header}
.site-footer{view-transition-name:frame-footer}


/* ==========================================================================
   16. ALTO CONTRASTO E MODALITA' A COLORI FORZATI
   ========================================================================== */
@media (prefers-contrast: more){
  :root{
    --muted-text:#ece5d8;
    --muted-strong:#f6f2ea;
    --gold-text:#e2caa0;
    --cream-text:#f7f3ea;
    --line-d2:rgba(255,255,255,.5);
    --scrim:.85;
    --photo-filter:saturate(.7) contrast(1.1) brightness(.82);
  }
  .main-nav a,.footer-col a{color:#fff}
  .card,.member-card,.lux-world,.pm-card,.contact-form{border-width:2px}
  .cfm-block-copy::before,.fx-orbit-copy::before{
    background:color-mix(in srgb, var(--ink) 88%, transparent);
  }
  .lux-hero-inner::before{background:color-mix(in srgb, var(--ink) 78%, transparent)}
}

/* Windows: contrasto elevato / colori forzati. Le decorazioni scompaiono,
   i bordi e i testi vengono ridisegnati con i colori di sistema. */
@media (forced-colors: active){
  .lux-hero-bg,.lux-orb,.lux-grain,.logo-intro,
  .cfm-block::before,.fx-vista::before,.lux-mission::before,
  .cfm-block-copy::before,.fx-orbit-copy::before,.lux-hero-inner::before,
  .site-header::after,.site-header::before{
    display:none !important;
  }
  .card,.member-card,.lux-world,.pm-card,.contact-form,.v13-pill,
  .btn,.nav-cta,.to-top,.lux-ticker-pause{
    border:1px solid CanvasText !important;
    background:Canvas !important;
    color:CanvasText !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  :where(a,button,input,select,textarea,[tabindex]):focus-visible{
    outline:3px solid Highlight !important;
    outline-offset:2px !important;
    box-shadow:none !important;
  }
  img{forced-color-adjust:none}
  .lux-tick-chg.up,.lux-tick-chg.down{color:CanvasText !important}
}


/* ==========================================================================
   17. STAMPA — versione leggibile su carta
   ========================================================================== */
@media print{
  :root{--scrim:0;--photo-filter:none}
  html,body{background:#fff !important;color:#111 !important}
  .site-header,.main-nav,.menu-toggle,.lux-ticker,.cookie-banner,
  .logo-intro,.lux-hero-bg,.to-top,.skip-link,.consent-reset,
  .v13-pills,.lux-scroll-hint{display:none !important}
  main,section,.wrap,.card,.lux-world,.contact-form{
    background:#fff !important;
    color:#111 !important;
    box-shadow:none !important;
    border-color:#bbb !important;
  }
  h1,h2,h3,h4{color:#000 !important;break-after:avoid}
  p,li,figure,table{break-inside:avoid}
  a{color:#000 !important;text-decoration:underline}
  /* L'indirizzo dei link compare accanto al testo: su carta il link non si
     puo' seguire. Si escludono i link interni e i mailto, poco utili. */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.82em;color:#555}
  .site-footer{border-top:1px solid #bbb;color:#333 !important}
  img{max-width:100% !important;filter:none !important}
}


/* ==========================================================================
   18. RIFINITURE — dettagli moderni a identita' invariata
   ========================================================================== */
/* Voce di menu attiva: sottolineatura piena, non solo colore. */
.main-nav a[aria-current="page"],.main-nav a.active{
  color:#fff;
}
.main-nav a[aria-current="page"]::after,.main-nav a.active::after{
  width:100%;
  background:var(--gold-soft);
}

/* Le schede reagiscono al puntatore solo dove il puntatore esiste davvero. */
@media (hover: hover) and (pointer: fine){
  .card,.member-card,.lux-world,.pm-card{
    transition:transform var(--dur-slow) var(--ease,ease),
               border-color var(--dur) var(--ease,ease),
               box-shadow var(--dur-slow) var(--ease,ease);
  }
}

/* Immagini: nessun salto di impaginazione mentre caricano.
   NB: nessun colore di fondo sulle immagini — il logo e il marchio Citywire
   sono PNG trasparenti e un fondo scuro creerebbe un rettangolo visibile. */
img{max-width:100%;height:auto}

/* Le immagini decorative di sfondo non devono catturare il puntatore. */
.lux-hero-bg,.lux-orb,.lux-grain,.logo-intro{pointer-events:none}

/* Tabelle (factsheet, metriche): scorrimento contenuto, non della pagina. */
.table-scroll,.amc-table-wrap,figure:has(>table){
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
}
table{border-collapse:collapse}
th{text-align:start}

/* Caroselli orizzontali: scorrimento a scatti con margine di sicurezza,
   e barra visibile (prima era nascosta: chi usa il mouse non sapeva che
   ci fosse altro contenuto a destra). */
.v10-service-track,.svc-track{
  scrollbar-width:thin;
  scrollbar-color:var(--gold-2) transparent;
  scroll-padding-inline:4px;
}
.v10-service-track::-webkit-scrollbar{display:block;height:6px}
.v10-service-track::-webkit-scrollbar-thumb{background:var(--gold-2);border-radius:999px}

/* MAPPA — riquadro del consenso
   Il contenitore della mappa ha proporzioni fisse (aspect-ratio) e
   overflow:hidden: giusto per la mappa vera, sbagliato per il riquadro che
   chiede il consenso, il cui testo con i corpi accessibili non ci sta piu' e
   veniva tagliato. Con :has() le proporzioni fisse valgono solo quando la
   mappa e' effettivamente caricata. */
.map-embed:has(.map-placeholder){
  aspect-ratio:auto;
  overflow:visible;
  height:auto;
}
.map-embed:has(.map-placeholder) .map-placeholder{height:auto}
.map-placeholder-actions .btn{white-space:normal;height:auto;padding-block:11px}

/* Citazioni e riquadri normativi: filo oro a sinistra, come nei documenti. */
blockquote,.legal-note,.access-disclaimer{
  border-inline-start:2px solid var(--gold-2);
  padding-inline-start:18px;
}

/* Dettagli/riassunti nativi: la freccia segue il tema. */
summary{cursor:pointer}
summary::marker{color:var(--gold-soft)}

/* Ancore: il titolo non finisce sotto l'header quando si arriva da un link. */
:target{scroll-margin-top:clamp(96px,13vh,132px)}

/* Testo selezionabile anche nei blocchi con -webkit-line-clamp. */
.v10-service-card p,.card p{user-select:text}


/* ==========================================================================
   19. HEADER — spazio per una navigazione leggibile
   --------------------------------------------------------------------------
   PROBLEMA: il menu ha dieci voci in maiuscolo. Portando le etichette alla
   dimensione minima leggibile (12,5px invece di 11,5px) la barra non entrava
   piu' nei 1180px del contenitore --max e il logo veniva compresso fino a
   21px di larghezza.

   SOLUZIONE, in tre mosse e senza toccare l'impaginazione del contenuto:
     a) il contenitore del SOLO header puo' arrivare a 1400px (il contenuto
        resta a 1180px): e' il tipico header a tutta larghezza con contenuto
        centrato, e libera 220px per il menu;
     b) marchio e logo non si comprimono mai (flex:0 0 auto);
     c) tracciatura e spaziature del menu leggermente ridotte, cosi' la
        larghezza complessiva resta quella della v1.4.2 nonostante il corpo
        piu' grande.
   Sotto 1280px resta il menu a tendina, gia' accessibile da tastiera
   (trappola del focus e chiusura con Esc in js/main.js).
   ========================================================================== */
.site-header .wrap{width:min(1400px, calc(100% - 40px))}
.header-inner{gap:clamp(14px,1.6vw,28px)}
.brand,.brand-logo{flex:0 0 auto}
.site-header .brand-logo{width:clamp(148px,11vw,176px)}

.main-nav{gap:clamp(10px,.95vw,18px)}
.main-nav a{letter-spacing:.07em;white-space:nowrap}
.nav-cta{letter-spacing:.1em;padding-inline:clamp(14px,1.2vw,20px)}
.lang-switch{margin-inline-start:clamp(4px,.6vw,10px)}

/* ==========================================================================
   19-bis. CORREZIONI PUNTUALI DI SPECIFICITA'
   --------------------------------------------------------------------------
   Alcune etichette restavano sotto i 12px perche' definite da selettori piu'
   specifici nei fogli precedenti (per esempio ".contact-list .label" batte
   ".label"). Qui si pareggia la specificita', senza !important dove non
   serve. Ogni voce riporta il file d'origine, per ritrovarla.
   ========================================================================== */
.main-nav .nav-cta{font-size:var(--fs-micro)}          /* style.css:90  */
.contact-list .label{font-size:var(--fs-micro)}        /* style.css:292 */
.cert-badge .cb-meta{font-size:var(--fs-micro)}        /* restyle.css:58 */
.cert-badge .cb-sub{color:var(--gold-ink)}             /* restyle.css:57 — su fondo bianco */
.btn,.access-button{font-size:var(--fs-micro)}         /* style.css:63  */
.cookie-actions .btn{font-size:var(--fs-micro)}        /* style.css:335 */
.hero-fact .label{font-size:var(--fs-small)}           /* style.css:120 */

/* Caselle di scelta: 18x18px erano sotto il minimo di 24px (WCAG 2.5.8).
   L'area cliccabile e' comunque l'intera etichetta, ma la casella deve
   essere visibile e centrabile anche con dita grandi o tremore. */
input[type="checkbox"],input[type="radio"],
.check input[type="checkbox"],                         /* restyle.css:690 */
.access-check input[type="checkbox"],                  /* v15-audit.css:98 */
.monthly-check input[type="checkbox"]{
  inline-size:var(--tap-min);
  block-size:var(--tap-min);
  flex:0 0 auto;
  margin-top:1px;
}
.check,.access-check,.monthly-check{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.check label,.access-check label,.monthly-check label{
  cursor:pointer;
  padding-block:2px;
}

/* Indicatori dei caroselli: il pallino resta di 9px (e' un segnaposto, non
   un bottone visivo) ma l'area sensibile viene portata a 27px con uno
   pseudo-elemento trasparente. Il criterio WCAG 2.5.8 misura l'area
   attivabile, non il disegno: cosi' si rispetta il minimo senza toccare
   l'estetica. */
.svc-dot,
[data-v10-service-dots] button,
.fx-step-btn{
  position:relative;
}
.svc-dot::after,
[data-v10-service-dots] button::after,
.fx-step-btn::after{
  content:"";
  position:absolute;
  /* Espansione espressa nello spazio zoomato: il pallino e' 9px, quindi
     l'area sensibile RESA risulta di circa 28px, sopra il minimo di 24. */
  inset:calc(-10px / var(--frame-zoom));
  border-radius:inherit;
}
/* Il pallino attivo e' piu' largo: l'estensione parte dai bordi reali. */
.svc-dot.is-active::after,
[data-v10-service-dots] button.is-active::after{
  inset:calc(-10px / var(--frame-zoom)) calc(-4px / var(--frame-zoom));
}

/* Recapiti e link legali: righe cliccabili di altezza confortevole. */
.contact-list a,
.legal-wrap a,
.gate-legal a,
.footer-bottom-links a:not([data-cms-hidden]),
.footer-col a:not([data-cms-hidden]){
  min-height:var(--tap) !important;
  display:inline-flex !important;
  align-items:center;
}

/* ==========================================================================
   19-ter. TELEFONO — riequilibrio dopo il ripristino dello zoom
   --------------------------------------------------------------------------
   La v1.4.2 dichiarava initial-scale=0.9: il browser allargava la finestra
   virtuale a ~417px e rimpiccioliva tutto del 10%. Ripristinando
   initial-scale=1 (necessario per l'ingrandimento del testo) la finestra
   torna a 375px reali e le misure in vw crescono di conseguenza: il titolo
   della hero arrivava a toccare i bordi.
   Qui si riportano i corpi al rapporto visivo originale e si garantisce un
   margine laterale su tutti i contenitori a piena larghezza.
   ========================================================================== */
@media (max-width:900px){
  body.v13-home .lux-hero-inner,
  .page-cover-inner,
  .lux-hero-inner{
    padding-inline:clamp(18px,5vw,28px);
    box-sizing:border-box;
  }
  body.v13-home .lux-hero-title{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .page-cover-title{font-size:clamp(1.75rem,7vw,2.6rem)}
  .lux-hero-sub,.page-cover-lead{font-size:clamp(.98rem,4vw,1.08rem)}

  /* Riga di scorciatoie della hero: margine ai lati e sfumatura che segnala
     la presenza di altre voci a destra. */
  .v13-pills{
    padding-inline:10px;
    scroll-padding-inline:10px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
  }
  .v13-pills:has(> :last-child:focus-visible){
    -webkit-mask-image:none;mask-image:none;
  }
}
/* Nessun elemento deve poter allargare la pagina in orizzontale. */
@media (max-width:560px){
  html,body{max-width:100%;overflow-x:hidden}
  /* Solo rete di sicurezza per le parole molto lunghe: NIENTE sillabazione
     automatica sui titoli, che spezzerebbe parole come "disciplina" a meta'
     rovinando la resa editoriale. */
  .lux-hero-title,.page-cover-title,.section-title,h1,h2{
    overflow-wrap:break-word;
    hyphens:manual;
  }
  /* Testi di lettura nelle schede: i fogli per telefono li dichiarano a
     0,88-0,9rem e con la scala al 90% scendevano a 13px resi. Sono il
     contenuto che si legge davvero, non etichette: si porta il minimo a
     15px resi lasciando invariato tutto il resto. */
  .card p,.lux-world p,.pm-card p,.dn-card p,.rs-card p,
  .member-bio,.fx-panel-text,.svc-slide p,.v10-service-card p{
    font-size:calc(15px / var(--frame-zoom)) !important;   /* 15px resi */
    line-height:1.62;
  }

  /* L'invito "Scorri" era riportato a .72rem (11,5px) da
     css/v18-mobile-editorial.css riga 425, con !important: si pareggia. */
  .page-cover-scroll span{
    font-size:var(--fs-micro) !important;
    letter-spacing:.14em !important;
  }
  /* I pulsanti con etichette lunghe ("Apri in una nuova finestra") devono
     poter andare a capo invece di sfondare il riquadro. */
  .btn,.access-button,.map-placeholder-actions .btn{
    white-space:normal;
    height:auto;
    min-height:calc(48px / var(--frame-zoom));
    padding-block:12px;
    text-align:center;
    line-height:1.35;
  }
}

/* ==========================================================================
   19-quater. CHI SIAMO — sezione "Quattro principi": respiro e struttura
   --------------------------------------------------------------------------
   PROBLEMA. Nella colonna di destra si susseguono sette blocchi:
   sopratitolo, titolo da 46px, frase introduttiva, etichetta del principio,
   titolo da 40px, paragrafo, citazione. Le distanze fra loro erano di
   14-20px: sotto due titoli di quella dimensione il testo risultava
   schiacciato, e soprattutto non si capiva dove finisce l'introduzione della
   sezione e dove inizia il principio selezionato.

   INTERVENTO, in due mosse.
   a) Ritmo verticale proporzionato al corpo del testo: piu' spazio dopo i
      titoli, che sono gli elementi piu' grandi.
   b) Struttura resa esplicita: il principio selezionato diventa un blocco a
      se', staccato da un filetto orizzontale. Cosi' si legge
      "introduzione | principio scelto" invece di un elenco indistinto.
      Il filetto compare solo sul principio attivo, quindi non si moltiplica.

   Vale sia sul desktop (due colonne) sia sul telefono, dove css/v18 riordina
   gli stessi elementi in una colonna con l'orbita trasformata in selettore.
   ========================================================================== */
.fx-orbit-copy .fx-h2{margin-bottom:clamp(18px,1.7vw,26px)}
.fx-orbit-copy .fx-lead{margin-bottom:clamp(32px,3.2vw,46px)}

.fx-orbit-copy .fx-value.is-active,
.fx-orbit-grid>.fx-value.is-active{        /* su mobile e' figlio della griglia */
  padding-top:clamp(26px,2.6vw,36px);
  border-top:1px solid var(--line-d);
}
.fx-value .fx-value-k{margin-bottom:12px}
.fx-value h3{margin-bottom:clamp(16px,1.5vw,22px)}
.fx-value p{margin-bottom:clamp(20px,2vw,28px)}
.fx-value .fx-value-quote{
  padding:clamp(16px,1.6vw,20px) clamp(18px,1.8vw,24px);
  line-height:1.62;
}

/* Le due fasce non devono toccarsi: la citazione arrivava a un centinaio di
   pixel dal cambio di fondo della fascia successiva. Lo spazio si aggiunge
   in coda a questa fascia, non in testa alla successiva: la sezione
   "Modello operativo" ha nell'HTML un  style="padding-top:0"  (scelta di
   impaginazione originale, chi-siamo.html riga 326) e uno stile in linea
   batte qualunque foglio di stile. */
.fx-orbit{padding-bottom:clamp(96px,9vw,150px)}

/* Sul telefono l'orbita diventa un selettore a quattro riquadri: un filo di
   spazio in piu' fra il selettore e il principio scelto rende evidente il
   rapporto causa-effetto fra i due. */
@media (max-width:1024px){
  .fx-orbit-copy>.fx-value,
  .fx-orbit-grid>.fx-value{margin-top:clamp(26px,5vw,34px)}
  .fx-orbit-stage{margin-bottom:2px}
}

/* ==========================================================================
   19-quinquies. COSA FACCIAMO — le due sezioni piu' deboli
   --------------------------------------------------------------------------
   A) «SERVIZI PER PROFILO PATRIMONIALE» (il carosello dei profili)
      Problema: la sezione non aveva alcun titolo visibile. Il suo titolo
      esiste nell'HTML ma e' marcato .sr-only, cioe' riservato agli screen
      reader (cosa-facciamo.html riga 256). Chi guarda vedeva quindi solo
      una riga di istruzioni piccola, sospesa in un vuoto, sotto al titolo
      della fascia precedente — che parla d'altro. Da qui la sensazione di
      sezione mal costruita.
      Intervento: il titolo che c'e' gia' viene reso visibile e trattato
      come tutti gli altri titoli di sezione; la riga di istruzioni diventa
      il suo sottotitolo. Nessun testo nuovo, nessuna modifica all'HTML.
      PER TORNARE INDIETRO: commentare il blocco A.

   B) «DAL MANDATO ALLA SUPERVISIONE DEL PORTAFOGLIO» (i cinque livelli)
      Problema: i cinque pulsanti avevano un fondo via via piu' trasparente
      (0,28 - 0,24 - 0,18 - 0,12 - 0,07). Un effetto di profondita' che
      pero' rendeva il quarto e il quinto livello quasi invisibili sopra la
      fotografia, benche' siano comandi cliccabili come gli altri. In piu'
      il livello attivo veniva ingrandito (scale 1.02) e usciva
      dall'allineamento a sinistra della colonna.
      Intervento: fondo uguale e leggibile per tutti e cinque; il livello
      attivo si distingue per colore e filo oro, non perche' gli altri
      sbiadiscono; bordi allineati.
   ========================================================================== */

/* ---- A) carosello dei profili ------------------------------------------- */
/* Il titolo della sezione era marcato .sr-only, cioe' riservato agli screen
   reader. Ora nell'HTML e' un normale titolo di sezione, collegato alla
   chiave  cosaFacciamo.servizi.titolo  del pannello admin: si vede, e si
   modifica da /admin come tutti gli altri titoli. Qui solo l'aspetto. */
.v10-services > .wrap > h2.section-title{
  margin:0 0 14px;
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.012em;
  font-size:clamp(1.8rem,3.2vw,2.55rem);
  line-height:1.1;
  max-width:26ch;
  color:var(--ivory);
}
.v10-services > .wrap > .page-head-note{
  max-width:56ch;
  margin:0 0 clamp(30px,3.4vw,46px);
  color:var(--muted-strong);
}

/* La quarta scheda sporge dal bordo destro: la sfumatura dichiara che il
   contenuto continua, invece di far sembrare la scheda tagliata. Compare
   solo dal lato in cui c'e' davvero altro contenuto: gli attributi
   data-more-* sono aggiornati da js/frame-2026.js. */
.frame-xscroll[data-more-end="true"]{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 89%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 89%,transparent 100%);
}
.frame-xscroll[data-more-start="true"]{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 100%);
}
.frame-xscroll[data-more-start="true"][data-more-end="true"]{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 89%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 89%,transparent 100%);
}

/* ---- B) i cinque livelli del mandato ------------------------------------ */
.fx-layers{perspective:none}                 /* via l'effetto prospettico */
.fx-layer{
  /* Fondo identico per tutti: e' un elenco di comandi, non una pila che si
     allontana. Leggibile anche sopra le fotografie piu' chiare. */
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--ink) 82%, transparent),
    color-mix(in srgb, var(--ink) 74%, transparent)) !important;
  border:1px solid var(--line-d2) !important;
  transform:none !important;
  transition:border-color var(--dur) var(--ease,ease),
             background var(--dur) var(--ease,ease),
             color var(--dur) var(--ease,ease);
}
@supports (backdrop-filter: blur(1px)){
  .fx-layer{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
.fx-layer:hover{
  border-color:var(--gold-soft) !important;
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--ink) 76%, transparent),
    color-mix(in srgb, var(--ink) 66%, transparent)) !important;
}
/* Il livello attivo si riconosce dal filo oro e dal fondo caldo, non dal
   fatto che gli altri sbiadiscono. Nessun ingrandimento: cosi' il bordo
   sinistro resta allineato agli altri quattro. */
.fx-layer.is-active{
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--gold) 24%, color-mix(in srgb, var(--ink) 80%, transparent)),
    color-mix(in srgb, var(--gold) 7%,  color-mix(in srgb, var(--ink) 76%, transparent))) !important;
  border-color:var(--gold-soft) !important;
  box-shadow:inset 3px 0 0 var(--gold-soft);
}
.fx-layer-num{opacity:1;color:var(--gold-text)}
.fx-layer.is-active .fx-layer-num{color:var(--gold-soft)}
/* La freccia segnalava il livello attivo comparendo e sparendo del tutto:
   resta sempre presente, solo piu' discreta quando non e' selezionato. */
.fx-layer .fx-layer-arrow{opacity:.38 !important;transition:opacity var(--dur)}
.fx-layer.is-active .fx-layer-arrow,
.fx-layer:hover .fx-layer-arrow{opacity:1 !important}

/* ---- C) gerarchia dei testi introduttivi -------------------------------
   Le frasi che introducono una sezione erano rese a 13px (.page-head-note,
   css/enhance.css riga 216) e a 14,7px (.fx-lead, css/experience.css riga
   25), sotto un titolo da 40px. Un incipit di sezione a 13px non regge il
   confronto col titolo e non e' comodo da leggere: e' testo di lettura, non
   un'etichetta. Sulla pagina "chi siamo" lo stesso ruolo era gia' reso a
   17,5px, quindi qui si allinea il sito a se' stesso.
   Gerarchia risultante: sopratitolo 12,5 - titolo 40 - incipit 17,5 - corpo 16. */
.page-head-note,
.fx-lead,
.fx-strata .fx-lead,
.svc-intro{
  font-size:var(--fs-lead);
  line-height:1.68;
  color:var(--muted-strong);
  max-width:62ch;
}
.page-head-note{margin-bottom:clamp(30px,3.4vw,46px)}

/* Le note a pie' di sezione (avvertenze) erano a #8f8674 sopra una
   fotografia: restano piccole, ma leggibili. */
.fx-strata-note,
.v10-service-reader-note{color:var(--muted-text)}


/* ==========================================================================
   19-sexies. DUE DIFETTI DI EREDITA' TROVATI NELLA RASSEGNA DELLE SEZIONI
   --------------------------------------------------------------------------
   A) SCHEDE DENTRO LE FASCE SCURE — sfondo praticamente assente
      css/restyle.css riga 569 assegna a ".section.dark .card" un velo
      bianchissimo:
          background:linear-gradient(180deg,rgba(255,255,255,.045),
                                             rgba(255,255,255,.012))
      Non c'e' nessun fondo scuro sotto. Su una fascia con fotografia (le
      tre schede "Infrastruttura, operativita' e controllo", le schede di
      chi siamo e di prodotti) la scheda risulta quindi quasi trasparente:
      il testo cade direttamente sull'immagine e le schede sembrano
      disuguali fra loro, perche' cambia cio' che si vede dietro.
      Nota: ".card" da solo (restyle.css riga 840) ha il fondo scuro
      corretto, ma ".section.dark .card" e' piu' specifico e lo annulla —
      lo stesso tipo di sovrapposizione che aveva neutralizzato l'altezza
      minima dei link nel footer.
      Intervento: si restituisce alle schede il pannello scuro del sito,
      mantenendo il velo chiaro come luce sovrapposta.

   B) MODULO DEL PUNTO MENSILE — frase di consenso tutta in maiuscolo
      css/style.css riga 247 stila ".monthly-form>label" come etichetta di
      campo: maiuscolo, tracciatura .14em, oro. Ma nel modulo ci sono DUE
      label figlie: quella del campo email (giusto che sia un'etichetta) e
      quella della casella di consenso, che invece e' una frase intera
      ("Dichiaro di aver letto la Privacy Policy e acconsento..."). Resa in
      maiuscolo spaziato a 13px diventava faticosa proprio dove la lettura
      conta di piu'.
      Intervento: la frase di consenso torna in tondo, a corpo di lettura.
      L'etichetta del campo resta l'etichetta che era.
   ========================================================================== */

/* ---- A) schede nelle fasce scure --------------------------------------- */
.section.dark .card,
.section.dark .lux-world,
.section.dark .fx-acc-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)),
    linear-gradient(145deg,
      color-mix(in srgb, var(--ink) 90%, transparent),
      color-mix(in srgb, var(--ink) 94%, transparent));
  border-color:var(--line-d2);
  box-shadow:0 34px 76px -54px rgba(0,0,0,.82);
}
@supports (backdrop-filter: blur(1px)){
  .section.dark .card{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
}
.section.dark .card:hover{border-color:var(--gold-2)}

/* ---- B) consenso in tondo ---------------------------------------------- */
.monthly-form > label.monthly-check,
.monthly-form > label.monthly-check span,
.access-form label.access-check,
.access-form label.access-check span{
  text-transform:none;
  letter-spacing:normal;
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--fs-small);
  line-height:1.55;
  color:#e7dfce;
}
/* Il collegamento all'informativa resta riconoscibile come link. */
.monthly-check a,.access-check a{
  text-transform:none;
  letter-spacing:normal;
}
/* La nota sotto il pulsante e' una spiegazione, non un'etichetta. */
.monthly-form .small,
.monthly-form-note{
  text-transform:none;
  letter-spacing:normal;
  font-size:var(--fs-small);
}


/* ==========================================================================
   20. RIFINITURE RICHIESTE IN REVISIONE
   --------------------------------------------------------------------------
   Ogni voce nasce da una segnalazione precisa. Sono raccolte qui, numerate,
   per poterle disattivare una per una.
   ========================================================================== */

/* --- 20.1  MENU: voci piu' piccole e piu' distanziate --------------------
   Le voci erano state portate a 12,5px resi con tracciatura .07em: risultato
   grande e serrato. Si scende a 12px resi, si allarga la tracciatura e si
   raddoppia lo spazio fra le voci. La riga resta piu' stretta di prima
   nonostante lo spazio maggiore, perche' il corpo e' minore.
   L'area cliccabile resta di 44px in altezza (sezione 7), quindi la
   comodita' di clic e di tocco non cambia. */
:root{ --fs-nav:calc(12px / var(--frame-zoom)); }
.site-header .main-nav a{
  font-size:var(--fs-nav);
  letter-spacing:.13em;
}
.site-header .main-nav a.nav-cta{
  font-size:var(--fs-nav);
  letter-spacing:.15em;
}
.main-nav{gap:clamp(15px,1.5vw,26px)}
.site-header .main-nav .lang-opt{font-size:var(--fs-nav);letter-spacing:.13em}

/* --- 20.2  RIQUADRO "VIA ANTONIO VANONI 4": via il marrone ---------------
   Il pannello usava un pieno marrone caldo (--char-2 / --char, #24211a e
   #1c1a15) che accanto alla fotografia grigia e nitida del palazzo appariva
   spento e fangoso.
   Al suo posto un nero profondo con un alone caldo in alto, dove poggia il
   monogramma: il tono del marchio resta, ma come luce sul nero invece che
   come tinta piatta. Il filetto oro in cima (v13.css riga 222) e' ora
   accompagnato da un filo verticale che lega il pannello alla fotografia. */
.v13-frame-panel{
  background:
    radial-gradient(120% 88% at 50% 0%,
      color-mix(in srgb, var(--gold) 13%, transparent) 0%,
      transparent 60%),
    linear-gradient(168deg, #15150f 0%, #0c0c0b 62%, #0a0a09 100%);
}
/* Filo verticale di raccordo con la fotografia, sul lato sinistro. */
.v13-frame-panel::after{
  content:"";
  position:absolute;
  inset-block:clamp(26px,3vw,42px);
  inset-inline-start:0;
  width:1px;
  background:linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--gold-soft) 42%, transparent) 26%,
    color-mix(in srgb, var(--gold-soft) 42%, transparent) 74%,
    transparent);
  pointer-events:none;
}
@media (max-width:900px){
  /* In colonna il filo va in orizzontale, sopra il pannello. */
  .v13-frame-panel::after{
    inset:0 clamp(26px,7vw,48px) auto;
    width:auto;height:1px;
    background:linear-gradient(90deg,transparent,
      color-mix(in srgb, var(--gold-soft) 42%, transparent),transparent);
  }
}

/* --- 20.3  ORBITA DEI PRINCIPI: le scritte uscivano dai cerchi -----------
   Portando le etichette al minimo leggibile, parole lunghe come
   INDIPENDENZA — e in inglese INDEPENDENCE e TRANSPARENCY — sfondavano il
   cerchio da 118px. Si allargano i cerchi e si contiene l'etichetta:
   corpo 11px resi, tracciatura minima, due righe ammesse e sillabazione di
   emergenza. Verificato su entrambe le lingue. */
.fx-sat-btn{
  width:calc(134px / var(--frame-zoom));
  height:calc(134px / var(--frame-zoom));
  padding:10px;
}
.fx-sat-btn b{
  font-size:calc(11px / var(--frame-zoom));
  letter-spacing:.015em;
  line-height:1.18;
  max-width:calc(112px / var(--frame-zoom));
  hyphens:auto;
  overflow-wrap:break-word;
}
@media (max-width:960px){
  .fx-sat-btn{width:calc(108px / var(--frame-zoom));height:calc(108px / var(--frame-zoom))}
  .fx-sat-btn b{font-size:calc(10.5px / var(--frame-zoom));max-width:calc(90px / var(--frame-zoom))}
}
/* Sul telefono l'orbita diventa una griglia di riquadri: nessun vincolo di
   cerchio, l'etichetta torna comoda. */
@media (max-width:1024px){
  .fx-sat-btn{width:100% !important;height:auto !important;border-radius:14px}
  .fx-sat-btn b{max-width:none !important;font-size:var(--fs-micro) !important}
}

/* --- 20.4  TEAM: il ruolo in oro era troppo presente ---------------------
   Nome (1,45rem) e ruolo erano quasi dello stesso peso visivo, e il ruolo
   in oro su tre righe rubava l'attenzione al nome. Si riduce il corpo e la
   tracciatura: resta leggibile, torna a essere una didascalia. */
.member-role{
  font-size:calc(11.5px / var(--frame-zoom));
  letter-spacing:.1em;
  line-height:1.45;
  color:var(--gold-text);
}
@media (max-width:1024px){
  .member-role{
    font-size:calc(11.5px / var(--frame-zoom)) !important;
    letter-spacing:.08em !important;
  }
}

/* --- 20.5  COSA FACCIAMO: quattro schede allineate, senza scorrimento ----
   Il carosello obbligava a scorrere per vedere la quarta scheda. Da 1100px
   in su le quattro schede stanno tutte in riga: niente scorrimento, niente
   frecce, niente indicatori — non servono se tutto e' visibile.
   Sotto 1100px resta il carosello, che su schermi stretti e' la soluzione
   giusta. In entrambi i casi il clic apre la scheda estesa, dove si passa
   da un profilo all'altro con i pulsanti Precedente/Successivo o con le
   frecce della tastiera. */
@media (min-width:1100px){
  .v10-service-track{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(14px,1.4vw,20px);
    overflow:visible;
    scroll-snap-type:none;
    padding:2px;
  }
  .v10-service-card{
    flex:none;
    min-height:clamp(392px,31vw,460px);
    scroll-snap-align:none;
  }
  /* Schede piu' strette: si riducono i margini interni e la spaziatura,
     non la leggibilita' del testo. */
  /* Il numero della scheda era posizionato in modo assoluto dentro il blocco
     di testo: la sua distanza dall'etichetta dipendeva quindi dall'altezza
     del testo e su "Family Office" i due si sovrapponevano. Rimesso nel
     flusso: sta sempre sopra l'etichetta, alla stessa distanza in tutte e
     quattro le schede, e la posizione non dipende piu' dalla lunghezza del
     testo. */
  .v10-service-card > div{padding:clamp(18px,1.7vw,24px)}
  .v10-service-card span{
    position:static;
    display:block;
    margin:0 0 4px;
    font-size:1.35rem;
    line-height:1;
  }
  .v10-service-card h3{font-size:clamp(1.4rem,1.6vw,1.75rem);margin-bottom:10px}
  .v10-service-card b{margin-top:16px;padding:9px 13px}
  .v10-service-card p{-webkit-line-clamp:5}
  /* Comandi del carosello inutili quando non c'e' nulla da scorrere. */
  .v10-service-controls{display:none}
  /* Nessuna sfumatura: la riga non scorre piu'. */
  .v10-service-track.frame-xscroll{
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
}

/* --- 20.6  SCHEDA ESTESA DEL SERVIZIO: ordine interno -------------------
   La scheda che si apre mescolava numero, etichetta, titolo e testo senza
   respiro, e i pulsanti di scorrimento erano attaccati al testo. */
.v10-service-reader-copy{padding:clamp(30px,3vw,44px) clamp(26px,3vw,44px)}
.v10-service-reader-num{
  display:block;
  font-size:calc(13px / var(--frame-zoom));
  letter-spacing:.2em;
  color:var(--gold-text);
  margin-bottom:6px;
}
.v10-service-reader-k{
  display:block;
  margin-bottom:12px;
  color:var(--gold-soft);
}
.v10-service-reader-copy h2{
  margin:0 0 18px;
  line-height:1.08;
  letter-spacing:-.012em;
}
.v10-service-reader-text{font-size:var(--fs-body);line-height:1.72}
.v10-service-reader-text p + p{margin-top:14px}
.v10-service-reader-text ul{margin:14px 0 0;padding-inline-start:20px;display:grid;gap:8px}
.v10-service-reader-text li::marker{color:var(--gold-soft)}
/* I due pulsanti diventano una barra staccata, con un filetto sopra. */
.v10-service-reader-nav{
  display:flex;
  gap:10px;
  margin-top:clamp(24px,2.6vw,34px);
  padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line-d);
}
.v10-service-reader-nav button{
  min-height:var(--tap);
  padding-inline:18px;
  font-size:var(--fs-micro);
}
.v10-service-reader-note{
  margin-top:16px;
  font-size:var(--fs-micro);
  line-height:1.6;
}

/* --- 20.7  SEZIONI DISATTIVABILI DAL PANNELLO: la regola decisiva --------
   Il pannello /admin puo' spegnere voci e sezioni (per esempio DeskNews)
   scrivendo  false  nella chiave corrispondente; js/cms-content.js applica
   allora  style.display = "none"  sull'elemento.
   Ma uno stile in linea SENZA !important perde contro una regola di foglio
   CON !important: le regole sulle aree di tocco (sezione 7) dichiarano
   "display:inline-flex !important" sulle voci di menu, e l'elemento
   restava percio' visibile nonostante l'interruttore.
   js/cms-content.js ora marca anche l'attributo data-cms-hidden, e questa
   regola ha l'ultima parola. Non toccare senza aver letto la sezione 7. */
[data-cms-hidden="true"],
.main-nav a[data-cms-hidden="true"],
.footer-col a[data-cms-hidden="true"],
.footer-bottom-links a[data-cms-hidden="true"],
[data-cms-hidden="true"][aria-hidden="true"]{
  display:none !important;
}


/* Sotto 1360px si passa al menu a tendina: dieci voci leggibili non entrano
   in una barra piu' stretta, e un menu comodo e' preferibile a una barra
   compressa. Le regole ricalcano esattamente quelle di css/style.css (che
   scattavano a 1240px), estese alla nuova soglia. */
@media (max-width:1360px){
  .site-header .wrap{width:min(var(--max),calc(100% - 48px))}
  .header-inner{min-height:84px}
  .menu-toggle{display:grid}

  .main-nav{
    position:fixed;left:0;right:0;top:84px;
    height:calc(var(--vh-100d) - 84px);
    /* Fondo PIENO, non traslucido: il menu copre la fotografia della hero e
       la trasparenza rendeva le voci difficili da leggere. */
    background:#0b0b0a;
    flex-direction:column;align-items:flex-start;
    gap:8px;
    padding:32px clamp(24px,6vw,56px) 44px;
    transform:translateX(100%);
    transition:transform var(--dur-slow) var(--ease,ease);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .main-nav.open{transform:translateX(0);visibility:visible;pointer-events:auto}
  .main-nav:not(.open){visibility:hidden;pointer-events:none}

  /* Specificita' alzata a ".site-header .main-nav a": il blocco "pavimento
     tipografico" in coda al file ridichiara ".main-nav a" e vincerebbe. */
  /* Il selettore di lingua e' dentro .main-nav ma non e' una voce di menu:
     va escluso da larghezza piena e corpo grande, altrimenti "EN" diventa
     una barra larga tutto lo schermo accanto a un "IT" minuscolo. */
  .site-header .main-nav a:not(.lang-opt){
    width:100%;
    min-height:calc(48px / var(--frame-zoom)) !important;
    font-size:1.16rem;
    font-family:var(--serif);
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    white-space:normal;
  }
  /* Specificita' pari a quella della regola precedente (che usa :not) e
     dichiarata dopo: cosi' il pulsante Contatti resta in maiuscolo. */
  .site-header .main-nav a.nav-cta{
    width:auto;justify-content:center;
    font-family:var(--sans);
    font-size:var(--fs-micro);
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-top:10px;
    padding-inline:22px !important;
  }
  .lang-switch{
    margin:14px 0 0;padding:16px 0 0;
    border-left:0;border-top:1px solid var(--line-d2);
    width:100%;
    display:flex;align-items:center;gap:6px;
  }
  .site-header .main-nav .lang-opt{
    width:auto;
    min-width:calc(48px / var(--frame-zoom));
    min-height:calc(48px / var(--frame-zoom));
    justify-content:center;
    font-family:var(--sans);
    font-size:var(--fs-micro);
    letter-spacing:.12em;
  }
}