/* =====================================================================
   AirVideo 27 "Regia" - tutte le pagine: base, skip link, loader, header, menu a schermo intero,
   footer "titoli di coda" e otturatore tra le pagine.
   Tutto sotto body.av27 (classe aggiunta da inc/av27-assets.php): style.css resta com'e'.
   Si anima solo transform, opacity e clip-path. Niente GSAP: transizioni CSS.
   ===================================================================== */

/* ---------- Base ---------- */
body.av27 {
  --av27-bg: #070a10;
  --av27-panel: #0d121a;
  --av27-line: rgba(255, 255, 255, .12);
  --av27-line-2: rgba(255, 255, 255, .22);
  --av27-text: #f7f8f5;
  --av27-text-2: rgba(247, 248, 245, .86);
  --av27-muted: #9da6b2;
  --av27-cyan: #62d9ee;
  --av27-blue: #526cff;
  --av27-violet: #bb00ff;
  --av27-cobalt: #3344dd;

  --av27-gutter: clamp(16px, 4vw, 56px);
  --av27-header-h: 66px; /* pagine interne, Digital Score e Area Clienti partono sotto i 66 px */
  --av27-radius: 22px;

  /* una sola famiglia di curve per tutto il sito */
  --av27-ease-out: cubic-bezier(.16, 1, .3, 1);
  --av27-ease-quart: cubic-bezier(.25, 1, .5, 1);
  --av27-ease-inout: cubic-bezier(.83, 0, .17, 1);
}
body.av27-home { --av27-header-h: 76px; }

/* menu aperto: la pagina sotto non scorre */
html.av27-menu-open { overflow: hidden; }
/* lo spazio della barra di scorrimento resta riservato in ogni pagina, come in home: con le barre
   classiche di Windows overflow:hidden la toglieva e pagina e bottone del menu si spostavano di 15 px */
html.js { scrollbar-gutter: stable; }

body.av27 .av27-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body.av27 .av27-label {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--av27-muted);
}

/* ---------- Skip link ---------- */
body.av27 .skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10004;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--av27-text);
  color: var(--av27-bg);
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .4s var(--av27-ease-out);
}
body.av27 .skip-link:focus,
body.av27 .skip-link:focus-visible { transform: none; }
/* il contenuto riceve il focus dallo skip link (tabindex="-1"): niente cornice su tutta la pagina */
body.av27 main[tabindex="-1"]:focus { outline: none; }

/* ---------- Loader delle pagine interne (main.js lo toglie al load) ---------- */
body.av27 .page-loader { background: var(--av27-bg); }
body.av27 .page-loader .loader-logo {
  animation: none;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--av27-text);
  font-family: var(--ff-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
}
/* la home ha il suo diaframma */
body.av27-home .page-loader { display: none; }
/* senza JS main.js non lo toglierebbe mai; con gli script fermi sparisce dopo 4 s */
html:not(.js) body.av27 .page-loader { display: none; }
html.av27-fallback body.av27 .page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* arrivo con l'otturatore (av27-site.js): le tendine fanno gia' da loader. Senza questa regola,
   con una pagina pesante il loader resterebbe fino al load, sotto le tendine appena aperte */
html.av27-arrived body.av27 .page-loader { display: none; }

/* ---------- Pagine dei plugin ---------- */
/* Digital Score: sotto i 560 px il plugin mette il badge "Beta test" a 18 px dall'alto, sotto il menu */
@media (max-width: 560px) {
  body.av27 .avds-beta-badge { top: calc(var(--av27-header-h) + 12px); }
}

/* =====================================================================
   HEADER
   ===================================================================== */
body.av27 .av27-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  /* sotto la barra di avanzamento di main.js (10001); sopra il menu solo mentre e' aperto */
  z-index: 1000;
  color: var(--av27-text);
  font-family: var(--ff-body);
  /* alla chiusura resta sopra il sipario finche' non e' risalito (1 s) */
  transition: transform .8s var(--av27-ease-out), z-index 0s linear 1s;
}
body.av27 .av27-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 16, .86);
  border-bottom: 1px solid var(--av27-line);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
