/* =========================================================
   Francesco Cartini · sito ufficiale
   Branding: nero #141414, ghiaccio #EAEAEA, rosso #AF1917 / #D9231F, verde #3CA052
   Font: NiseSega (titoli, minuscolo = maiuscolo corsivo del brand) · Qaranta Bold (testi)
   ========================================================= */

@font-face { font-family: "NiseSega"; src: url("../assets/fonts/nisesega.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Qaranta"; src: url("../assets/fonts/qaranta-bold.woff2") format("woff2"), url("../assets/fonts/qaranta-bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  --nero: #141414;
  --nero-fondo: #0e0e0e;
  --ghiaccio: #eaeaea;
  --soft: rgba(234, 234, 234, .78);
  --line: rgba(234, 234, 234, .28);
  --rosso: #af1917;
  --rosso-acceso: #d9231f;
  --verde: #3ca052;

  --display: "NiseSega", "Arial Black", Impact, sans-serif;
  --text: "Qaranta", "Arial", "Helvetica Neue", sans-serif;

  --gutter: clamp(1rem, 5vw, 4.5rem);
  --max: 82.5rem;
  --sec: clamp(3rem, 6.5vw, 6rem);   /* spazio sopra e sotto ogni sezione */
  --bg: #141414;

  /* Una sola curva per tutto il sito: partenza decisa, arrivo lungo e morbido */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: var(--ease);
  --ease-in: var(--ease);
  --t-fast: 260ms;     /* colori e bordi al passaggio del mouse */
  --t-mid: 700ms;      /* riempimento dei pulsanti, header */
  --t-slow: 1.2s;      /* comparse di testi e blocchi */
  --t-photo: 1.6s;     /* foto che si svelano */
  --shift: 2.125rem;       /* quanto salgono i blocchi che compaiono */
  --stagger: 110ms;    /* distanza tra elementi in sequenza */

  --z-header: 40;
  --z-menu: 50;
  --z-lightbox: 100;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* Sugli schermi molto larghi (oltre ~1780 px) tutto il sito cresce in proporzione: tutte le misure sono in rem */
html { font-size: max(100%, .9vw); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  background: var(--nero); color: var(--ghiaccio);
  font-family: var(--text); font-weight: 700; font-size: 1.0625rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
strong, b { font-weight: 700; }
::selection { background: var(--rosso-acceso); color: #fff; }

:focus-visible { outline: 3px solid var(--rosso-acceso); outline-offset: 3px; }
/* sezioni raggiunte dal menu con la tastiera: ricevono il focus ma senza bordo attorno a tutta la sezione */
[tabindex="-1"]:focus { outline: none; }

/* ---------- Lingue: l'italiano è visibile anche senza JS ---------- */
html[data-lang="it"] .en, html:not([data-lang]) .en { display: none !important; }
html[data-lang="en"] .it { display: none !important; }

.skip { position: absolute; left: 1rem; top: -3.75rem; z-index: 200; background: var(--rosso-acceso); color: #fff; padding: 0.625rem 1rem; text-decoration: none; }
.skip:focus { top: 0.75rem; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sec { position: relative; padding-block: var(--sec); background: var(--bg); }


/* ---------- Tipografia ---------- */
h1, h2, h3.percorso__title, h3.plus__title {
  font-family: var(--display); font-weight: 400; text-transform: lowercase;
  line-height: .88; letter-spacing: 0; text-wrap: balance;
}
h2 { font-size: clamp(2.35rem, 8.4vw, 6.4rem); margin-bottom: clamp(1.5rem, 4vw, 2.75rem); }
.red { color: var(--rosso-acceso); font-style: normal; }

.kicker {
  display: flex; align-items: center; gap: 0.875rem; width: fit-content;
  font-size: clamp(.8125rem, 1.4vw, .9375rem); letter-spacing: .16em; text-transform: uppercase;
  color: var(--rosso-acceso); margin-bottom: clamp(1.125rem, 2.4vw, 1.75rem);
  padding: 0.5rem 0.875rem; margin-left: -0.875rem;
  background: rgba(20, 20, 20, .72);
}
.kicker::before { content: ""; flex: none; width: 2.5rem; height: 3px; background: currentColor; }
.kicker--plain { background: none; color: var(--ghiaccio); }

.lead { font-size: clamp(1.125rem, 1.9vw, 1.5rem); line-height: 1.5; color: var(--soft); max-width: 36ch; }
.lead strong { color: var(--ghiaccio); }


/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 3.25rem; padding: 0.875rem 1.625rem;
  font-family: var(--text); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform var(--t-mid) var(--ease); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn--red { background: var(--rosso); color: #fff; border-color: var(--rosso); }
.btn--red::before { background: var(--rosso-acceso); }
.btn--red:hover { border-color: var(--rosso-acceso); }
.btn--ghost { border-color: var(--line); color: var(--ghiaccio); background: rgba(20, 20, 20, .35); }
.btn--ghost::before { background: var(--ghiaccio); }
.btn--ghost:hover { border-color: var(--ghiaccio); color: var(--nero); }
.btn--sm { min-height: 2.75rem; padding: 0.625rem 1.125rem; font-size: .8125rem; }

/* ---------- Header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 4.25rem; padding-inline: var(--gutter);
  transition: background-color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.top.is-solid { background: rgba(14, 14, 14, .95); border-bottom-color: rgba(234, 234, 234, .1); }
.top.is-hidden { transform: translateY(-100%); }
/* header nascosto: resta visibile solo la barra rossa di avanzamento, in cima allo schermo */
.progress { transition: translate var(--t-mid) var(--ease-out), height var(--t-mid) var(--ease-out); }
.top.is-hidden .progress { height: 3px; translate: 0 4px; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rosso-acceso); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.top__brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; min-height: 2.75rem; }
.top__brand img { height: 1.875rem; width: auto; }
.top__brand .top__word { height: 0.9375rem; }
.top__nav { display: none; gap: clamp(1.125rem, 2.4vw, 2.125rem); }
.top__nav a { position: relative; text-decoration: none; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); padding-block: 0.75rem; transition: color var(--t-fast) var(--ease); }
.top__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.375rem; height: 2px; background: var(--rosso-acceso); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease-out); }
.top__nav a:hover, .top__nav a[aria-current="true"] { color: var(--ghiaccio); }
.top__nav a:hover::after, .top__nav a[aria-current="true"]::after { transform: scaleX(1); }
.top__actions { display: flex; align-items: center; gap: 0.625rem; }
.top__cta { display: none; }

.lang { display: flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.5rem; font-size: .8125rem; letter-spacing: .12em; color: var(--soft); }
.lang__sep { opacity: .4; }
html[data-lang="it"] .lang__opt--it, html:not([data-lang]) .lang__opt--it, html[data-lang="en"] .lang__opt--en { color: var(--ghiaccio); border-bottom: 2px solid var(--rosso-acceso); }

.burger { position: relative; width: 2.75rem; height: 2.75rem; }
.burger span { position: absolute; left: 0.6875rem; right: 0.6875rem; height: 2px; background: var(--ghiaccio); transition: transform var(--t-mid) var(--ease-out); }
.burger span:first-child { top: 1.0625rem; }
.burger span:last-child { top: 1.5625rem; right: 1.0625rem; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(0.25rem) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { right: 0.6875rem; transform: translateY(-0.25rem) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: var(--z-menu); background: var(--nero-fondo);
  display: flex; align-items: center; padding: 6rem var(--gutter) 3rem;
}
.menu[hidden] { display: none; }
/* menu da telefono: scende dall'alto, le voci entrano una dopo l'altra; alla chiusura risale */
@media (prefers-reduced-motion: no-preference) {
  .js .menu { transform: translate3d(0, -100%, 0); transition: transform .6s var(--ease); }
  .js .menu.is-open { transform: none; }
  .js .menu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rosso-acceso); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease) .15s; }
  .js .menu.is-open::after { transform: none; }
  .js .menu a { opacity: 0; transform: translate3d(0, 1.75rem, 0); transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .js .menu.is-open a { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .7s var(--ease); transition-delay: calc(.18s + var(--i, 0) * 60ms); }
}
.menu nav { display: grid; gap: 0.375rem; }
.menu a { font-family: var(--display); text-transform: lowercase; font-size: clamp(2rem, 10vw, 3.4rem); line-height: 1.1; text-decoration: none; padding-block: 0.375rem; }
.menu a:active, .menu a:hover { color: var(--rosso-acceso); }
body.menu-open .top { background: var(--nero-fondo); }
body.menu-open { overflow: hidden; }
.top { z-index: calc(var(--z-menu) + 1); }

/* ---------- Elementi ricorrenti del brand ---------- */
.rail {
  position: absolute; z-index: 3; left: clamp(0.875rem, 1.8vw, 1.875rem); top: 8.25rem;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--display); font-size: clamp(.75rem, 1.2vw, 1rem); letter-spacing: .14em; white-space: nowrap;
  display: none;
}
.rail::before { content: ""; display: inline-block; width: 2px; height: 3.5rem; background: var(--rosso-acceso); margin-bottom: 1.125rem; vertical-align: middle; transform-origin: bottom; }
.corner {
  position: absolute; z-index: 3; top: 5.75rem; right: var(--gutter); width: min(52vw, 40rem); height: 10rem;
  border-top: 2px solid var(--line); border-right: 2px solid var(--line); pointer-events: none;
}

/* ---------- 01 Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero__bg, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg img { object-fit: cover; object-position: 74% 30%; }
.hero__shade { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,20,20,.6) 0%, rgba(20,20,20,0) 22%, rgba(20,20,20,.25) 42%, rgba(20,20,20,.86) 68%, var(--nero) 100%); }
.hero__content { position: relative; z-index: 2; padding-top: 7.5rem; padding-bottom: clamp(4.5rem, 10vh, 7.5rem); }
.hero__title { font-size: clamp(2.25rem, min(9.4vw, 11.5vh), 8.6rem); margin-bottom: clamp(1.25rem, 3vh, 2.125rem); }
.hero__title .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__title .ln > span { display: block; }
.hero__logo { width: clamp(8.75rem, min(18vw, 24vh), 14.375rem); margin-bottom: 1rem; }
.hero__meta { font-size: clamp(.8125rem, 1.4vw, 1rem); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin-bottom: clamp(1.625rem, 4vw, 2.5rem); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__scroll { position: absolute; z-index: 3; right: calc(var(--gutter) + clamp(3.75rem, 6vw, 5.625rem)); bottom: 2rem; width: 2.75rem; height: 4rem; display: none; justify-content: center; }
.hero__firma { position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(1rem, 3vh, 1.875rem); width: clamp(2.125rem, 3.4vw, 3.25rem); height: auto; }
.hero__scroll span { width: 2px; height: 100%; background: linear-gradient(180deg, transparent, var(--ghiaccio)); position: relative; overflow: hidden; }
/* Telefono: logo bianco come su computer. Per lasciare libero il casco: niente etichetta sopra il titolo,
   logo un po' piu piccolo, pulsanti compatti e foto inquadrata piu in alto (il casco sale, il fondo sfocato si taglia).
   Sta dopo le regole della hero, cosi le sostituisce davvero. */
@media (max-width: 599px) {
  /* etichetta col fondo nero come nelle altre sezioni, su una riga sola e piu bassa, per non toccare il casco */
  .hero .kicker { padding: .375rem .75rem; margin-left: -.75rem; margin-bottom: .625rem; gap: .625rem; font-size: .6875rem; letter-spacing: .12em; white-space: nowrap; }
  .hero .kicker::before { width: 1.75rem; }
  .hero__title { margin-bottom: 1rem; }
  .hero__logo { width: clamp(6.25rem, 28vw, 7.5rem); margin-bottom: .75rem; }
  .hero__meta { margin-bottom: 1.25rem; }
  .hero__ctas .btn { min-height: 2.875rem; padding: .625rem 1.25rem; font-size: .9375rem; letter-spacing: .05em; }
  .hero__content { padding-bottom: 3.5rem; }
}
@media (max-width: 599px) and (orientation: portrait) {
  .hero__bg { inset: auto 0 0 0; height: 121%; }
  /* il titolo cade sul kart bianco e rosso: la foto si scurisce prima (il casco in alto resta luminoso) */
  .hero__shade { background: linear-gradient(180deg, rgba(20,20,20,.6) 0%, rgba(20,20,20,0) 20%, rgba(20,20,20,.1) 28%, rgba(20,20,20,.62) 38%, rgba(20,20,20,.8) 55%, rgba(20,20,20,.9) 72%, var(--nero) 100%); }
  .hero__title { text-shadow: 0 2px 18px rgba(14, 14, 14, .75); }
  .hero__bg img { object-position: 69% 30%; }
}

/* ---------- 02 Sarno ---------- */
.sarno__grid { display: grid; gap: clamp(2.25rem, 6vw, 5.5rem); }
.sarno__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; max-height: 78vh; }
.sarno__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sarno__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,20,20,.55), transparent 40%); }
.sarno__body { align-self: center; }
.sarno__where { font-size: clamp(.9375rem, 1.5vw, 1.125rem); line-height: 1.5; color: var(--soft); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

.laps { container-type: inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.lap { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.625rem; padding: 1.375rem 0.75rem 1.25rem; }
.lap + .lap { border-left: 2px solid var(--line); }
.lap:first-child { padding-left: 0; }
.lap__k { position: relative; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.lap__of { font-size: .42em; letter-spacing: .02em; color: var(--soft); margin-left: .12em; } /* /34 = partecipanti */
.lap__v { position: relative; font-family: var(--display); font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: .9;
  /* "P11" deve stare nella casella: la grandezza segue la larghezza della casella */
  font-size: min(4.2rem, 5.6cqi); }
.lap__v small { font-family: var(--text); font-size: .42em; vertical-align: top; margin-left: 2px; }
.lap__l { position: relative; font-size: .875rem; line-height: 1.3; }
.lap:not(.lap--rain) .lap__v { color: var(--rosso-acceso); }
.lap--rain .lap__v { color: var(--soft); }
/* La pioggia: righe diagonali che scendono, solo nella casella della finale */
.lap__rain { position: absolute; left: 0; right: 0; top: -7.5rem; bottom: 0; opacity: .5; will-change: transform;
  background-image: repeating-linear-gradient(105deg, transparent 0 0.875rem, rgba(160, 190, 220, .32) 0.875rem 0.9375rem, transparent 0.9375rem 1.9375rem);
  background-size: 100% 7.5rem; }

/* ---------- 03 Titolo ---------- */
.titolo__sub { font-size: clamp(1rem, 1.6vw, 1.1875rem); line-height: 1.5; color: var(--soft); }
.titolo__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.titolo__photo { position: relative; aspect-ratio: 4 / 5; max-height: 78vh; overflow: hidden; margin: 0; }
.titolo__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--line); }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.75rem; padding: 1.5rem 1rem 1.375rem 0; border-bottom: 2px solid var(--line); }
.stat:nth-child(even) { padding-left: 1.25rem; border-left: 2px solid var(--line); }
.stat dd { font-family: var(--display); font-size: clamp(1.9rem, 8.6vw, 5.4rem); white-space: nowrap; line-height: .95; font-variant-numeric: tabular-nums; }
.stat dd small { font-size: .55em; color: var(--soft); }
.stat dt { font-size: clamp(.8125rem, 1.3vw, .9375rem); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); line-height: 1.35; }
.stat--hot dd { color: var(--rosso-acceso); }

