/* ==========================================================================
   OLTRAX GROUP · Design system 2026
   Marchio: verde smeraldo #42AE86 campionato dal logo, su base grafite-verde.
   Una sola tinta identitaria: la gerarchia la fanno profondità e luminosità,
   non un secondo colore preso a prestito. I nomi storici dei token restano
   (--navy, --red): cambiano i valori, non l'impianto.
   ========================================================================== */

:root {
  --navy:         #071c16;
  --navy-700:     #0e5943;
  --navy-500:     #1b8663;
  --navy-300:     #7bd3b4;
  --red:          #42ae86;
  --red-deep:     #2b8767;
  --red-bright:   #63d6aa;

  --bg:           #FFFFFF;
  --bg-soft:      #eef6f2;
  --surface:      #FFFFFF;
  --surface-2:    #f6fbf9;
  --border:       #dee9e4;
  --border-strong:#c2d5cd;
  --fg:           #0d1a16;
  --fg-muted:     #4a5c55;
  --fg-dim:       #84968f;

  --grad-accent:  linear-gradient(115deg, #0e5943 0%, #1b8663 55%, #57c9a0 100%);
  --grad-cta:     linear-gradient(115deg, #42ae86 0%, #63d6aa 100%);
  --grad-text:    linear-gradient(100deg, #071c16 0%, #0e5943 45%, #2fa87f 100%);
  --grad-text-lt: linear-gradient(100deg, #FFFFFF 0%, #cdf0e2 45%, #8fe3c4 100%);
  --grad-soft:    linear-gradient(160deg, #FFFFFF, #eef6f2);
  --dot-grid:     radial-gradient(rgba(14,89,67,.10) 1.5px, transparent 1.6px);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Ombre a più livelli: un contatto ravvicinato + una diffusione ampia.
     Un'ombra sola resta sempre o troppo dura o troppo invisibile. */
  --shadow-sm: 0 1px 2px rgba(9,26,21,.07), 0 4px 12px rgba(9,26,21,.07);
  --shadow-md: 0 3px 6px rgba(9,26,21,.07), 0 16px 32px -10px rgba(9,26,21,.18);
  --shadow-lg: 0 6px 14px rgba(9,26,21,.09), 0 34px 64px -20px rgba(9,26,21,.26);
  --shadow-xl: 0 12px 26px rgba(9,26,21,.12), 0 56px 100px -28px rgba(9,26,21,.34);
  --glow:      0 4px 10px rgba(14,89,67,.22), 0 16px 34px -12px rgba(14,89,67,.5);
  --glow-red:  0 4px 10px rgba(66,174,134,.22), 0 16px 34px -12px rgba(66,174,134,.48);

  --font-display: "Sora", system-ui, -apple-system, sans-serif;
  --font-body:    "Public Sans", system-ui, -apple-system, sans-serif;
  --font-serif:   "Sora", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Il sito occupa lo schermo intero: nessun tetto alla larghezza, il respiro
     lo dà il margine laterale, che cresce con la finestra. Le colonne di testo
     restano leggibili perché sono i paragrafi ad avere un limite in caratteri
     (68ch), non il contenitore in pixel. */
  --container: 100%;
  --pad-x: clamp(1.15rem, 3.6vw, 5.5rem);
  --pad-y: clamp(4rem, 7vw, 8rem);
  --nav-h: 84px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------- reset --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + .18vw, 1.075rem);
  line-height: 1.68;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

::selection { background: rgba(14,89,67,.16); }

:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--red); color: #fff; padding: .9rem 1.4rem;
  border-radius: 0 0 var(--r-md) 0; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------ primitives --- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
/* Colonna di lettura più stretta DENTRO il contenitore, non al posto suo:
   applicare un max-width a .wrap la centrerebbe (ha margin-inline: auto),
   disallineandola dal resto della pagina. */
.narrow { max-width: 78rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-700);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 2rem; height: 2px;
  background: var(--grad-accent);
  border-radius: 2px;
}
.eyebrow.is-light { color: rgba(255,255,255,.9); }
.eyebrow.is-light::before { background: rgba(255,255,255,.75); }

/* L'accento non è un corsivo: il marchio OLTRAX è geometrico e squadrato, e un
   serif inclinato gli sarebbe estraneo. Qui la parte in evidenza cambia peso e
   spaziatura invece che famiglia, e prende il gradiente del marchio. */
.accent {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  letter-spacing: -.005em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .08em;
}
.accent.is-light { background: var(--grad-text-lt); -webkit-background-clip: text; background-clip: text; }

.lead {
  font-size: clamp(1.02rem, .96rem + .35vw, 1.22rem);
  line-height: 1.68;
  color: var(--fg-muted);
  max-width: 68ch;
}
.lead.is-light { color: rgba(255,255,255,.84); }

.prose > * + * { margin-top: 1.15rem; }
.prose p { color: var(--fg-muted); max-width: 68ch; }
.prose b, .prose strong { color: var(--fg); font-weight: 650; }
.prose a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 3px; }
.is-dark .prose p { color: rgba(255,255,255,.8); }
.is-dark .prose b, .is-dark .prose strong { color: #fff; }
.is-dark .prose a { color: #fff; }

/* --------------------------------------------------------------- glass --- */

.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--shadow-lg);
}
.glass--dark {
  background: rgba(7,28,22,.42);
  border-color: rgba(255,255,255,.18);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1.1rem;
  border-radius: var(--r-pill);
  font-size: .82rem;
  font-weight: 500;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
}
.pill--solid {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--navy-700);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: none;
}
.pill i {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--red-bright); font-style: normal; flex: none;
  box-shadow: 0 0 0 4px rgba(66,174,134,.22);
}

/* ------------------------------------------------------------- buttons --- */

.btn {
  position: relative;
  overflow: hidden;              /* contiene l'onda del click */
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.02rem 1.85rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
              background-color .3s var(--ease-out), color .3s var(--ease-out),
              border-color .3s var(--ease-out), filter .3s var(--ease-out);
}
.btn svg { flex: none; transition: transform .3s var(--ease-out); }
.btn:hover { transform: translateY(-3px); filter: saturate(112%); }
.btn:hover svg { transform: translateX(4px); }
/* Pressione: il bottone rientra e l'ombra si accorcia, come un tasto vero. */
.btn:active { transform: translateY(0) scale(.975); transition-duration: .09s; }

/* onda al click, disegnata da assets/js/gam.js */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,.45);
  pointer-events: none;
  animation: ripple .62s var(--ease-out) forwards;
}
.btn--light .ripple, .btn--outline .ripple { background: rgba(14,89,67,.22); }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

.btn--primary { background-image: var(--grad-cta); color: #fff; box-shadow: var(--glow-red); }
.btn--primary:hover { box-shadow: 0 8px 18px rgba(66,174,134,.3), 0 26px 50px -14px rgba(66,174,134,.55); }
.btn--primary:active { box-shadow: 0 2px 6px rgba(66,174,134,.34); }

.btn--navy { background-image: var(--grad-accent); color: #fff; box-shadow: var(--glow); }
.btn--navy:hover { box-shadow: 0 8px 18px rgba(14,89,67,.3), 0 26px 50px -14px rgba(14,89,67,.58); }
.btn--navy:active { box-shadow: 0 2px 6px rgba(14,89,67,.34); }

.btn--light { background: #fff; color: var(--navy-700); box-shadow: var(--shadow-md); }
.btn--light:hover { box-shadow: var(--shadow-xl); }
.btn--light:active { box-shadow: var(--shadow-sm); }

.btn--ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(10px); }
.btn--ghost:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.7); }