body.av27 .av27-header.is-scrolled::before { opacity: 1; }
/* senza JS is-scrolled non arriva mai: lo sfondo c'e' sempre, cosi' l'header non si sovrappone al testo */
html:not(.js) body.av27 .av27-header::before { opacity: 1; }
/* in home la sfumatura del prototipo invece della barra */
body.av27-home .av27-header::before {
  inset: 0 0 -30px 0;
  background: linear-gradient(to bottom, rgba(7, 10, 16, .82), rgba(7, 10, 16, 0));
  border-bottom: 0;
}
/* is-hidden la mette solo la regia della home; da tastiera l'header torna sempre in vista */
body.av27 .av27-header.is-hidden { transform: translateY(-110%); }
html.av27-menu-open body.av27 .av27-header,
body.av27 .av27-header:focus-within { transform: none; }
html.av27-menu-open body.av27 .av27-header {
  z-index: 10003;
  transition: transform .8s var(--av27-ease-out), z-index 0s;
}
html.av27-menu-open body.av27 .av27-header::before { opacity: 0; }

body.av27 .av27-header a {
  color: inherit;
  text-decoration: none;
}

body.av27 .av27-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--av27-header-h);
  padding: 0 var(--av27-gutter);
}

body.av27 .av27-logo {
  padding: 6px 0;
  font-family: var(--ff-display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

body.av27 .av27-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.av27 .av27-header .av27-header-cta {
  display: none;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(98, 217, 238, .45);
  border-radius: 999px;
  background: rgba(98, 217, 238, .12);
  color: var(--av27-text);
  font-size: 14px;
  font-weight: 600;
  transition: background-color .4s, color .4s, opacity .4s;
}
@media (min-width: 640px) {
  body.av27 .av27-header .av27-header-cta { display: inline-flex; }
}
@media (hover: hover) {
  body.av27 .av27-header .av27-header-cta:hover {
    background: var(--av27-cyan);
    color: var(--av27-bg);
  }
}
html.av27-menu-open body.av27 .av27-header .av27-header-cta {
  opacity: 0;
  pointer-events: none;
}

body.av27 .av27-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 7px 0 20px;
  border: 1px solid var(--av27-line-2);
  border-radius: 999px;
  background: rgba(7, 10, 16, .4);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .4s;
}
@media (hover: hover) {
  body.av27 .av27-menu-btn:hover { border-color: var(--av27-text); }
}

body.av27 .av27-menu-btn-label {
  position: relative;
  display: inline-block;
  height: 1.25em;
  min-width: 3.7em;
  overflow: hidden;
  line-height: 1.25;
}
body.av27 .av27-menu-btn-label > span {
  display: block;
  transition: transform .7s var(--av27-ease-out);
}
body.av27 .av27-menu-btn-label > span + span {
  position: absolute;
  top: 100%;
  left: 0;
}
html.av27-menu-open body.av27 .av27-menu-btn-label > span { transform: translateY(-100%); }

body.av27 .av27-menu-btn-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--av27-text);
}
body.av27 .av27-menu-btn-icon i {
  position: absolute;
  width: 13px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--av27-bg);
  transition: transform .7s var(--av27-ease-out);
}
body.av27 .av27-menu-btn-icon i:first-child { transform: translateY(-3px); }
body.av27 .av27-menu-btn-icon i:last-child { transform: translateY(3px); }
html.av27-menu-open body.av27 .av27-menu-btn-icon i:first-child { transform: rotate(45deg); }
html.av27-menu-open body.av27 .av27-menu-btn-icon i:last-child { transform: rotate(-45deg); }

/* =====================================================================
   MENU A SCHERMO INTERO
   Fratello dell'header, fuori da <nav> e da backdrop-filter: e' fixed sull'intera finestra.
   Senza JS si apre con :target (#av27-menu); con JS con la classe is-open.
   ===================================================================== */
body.av27 .av27-menu {
  position: fixed;
  inset: 0;
  z-index: 10002; /* sopra barra di avanzamento (10001) e back-to-top di main.js */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--av27-bg);
  color: var(--av27-text);
  font-family: var(--ff-body);
  visibility: hidden;
}
body.av27 .av27-menu:target,
body.av27 .av27-menu.is-open { visibility: visible; }