/* ---------- 04 Chi sono ---------- */
.chi__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.facts { display: grid; gap: 1.125rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.facts li { display: flex; align-items: baseline; gap: 1.125rem; }
.facts b { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; }
.facts span { font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); line-height: 1.3; }
.chi__photo { aspect-ratio: 2 / 3; max-height: 82vh; overflow: hidden; }
.chi__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

.percorso { margin-top: clamp(3rem, 7vw, 6rem); }
.percorso__title, .plus__title { font-size: clamp(2rem, 6vw, 4.2rem); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.timeline { position: relative; display: grid; gap: 2.5rem; padding-left: 3.25rem; }
.timeline::before { content: ""; position: absolute; left: 0.75rem; top: 0.875rem; bottom: 0.875rem; width: 3px; background: linear-gradient(180deg, var(--line), var(--rosso-acceso)); transform-origin: top; }
.step { position: relative; display: grid; gap: 0.375rem; }
.step::before { content: ""; position: absolute; left: -3.25rem; top: 0.5rem; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--bg); border: 3px solid var(--ghiaccio); }
.step--hot::before { background: var(--rosso-acceso); border-color: var(--rosso-acceso); box-shadow: 0 0 0 0.5625rem rgba(217, 35, 31, .18); }
.step__y { font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1; }
.step__t { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.3; }
.step__d { color: var(--soft); line-height: 1.45; max-width: 52ch; }