.btn--outline { background: transparent; color: var(--navy-700); border-color: var(--border-strong); }
.btn--outline:hover { border-color: var(--navy-700); background: var(--surface-2); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* --------------------------------------------------------- pannello ADR --- */
/* Badge documentale: il pannello arancio delle cisterne, in versione morbida. */

.adr {
  display: inline-grid;
  grid-template-rows: 1fr 1fr;
  width: 6.5rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, #FFB627, #F09000);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,.45);
  overflow: hidden;
  flex: none;
}
.adr span {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #241A00;
}
.adr span + span { border-top: 1.5px solid rgba(36,26,0,.55); }

/* -------------------------------------------------------------- topbar --- */

.topbar {
  background: var(--navy);
  color: rgba(255,255,255,.72);
  font-size: .82rem;
  position: relative;
  z-index: 70;
}
.topbar__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem 1.6rem;
  min-height: 2.6rem;
  padding-block: .45rem;
}
.topbar a { color: inherit; text-decoration: none; transition: color .25s var(--ease-out); }
.topbar a:hover { color: #fff; }
.topbar__k { color: rgba(255,255,255,.42); }
.topbar__end { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
@media (max-width: 860px) {
  .topbar__in { justify-content: center; font-size: .76rem; }
  .topbar__end { margin-left: 0; }
}

/* ----------------------------------------------------------------- nav --- */
/* Niente backdrop-filter su .nav: creerebbe un containing block per i figli
   position:fixed. Il pannello mobile è un fratello, non un discendente.      */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  /* Nessun bordo: occuperebbe 1px di altezza in più di --nav-h e lascerebbe
     scoperta una riga di sfondo sotto la barra superiore. La linea dello stato
     agganciato è disegnata con un'ombra interna, che non occupa spazio. */
  transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.nav.is-stuck {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-sm), inset 0 -1px 0 var(--border);
}

/* Sfumatura che raccorda la barra superiore alla foto dell'hero: senza,
   il navy si interrompe di netto. Sparisce quando la barra si aggancia. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  background: linear-gradient(180deg,
    var(--navy) 0%,
    rgba(7,28,22,.72) 26%,
    rgba(7,28,22,.34) 58%,
    transparent 100%);
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  transition: opacity .35s var(--ease-out);
}
.nav.is-stuck::before { opacity: 0; }

.nav__in { display: flex; align-items: center; gap: 1.5rem; min-height: var(--nav-h); }

/* Il marchio sta sopra la foto della hero senza pastiglia bianca: un
   rettangolo pieno lì è il punto più contrastato della pagina e ruba
   l'attenzione al titolo. Al suo posto un alone morbido, che stacca il logo
   dal fondo scuro quel tanto che basta a leggerlo. */
.nav__logo {
  position: relative;
  flex: none; display: grid; align-items: center;
  padding: .25rem 0;
  isolation: isolate;
}
.nav__logo-glow {
  position: absolute;
  inset: -55% -18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 42% 50%,
    rgba(5, 24, 18, .78) 0%,
    rgba(5, 24, 18, .42) 45%,
    transparent 74%);
  filter: blur(6px);
  opacity: 1;
  transition: opacity .35s var(--ease-out);
  pointer-events: none;
}
.nav.is-stuck .nav__logo-glow { opacity: 0; }

/* Le due versioni occupano la stessa cella della griglia e si scambiano in
   dissolvenza: nessun salto di larghezza quando la barra si aggancia. */
.nav__logo-img {
  grid-area: 1 / 1;
  transition: opacity .35s var(--ease-out);
}
.nav__logo-img--scuro  { opacity: 0; }
.nav.is-stuck .nav__logo-img--chiaro { opacity: 0; }
.nav.is-stuck .nav__logo-img--scuro  { opacity: 1; }

.nav__logo img { height: 2.95rem; width: auto; }   /* +18% sul precedente */

.nav__links {
  display: flex;
  align-items: center;
  gap: .2rem;
  margin: 0 auto 0 2rem;
  padding: 0;
  list-style: none;
}
.nav__links a {
  position: relative;
  /* Contesto di impilamento sulla voce: la scia può stare dietro al testo
     senza finire dietro allo sfondo della barra quando è agganciata. */
  isolation: isolate;
  display: block;
  padding: .6rem .95rem;
  font-family: var(--font-display);
  font-size: .97rem;
  font-weight: 500;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color .25s var(--ease-out);
}

/* Contrassegno della voce attiva: linea più scia sfumata che sale, come fumo
   sotto il testo. È un elemento reale, non uno pseudo, perché possa portare un
   `view-transition-name` e scivolare da una voce all'altra al cambio pagina. */
.nav__mark {
  position: absolute;
  left: 50%;
  bottom: .28rem;
  width: 1.5rem;
  height: 2px;
  z-index: -1;                 /* dietro al testo, davanti allo sfondo barra */
  border-radius: 2px;
  background-image: var(--grad-cta);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
.nav__mark::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 340%;
  height: 2.5rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%,
    rgba(66,174,134,.55) 0%,
    rgba(66,174,134,.20) 40%,
    rgba(66,174,134,0) 74%);
  filter: blur(5px);
}
.nav__links a:hover .nav__mark { opacity: .45; }
.nav__links a[aria-current="page"] .nav__mark {
  opacity: 1;
  /* Nome condiviso fra le pagine: il browser interpola la posizione, e il
     contrassegno scorre fino alla nuova voce mentre la pagina cambia. */
  view-transition-name: gam-navmark;
}
/* Su fondo bianco la stessa scia risulta più squillante: va smorzata. */
.nav.is-stuck .nav__links a[aria-current="page"] .nav__mark { opacity: .78; }
.nav__links a:hover { color: var(--navy-700); }
.nav__links a[aria-current="page"] { color: var(--navy-700); font-weight: 600; }

/* Il contrassegno scorre; il nav resta fermo. Curva propria, più lunga della
   dissolvenza, così il movimento si legge. */
::view-transition-group(gam-navmark) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.65, 0, .2, 1);
}
::view-transition-old(gam-navmark),
::view-transition-new(gam-navmark) { animation: none; }

/* Stato "sopra l'hero": la barra è trasparente, quindi testo chiaro. */
.nav:not(.is-stuck) .nav__links a { color: rgba(255,255,255,.82); }
.nav:not(.is-stuck) .nav__links a:hover,
.nav:not(.is-stuck) .nav__links a[aria-current="page"] { color: #fff; }
.nav:not(.is-stuck) .nav__tel { color: #fff; }
.nav:not(.is-stuck) .nav__tel svg { color: rgba(255,255,255,.7); }
.nav:not(.is-stuck) .nav__admin { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); }
.nav:not(.is-stuck) .nav__admin:hover { color: #fff; border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.14); }
.nav:not(.is-stuck) .nav__burger { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.nav:not(.is-stuck) .nav__burger i { background: #fff; }

.nav__end { display: flex; align-items: center; gap: 1rem; flex: none; }
.nav__tel {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; font-size: .95rem; color: var(--fg); text-decoration: none;
  font-family: var(--font-display);
}
.nav__tel svg { color: var(--navy-700); }
.nav__tel:hover { color: var(--navy-700); }
.nav__cta { padding: .8rem 1.5rem; font-size: .92rem; }
.nav__admin {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .62rem .95rem; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  font-size: .85rem; font-weight: 600; color: var(--fg-muted); text-decoration: none;
  font-family: var(--font-display);
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.nav__admin:hover { color: var(--navy-700); border-color: var(--navy-500); background: rgba(14,89,67,.05); }

.nav__burger {
  display: none;
  position: relative;
  width: 3rem; height: 3rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  flex: none;
}
.nav__burger i {
  position: absolute; left: 50%; top: 50%;
  width: 1.15rem; height: 2px; border-radius: 2px; background: var(--fg);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
.nav__burger i:nth-child(1) { transform: translate(-50%, calc(-50% - 5px)); }
.nav__burger i:nth-child(3) { transform: translate(-50%, calc(-50% + 5px)); }
.nav__burger[aria-expanded="true"] i:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] i:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav__links, .nav__tel { display: none; }
  .nav__burger { display: block; }
  .nav__links { margin: 0; }
  .nav__end { margin-left: auto; }
}
@media (max-width: 620px) {
  .nav__cta { display: none; }
  .nav__admin span { display: none; }
}

/* pannello mobile — fratello di .nav, mai discendente */
.mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
.mobilemenu.is-open { opacity: 1; pointer-events: auto; }
.mobilemenu__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); }
.mobilemenu__top img { height: 2.7rem; width: auto; }
.mobilemenu__close {
  position: relative;
  width: 3rem; height: 3rem; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: #fff; cursor: pointer;
}
.mobilemenu__close i {
  position: absolute; left: 50%; top: 50%;
  width: 1.15rem; height: 2px; border-radius: 2px; background: var(--fg);
}
.mobilemenu__close i:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.mobilemenu__close i:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.mobilemenu__body { overflow-y: auto; padding-bottom: 2.5rem; }
.mobilemenu ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.mobilemenu li { opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.mobilemenu.is-open li { opacity: 1; transform: none; }
.mobilemenu a.mobilemenu__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .78rem .25rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  color: var(--fg); text-decoration: none;
}
.mobilemenu a.mobilemenu__link[aria-current="page"] { color: var(--navy-700); }
.mobilemenu a.mobilemenu__link svg { color: var(--fg-dim); }
.mobilemenu__actions { display: grid; gap: .6rem; margin-top: 1.4rem; }
.mobilemenu__actions .btn { padding: .82rem 1.4rem; font-size: .92rem; }
.mobilemenu__meta { margin-top: 1.4rem; display: grid; gap: .35rem; font-size: .88rem; color: var(--fg-muted); }
.mobilemenu__meta a { color: var(--navy-700); text-decoration: none; font-weight: 600; }

/* ---------------------------------------------------------------- hero --- */

/* flow-root impedisce il collasso dei margini: senza, il margine negativo
   dell'hero sposterebbe <main> invece di far scorrere l'hero sotto la nav. */
main { display: flow-root; }

.hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  overflow: hidden;
  margin-top: calc(var(--nav-h) * -1);
  padding-top: var(--nav-h);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img,
.hero__bg video { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* Il video di sfondo è decorativo: se il sistema chiede meno movimento
   resta il fermo immagine del poster. */
.hero__bg video { display: block; }
.hero__poster { display: none; }
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(108deg, rgba(4,16,13,.90) 0%, rgba(6,24,19,.62) 42%, rgba(14,89,67,.20) 100%),
    linear-gradient(180deg, rgba(4,16,13,.40) 0%, rgba(4,16,13,0) 32%, rgba(4,16,13,.62) 100%);
}
/* alone luminoso in alto a destra, dà profondità al vetro */
.hero::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 44rem; height: 44rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87,201,160,.26) 0%, transparent 68%);
  z-index: -1;
  pointer-events: none;
}