/* con JS il sipario scende (clip-path) */
html.js body.av27 .av27-menu {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--av27-ease-inout), visibility 0s linear 1s;
}
html.js body.av27 .av27-menu:target,
html.js body.av27 .av27-menu.is-open {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--av27-ease-inout), visibility 0s;
}

/* style.css ha una regola globale nav{position:fixed;height:66px;padding:0 6%;...}: qui va annullata */
body.av27 .av27-menu nav {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  display: block;
  height: auto;
  margin: 0;
  padding: 0;
  align-items: normal;
  justify-content: normal;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: none;
}

body.av27 .av27-menu ol,
body.av27 .av27-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.av27 .av27-menu a {
  color: inherit;
  text-decoration: none;
}

body.av27 .av27-menu-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(82, 108, 255, .16), transparent 70%),
    radial-gradient(50% 50% at 10% 100%, rgba(187, 0, 255, .1), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px calc(100% / 6));
}

body.av27 .av27-menu .av27-menu-inner {
  display: grid;
  gap: 40px;
  min-height: 100%;
  padding: calc(var(--av27-header-h) + 24px) var(--av27-gutter) 32px;
}

body.av27 .av27-menu-main li { border-bottom: 1px solid var(--av27-line); }
body.av27 .av27-menu .av27-menu-main a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0 8px;
  transition: opacity .5s var(--av27-ease-quart);
}
body.av27 .av27-mm-num {
  min-width: 2em;
  padding-top: .55em;
  color: var(--av27-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
}
body.av27 .av27-mm-mask {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
}
body.av27 .av27-mm-label {
  position: relative;
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 5.2vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.02;
  transition: transform .9s var(--av27-ease-out);
}
html.js body.av27 .av27-mm-label { transform: translateY(108%); }
html.js body.av27 .av27-menu.is-open .av27-mm-label,
html.js body.av27 .av27-menu:target .av27-mm-label {
  transform: none;
  transition-delay: calc(.38s + var(--i) * .065s);
}
body.av27 .av27-mm-cta .av27-mm-label { color: var(--av27-cyan); }
/* pagina corrente */
body.av27 .av27-menu-main a[aria-current="page"] .av27-mm-num,
body.av27 .av27-menu .av27-menu-sub a[aria-current="page"] { color: var(--av27-cyan); }

body.av27 .av27-menu-side,
body.av27 .av27-menu-foot,
body.av27 .av27-menu-preview { transition: opacity .8s var(--av27-ease-quart), transform .9s var(--av27-ease-out); }
html.js body.av27 .av27-menu-side,
html.js body.av27 .av27-menu-foot,
html.js body.av27 .av27-menu-preview {
  opacity: 0;
  transform: translateY(24px);
}
html.js body.av27 .av27-menu.is-open .av27-menu-side,
html.js body.av27 .av27-menu.is-open .av27-menu-foot,
html.js body.av27 .av27-menu.is-open .av27-menu-preview,
html.js body.av27 .av27-menu:target .av27-menu-side,
html.js body.av27 .av27-menu:target .av27-menu-foot,
html.js body.av27 .av27-menu:target .av27-menu-preview {
  opacity: 1;
  transform: none;
  transition-delay: .62s;
}

body.av27 .av27-menu-heading { margin-bottom: 14px; }
body.av27 .av27-menu-sub {
  display: grid;
  gap: 2px;
}
body.av27 .av27-menu .av27-menu-sub a {
  display: inline-block;
  padding: 7px 0;
  color: var(--av27-text-2);
  font-size: 17px;
  font-weight: 500;
  transition: color .3s, transform .6s var(--av27-ease-out);
}

body.av27 .av27-menu-preview { display: none; }

body.av27 .av27-menu-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 22px;
  border-top: 1px solid var(--av27-line);
}
body.av27 .av27-menu-mail { font-weight: 600; }
body.av27 .av27-menu-social {
  display: flex;
  gap: 22px;
}
body.av27 .av27-menu .av27-menu-social a {
  color: var(--av27-text-2);
  font-weight: 500;
}