.plus { margin-top: clamp(3rem, 7vw, 6rem); }
.plus__list { display: grid; gap: 0; border-top: 2px solid var(--line); }
.plus__list li { display: grid; gap: 0.5rem; padding: 1.5rem 0; border-bottom: 2px solid var(--line); }
.plus__list b { position: relative; padding-left: 1.875rem; font-family: var(--display); font-weight: 400; text-transform: lowercase; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1; }
.plus__list b::before { content: ""; position: absolute; left: 0; top: .45em; width: 1.125rem; height: 3px; background: var(--rosso-acceso); }
.plus__list li > span { padding-left: 1.875rem; color: var(--soft); }

/* ---------- 05 Galleria ---------- */
/* Telefono: 2 colonne di quadrati, la partenza di Sarno occupa tutta la riga */
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.gal__item { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; position: relative; background: rgba(234, 234, 234, .04); }
.gal__item.g-h { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; }
.g-d img, .g-g img { object-position: 50% 20%; }
/* punto di inquadratura = posizione del kart nella foto */
.g-c img { object-position: 50% 86%; }
.g-e img { object-position: 44% 50%; }
.g-f img { object-position: 41% 60%; }
.g-i img { object-position: 59% 55%; }
.g-j img { object-position: 59% 50%; }
.g-k img { object-position: 26% 50%; }
/* Ordine sul telefono: la foto larga arriva dopo 6 quadrati, cosi non restano buchi */
.g-h { order: 1; }
.g-g, .g-i, .g-j, .g-k { order: 2; }
.gal__item::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; transition: border-color var(--t-fast) var(--ease); pointer-events: none; }
.gal__item:hover::after { border-color: var(--rosso-acceso); }
.gal__item .mask { transition: transform 1.1s var(--ease); }
@media (hover: hover) { .gal__item:hover .mask { transform: scale(1.04); } }