.hero__in { padding-block: clamp(3.5rem, 7vw, 7rem) clamp(3rem, 5vw, 5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 1080px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 {
  font-size: clamp(2.7rem, 1.6rem + 4.6vw, 6.2rem);
  line-height: .98;
  margin: 1.4rem 0 0;
}
.hero h1 .accent { display: block; font-size: .92em; line-height: 1.1; margin-top: .12em; }
.hero .lead { margin-top: 1.6rem; }
.hero .btn-row { margin-top: 2.2rem; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: .6rem 1.75rem;
  margin-top: 2.5rem;
  font-size: .9rem; color: rgba(255,255,255,.7);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .5rem; }
.hero__meta svg { color: rgba(255,255,255,.55); }

/* card in vetro */
.herocard {
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 2.2vw, 2.1rem);
  display: grid;
  gap: 1.4rem;
}
.herocard__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.herocard__logo {
  background: #fff; border-radius: var(--r-md); padding: .7rem .85rem;
  box-shadow: var(--shadow-sm);
}
.herocard__logo img { height: 2.1rem; width: auto; }
.herocard h2 { font-size: 1.35rem; color: #fff; letter-spacing: -.02em; }
.herocard p { color: rgba(255,255,255,.72); font-size: .95rem; margin-top: .2rem; }
.herocard__note {
  display: flex; align-items: center; gap: .6rem;
  padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.16);
  font-size: .86rem; color: rgba(255,255,255,.72);
}
.herocard__note svg { color: var(--navy-300); flex: none; }
.herocard__adr { display: flex; align-items: center; gap: 1rem; }
.herocard__adr p { font-size: .78rem; line-height: 1.5; color: rgba(255,255,255,.6); margin: 0; }

/* barra statistiche */
.statbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
}
.statbar > div { padding: 1.35rem 1.4rem; background: rgba(7,28,22,.34); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.statbar b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.15rem);
  font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1;
}
.statbar b em { font-style: normal; font-size: .5em; font-weight: 600; color: var(--navy-300); margin-left: .25em; }
/* Figlio diretto: altrimenti colpirebbe anche lo span del contatore dentro <b>. */
.statbar > div > span { display: block; margin-top: .5rem; font-size: .82rem; line-height: 1.4; color: rgba(255,255,255,.66); }
@media (max-width: 1080px) { .statbar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .statbar { grid-template-columns: repeat(2, 1fr); } }

/* testata pagine interne */
.pagehead {
  position: relative; isolation: isolate; color: #fff; overflow: hidden;
  margin-top: calc(var(--nav-h) * -1); padding-top: var(--nav-h);
}
.pagehead__bg { position: absolute; inset: 0; z-index: -2; }
.pagehead__bg img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(112deg, rgba(5,20,16,.94) 0%, rgba(7,28,22,.85) 48%, rgba(14,89,67,.6) 100%),
    linear-gradient(180deg, rgba(5,20,16,.5) 0%, rgba(5,20,16,.12) 40%, rgba(5,20,16,.6) 100%);
}
.pagehead__in { padding-block: clamp(3rem, 6vw, 6rem) clamp(3rem, 5vw, 5rem); }
/* Il limite di larghezza sta qui, non su .wrap: così il testo parte dallo
   stesso bordo sinistro del contenuto delle sezioni sottostanti. */
.pagehead__copy { max-width: 68rem; }
.pagehead h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.6rem); line-height: 1.02; margin-bottom: 1.3rem; }
.pagehead h1 .accent { display: block; font-size: .95em; }
.crumb { font-size: .84rem; color: rgba(255,255,255,.6); margin-bottom: 1.4rem; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: #fff; }

/* ------------------------------------------------------------ sections --- */

.section { padding-block: var(--pad-y); position: relative; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--navy); color: #fff; }
.section--grad { background-image: var(--grad-accent); color: #fff; }
.section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }

/* trama a pallini, appena percettibile */
.section--dots::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--dot-grid);
  background-size: 30px 30px;
  opacity: .5;
  pointer-events: none;
}
.section > .wrap { position: relative; }

.sechead { max-width: 68rem; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.sechead h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem); margin-bottom: 1.1rem; }
.sechead h2 .accent { font-size: 1.02em; }
.sechead--center { margin-inline: auto; text-align: center; }
.sechead--center .eyebrow { justify-content: center; }
.section--dark h2, .section--grad h2 { color: #fff; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 4.5vw, 5.5rem);
  align-items: center;
}
.split--top { align-items: start; }
.split--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
@media (max-width: 980px) { .split, .split--wide { grid-template-columns: 1fr; } }

.media {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.media--wide img { aspect-ratio: 4 / 3; }
.media--tall img { aspect-ratio: 4 / 5; }

/* --------------------------------------------------------------- cards --- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(1.1rem, 1.6vw, 1.75rem);
}
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .cards--3, .cards--4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* L'ombra fa il lavoro che prima faceva il bordo: staccare la scheda dal
     fondo. Un bordo grigio attorno a una fotografia si legge come una riga
     nera sul bordo dell'immagine, che è il difetto che si vedeva. */
  box-shadow: var(--shadow-lg);
  -webkit-tap-highlight-color: transparent;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.card:active { transform: translateY(-3px) scale(.992); box-shadow: var(--shadow-md); transition-duration: .11s; }
/* Quadrata. Le foto arrivano dal telefono, quindi verticali: in un riquadro
   16/10 restavano bande di fondo ai lati, e il ritaglio tagliava la cabina.
   Il quadrato è il solo rapporto che regge sia i verticali sia gli orizzontali
   senza scelte diverse foto per foto. */
.card__img { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg-soft); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.card:hover .card__img img { transform: scale(1.06); }
.card__img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(5,20,16,.55) 100%);
  opacity: 0; transition: opacity .45s var(--ease-out);
}
.card:hover .card__img::after { opacity: 1; }
.card__tag {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  padding: .4rem .85rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--navy-700);
  box-shadow: var(--shadow-sm);
}
.card__body { padding: 1.6rem 1.65rem 1.8rem; display: flex; flex-direction: column; flex: 1; gap: .6rem; }
.card__body h3 { font-size: 1.32rem; }
.card__body p { color: var(--fg-muted); font-size: .96rem; }
.card__go {
  margin-top: auto; padding-top: 1.1rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: .9rem; font-weight: 600; color: var(--navy-700);
}
.card__go svg { transition: transform .3s var(--ease-out); }
.card:hover .card__go svg { transform: translateX(4px); }