/* link del fallback senza JS: con il menu gestito dal JS non serve */
body.av27 .av27-menu .av27-menu-close {
  justify-self: start;
  font-weight: 600;
  text-decoration: underline;
}
body.av27 .av27-menu.is-enhanced .av27-menu-close { display: none; }

@media (hover: hover) {
  body.av27 .av27-menu-main:hover a { opacity: .32; }
  body.av27 .av27-menu .av27-menu-main a:hover,
  body.av27 .av27-menu .av27-menu-main a:focus-visible { opacity: 1; }
  body.av27 .av27-menu .av27-menu-sub a:hover {
    color: var(--av27-cyan);
    transform: translateX(6px);
  }
  body.av27 .av27-menu .av27-menu-social a:hover,
  body.av27 .av27-menu .av27-menu-mail:hover { color: var(--av27-cyan); }
}

@media (min-width: 900px) {
  body.av27 .av27-menu .av27-menu-inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr) minmax(0, .8fr);
    grid-template-rows: 1fr auto;
    column-gap: clamp(28px, 4vw, 72px);
    padding-top: calc(var(--av27-header-h) + 5vh);
  }
  body.av27 .av27-menu-main,
  body.av27 .av27-menu-side { align-self: center; }
  body.av27 .av27-menu-preview {
    position: relative;
    display: block;
    align-self: center;
    width: 100%;
    max-height: 64vh;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--av27-line);
    border-radius: var(--av27-radius);
    background: var(--av27-panel);
  }
  body.av27 .av27-menu-foot { grid-column: 1 / -1; }
}

/* livelli dell'anteprima: la voce attiva sale sopra la precedente */
body.av27 .av27-pv {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(100% 0 0 0);
}
body.av27 .av27-pv.was-active {
  z-index: 2;
  clip-path: inset(0);
}
body.av27 .av27-pv.is-active {
  z-index: 3;
  clip-path: inset(0);
  transition: clip-path .9s var(--av27-ease-out);
}
body.av27 .av27-pv video,
body.av27 .av27-pv img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.4s var(--av27-ease-out);
}
body.av27 .av27-pv.is-active video,
body.av27 .av27-pv.is-active img { transform: none; }
body.av27 .av27-pv::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 10, 16, .78), transparent 45%);
}
body.av27 .av27-pv-cap {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 16px;
  left: 18px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}
body.av27 .av27-pv--score,
body.av27 .av27-pv--area {
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(82, 108, 255, .28), transparent 70%),
    var(--av27-panel);
}
body.av27 .av27-pv-score,
body.av27 .av27-pv-area {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}
body.av27 .av27-pv-score strong {
  font-family: var(--ff-display);
  font-size: clamp(4rem, 7vw, 7rem);
  letter-spacing: -.05em;
  line-height: .9;
}
body.av27 .av27-pv-score i {
  display: block;
  width: 70%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--av27-cyan) calc(var(--p) * 100%), rgba(255, 255, 255, .12) 0);
}
body.av27 .av27-pv-score small,
body.av27 .av27-pv-area small {
  max-width: 24ch;
  color: var(--av27-muted);
  font-size: 14px;
}
body.av27 .av27-pv-area strong {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1;
}

/* =====================================================================
   FOOTER "TITOLI DI CODA"
   style.css ha footer{border-top;padding:4.5rem 6% 2.5rem;margin-top:40px}: qui si riparte da zero.
   Niente display sul <footer>: gestione-news.js lo nasconde con l'attributo hidden.
   ===================================================================== */
body.av27 .av27-footer {
  position: relative;
  margin: 0;
  padding: clamp(72px, 11vh, 130px) var(--av27-gutter) 28px;
  border-top: 1px solid var(--av27-line);
  overflow: hidden;
  background:
    radial-gradient(60% 40% at 50% 100%, rgba(82, 108, 255, .18), transparent 70%),
    var(--av27-bg);
  color: var(--av27-text);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
}
body.av27 .av27-footer p { margin: 0; }
body.av27 .av27-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.av27 .av27-footer a {
  color: inherit;
  text-decoration: none;
}
body.av27 .av27-footer a:focus-visible {
  outline: 2px solid var(--av27-cyan);
  outline-offset: 3px;
}