.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; padding: 0; background: rgba(8, 8, 8, .96); color: var(--ghiaccio); }
.lightbox::backdrop { background: rgba(8, 8, 8, .96); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: calc(100% - 2rem); max-height: calc(100% - 8.75rem); object-fit: contain; }
.lightbox__btn { position: absolute; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; background: rgba(20,20,20,.7); border: 2px solid var(--line); }
.lightbox__btn svg { width: 1.375rem; height: 1.375rem; }
.lightbox__btn:hover { border-color: var(--ghiaccio); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; bottom: 1.5rem; }
.lightbox__next { right: 1rem; bottom: 1.5rem; }


/* Le righe dei titoli: ogni riga scorre fuori dalla sua maschera */
.split .ln { display: block; overflow: hidden; padding: 0 .12em .08em 0; margin-bottom: -.08em; }
.split .ln > span { display: block; }

/* Maschera delle foto: contiene l'immagine durante lo svelamento */
.curtain { position: relative; }
.mask { display: block; width: 100%; height: 100%; overflow: hidden; }

/* ---------- 06 Missione ---------- */
/* Testo in alto, kart al centro della foto e sotto il testo: la sezione e alta abbastanza da mostrarlo intero */
.sogno { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(4rem, 8vw, 6.875rem); min-height: clamp(45rem, 62vw, 92vh); display: flex; align-items: flex-start; }
.sogno__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sogno__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 6, 6, .25), rgba(30, 4, 4, .55)); }
.sogno::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.15) 42%, transparent 60%, rgba(20,20,20,.45) 100%); }
.sogno__body { position: relative; z-index: 2; }
.sogno h2 { font-size: clamp(2.4rem, 9vw, 7.4rem); }
.sogno .lead { color: var(--ghiaccio); }
/* Telefono: la foto e una fascia intera in fondo alla sezione (il kart non viene tagliato) e sfuma nel rosso */
@media (max-width: 959px) {
  .sogno { background: #2b0908; min-height: 0; padding-bottom: calc(75vw + 0.5rem); }
  .sogno__shade { background: linear-gradient(180deg, rgba(40, 6, 6, .3), rgba(30, 4, 4, .15)); }
  .sogno__bg { inset: auto 0 0 0; height: auto; aspect-ratio: 4 / 3; object-position: 50% 50%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%); }
}
/* Computer: foto a tutta sezione, allineata in alto cosi il kart cade sotto il testo */
/* Computer: testo a sinistra, foto sul lato destro (64%) che sfuma verso il testo, come la slide "Chi sono".
   Il ritaglio ha il kart al centro, quindi il kart e sempre centrato nella foto e non finisce sotto il testo.
   Sezione alta al massimo come lo schermo. */
@media (min-width: 960px) {
  .sogno { min-height: clamp(35rem, 38vw, 80vh); align-items: center; background: #2b0908; }
  .sogno__bg { left: auto; right: 0; width: 64%; object-fit: cover; object-position: 50% 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
  .sogno::after { background: linear-gradient(90deg, rgba(20,20,20,.35) 0%, rgba(20,20,20,0) 45%), linear-gradient(180deg, rgba(20,20,20,.3) 0%, transparent 30%, transparent 75%, rgba(20,20,20,.4) 100%); }
  .sogno h2 { font-size: clamp(2.4rem, 4.6vw, 5.4rem); }
  .sogno .lead { max-width: 27ch; }
}
}
}

/* ---------- 07 Obiettivi ---------- */
.obiettivi__grid { display: grid; gap: clamp(1.25rem, 4vw, 3.75rem); align-items: start; }
.road { border-top: 2px solid var(--line); }
.goal { display: grid; gap: 0.625rem; padding: 1.625rem 0; border-bottom: 2px solid var(--line); }
.goal__y { font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1; color: var(--soft); }
.goal__t { font-family: var(--display); text-transform: lowercase; font-size: clamp(1.7rem, 4.2vw, 3.3rem); line-height: .95; }
.goal__d { color: var(--soft); }
.goal--raced .goal__d { color: var(--ghiaccio); }
.goal--final .goal__y, .goal--final .goal__t { color: var(--rosso-acceso); }