/* card informativa (certificazioni, sedi) */
.icard {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 1.75rem 1.65rem;
  display: grid;
  gap: .55rem;
  align-content: start;
  box-shadow: var(--shadow-md);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.icard:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
/* Sui fondi scuri l'ombra non si vede: lì il distacco lo dà una linea chiara. */
.is-dark .icard { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.14); box-shadow: none; }
.is-dark .icard:hover { background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.22); }
.icard h3 { font-size: 1.22rem; }
.icard p { color: var(--fg-muted); font-size: .93rem; }
.icard__tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); margin-bottom: .1rem;
}
/* Pastiglia con icona, per le schede senza etichetta testuale. */
.icard__ico {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border-radius: var(--r-md); background-image: var(--grad-accent); color: #fff;
  box-shadow: var(--glow); margin-bottom: .6rem;
}
.section--dark .icard__ico, .section--grad .icard__ico {
  background: rgba(255,255,255,.14); box-shadow: none;
}
.section--dark .icard, .section--grad .icard {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: none;
}
.section--dark .icard h3, .section--grad .icard h3 { color: #fff; }
.section--dark .icard p, .section--grad .icard p { color: rgba(255,255,255,.74); }
.section--dark .icard__tag, .section--grad .icard__tag { color: var(--navy-300); }
.section--grad .icard__tag { color: rgba(255,255,255,.75); }
.section--dark .icard:hover, .section--grad .icard:hover { background: rgba(255,255,255,.12); }

/* ------------------------------------------------------------ contatori --- */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: clamp(1rem, 1.4vw, 1.5rem);
}
/* Sei voci: due file da tre, invece di una fila da cinque più un orfano. */
.kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpis--3 { grid-template-columns: 1fr; } }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-md);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.kpi:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.kpi b {
  display: flex; align-items: baseline; gap: .3rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.1vw, 2.35rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kpi b em {
  font-style: normal; font-size: .48em; font-weight: 600; letter-spacing: -.01em;
  -webkit-text-fill-color: var(--fg-muted); color: var(--fg-muted);
}
/* Figlio diretto: altrimenti colpisce anche lo span del contatore dentro <b>. */
.kpi > span { display: block; margin-top: .7rem; font-size: .88rem; line-height: 1.45; color: var(--fg-muted); }

/* ------------------------------------------------------------ liste/spec --- */

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.ticks li { display: flex; gap: .9rem; padding: .72rem 0; border-bottom: 1px solid var(--border); font-size: .98rem; }
.ticks li:last-child { border-bottom: 0; }
.ticks li b, .ticks li strong { font-weight: 650; }
.ticks svg { flex: none; margin-top: .3rem; color: var(--red); }
.is-dark .ticks li { border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.82); }
.is-dark .ticks svg { color: var(--navy-300); }
.is-dark .ticks li b, .is-dark .ticks li strong { color: #fff; }

.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem;
  padding: .85rem 0; border-bottom: 1px solid var(--border);
}
.facts li:first-child { border-top: 1px solid var(--border); }
.facts .k { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); }
.facts .v { font-weight: 600; text-align: right; font-family: var(--font-display); }
.is-dark .facts li { border-color: rgba(255,255,255,.14); }
.is-dark .facts .k { color: rgba(255,255,255,.55); }
.is-dark .facts .v { color: #fff; }
@media (max-width: 520px) {
  .facts li { flex-direction: column; gap: .15rem; }
  .facts .v { text-align: left; }
}

.note {
  font-size: .9rem; line-height: 1.6; color: var(--fg-muted);
  padding: 1rem 1.15rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.note a { color: var(--navy-700); font-weight: 600; }
.is-dark .note { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.78); }

/* ------------------------------------------------------ righe merceologie --- */

.spec { display: grid; gap: clamp(2rem, 3.5vw, 4rem); align-items: center; scroll-margin-top: 7rem; }
.spec + .spec { margin-top: clamp(3rem, 5vw, 5.5rem); }
.spec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.spec--flip .spec__media { order: 2; }
@media (max-width: 980px) {
  .spec { grid-template-columns: 1fr; }
  .spec--flip .spec__media { order: 0; }
}
.spec h3 { font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.5rem); margin-bottom: .9rem; }
.spec__desc { color: var(--fg-muted); margin-bottom: 1.5rem; max-width: 56ch; }

/* diagramma scomparti */
.compart { margin: 1.5rem 0; }
.compart__bar {
  display: flex; height: 3.2rem;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 2px 6px rgba(9,26,21,.06);
}
.compart__bar i {
  flex: 1; display: grid; place-items: center; font-style: normal;
  font-family: var(--font-display); font-size: .8rem; font-weight: 600; color: var(--fg-dim);
  border-right: 1px solid var(--border-strong);
}
.compart__bar i:last-child { border-right: 0; }
.compart__cap {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .7rem; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-dim);
}

/* ----------------------------------------------------------- timeline --- */

.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before {
  content: ""; position: absolute; left: 4.4rem; top: .6rem; bottom: .6rem;
  width: 2px; background: linear-gradient(180deg, var(--navy-500), transparent);
  opacity: .3;
}
.tl li { position: relative; display: grid; grid-template-columns: 3.6rem 1fr; gap: 2rem; padding: .9rem 0 1.5rem; }
.tl b {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; color: var(--navy-700);
  position: relative; z-index: 1;
}
.tl li::after {
  content: ""; position: absolute; left: 4.1rem; top: 1.15rem;
  width: .65rem; height: .65rem; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 4px rgba(66,174,134,.16);
}
.tl p { color: var(--fg-muted); font-size: .98rem; }
.tl p b { color: var(--fg); font-size: inherit; }
@media (max-width: 560px) {
  .tl::before, .tl li::after { display: none; }
  .tl li { grid-template-columns: 1fr; gap: .3rem; }
}

/* ------------------------------------------------------------- citazione --- */

.quote {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 2rem); line-height: 1.35; color: #fff;
}
.quote cite { display: block; margin-top: 1.2rem; font-style: normal; font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-300); }

/* ------------------------------------------------------------- download --- */

.docgroup + .docgroup { margin-top: clamp(2.5rem, 4vw, 4rem); }
.docgroup__head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem;
  padding-bottom: 1rem; margin-bottom: .5rem;
  border-bottom: 2px solid var(--border-strong);
}
.docgroup__head h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.9rem); }
.docgroup__head span { font-size: .86rem; color: var(--fg-dim); }

.doc {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) auto;
  align-items: center; gap: 1.35rem;
  padding: 1.05rem 1rem;
  margin-inline: -1rem;
  border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--border);
  transition: background-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.doc:hover { background: var(--surface); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.doc__code {
  display: grid; place-items: center;
  padding: .45rem .3rem; border-radius: var(--r-sm);
  background-image: var(--grad-accent);
  font-family: var(--font-display); font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: #fff;
  box-shadow: var(--shadow-sm);
}
.doc__code[data-k="SQAS"], .doc__code[data-k="ECD"] { background-image: linear-gradient(115deg,#F09000,#FFB627); color: #241A00; }
.doc__code[data-k="UE"], .doc__code[data-k="DE"], .doc__code[data-k="RSM"] { background-image: var(--grad-cta); }
.doc__name { font-weight: 600; font-size: 1rem; font-family: var(--font-display); }
.doc__meta { display: block; margin-top: .15rem; font-family: var(--font-body); font-size: .86rem; font-weight: 400; color: var(--fg-muted); }
.doc__get { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--navy-700); flex: none; }
.doc:hover .doc__get { color: var(--red); }
.doc__get svg { transition: transform .3s var(--ease-out); }
.doc:hover .doc__get svg { transform: translateY(2px); }
@media (max-width: 720px) {
  .doc { grid-template-columns: 3.8rem minmax(0, 1fr); gap: 1rem; }
  .doc__get { grid-column: 2; justify-self: start; }
}

/* ------------------------------------------------------------- contatti --- */

.dept {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1fr);
  align-items: center; gap: .6rem 1.5rem;
  padding: 1.05rem 1rem;
  margin-inline: -1rem;
  border-radius: var(--r-md);
  border-bottom: 1px solid var(--border);
  transition: background-color .3s var(--ease-out);
}
.dept:hover { background: var(--surface); }
.dept__name { font-family: var(--font-display); font-weight: 600; }
.dept a, .dept span.dept__v { font-size: .95rem; color: var(--fg-muted); text-decoration: none; word-break: break-word; }
.dept a:hover { color: var(--red); }
@media (max-width: 820px) { .dept { grid-template-columns: 1fr; gap: .2rem; } }

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.form label { display: block; font-size: .82rem; font-weight: 600; color: var(--fg-muted); margin-bottom: .45rem; }
.form input, .form textarea, .form select {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem; color: var(--fg);
  background: rgba(255,255,255,.9);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: .95rem 1.1rem;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.form textarea { min-height: 9.5rem; resize: vertical; }
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--navy-500);
  box-shadow: 0 0 0 4px rgba(27,134,99,.15);
}
.is-dark .form label { color: rgba(255,255,255,.72); }
.is-dark .form input, .is-dark .form textarea {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff;
}
.is-dark .form input::placeholder, .is-dark .form textarea::placeholder { color: rgba(255,255,255,.4); }