body.av27 .av27-footer-top {
  display: grid;
  justify-items: start;
  gap: 18px;
  margin-bottom: clamp(48px, 8vh, 90px);
}
body.av27 .av27-footer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: .18em;
}
body.av27 .av27-footer-kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--av27-cyan);
}
body.av27 .av27-footer-call {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
}
body.av27 .av27-footer .av27-footer-call a {
  color: var(--av27-cyan);
  background: linear-gradient(var(--av27-cyan), var(--av27-cyan)) 0 100% / 0 3px no-repeat;
  transition: background-size .8s var(--av27-ease-out);
}
@media (hover: hover) {
  body.av27 .av27-footer .av27-footer-call a:hover { background-size: 100% 3px; }
}

body.av27 .av27-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--av27-line);
}
body.av27 .av27-footer-brand {
  grid-column: 1 / -1;
  max-width: 38ch;
  color: var(--av27-muted);
}
/* contatti a tutta larghezza su telefono: l'indirizzo email non si spezza a meta' */
body.av27 .av27-footer-col:last-child { grid-column: 1 / -1; }
body.av27 .av27-footer .av27-footer-title {
  margin-bottom: 10px;
  color: var(--av27-text);
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 700;
}
body.av27 .av27-footer-heading { margin-bottom: 14px; }
body.av27 .av27-footer-col ul {
  display: grid;
  gap: 4px;
}
body.av27 .av27-footer-col a {
  display: inline-block;
  padding: 5px 0;
  color: var(--av27-text-2);
  overflow-wrap: anywhere;
  transition: color .3s;
}
@media (hover: hover) {
  body.av27 .av27-footer-col a:hover { color: var(--av27-cyan); }
}

body.av27 .av27-footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
body.av27 .av27-footer-socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--av27-line-2);
  border-radius: 50%;
  transition: border-color .3s, background-color .3s;
}
/* icone del footer precedente: TikTok e Facebook pieni, Instagram a contorno con il punto pieno */
body.av27 .av27-footer-socials svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}
body.av27 .av27-footer-socials svg rect,
body.av27 .av27-footer-socials svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
body.av27 .av27-footer-socials svg .social-icon-dot {
  fill: currentColor;
  stroke: none;
}
@media (hover: hover) {
  body.av27 .av27-footer-socials a:hover {
    border-color: var(--av27-cyan);
    background-color: rgba(98, 217, 238, .1);
  }
}

@media (min-width: 900px) {
  body.av27 .av27-footer-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  body.av27 .av27-footer-brand,
  body.av27 .av27-footer-col:last-child { grid-column: auto; }
}

/* wordmark gigante: av27-site.js lo adatta alla larghezza esatta. Senza JS si stima dalla finestra
   meno i margini: in Syne 800 "AirVideo" e' largo circa 6,3 em, con 6,45 resta un po' di aria
   anche con la barra di scorrimento (18.2vw del prototipo lo farebbe uscire di circa un quarto). */
body.av27 .av27-wordmark {
  margin-top: clamp(36px, 6vh, 72px);
  padding-top: .02em;
  overflow: hidden;
  line-height: .78;
  text-align: center;
}
body.av27 .av27-wordmark-inner {
  display: inline-flex;
  white-space: nowrap;
  font-family: var(--ff-display);
  font-size: calc((100vw - 2 * var(--av27-gutter)) / 6.45);
  font-weight: 800;
  letter-spacing: -.055em;
}
body.av27 .av27-wm-char {
  display: inline-block;
  padding-bottom: .1em;
  color: var(--av27-text);
}
body.av27 .av27-wm-char:nth-child(4) { color: var(--av27-cyan); }
/* le lettere si nascondono solo quando il JS le arma (fuori vista) e risalgono entrando in vista */
body.av27 .av27-wordmark.is-armed .av27-wm-char { transform: translateY(104%); }
body.av27 .av27-wordmark.is-armed.is-in .av27-wm-char {
  transform: none;
  transition: transform 1s var(--av27-ease-out) calc(var(--i) * 70ms);
}