/* ---------- 08 Visibilita ---------- */
.visibilita { overflow: hidden; isolation: isolate; }
.vis__grid { display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
.viral { display: grid; gap: 0.875rem; margin-bottom: 1.875rem; }
.viral__n { font-family: var(--display); font-size: clamp(2.6rem, 11vw, 8rem); line-height: .9; font-variant-numeric: tabular-nums; }
.viral__l { font-size: .9375rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); line-height: 1.4; }
.extra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); margin-bottom: 1.75rem; }
.extra > div { display: grid; gap: 0.5rem; align-content: start; padding: 1.25rem 0.875rem 1.25rem 0; }
.extra > div + div { border-left: 2px solid var(--line); padding-left: 1.25rem; }
.extra b { font-family: var(--display); font-weight: 400; font-size: clamp(1.2rem, 5.4vw, 3rem); line-height: 1; white-space: nowrap; }
.extra > div > span { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); line-height: 1.35; }
.handles { display: grid; gap: 0.75rem; }
.handle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 0.875rem; padding: 1rem 1.125rem; min-height: 3.75rem; border: 2px solid var(--line); background: rgba(20,20,20,.7); text-decoration: none; transition: border-color var(--t-fast) var(--ease); }
.handle:hover { border-color: var(--ghiaccio); }
.handle img { width: 1.5rem; height: 1.5rem; filter: invert(1) brightness(1.6); }
.handle__name { font-size: 1rem; overflow-wrap: anywhere; min-width: 0; }
.handle__v { margin-left: auto; font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.handle__v small { font-family: var(--text); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-left: 0.25rem; }

.tracks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.25rem; border-top: 2px solid var(--line); margin-bottom: 1.5rem; }
.tracks li { display: grid; gap: 0.25rem; padding: 1rem 0; border-bottom: 2px solid var(--line); }
.tracks b { font-size: 1.0625rem; line-height: 1.2; }
.tracks span { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.tracks .track--intl span { color: var(--rosso-acceso); }
.badge { display: inline-flex; align-items: center; gap: 1rem; border: 2px solid var(--rosso-acceso); padding: 0.875rem 1.25rem; }
.badge b { font-family: var(--display); font-weight: 400; font-size: 1.6rem; color: var(--rosso-acceso); }

.quote { border-left: 0.25rem solid var(--rosso-acceso); padding: 0.25rem 0 0.25rem 1.375rem; margin-bottom: 1.625rem; }
.quote p { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.4; }
.quote .quote__tr { font-size: .9375rem; color: var(--soft); margin-top: 0.625rem; }
.press { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.press li { border: 2px solid var(--line); padding: 0.625rem 0.875rem; font-size: .9375rem; line-height: 1.2; }
.press .press--more { border-color: var(--rosso-acceso); color: var(--rosso-acceso); }

/* ---------- 09 Team ---------- */
.team__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.team__photo { aspect-ratio: 4 / 5; overflow: hidden; max-height: 70vh; }
.team__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cards { display: grid; gap: 1rem; }
.card { border: 2px solid var(--line); padding: 1.75rem 1.5rem 1.625rem; background: rgba(20,20,20,.75); }
.card__logo { height: 4rem; display: flex; align-items: center; margin-bottom: 1.375rem; }
.card__logo img { max-height: 100%; width: auto; max-width: 100%; }
.invert { filter: invert(1) brightness(1.6); }
.card__role { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rosso-acceso); margin-bottom: 0.5rem; }
.card__t { font-size: 1.3125rem; line-height: 1.25; margin-bottom: 0.5rem; }
.card__d { color: var(--soft); }

/* ---------- 10 Partner ---------- */
.partner__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.partner__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.partner__photo { aspect-ratio: 4 / 5; overflow: hidden; max-height: 74vh; }
.partner__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.spaces { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--line); }
.space { display: grid; align-content: start; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.25rem; row-gap: 0.375rem; padding: 1.5rem 0; border-bottom: 2px solid var(--line); }
.space svg { grid-row: span 2; width: 2.75rem; height: 2.75rem; color: var(--rosso-acceso); }
.space h3 { font-family: var(--display); font-weight: 400; text-transform: lowercase; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; }
.space p { color: var(--soft); max-width: 48ch; }