.alert { padding: 1rem 1.2rem; border-radius: var(--r-md); font-size: .95rem; }
.alert--ok { background: rgba(31,157,107,.12); border: 1px solid rgba(31,157,107,.4); color: #0d6b47; }
.alert--err { background: rgba(43,135,103,.1); border: 1px solid rgba(43,135,103,.4); color: #1f6b52; }
.is-dark .alert--ok { background: rgba(31,157,107,.2); color: #9df0cd; }
.is-dark .alert--err { background: rgba(99,214,170,.16); color: #b9f0da; }

/* -------------------------------------------------------------- partner --- */

.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2rem, 5vw, 4.5rem); }
.partners img { height: 3.4rem; width: auto; opacity: .85; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.partners a:hover img, .partners img:hover { opacity: 1; transform: translateY(-3px); }

/* ------------------------------------------------------------ cta band --- */

.ctaband { position: relative; overflow: hidden; }
.ctaband__in {
  position: relative;
  margin-block: 0;
  border-radius: var(--r-xl);
  background-image: var(--grad-accent);
  color: #fff;
  padding: clamp(2.5rem, 4.5vw, 4.5rem) clamp(1.5rem, 3.5vw, 4rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
  box-shadow: var(--glow);
  isolation: isolate;
}
.ctaband__in::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* Senza `border-radius: inherit` questo riquadro resta squadrato e il suo
     rosso spunta oltre gli angoli arrotondati del riquadro che sta sotto. */
  border-radius: inherit;
  background: radial-gradient(circle at 82% 18%, rgba(99,214,170,.5) 0%, transparent 58%);
}
.ctaband h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.9rem); color: #fff; max-width: 24ch; }
.ctaband p { margin-top: .9rem; color: rgba(255,255,255,.8); max-width: 52ch; }

/* --------------------------------------------------------------- footer --- */

.footer { background: var(--navy); color: rgba(255,255,255,.68); position: relative; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--dot-grid); background-size: 30px 30px; opacity: .25; pointer-events: none;
}
.footer__in { position: relative; padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3.5rem);
}
@media (max-width: 980px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
/* Come nella barra: niente rettangolo bianco sul fondo scuro, solo un alone.
   Qui il marchio usato è la versione chiara (vedi inc/footer.php), quindi
   l'alone serve a staccarlo, non a renderlo leggibile. */
.footer__logo {
  position: relative;
  display: inline-block;
  padding: .35rem .2rem;
  margin-bottom: 1.4rem;
  isolation: isolate;
}
.footer__logo::before {
  content: "";
  position: absolute; inset: -46% -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(58% 58% at 44% 50%, rgba(255,255,255,.12) 0%, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}
.footer__logo img { height: 2.95rem; width: auto; }
.footer h4 { font-family: var(--font-display); font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1.15rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer a { color: rgba(255,255,255,.68); text-decoration: none; font-size: .95rem; transition: color .25s var(--ease-out); }
.footer a:hover { color: #fff; }
.footer address { font-style: normal; font-size: .95rem; line-height: 1.8; }
/* Tre colonne di uguale larghezza: così il copyright resta davvero centrato
   nella pagina, non solo fra i due elementi che lo affiancano. */
.footer__bar {
  margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .9rem 1.5rem;
  font-size: .85rem; color: rgba(255,255,255,.48);
}
.footer__bar-l { justify-self: start; }
.footer__bar-c { justify-self: center; text-align: center; }
/* I pulsanti flottanti stanno in basso a destra: lascio spazio, altrimenti
   coprirebbero l'interruttore. */
.footer__bar-r { justify-self: end; padding-right: 4.4rem; }
@media (max-width: 820px) { .footer__bar-r { padding-right: 0; } }

.powered {
  display: inline-flex; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.55); text-decoration: none; font-size: .85rem;
  transition: color .25s var(--ease-out);
}
.powered:hover { color: #fff; }
.powered svg { opacity: .7; }

@media (max-width: 820px) {
  .footer__bar { grid-template-columns: 1fr; text-align: center; }
  .footer__bar-l, .footer__bar-c, .footer__bar-r { justify-self: center; }
}

/* Interruttore del movimento: permette di forzare le animazioni anche quando
   il sistema chiede di ridurle, e viceversa. La scelta resta nel browser. */
.motiontoggle {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .85rem .4rem .55rem;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.62);
  font-family: var(--font-body); font-size: .78rem; font-weight: 500;
  cursor: pointer;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.motiontoggle:hover { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12); }
.motiontoggle__dot {
  width: 1.9rem; height: 1.05rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.22); position: relative; flex: none;
  transition: background-color .25s var(--ease-out);
}
.motiontoggle__dot::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: .8rem; height: .8rem; border-radius: 50%; background: #fff;
  transition: transform .25s var(--ease-out);
}
.motiontoggle[aria-pressed="true"] .motiontoggle__dot { background: var(--red); }
.motiontoggle[aria-pressed="true"] .motiontoggle__dot::after { transform: translateX(.85rem); }

/* --------------------------------------------------------- scroll to top --- */

/* Pila di pulsanti flottanti in basso a destra: torna-su sopra, Admin sotto.
   Il torna-su occupa sempre il suo spazio, così Admin non si sposta mai. */
.fab {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.fab__btn {
  position: relative;
  width: 3.2rem; height: 3.2rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), opacity .35s var(--ease-out);
}
.fab__btn:hover { transform: translateY(-3px) scale(1.05); }
.fab__btn:active { transform: translateY(0) scale(.93); transition-duration: .09s; }

.totop { background-image: var(--grad-accent); color: #fff; box-shadow: var(--glow); }
.totop:hover { box-shadow: 0 8px 18px rgba(14,89,67,.3), 0 26px 50px -14px rgba(14,89,67,.58); }
.totop { opacity: 0; pointer-events: none; transform: translateY(10px) scale(.85); }
.totop.is-on { opacity: 1; pointer-events: auto; transform: none; }

.fabadmin {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--border);
  color: var(--navy-700);
  box-shadow: var(--shadow-lg);
}
.fabadmin:hover { color: var(--red); box-shadow: var(--shadow-xl); }

/* Etichetta che scorre fuori all'hover */
.fab__tip {
  position: absolute;
  right: calc(100% + .6rem);
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  padding: .45rem .8rem;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.fab__btn:hover .fab__tip,
.fab__btn:focus-visible .fab__tip { opacity: 1; transform: none; }
@media (max-width: 640px) { .fab__tip { display: none; } }

/* ------------------------------------------------------------ preloader --- */
/* Interamente in CSS: se il JavaScript non parte, l'animazione finisce
   comunque e il velo sparisce da solo. Nessuna schermata bloccata. */

.pre { display: none; }

.preload .pre {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--bg);
  animation: preOut .6s var(--ease-out) var(--pre-ms, 5000ms) forwards;
}
.pre__logo { position: relative; width: min(52vw, 21rem); }
.pre__logo img { width: 100%; height: auto; display: block; }

/* Copia spenta sotto, copia a colori sopra che si scopre da sinistra. */
.pre__grey { filter: grayscale(1) contrast(.8) opacity(.26); }
.pre__color {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0);
}
.preload .pre__color { animation: preFill var(--pre-ms, 5000ms) cubic-bezier(.5, 0, .2, 1) forwards; }

@keyframes preFill { to { clip-path: inset(0 0 0 0); } }
@keyframes preOut  { to { opacity: 0; visibility: hidden; } }

/* Il contenuto entra mentre il velo si dissolve, non prima. */
.preload body,
.preload main { animation-delay: var(--pre-ms, 5000ms); }

/* Chi chiede meno movimento non merita cinque secondi di attesa. */
html.motion-off.preload .pre { animation-delay: 500ms; }
html.motion-off.preload .pre__color { animation-duration: 500ms; }
html.motion-off.preload body,
html.motion-off.preload main { animation-delay: 0ms; }

/* ------------------------------------------------------ ricerca globale --- */

.nav__search {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .62rem 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: #fff;
  font-family: var(--font-display); font-size: .9rem; font-weight: 500; color: var(--fg-muted);
  cursor: pointer;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.nav__search:hover { color: var(--navy-700); border-color: var(--navy-500); }
.nav:not(.is-stuck) .nav__search {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.88);
}
.nav:not(.is-stuck) .nav__search:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.65); color: #fff; }
@media (max-width: 1180px) { .nav__search { display: none; } }