body.av27 .av27-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 22px;
  border-top: 1px solid var(--av27-line);
  color: var(--av27-muted);
  font-size: 13.5px;
}
body.av27 .av27-footer .av27-to-top {
  color: var(--av27-text);
  font-weight: 600;
}

/* =====================================================================
   OTTURATORE TRA LE PAGINE: 7 tendine e il logo, sopra tutto (menu e header aperti, skip link).
   - uscita: .is-closed (av27-site.js), le tendine scendono in 600 ms, poi si naviga;
   - arrivo: html.av27-arriving (avvio inline) le tiene giu' dal primo paint e av27-site.js le
     riapre appena parte; mai con av27-fallback, cosi' la pagina non resta coperta;
   - riapertura (arrivo, ritorno dal bfcache, recupero dopo 2,5 s): la transizione di base.
   Con le View Transitions cross-document il fotogramma a tendine chiuse resta fermo tra le pagine.
   ===================================================================== */
body.av27 .av27-shutter {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  pointer-events: none;
  view-transition-name: av27-shutter;
}
body.av27 .av27-shutter-panel {
  display: block;
  margin-right: -1px;
  background: linear-gradient(to bottom, var(--av27-panel) calc(100% - 3px), var(--av27-cyan));
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .9s var(--av27-ease-inout) calc(var(--i) * 55ms);
}
body.av27 .av27-shutter-panel:nth-child(even) {
  background: linear-gradient(to bottom, #0b1018 calc(100% - 3px), var(--av27-blue));
}
body.av27 .av27-shutter-logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--av27-text);
  font-family: var(--ff-display);
  font-size: clamp(2rem, 5vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  opacity: 0;
  transition: opacity .3s;
}
body.av27 .av27-shutter.is-closed { pointer-events: auto; }
/* ultima tendina: 6 * 25 ms di ritardo + 450 ms = 600 ms */
body.av27 .av27-shutter.is-closed .av27-shutter-panel {
  transform: scaleY(1);
  transform-origin: 50% 0;
  transition: transform .45s var(--av27-ease-inout) calc(var(--i) * 25ms);
}
body.av27 .av27-shutter.is-closed .av27-shutter-logo {
  opacity: 1;
  transition: opacity .25s .35s;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  html.av27-arriving:not(.av27-fallback) body.av27 .av27-shutter { pointer-events: auto; }
  html.av27-arriving:not(.av27-fallback) body.av27 .av27-shutter-panel {
    transform: scaleY(1);
    transition: none;
  }
  html.av27-arriving:not(.av27-fallback) body.av27 .av27-shutter-logo {
    opacity: 1;
    transition: none;
  }
}

/* =====================================================================
   "Riduci movimento": menu e header senza sipario, ne' voci che salgono; niente otturatore
   (si naviga subito) e wordmark fermo
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* style.css ha html{scroll-behavior:smooth}: con "riduci movimento" focus e ancore saltano subito */
  html { scroll-behavior: auto; }
  body.av27 .av27-shutter { display: none; }
  body.av27 .av27-wm-char {
    transform: none !important;
    transition: none;
  }
  html.js body.av27 .av27-menu,
  html.js body.av27 .av27-menu:target,
  html.js body.av27 .av27-menu.is-open {
    clip-path: none;
    transition: none;
  }
  html.js body.av27 .av27-mm-label {
    transform: none;
    transition: none;
  }
  html.js body.av27 .av27-menu-side,
  html.js body.av27 .av27-menu-foot,
  html.js body.av27 .av27-menu-preview {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.av27 .av27-pv,
  body.av27 .av27-pv video,
  body.av27 .av27-pv img,
  body.av27 .av27-header,
  body.av27 .skip-link,
  body.av27 .av27-menu-btn-label > span,
  body.av27 .av27-menu-btn-icon i { transition: none; }
}