/* ---------- 11 Contatti ---------- */
.contatti { overflow: hidden; isolation: isolate; }
.contatti { --band: clamp(23.75rem, 36vw, 35rem); }
.contatti__media { position: absolute; inset: 0 0 auto 0; width: 100%; height: var(--band); z-index: -1; overflow: hidden; }
.contatti__media img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 60%; opacity: .8; }
.contatti__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,20,.75) 0%, rgba(20,20,20,.2) 50%, rgba(20,20,20,0) 100%), linear-gradient(180deg, rgba(20,20,20,.35) 0%, rgba(20,20,20,.05) 40%, var(--nero) 100%); }
/* il titolo sta sulla fascia; contatti e modulo partono dove la foto sfuma nel nero */
.contatti__head { padding-top: calc(var(--band) - var(--sec) - 7.5rem); }
@media (min-width: 960px) {
  /* foto sul lato destro, come nella Missione: il titolo a sinistra resta sul nero, il kart al centro della foto */
  .contatti__head { padding-top: 0; min-height: calc(var(--band) - var(--sec) - 1.5rem); }
  .contatti__media { left: auto; width: 60%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%); mask-image: linear-gradient(90deg, transparent 0%, #000 35%); }
  .contatti__media img { object-position: 50% 60%; }
  .contatti__media::after { background: linear-gradient(180deg, rgba(20,20,20,.3) 0%, rgba(20,20,20,0) 35%, rgba(20,20,20,.15) 70%, var(--nero) 100%); }
}
.contatti__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.contatti__title { font-size: clamp(2.6rem, 12.5vw, 6.4rem); line-height: .86; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.contatti__title .pre { display: block; font-size: .42em; line-height: 1.1; color: var(--ghiaccio); }
.contatti__title .grad { display: block; background: linear-gradient(95deg, var(--ghiaccio) 10%, var(--rosso-acceso) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.contacts { border-top: 2px solid var(--line); }
.contacts li { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 0.875rem; border-bottom: 2px solid var(--line); }
.contacts li a { padding-top: 0.25rem; }
@media (min-width: 600px) {
  .contacts li { grid-template-columns: 6.875rem minmax(0, 1fr); align-items: center; gap: 0.75rem; padding-top: 0; }
  .contacts li a { padding-top: 1rem; }
}
.contacts__k { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rosso-acceso); }
.contacts a { display: block; padding: 1rem 0; min-height: 3.25rem; text-decoration: none; font-size: clamp(1rem, 1.8vw, 1.25rem); overflow-wrap: anywhere; transition: color var(--t-fast) var(--ease); }
.contacts a:hover { color: var(--rosso-acceso); }

.form { display: grid; gap: 1.125rem; align-content: start; border: 2px solid var(--line); background: rgba(14,14,14,.88); padding: clamp(1.375rem, 4vw, 2.5rem); }
.form__title { font-family: var(--display); font-weight: 400; text-transform: lowercase; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.req { color: var(--rosso-acceso); }
.field input, .field textarea {
  width: 100%; min-height: 3.25rem; padding: 0.8125rem 0.875rem; font: inherit; font-size: 1rem; color: var(--ghiaccio);
  background: rgba(20, 20, 20, .75); border: 2px solid rgba(234,234,234,.22); border-radius: 0; transition: border-color var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input:hover, .field textarea:hover { border-color: rgba(234,234,234,.45); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ghiaccio); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--rosso-acceso); outline-offset: 2px; }
.field.has-error input, .field.has-error textarea { border-color: #ff5a52; }
.field__err { font-size: .875rem; color: #ff7a73; }
.hp { position: absolute; left: -624.9375rem; width: 1px; height: 1px; opacity: 0; }
.form__send { width: 100%; }
.form__send[disabled] { opacity: .5; cursor: progress; }
.form__status { min-height: 1.5em; font-size: .9375rem; }
.form__status.ok { color: #6fd387; }
.form__status.err { color: #ff7a73; }
.form__status a { color: var(--ghiaccio); text-decoration: underline; text-decoration-color: var(--rosso-acceso); text-underline-offset: 3px; overflow-wrap: anywhere; }
/* l'autocompilazione del browser non deve colorare di chiaro i campi */
.field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus, .field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ghiaccio); caret-color: var(--ghiaccio);
  -webkit-box-shadow: 0 0 0 1000px #181818 inset; box-shadow: 0 0 0 1000px #181818 inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* Le griglie a una colonna non devono allargarsi oltre lo schermo */
.sarno__grid, .chi__grid, .obiettivi__grid, .vis__grid, .team__grid, .partner__grid, .contatti__grid, .cards, .percorso, .plus { grid-template-columns: minmax(0, 1fr); }
.vis__grid > *, .vis__social, .piste__body, .stampa__body { min-width: 0; }

/* ---------- Sfondi come nelle slide del branding ----------
   Foto nitida, scurita, che sfuma nel nero #141414 (stesse sfumature del reference).
   In alto di regola; in "Gara dopo gara" sta in basso, dietro la linea del tempo. */
.has-photo { isolation: isolate; }
.sec__bg { position: absolute; inset: 0 0 auto 0; height: min(100%, 95vh, 150vw); z-index: -1; overflow: hidden; pointer-events: none; }
.sec__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.sec__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.9) 0%, rgba(20,20,20,.25) 50%, var(--nero) 100%); }
.sec__bg--bottom { inset: auto 0 0 0; }
.sec__bg--bottom::after { background: linear-gradient(180deg, var(--nero) 0%, rgba(20,20,20,.25) 50%, rgba(20,20,20,.9) 100%); }
.visibilita .sec__bg img { opacity: .5; object-position: 53% 50%; }
/* come le slide: presenza nazionale con la foto in alto, stampa con la foto in bianco e nero appena visibile */
.piste .sec__bg img { opacity: .42; object-position: 50% 55%; }
.stampa .sec__bg { height: 100%; }
.stampa .sec__bg img { opacity: .2; filter: grayscale(1); object-position: 68% 50%; }
/* telefono: si vede solo una striscia della foto, centrata sul kart */
@media (max-width: 599px) { .stampa .sec__bg img { object-position: 52% 50%; } }
.stampa .sec__bg::after { background: linear-gradient(180deg, var(--nero) 0%, rgba(20,20,20,.3) 50%, var(--nero) 100%); }
.obiettivi .sec__bg img { object-position: 8% 50%; }
.chi .sec__bg img { object-position: 60% 50%; }

/* Foto delle sezioni: sfumano verso il basso nel nero */
.curtain::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, rgba(20,20,20,.65) 0%, rgba(20,20,20,0) 38%); pointer-events: none; }

/* Elementi ricorrenti del branding sulle sezioni */
.sec > .rail, .sogno > .rail { top: var(--sec); }
.sec > .corner { top: calc(var(--sec) - 1.75rem); height: 8.75rem; }
/* Firma: il falco in basso a destra; rosso in apertura e in chiusura */
.sec::after { content: ""; position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(0.75rem, 1.8vw, 1.625rem); width: clamp(1.875rem, 3.2vw, 2.875rem); aspect-ratio: 233 / 194; background: url("../assets/logos/falco-bianco.png") center / contain no-repeat; pointer-events: none; }
.contatti::after { background-image: url("../assets/logos/falco-rosso.png"); }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid rgba(234,234,234,.12); padding-block: 2.25rem; background: var(--nero-fondo); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.125rem 1.75rem; }
.foot__row img { width: 7.5rem; }
.foot__row p { font-size: .875rem; color: var(--soft); }
.foot__top { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--soft); padding: 0.75rem 0; }
.foot__top:hover { color: var(--ghiaccio); }
.foot__legal { display: flex; gap: 1.5rem; }
.foot__legal a { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); text-decoration: underline; text-decoration-color: var(--rosso-acceso); text-underline-offset: 3px; padding: 0.75rem 0; }
.foot__legal a:hover { color: var(--ghiaccio); }