.srch { position: fixed; inset: 0; z-index: 90; }
.srch[hidden] { display: none; }
.srch__bg {
  position: absolute; inset: 0;
  background: rgba(5,20,16,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.srch.is-open .srch__bg { opacity: 1; }

.srch__box {
  position: relative;
  width: min(46rem, calc(100% - 2rem));
  margin: clamp(3rem, 10vh, 7rem) auto 0;
  max-height: min(70vh, 40rem);
  display: grid; grid-template-rows: auto 1fr auto;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  opacity: 0; transform: translateY(-14px) scale(.98);
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
}
.srch.is-open .srch__box { opacity: 1; transform: none; }

.srch__top { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--border); }
.srch__ico { color: var(--navy-700); flex: none; display: grid; place-items: center; }
.srch__input {
  flex: 1; border: 0; background: none; outline: none;
  font-family: var(--font-display); font-size: 1.18rem; font-weight: 500; color: var(--fg);
}
.srch__input::placeholder { color: var(--fg-dim); font-weight: 400; }
.srch__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.srch__close {
  flex: none; padding: .3rem .6rem; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface-2);
  font: 600 .74rem/1 var(--font-body); color: var(--fg-dim); cursor: pointer;
}
.srch__close:hover { color: var(--red); border-color: var(--red); }

.srch__body { overflow-y: auto; padding: .6rem; }
.srch__hint, .srch__empty { padding: 1.6rem 1rem; text-align: center; color: var(--fg-muted); font-size: .93rem; }
.srch__hint b { color: var(--navy-700); font-weight: 600; }
.srch__empty b { color: var(--fg); }

.srch__it {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: .9rem;
  padding: .8rem .9rem; border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: background-color .18s var(--ease-out);
}
.srch__it:hover, .srch__it.is-sel { background: rgba(14,89,67,.08); }
.srch__it.is-sel { outline: 2px solid rgba(14,89,67,.25); outline-offset: -2px; }
.srch__pg {
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background-image: var(--grad-accent); padding: .3rem .5rem; border-radius: var(--r-sm);
}
.srch__t { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.srch__s { display: block; margin-top: .1rem; font-size: .84rem; color: var(--fg-muted); line-height: 1.45; }
.srch__it mark { background: rgba(240,162,2,.32); color: inherit; border-radius: 3px; padding: 0 .1em; }
.srch__go { color: var(--fg-dim); flex: none; }
.srch__it:hover .srch__go, .srch__it.is-sel .srch__go { color: var(--navy-700); }

.srch__foot {
  padding: .7rem 1.3rem; border-top: 1px solid var(--border);
  font-size: .76rem; color: var(--fg-dim);
}
.srch__foot kbd {
  display: inline-block; min-width: 1.35rem; text-align: center;
  padding: .12rem .3rem; margin-right: .15rem;
  border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px;
  background: #fff; font: 600 .72rem/1.3 var(--font-body); color: var(--fg-muted);
}
@media (max-width: 600px) { .srch__foot { display: none; } .srch__box { margin-top: 1rem; max-height: 82vh; } }

/* ------------------------------------------------- transizioni di pagina --- */
/*
 * Nessuna dissolvenza in uscita: sbiadire la pagina che se ne va scoprirebbe
 * lo sfondo bianco del documento, ed è esattamente il lampo da eliminare. Il
 * browser tiene a video la pagina vecchia finché la nuova non ha disegnato.
 *
 * Dove ci sono le View Transitions il passaggio è una vera sovrapposizione fra
 * i due documenti, con le barre in alto ferme. Altrove resta la sola entrata.
 */

@view-transition { navigation: auto; }

@keyframes pageIn    { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes contentIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Ripiego per i browser senza View Transitions: entra solo la pagina nuova.
   Solo <main> trasla: mobile menu e pulsanti flottanti stanno fuori, quindi
   il transform non crea per loro un containing block. */
.js:not(.has-vt) body { animation: pageIn .22s var(--ease-out) both; }
.js:not(.has-vt) main { animation: contentIn .36s var(--ease-out) both; }

/*
 * Dissolvenza senza lampi.
 *
 * Il comportamento predefinito sovrappone le due schermate con `plus-lighter`,
 * che somma i colori: a metà corsa il risultato è più chiaro di entrambe. Con
 * `normal` invece l'opacità complessiva scenderebbe sotto 1 e trasparirebbe il
 * fondo. Entrambe le strade producono un lampo.
 *
 * Qui la schermata nuova sta sotto, già completamente opaca, e la vecchia le
 * sfuma sopra. Sotto non c'è mai un buco, sopra non si somma nulla: la
 * copertura resta piena dal primo all'ultimo fotogramma.
 */

@keyframes gamVtOut { from { opacity: 1; } to { opacity: 0; } }

::view-transition-image-pair(*) { isolation: auto; }

::view-transition-old(*) {
  animation: gamVtOut .46s cubic-bezier(.4, 0, .2, 1) both;
  mix-blend-mode: normal;
  z-index: 1;
}
::view-transition-new(*) {
  animation: none;
  opacity: 1;
  mix-blend-mode: normal;
  z-index: 0;
}

/*
 * Header immobile.
 *
 * Le due pagine partono da scorrimenti diversi: su quella che si lascia la
 * barra superiore è già uscita dallo schermo e il menu sta in cima, su quella
 * che arriva la barra torna visibile e spinge il menu più in basso.
 *
 * Lasciandole nella dissolvenza generale si vedono due header sovrapposti a
 * quote diverse; dandogli un nome e basta, il browser interpola fra le due
 * posizioni e l'header scivola. Con il gruppo bloccato il riquadro si piazza
 * subito dove starà nella pagina nuova, e lì dentro il vecchio sfuma nel
 * nuovo: una sola posizione, nessuno scatto.
 */
.topbar { view-transition-name: gam-topbar; }
.nav    { view-transition-name: gam-nav; }

::view-transition-group(gam-topbar),
::view-transition-group(gam-nav) { animation: none; }


/* --------------------------------------------------------------- motion --- */

.js [data-rv] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-rv].is-in { opacity: 1; transform: none; }

.js [data-rv="scale"] { transform: translateY(26px) scale(.97); }
.js [data-rv="scale"].is-in { transform: none; }

.js [data-rv="left"]  { transform: translateX(-30px); }
.js [data-rv="right"] { transform: translateX(30px); }
.js [data-rv="left"].is-in, .js [data-rv="right"].is-in { transform: none; }

/* Chi chiede meno movimento perde gli spostamenti, non il feedback:
   colore, ombra e opacità restano, così i pulsanti rispondono ancora. */
/* ------------------------------------------------- movimento ridotto --- */
/* Ridurre, non spegnere. Gli spostamenti ampi — parallasse, scorrimento
   guidato, traslazioni, scala — sono ciò che dà fastidio a chi soffre di
   disturbi vestibolari. Le dissolvenze no: restano, così il sito continua a
   sembrare curato invece che rotto. La classe è decisa nello <head>.       */

html.motion-off { scroll-behavior: auto; }

html.motion-off *, html.motion-off *::before, html.motion-off *::after {
  transition-property: color, background-color, border-color, box-shadow, opacity, filter, fill, stroke !important;
  transition-duration: .22s !important;
}

/* Il preloader è l'unica animazione che deve continuare a scorrere. */
html.motion-off .pre, html.motion-off .pre__color { transition-property: all !important; }

html.motion-off .js [data-rv],
html.motion-off [data-rv] { opacity: 1 !important; transform: none !important; }

html.motion-off .hero__bg video { display: none; }
html.motion-off .hero__bg .hero__poster { display: block; }
html.motion-off .hero__bg img { transform: scale(1.05) !important; }

html.motion-off .btn .ripple { display: none; }
html.motion-off .btn:hover, html.motion-off .card:hover,
html.motion-off .icard:hover, html.motion-off .kpi:hover,
html.motion-off .fab__btn:hover { transform: none !important; }

/* Le transizioni di pagina restano, ma solo in dissolvenza: niente scorrimento. */
html.motion-off:not(.has-vt) main { animation-name: pageIn !important; animation-duration: .3s !important; }
html.motion-off::view-transition-old(root),
html.motion-off::view-transition-new(root) { animation-duration: .18s; }

/* Lo scorrimento nativo va spento quando la pagina è guidata dal momentum,
   altrimenti i due sistemi si contendono la posizione. */
html.has-momentum { scroll-behavior: auto; }

/* --------------------------------------------------------------- utils --- */

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.75rem; }
.mt-3 { margin-top: 2.5rem; }
.mb-2 { margin-bottom: 1.75rem; }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================== consenso === */
/* Striscia in basso, non pannello a schermo pieno: il contenuto resta leggibile
   mentre si sceglie. Nessuna categoria facoltativa è preselezionata.          */