@media (max-width: 959px) {
  :root { --t-slow: .95s; --t-photo: 1.25s; --shift: 1.125rem; --stagger: 80ms; }
}

/* =========================================================
   Breakpoint
   ========================================================= */
@media (min-width: 600px) {
  /* Tablet e computer: 3 colonne x 5 righe, ogni foto ha il suo posto */
  .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(9.375rem, 19vw, 17.5rem); gap: 0.875rem; }
  .gal__item, .gal__item.g-h { aspect-ratio: auto; height: 100%; }
  .gal__item { order: 0; }
  .g-a { grid-area: 1 / 1; } .g-b { grid-area: 1 / 2; } .g-c { grid-area: 1 / 3 / span 2; }
  .g-d { grid-area: 2 / 1 / span 2; } .g-e { grid-area: 2 / 2; }
  .g-f { grid-area: 3 / 2; } .g-g { grid-area: 3 / 3 / span 2; }
  .gal__item.g-h { grid-area: 4 / 1 / auto / span 2; }
  .g-i { grid-area: 5 / 1; } .g-j { grid-area: 5 / 2; } .g-k { grid-area: 5 / 3; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.25rem; }
}

@media (min-width: 960px) {
  .top { height: 4.75rem; }
  .top__nav { display: flex; }
  .top__cta { display: inline-flex; }
  .burger { display: none; }
  .hero__content { padding-left: calc(var(--gutter) + 1.5rem); }
  .hero__bg img { object-position: 72% 35%; }
  .hero__shade { background:
    linear-gradient(90deg, rgba(20,20,20,.82) 0%, rgba(20,20,20,.55) 32%, rgba(20,20,20,0) 62%),
    linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,0) 20%, rgba(20,20,20,0) 55%, rgba(20,20,20,.7) 85%, var(--nero) 100%); }
  .hero__scroll { display: flex; }
  .rail { display: block; }
  .corner { top: 6.5rem; height: 13.75rem; }

  .sarno__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* Titolo come la slide 04: foto del podio a tutta altezza sul bordo destro, che sfuma nel nero
     a sinistra e in basso; testo a sinistra, numeri in basso su tutta la larghezza */
  .titolo { overflow: hidden; isolation: isolate; }
  .titolo__grid { display: block; min-height: clamp(23.75rem, 34vw, 32.5rem); }
  .titolo__intro { max-width: 52%; padding-top: clamp(1.5rem, 4vw, 4rem); }
  .titolo__photo { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: min(48vw, 43.75rem, 1300px); max-height: 1780px; aspect-ratio: auto; }
  .titolo__photo::after { background: linear-gradient(0deg, var(--nero) 0%, rgba(20,20,20,.88) 26%, rgba(20,20,20,.35) 46%, rgba(20,20,20,0) 64%); }
  .titolo .stats { position: relative; }
  .sec > .corner { top: calc(var(--sec) - 1.75rem); height: 10rem; }
  /* foto a sinistra: sfumano a destra; foto a destra: sfumano a sinistra, come nelle slide */
  .sarno__photo, .team__photo { -webkit-mask-image: linear-gradient(90deg, #000 58%, transparent 100%); mask-image: linear-gradient(90deg, #000 58%, transparent 100%); }
  .chi__photo, .partner__photo { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%); }
  .titolo__photo { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat, .stat:nth-child(even) { padding: 1.625rem 1.125rem 1.5rem 1.375rem; border-left: 2px solid var(--line); }
  .stat:first-child { padding-left: 1.5rem; border-left: 0; }
  .stat dd { font-size: clamp(2.2rem, 3.9vw, 3.5rem); }
  .viral__n { font-size: clamp(3rem, 4.4vw, 4.4rem); }
  .extra b { font-size: clamp(1.4rem, 1.8vw, 1.9rem); }
  .sarno h2 { font-size: clamp(2.35rem, 6vw, 5.8rem); }
  .chi h2 { font-size: clamp(2.35rem, 6.2vw, 5.6rem); }
  .contatti__title { font-size: clamp(3rem, 6vw, 6.4rem); }

  .chi__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .percorso, .plus { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.75rem; align-items: start; }
  .plus__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }

  .obiettivi__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

  /* Social: il numero grande a sinistra, gli altri dati e i profili a destra */
  .vis__social { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 4rem; align-items: start; }
  .vis__social .viral { grid-row: span 2; }
  /* Piste: tre colonne; Stampa: citazione a sinistra, testate a destra */
  .piste .tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
  .stampa__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 4rem; align-items: start; }

  .team__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

  .partner__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; }
  .spaces { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.75rem; border-top: 0; }
  .space { grid-template-columns: minmax(0, 1fr); row-gap: 0.875rem; border-top: 2px solid var(--line); border-bottom: 0; padding-top: 1.75rem; }
  .space svg { grid-row: auto; }

  .contatti__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

@media (min-width: 1280px) {
  .lap { padding: 1.625rem 1.375rem 1.5rem; }
}