.ck { position: fixed; inset: auto 0 0 0; z-index: 95; }
.ck[hidden] { display: none; }

.ck__bar {
  margin: 0 auto; max-width: 74rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.05rem, 2vw, 1.5rem) clamp(1.2rem, 3vw, 2rem);
  margin-inline: clamp(.7rem, 2vw, 1.5rem);
  margin-bottom: clamp(.7rem, 2vw, 1.5rem);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -22px rgba(7,28,22,.4), 0 2px 0 rgba(255,255,255,.7) inset;
  transform: translateY(130%);
  transition: transform .45s var(--ease-out);
}
.ck.is-in .ck__bar { transform: none; }
@media (max-width: 860px) { .ck__bar { grid-template-columns: 1fr; } }

.ck__t { font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.02rem; color: var(--fg); }
.ck__d { margin-top: .35rem; font-size: .92rem; line-height: 1.6; color: var(--fg-muted); }
.ck__d a { color: var(--navy-700); font-weight: 600; text-underline-offset: 3px; }
.ck__d a + a { margin-left: .7rem; }

.ck__acts { display: flex; flex-wrap: wrap; gap: .6rem; }
.ck__acts--end { justify-content: flex-end; margin-top: 1.4rem; }
@media (max-width: 860px) { .ck__acts .btn { flex: 1 1 auto; justify-content: center; } }

.ck__panel { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 1rem; }
.ck__panel[hidden] { display: none; }
.ck__panel::before { content: ""; position: absolute; inset: 0; background: rgba(7,28,22,.52); backdrop-filter: blur(4px); }
.ck__box {
  position: relative; width: min(36rem, 100%); max-height: 84vh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -30px rgba(7,28,22,.6);
  padding: clamp(1.4rem, 3vw, 2.1rem);
}
.ck__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ck__x {
  position: relative; flex: none; width: 2.3rem; height: 2.3rem;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-2); cursor: pointer;
  transition: background-color .25s var(--ease-out);
}
.ck__x:hover { background: var(--bg-soft); }
.ck__x i { position: absolute; left: 50%; top: 50%; width: .85rem; height: 2px; border-radius: 2px; background: var(--fg); }
.ck__x i:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.ck__x i:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

.ck__cat {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem;
  align-items: start; padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.ck__cat.is-locked { cursor: default; opacity: .78; }
.ck__cat input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--red); }
.ck__cat b { display: block; font-size: .98rem; color: var(--fg); }
.ck__cat b em {
  font-style: normal; font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--red-deep); margin-left: .45rem;
}
.ck__cat > span > span { display: block; margin-top: .25rem; font-size: .88rem; line-height: 1.55; color: var(--fg-muted); }

html.motion-off .ck__bar { transition: none; transform: none; }

/* ═══════════════════════════════════════════════ tutela dei contenuti ═══ */
/* Il testo resta selezionabile: bloccarlo non ferma nessuno — bastano
   "visualizza sorgente" o JavaScript disattivato — mentre rompe gli screen
   reader, la tastiera e chi vuole solo copiare un numero di telefono.        */

img, video {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.nav__logo, .footer__logo, .pre { user-select: none; }

@media print {
  .nav, .topbar, .fab, .ck, .mobilemenu, .srch, .pre { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  main::after {
    content: "G.A.M. – Gruppo Autocisterne Mantova Soc. Coop. — gammn.it — tutti i diritti riservati";
    display: block; margin-top: 2rem; padding-top: .8rem;
    border-top: 1px solid #999; font-size: .8rem; color: #444;
  }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   OLTRAX — aggiunte all'impianto condiviso
   Qui sta solo ciò che questo sito ha e l'altro non aveva: il selettore di
   lingua, il riquadro verticale del filmato, il marchio del socio e i campi
   del modulo. Tutto il resto sopra resta com'era.
   ========================================================================== */

/* -------------------------------------------------------- lingua (IT/EN/RO) */

.langsw { display: inline-flex; align-items: center; gap: .1rem; }
.langsw a {
  padding: .18rem .42rem;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.langsw a:hover { color: #fff; background: rgba(255,255,255,.12); }
.langsw a[aria-current="true"] { color: #fff; background: rgba(255,255,255,.18); }

/* Dentro il menu del telefono il fondo è chiaro: stessi rapporti, altra scala. */
.langsw--big a { padding: .4rem .75rem; font-size: .86rem; color: var(--fg-muted); }
.langsw--big a:hover { color: var(--navy-700); background: var(--bg-soft); }
.langsw--big a[aria-current="true"] { color: #fff; background: var(--navy-700); }

/* --------------------------------------------------- filmato della hero --- */

/* Lo sfondo è la sorgente verticale stesa in orizzontale: a quella scala i
   pixel si vedrebbero, quindi lo trattiamo come una profondità di campo.
   La sfocatura entra solo dove l'ingrandimento è davvero forte. */
.hero__bg--soft video,
.hero__bg--soft > img { transform: scale(1.06); transform-origin: center 42%; }

/* La ripresa è notturna: i fari del camion sono l'unica cosa che si legge, e
   vanno lasciati leggibili. Inquadratura alzata sul mezzo, sfocatura tenuta al
   minimo che basta a nascondere l'ingrandimento. */
.hero__bg--soft video,
.hero__bg--soft > img { object-position: center 30%; }

@media (min-width: 900px) {
  .hero__bg--soft video,
  .hero__bg--soft > img { filter: blur(2px) saturate(1.14) contrast(1.08) brightness(1.06); transform: scale(1.1); }
}
@media (min-width: 1600px) {
  .hero__bg--soft video,
  .hero__bg--soft > img { filter: blur(3.5px) saturate(1.14) contrast(1.08) brightness(1.08); transform: scale(1.14); }
}

/* Il riquadro nitido: la stessa ripresa alla sua misura naturale. */
.reel {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 9 / 16;
  max-height: 22rem;
  margin-inline: auto;
  width: 100%;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.75);
  background: #05100C;
}
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,16,13,.42) 0%, rgba(4,16,13,0) 32%, rgba(4,16,13,.5) 100%),
    radial-gradient(120% 70% at 50% 22%, rgba(87,201,160,.16), transparent 70%);
}
@media (max-width: 1080px) { .reel { max-height: 17rem; } }

/* Movimento spento dal comando in fondo alla pagina: i filmati si fermano. */
.motion-off .hero__bg video,
.motion-off .reel video { display: none; }
.motion-off .hero__poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.motion-off .reel { background: #05100C center/cover no-repeat; }

/* ------------------------------------------------- barra delle statistiche */

/* Il numero di voci lo decide il pannello, non il foglio di stile: la griglia
   si adatta invece di rompersi al quinto elemento mancante. */
.statbar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

/* ------------------------------------------------------- marchio del socio */

.partnermark img {
  height: 2.9rem; width: auto;
  opacity: .95;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.partnermark img:hover { opacity: 1; transform: translateY(-2px); }

.footer__partner {
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; gap: .7rem; justify-items: start;
}
.footer__partner > span {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
/* Il logo del socio è blu e arancio su fondo scuro: un riquadro chiaro lo
   rende leggibile senza alterarne i colori, che non sono nostri. */
.footer__partner img {
  height: 2.5rem; width: auto;
  background: #fff; border-radius: var(--r-sm); padding: .45rem .6rem;
}

.footer__partner-txt { font-size: .9rem; color: rgba(255,255,255,.72); }

.footer__linkbtn {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-align: left;
}

/* ------------------------------------------------------ campi del modulo --- */

.form__req {
  margin-left: .35rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--red-deep);
}
.is-dark .form__req { color: var(--red-bright); }

.form__check {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .9rem; line-height: 1.55; color: var(--fg-muted);
  cursor: pointer;
}
.form__check input {
  width: 1.05rem; height: 1.05rem; margin-top: .28rem;
  flex: none; accent-color: var(--navy-700);
}
.form__check a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 3px; }
.is-dark .form__check { color: rgba(255,255,255,.75); }
.is-dark .form__check a { color: var(--red-bright); }

/* ------------------------------------------------------------- citazione --- */

/* Sora non ha un corsivo disegnato: lasciarlo al browser produce
   un'inclinazione finta. Meglio distinguere con il peso. */
.quote blockquote { font-style: normal; font-weight: 300; letter-spacing: -.015em; }

/* ------------------------------------- blocchi dei servizi (pagina interna) */

.svcblk {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-block: clamp(2rem, 3.5vw, 3.25rem);
  border-top: 1px solid var(--border);
}
.svcblk:first-of-type { border-top: 0; padding-top: 0; }
.svcblk__tag {
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy-700);
  padding-top: .5rem;
}
.svcblk h3 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); }
.svcblk p { margin-top: .8rem; color: var(--fg-muted); max-width: 68ch; }
@media (max-width: 760px) {
  .svcblk { grid-template-columns: 1fr; gap: .6rem; }
  .svcblk__tag { padding-top: 0; }
}

/* --------------------------------------------------------------- recapiti */

.contactgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}
.contactcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow-sm);
  display: grid; gap: .45rem; align-content: start;
}
.contactcard h3 {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-dim);
}
.contactcard a, .contactcard span { font-size: 1.02rem; }
.contactcard a { color: var(--navy-700); font-weight: 600; text-decoration: none; }
.contactcard a:hover { text-decoration: underline; text-underline-offset: 4px; }