/* =========================================================
   Animazioni: poche, con un solo ritmo (--ease e le durate --t-*).
   Partono solo con JS attivo e movimento consentito: senza JS o con
   "riduci movimento" tutto è visibile e fermo.
   Si animano solo transform e opacity.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Hero: un'unica sequenza all'apertura */
  .js .hero__bg img { animation: heroZoom 2.6s var(--ease) both; }
  .js .hero__title .ln > span { animation: lineUp var(--t-slow) var(--ease) both; }
  .js .hero__title .ln:nth-child(1) > span { animation-delay: .2s; }
  .js .hero__title .ln:nth-child(2) > span { animation-delay: calc(.2s + var(--stagger)); }
  .js .hero__title .ln:nth-child(3) > span { animation-delay: calc(.2s + var(--stagger) * 2); }
  .js .hero .kicker, .js .hero__logo, .js .hero__meta, .js .hero__ctas { animation: fadeUp var(--t-slow) var(--ease) both; }
  .js .hero .kicker { animation-delay: .05s; }
  .js .hero .kicker::before { animation: drawX var(--t-slow) var(--ease) .25s both; }
  .js .hero__logo { animation-delay: .7s; }
  .js .hero__meta { animation-delay: .8s; }
  .js .hero__ctas { animation-delay: .9s; }
  .js .hero__firma { animation: fadeIn var(--t-slow) var(--ease) 1.1s both; }
  .js .hero .rail::before { animation: grow var(--t-slow) var(--ease) .5s both; }
  .js .hero .corner { animation: fadeIn var(--t-photo) var(--ease) .6s both; }
  .js .hero__scroll span::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--rosso-acceso); animation: drip 2.6s var(--ease) 1.8s infinite; }

  /* Comparse allo scorrimento: salgono di poco e si accendono */
  .js .reveal { opacity: 0; transform: translate3d(0, var(--shift), 0); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: var(--d, 0ms); }
  .js .reveal.in { opacity: 1; transform: none; }
  /* Blocchi affiancati: solo dissolvenza, cosi restano allineati */
  .js .stat.reveal, .js .space.reveal, .js .card.reveal, .js .extra.reveal { transform: none; }

  /* 1. Foto: si svelano dal basso come una tendina e intanto lo zoom rientra.
        La maschera sale mentre la foto scende della stessa quantità: l'immagine resta ferma
        e si vede solo il bordo che si apre. Solo transform. */
  .js .curtain.reveal { opacity: 1; transform: none; }
  .js .curtain.reveal .mask { transform: translate3d(0, 100%, 0); transition: transform var(--t-photo) var(--ease); }
  .js .curtain.reveal .mask > img { transform: translate3d(0, -100%, 0) scale(1.14); transition: transform var(--t-photo) var(--ease); }
  .js .curtain.reveal.in .mask, .js .curtain.reveal.in .mask > img { transform: none; }

  /* 2. Titoli delle sezioni: righe che salgono dalla maschera, come nella hero */
  .js .split.reveal { opacity: 1; transform: none; }
  .js .split .ln > span { transform: translate3d(0, 108%, 0); transition: transform var(--t-slow) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger) + var(--d, 0ms)); }
  .js .split.in .ln > span { transform: none; }

  /* 3. Etichette: il trattino rosso si allunga */
  .js .kicker.reveal::before { transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease) .15s; }
  .js .kicker.reveal.in::before { transform: none; }

  /* 4. Sarno: P1, poi 1°, poi 11°. Sulla finale la pioggia compare per ultima e scende piano */
  .js .lap.reveal:nth-child(1) { transition-delay: 0ms; }
  .js .lap.reveal:nth-child(2) { transition-delay: 320ms; }
  .js .lap.reveal:nth-child(3) { transition-delay: 640ms; }
  .js .lap--rain .lap__rain { opacity: 0; transition: opacity var(--t-photo) var(--ease) 1.1s; }
  .js .lap--rain.in .lap__rain { opacity: .5; }
  .lap--rain.live .lap__rain { animation: rain 3.4s linear infinite; }

  /* Galleria su computer: stessa tendina delle foto, in sequenza */
  .js .gal__item.reveal { opacity: 1; transform: none; }
  .js .gal__item.reveal .mask { transform: translate3d(0, 100%, 0); transition: transform var(--t-photo) var(--ease); transition-delay: var(--d, 0ms); }
  .js .gal__item.reveal .mask > img { transform: translate3d(0, -100%, 0) scale(1.14); transition: transform var(--t-photo) var(--ease); transition-delay: var(--d, 0ms); }
  .js .gal__item.reveal.in .mask, .js .gal__item.reveal.in .mask > img { transform: none; }
  @media (hover: hover) { .js .gal__item.reveal.in:hover .mask { transform: scale(1.04); transition-delay: 0ms; } }

  .js .timeline::before { transform: scaleY(0); transform-origin: top; transition: transform var(--t-photo) var(--ease); }
  .js .timeline.in::before { transform: none; }

  /* Galleria a schermo intero */
  .lightbox[open] img { animation: fadeIn var(--t-mid) var(--ease) both; }

  /* Legati allo scorrimento */
  @supports (animation-timeline: scroll()) {
    .progress { animation: progress linear both; animation-timeline: scroll(root); }
  }
}

/* Telefono: animazioni piu leggere. La galleria compare con una dissolvenza, niente parallasse */
@media (prefers-reduced-motion: no-preference) and (max-width: 959px) {
  .js .gal__item.reveal { opacity: 0; transform: translate3d(0, var(--shift), 0); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: var(--d, 0ms); }
  .js .gal__item.reveal.in { opacity: 1; transform: none; }
  .js .gal__item.reveal .mask, .js .gal__item.reveal .mask > img { transform: none; transition: none; }
}

/* 5. Parallasse leggera su missione e podio, solo su computer */
@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
  @supports (animation-timeline: view()) {
    .px { animation: parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}

@keyframes heroZoom { from { transform: scale(1.08); } to { transform: none; } }
@keyframes lineUp { from { transform: translate3d(0, 108%, 0); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translate3d(0, var(--shift), 0); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawX { from { transform: scaleX(0); } to { transform: none; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes drip { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(260%); } }
@keyframes rain { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 7.5rem, 0); } }
@keyframes progress { from { transform: scaleX(0); } to { transform: none; } }
@keyframes parallax { from { transform: translate3d(0, -4%, 0) scale(1.09); } to { transform: translate3d(0, 4%, 0) scale(1.09); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Lenis: regole consigliate dalla libreria */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

@media print {
  .top, .menu, .hero__scroll, .lightbox, .form { display: none !important; }
}

/* Bollino "Powered by Netlify" aggiunto dall'hosting sul piano gratuito: nascosto su richiesta */
iframe[id^="nl-badge"], [id^="nl-badge-frame"] { display: none !important; }