/* --------------------------------------------------- ritratto in evidenza */

/* Il ritratto è scontornato: senza un fondo dietro sembrerebbe ritagliato e
   appiccicato. Il disco luminoso gli fa da ombra e da palcoscenico. */
.ritratto {
  position: relative;
  margin: 0;
  display: grid;
  justify-items: center;
  isolation: isolate;
}
/* Centrare il file non centra la figura: il ritaglio comprende la spalla, che
   sta tutta da un lato, e la testa finisce spostata. Immagine e alone vengono
   quindi riportati sul centro ottico, non su quello geometrico. */
.ritratto__disco {
  position: absolute;
  top: 4%; left: 46%;
  width: min(15rem, 78%); aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,214,170,.34) 0%, rgba(99,214,170,.10) 55%, transparent 72%);
  z-index: -1;
}
.ritratto img {
  width: min(15.5rem, 82%);
  height: auto;
  transform: translateX(-5%);
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.5));
}
.ritratto figcaption {
  margin-top: .9rem;
  text-align: center;
  display: grid; gap: .15rem;
}
.ritratto figcaption b {
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; color: #fff;
}
.ritratto figcaption span { font-size: .82rem; color: rgba(255,255,255,.62); }
@media (max-width: 1080px) { .ritratto img { width: min(13rem, 60%); } }

/* --------------------------------------------------- fascia dei mezzi --- */

/* Sborda dal contenitore a destra: si capisce a colpo d'occhio che continua,
   e non serve una freccia a dirlo. */
.strip {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 1rem;
}
.strip__track {
  list-style: none; margin: 0;
  padding-inline: var(--pad-x);
  display: flex; gap: clamp(.7rem, 1.2vw, 1.15rem);
}
.strip__it {
  position: relative;
  flex: 0 0 auto;
  width: clamp(13rem, 20vw, 21rem);
  /* Quadrata: foto e filmati arrivano con rapporti diversi (4:5, 9:16) e in un
     riquadro alto restavano fasce vuote in fondo — le "righe nere" ai bordi.
     Con il quadrato ritagliano tutti allo stesso modo e riempiono. */
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy);
  border: 0;
  box-shadow: var(--shadow-lg);
  scroll-snap-align: start;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.strip__it:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
/* Posizionamento assoluto e non height:100%: dentro un <button> l'altezza in
   percentuale non si risolve sempre, ed era il motivo per cui la prima
   tessera lasciava scoperto un terzo di riquadro. */
.strip__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.strip__kind {
  position: absolute; top: .7rem; left: .7rem;
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(7,28,22,.55); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.strip__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 2.6rem .9rem .8rem;
  font-size: .8rem; line-height: 1.4; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(4,16,13,.85));
}
@media (max-width: 700px) { .strip__it { width: 62vw; } }

/* ------------------------------------------------- schermi molto larghi --- */

/* Senza tetto al contenitore, su un monitor da 2560 la scheda della hero
   diventerebbe larga come una pagina intera e le colonne dei blocchi si
   allontanerebbero fino a non leggersi più come coppie. Qui non si stringe il
   sito: si rimette in proporzione quello che non deve crescere. */
@media (min-width: 1700px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); align-items: center; }
  .split      { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 5vw, 7rem); }
  .cards--3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__grid { gap: clamp(2rem, 4vw, 6rem); }
}
@media (min-width: 2200px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
  .sechead    { max-width: 84rem; }
}

/* --------------------------------------------------- riquadro ingrandito */

/* Blocco dello scorrimento sotto al riquadro. Sta su <html> e non su <body>
   con uno stile in linea, perché il menu del telefono usa già quella strada e
   due funzioni che scrivono sulla stessa proprietà si cancellano a vicenda. */
html.no-scroll, html.no-scroll body { overflow: hidden; }

.strip__open {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  padding: 0; margin: 0;
  border: 0; background: none;
  font: inherit; color: inherit; text-align: left;
  cursor: zoom-in;
}
.strip__it:has(.strip__open [data-autoplay-invista]) .strip__open,
.strip__open:has(video) { cursor: pointer; }
.strip__open:focus-visible { outline: 3px solid var(--navy-500); outline-offset: -3px; border-radius: inherit; }

.strip__kind--zoom { background: rgba(7,28,22,.5); }

/* L'attributo hidden va rimesso al suo posto: la regola del browser che lo
   nasconde vive nel foglio predefinito, e qualunque display scritto qui la
   batte. Senza questa riga il riquadro chiuso resta steso sopra la pagina,
   invisibile ma capace di prendersi tutti i clic. */
.lbx[hidden] { display: none; }

.lbx {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity .28s var(--ease-out);
}
.lbx.is-in { opacity: 1; }
.lbx__bg {
  position: absolute; inset: 0;
  background: rgba(4,16,13,.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: zoom-out;
}
.lbx__box {
  position: relative;
  display: grid; gap: .9rem; justify-items: center;
  max-width: min(100%, 78rem);
  transform: translateY(14px) scale(.985);
  transition: transform .34s var(--ease-out);
}
.lbx.is-in .lbx__box { transform: none; }
.lbx__media { display: grid; place-items: center; }
.lbx__media img,
.lbx__media video {
  max-width: min(92vw, 78rem);
  /* Il riquadro deve stare tutto dentro la finestra: i filmati sono verticali,
     e senza tetto in altezza uscirebbero sotto ai comandi. */
  max-height: 78vh;
  width: auto; height: auto;
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
  background: #05100C;
}
.lbx__cap {
  max-width: 62ch;
  text-align: center;
  font-size: .92rem; line-height: 1.5;
  color: rgba(255,255,255,.78);
}
.lbx__x, .lbx__nav {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: #fff; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.lbx__x:hover, .lbx__nav:hover { background: rgba(255,255,255,.18); }
.lbx__x {
  top: clamp(.8rem, 2vw, 1.6rem); right: clamp(.8rem, 2vw, 1.6rem);
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  font-size: 1.5rem; line-height: 1;
}
.lbx__nav {
  top: 50%; transform: translateY(-50%);
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  font-size: 1.9rem; line-height: 1;
}
.lbx__nav:hover { transform: translateY(-50%) scale(1.06); }
.lbx__nav--prev { left: clamp(.5rem, 2vw, 1.8rem); }
.lbx__nav--next { right: clamp(.5rem, 2vw, 1.8rem); }

@media (max-width: 640px) {
  .lbx__nav { top: auto; bottom: 1rem; transform: none; width: 2.7rem; height: 2.7rem; }
  .lbx__nav:hover { transform: none; }
  .lbx__media img, .lbx__media video { max-height: 66vh; }
}


/* ------------------------------------- marchio dentro la scheda in evidenza */

/* Va in fondo al foglio di proposito: la regola originale di .herocard__logo
   sta più su, e a parità di specificità vince l'ultima scritta. Messo prima,
   l'override non aveva alcun effetto — la pastiglia bianca restava. */
.herocard__logo {
  position: relative;
  display: inline-grid;
  place-items: center;
  background: none;
  box-shadow: none;
  padding: .3rem .25rem;
  isolation: isolate;
}
.herocard__logo::before {
  content: "";
  position: absolute; inset: -48% -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(58% 58% at 45% 50%, rgba(255,255,255,.15) 0%, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}
.herocard__logo img { height: 2.5rem; width: auto; }