/* 01-tokens.css */
/* ============================================================
   Gettoni. I valori dei colori sono gli stessi di tools/tavolozza.py,
   che li confronta: se uno cambia qui e non li', lo strumento lo dice.
   ============================================================ */
:root {
  /* il buio: l'ora blu del filmato, nei ruoli del nero del riferimento */
  --night: #04070C;
  --card: #0D131C;
  --card-2: #121A25;
  --foot: #0A0F16;

  /* testo sul buio (20,2 · 8,7 · 5,6 sul fondo) */
  --white: #FFFFFF;
  --grey: #A3ABB8;
  --dim: #7E8797;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .18);

  /* la carta: barra alta e modulo */
  --paper: #FFFFFF;
  --paper-2: #F2F4F6;
  --ink: #12161D;
  --ink-2: #4B5462;
  --field-line: #D9DEE4;
  --link-paper: #1F5E31;

  /* gli accenti: il VERDE viene dal marchio del cliente (la punta chiara
     della manta e il suo verde medio), gli altri tre dal filmato; ogni
     tinta ha il capo scuro della sfumatura, che passa 4,5:1 da solo */
  --cyan: #7FD0F0;      --cyan-deep: #3FA9E0;      --cyan-rgb: 127, 208, 240;
  --orange: #F39A48;    --orange-deep: #EC7A2A;    --orange-rgb: 243, 154, 72;
  --green: #7FBA73;     --green-deep: #4E9A55;     --green-rgb: 127, 186, 115;
  --gold: #E9C174;      --gold-deep: #D9A651;      --gold-rgb: 233, 193, 116;

  /* l'accento corrente: la pagina lo fissa con data-accent, e ogni
     sezione o scheda puo' cambiarlo. Di casa e' il verde del marchio. */
  --accent: var(--green);
  --accent-deep: var(--green-deep);
  --accent-rgb: var(--green-rgb);

  /* il bottone: il verde mediano della manta, bianco a 5,6:1, al
     passaggio 7,8 */
  --brand: #2A763E;
  --brand-hover: #1F5E31;

  /* caratteri */
  --font: 'Open Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display: 'Montserrat', 'Gotham', 'Avenir Next', 'Open Sans', sans-serif;

  /* scala */
  --text-xs: .8125rem;
  --text-sm: .9375rem;
  --text: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --h3: clamp(1.375rem, 1rem + 1.2vw, 1.75rem);
  --h2: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  --h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --display-size: clamp(2.1rem, .9rem + 4.9vw, 5.4rem);

  /* forma: dal riferimento */
  --r-mo: 16px;
  --r-card: 8px;
  --r-field: 4px;
  --r-btn: 3px;
  --r-grey: 6px;

  /* spazi */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;
  --gap: 16px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  /* la testata: due barre da 62 */
  --bar-h: 62px;

  /* il piano sequenza */
  --seq-vh: 900vh;

  /* movimento */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 180ms;
  --t: 320ms;
  --t-slow: 600ms;
}

[data-accent="cyan"]   { --accent: var(--cyan);   --accent-deep: var(--cyan-deep);   --accent-rgb: var(--cyan-rgb); }
[data-accent="orange"] { --accent: var(--orange); --accent-deep: var(--orange-deep); --accent-rgb: var(--orange-rgb); }
[data-accent="green"]  { --accent: var(--green);  --accent-deep: var(--green-deep);  --accent-rgb: var(--green-rgb); }
[data-accent="gold"]   { --accent: var(--gold);   --accent-deep: var(--gold-deep);   --accent-rgb: var(--gold-rgb); }

@media (max-width: 900px) {
  :root { --seq-vh: 760vh; --bar-h: 56px; }
}

/* 02-base.css */
/* ============================================================
   Base: caratteri, ripristino, tipografia, bottoni.
   ============================================================ */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/opensans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/opensans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--night); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text);
  line-height: 1.6;
  color: var(--white);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html.menu-open, html.menu-open body { overflow: hidden; }
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
.prose a, .qa-body a, .lede a, .note a, .ct-foot a, .campo-note a, .footer-notes a { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.prose a:hover, .qa-body a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, dt, figure, blockquote { margin: 0; }
address { font-style: normal; }
::selection { background: rgba(var(--accent-rgb), .35); color: var(--white); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* --- tipografia -------------------------------------------------------- */
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.2; }
.lede { font-size: var(--text-lg); color: var(--grey); line-height: 1.55; max-width: 60ch; text-wrap: pretty; }
.note { font-size: var(--text-sm); color: var(--dim); margin-top: var(--s5); max-width: 70ch; }
.prose p + p { margin-top: 1em; }
.prose { color: var(--grey); max-width: 66ch; text-wrap: pretty; }
.prose strong, .prose b { color: var(--white); font-weight: 600; }
.prose--big { font-size: var(--text-lg); line-height: 1.6; }
.prose--wide { max-width: 78ch; }
.term { color: var(--white); font-weight: 600; }
.todo { background: rgba(var(--orange-rgb), .22); color: var(--orange); padding: 0 .3em; border-radius: 3px; }

/* il titolo in sfumatura d'accento, da sinistra a destra, come nel
   riferimento; il capo scuro passa 4,5:1 da solo. */
.grad {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  width: fit-content; max-width: 100%;
  padding-right: .05em;
}
@supports not (-webkit-background-clip: text) { .grad { color: var(--accent); background: none; } }

/* l'occhiello del riferimento: nel colore d'accento, senza segni
   davanti, a 20-24 px */
.label {
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--accent);
  margin-bottom: var(--s3);
  line-height: 1.3;
}
.label--cyan { color: var(--cyan); } .label--orange { color: var(--orange); }
.label--green { color: var(--green); } .label--gold { color: var(--gold); }

/* --- elenchi col pallino in tinta ------------------------------------- */
.dots { display: grid; gap: var(--s2); color: var(--grey); margin-top: var(--s5); }
.dots li { position: relative; padding-left: 1.2em; }
.dots li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* --- bottoni: il rettangolo pieno nel verde del marchio, il grigio, la pastiglia, il contorno ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 42px; padding: 0 22px;
  border-radius: var(--r-btn);
  background: var(--brand); color: var(--white);
  font-size: var(--text-sm); font-weight: 400; line-height: 1;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--brand-hover); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 32px; padding: 0 14px; font-size: var(--text-xs); }
.btn--grey { background: var(--paper-2); color: var(--ink); border-radius: var(--r-grey); }
.btn--grey:hover { background: #E6E9ED; }
.btn--ghost { background: transparent; color: var(--white); border: 1px solid var(--line-2); }
.btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); }
.btn--ink { background: #3A3F45; color: var(--white); border-radius: var(--r-field); min-height: 46px; padding: 0 30px; }
.btn--ink:hover { background: #2B2F34; }
.btn--pill { background: var(--paper); color: var(--ink); border-radius: 999px; min-height: 40px; padding: 0 22px 0 20px; font-size: var(--text-sm); }
.btn--pill:hover { background: #E9ECEF; }
.btn .play { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; margin-right: 2px; }
.btn--pill .play { order: 2; margin: 0 0 0 4px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* il collegamento con la freccia */
.more { display: inline-flex; align-items: center; gap: .4em; color: var(--accent); font-size: var(--text-sm); font-weight: 600; margin-top: var(--s5); }
.more i { width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--t-fast) var(--ease); }
.more:hover i { transform: translateX(3px) rotate(45deg); }

/* --- utilita' --------------------------------------------------------- */
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - 2 * var(--gutter)); }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--white); color: var(--ink); padding: 8px 14px; border-radius: 4px; }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- entrate in scena: solo con JS acceso ------------------------------ */
.js [data-reveal] > .wrap, .js [data-reveal] > .cb-frame { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js [data-reveal].is-in > .wrap, .js [data-reveal].is-in > .cb-frame { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .js [data-reveal] > .wrap, .js [data-reveal] > .cb-frame { opacity: 1; transform: none; }
}

/* 03-layout.css */
/* ============================================================
   Le due barre, il menu, il piede.
   ============================================================ */

/* --- la barra bianca: scorre via con la pagina ------------------------- */
.site-header { position: relative; z-index: 40; }
.bar { height: var(--bar-h); }
.bar > .wrap { height: 100%; display: flex; align-items: center; gap: var(--s5); }
.bar--top { background: var(--paper); color: var(--ink); }
.site-brand { display: inline-flex; align-items: center; flex: none; }
.logo { display: inline-flex; align-items: center; gap: 12px; }
/* il marchio del cliente, in bitmap (src/marchio): la manta e il nome */
.logo .mark { height: 30px; width: auto; }
.logo .logo-word { height: 11px; width: auto; }
.nav-main { display: flex; gap: clamp(14px, 2vw, 30px); margin-left: var(--s4); }
.nav-link { font-size: var(--text-sm); color: var(--ink); padding: 8px 0; position: relative; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.bar-cta { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.bar-cta .btn { min-height: 34px; padding: 0 14px; font-size: var(--text-xs); }
.globe { width: 13px; height: 13px; border-radius: 50%; border: 1.4px solid currentColor; position: relative; }
.globe::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.4px solid currentColor; transform: scaleX(.45); }
.globe::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.4px solid currentColor; }

/* --- la barra scura: resta ------------------------------------------------- */
.bar--sub {
  position: sticky; top: 0; z-index: 41;
  background: rgba(20, 24, 30, .78);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.sub-name { font-size: var(--text-sm); color: var(--white); white-space: nowrap; }
.sub-nav { margin-left: auto; display: flex; gap: clamp(14px, 2vw, 28px); }
.sub-link { font-size: var(--text-sm); color: var(--white); padding: 6px 0; position: relative; opacity: .92; }
.sub-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--white); transform: scaleX(0); transition: transform var(--t-fast) var(--ease); }
.sub-link:hover::after, .sub-link.is-here::after { transform: scaleX(1); }
.bar--sub .btn { margin-left: var(--s2); }
.bar--sub .wrap > .btn { flex: none; }

/* --- il bottone del menu (sotto i 1080) ------------------------------------- */
.menu-toggle { display: none; margin-left: auto; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--ink); }
.menu-bars { display: inline-grid; gap: 5px; width: 22px; }
.menu-bars span { height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }

.site-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--night);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t) var(--ease), visibility 0s var(--t);
  overflow-y: auto;
}
.site-menu:target, .site-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.menu-inner { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; padding: var(--s8) 0 var(--s8); position: relative; min-height: 100%; display: flex; flex-direction: column; }
.menu-close { position: absolute; top: var(--s5); right: 0; width: 44px; height: 44px; display: grid; place-items: center; font-size: 2rem; color: var(--white); border-radius: 50%; border: 1px solid var(--line-2); }
.menu-list { display: grid; gap: 2px; margin-top: var(--s6); }
.menu-list a { display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.menu-list em { font-style: normal; font-size: var(--text-xs); color: var(--dim); }
.menu-list span { font-size: var(--h3); font-weight: 600; letter-spacing: -.01em; }
.menu-list small { grid-column: 2; color: var(--dim); font-size: var(--text-sm); }
.menu-list a[aria-current="page"] span { color: var(--accent); }
.menu-foot { margin-top: auto; padding-top: var(--s7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); }
.menu-tel { color: var(--grey); }
.menu-langs { margin-left: auto; display: flex; gap: var(--s4); }
.menu-langs a { color: var(--dim); }
.menu-langs a[aria-current="true"] { color: var(--white); text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 1080px) {
  .nav-main, .bar-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .sub-nav { display: none; }
  .bar--sub .btn { margin-left: auto; }
}
@media (max-width: 480px) {
  .logo { gap: 9px; }
  .logo .mark { height: 26px; }
  .logo .logo-word { height: 9px; }
}

/* --- sezioni ---------------------------------------------------------------- */
.section { padding: clamp(4rem, 8vw, 7.5rem) 0; }
.section--tight { padding-top: 0; }
.section-head { max-width: 62rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .lede { margin-inline: auto; }
.section-head .lede { margin-top: var(--s4); }
.paper { background: var(--paper); color: var(--ink); }
.paper .lede { color: var(--ink-2); }
.paper h1, .paper h2, .paper h3 { color: var(--ink); }

/* --- il piede ------------------------------------------------------------------ */
.site-footer { background: var(--foot); color: var(--grey); padding: var(--s9) 0 var(--s7); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--s7) var(--s6); }
.footer-brand .logo { flex-direction: column; align-items: flex-start; gap: var(--s4); }
.footer-brand .logo .mark { height: 64px; }
.footer-brand .logo .logo-word { height: 14px; }
.footer-brand .logo .logo-claim { height: 7px; width: auto; margin-top: -6px; opacity: .85; }
.footer-blurb { margin-top: var(--s5); font-size: var(--text-sm); max-width: 34ch; }
.footer-col h2 { font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--white); margin-bottom: var(--s4); }
.footer-list { display: grid; gap: var(--s2); font-size: var(--text-sm); }
.footer-list a:hover { color: var(--white); }
.footer-social { margin-top: var(--s5); grid-auto-flow: column; justify-content: start; gap: var(--s4); }
.footer-legal { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); font-size: var(--text-xs); color: var(--dim); }
.footer-legal a { text-decoration: underline; text-underline-offset: .2em; }
.footer-notes { margin-top: var(--s5); font-size: var(--text-xs); color: var(--dim); max-width: 100ch; line-height: 1.6; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* 04-scrolly.css */
/* ============================================================
   I due filmati: l'apertura in ciclo e il piano sequenza scrubbato.
   Tutti e due a tutto campo, 100svh.
   ============================================================ */

/* --- l'apertura ---------------------------------------------------------- */
.videohero {
  position: relative; height: 100svh; min-height: 560px; overflow: hidden;
  background: var(--night); color: var(--white);
  display: grid; place-items: start center;
  padding-top: calc(var(--bar-h) * 2 + 9vh);
}
.vh-poster, .videohero video { position: absolute; inset: 0; width: 100%; height: 100%; }
.vh-poster img, .videohero video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.videohero video { opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.videohero video[data-playing] { opacity: 1; }

/* Filmato CHIARO (l'alba, luminanza media 90-130 su 255) e testo
   bianco, nel terzo alto come nel riferimento. Le parole stanno sul
   cielo, che e' la parte piu' chiara: un campo denso dietro il blocco
   e una lavata dall'alto, niente sul campo di grano che sta sotto, che
   e' il prodotto. I numeri li conferma tools/contrasto.py, che misura
   il fotogramma piu' chiaro. */
.vh-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 36% at 50% 30%, rgba(4, 7, 12, .62) 0%, rgba(4, 7, 12, .42) 50%, rgba(4, 7, 12, 0) 100%),
    linear-gradient(180deg, rgba(4, 7, 12, .48) 0%, rgba(4, 7, 12, .18) 45%, rgba(4, 7, 12, 0) 70%, rgba(4, 7, 12, .30) 100%);
}
.vh-inner { position: relative; text-align: center; padding: 0 var(--gutter); max-width: 62rem; }
.vh-title {
  font-family: var(--display); font-size: var(--display-size); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; line-height: 1;
  text-shadow: 0 2px 24px rgba(4, 7, 12, .35);
  margin-right: -.22em; white-space: nowrap;
}
/* un peso solo, come il nome nel loro marchio */
.vh-title b { font-weight: 500; }
.vh-title i { font-style: normal; font-weight: 500; }
.vh-sub { margin-top: var(--s4); font-size: clamp(1.1rem, .9rem + .9vw, 1.5rem); font-weight: 700; text-shadow: 0 1px 14px rgba(4, 7, 12, .45); text-wrap: balance; }
.vh-inner .actions { justify-content: center; margin-top: var(--s5); }
.vh-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.vh-scroll i { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); }
@media (max-width: 640px) { .videohero video, .vh-poster img { object-position: 50% 50%; } }

/* --- il piano sequenza ------------------------------------------------------ */
.scrolly { position: relative; height: var(--seq-vh); background: var(--night); color: var(--white); }
.scrolly-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.scrolly-canvas, .scrolly-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrolly-poster img { width: 100%; height: 100%; object-fit: cover; }
.scrolly-canvas { opacity: 0; transition: opacity var(--t) var(--ease); }
[data-painted="true"] .scrolly-canvas { opacity: 1; }
[data-painted="true"] .scrolly-poster { opacity: 0; transition: opacity var(--t) var(--ease) var(--t); }

/* Materiale SCURO (l'ora blu, luminanza 35-110): niente velatura di
   pagina. Sotto la barra scura un filo di scuro perche' la barra e'
   traslucida; in basso un fondo leggero per il contatore. L'alone
   dietro le parole sta nel blocco, capitolo per capitolo. */
.scrolly-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 7, 12, .35) 0%, rgba(4, 7, 12, 0) 18%),
    linear-gradient(0deg, rgba(4, 7, 12, .40) 0%, rgba(4, 7, 12, 0) 22%);
}

/* La didascalia centrata del riferimento: occhiello colorato,
   titolo grande, una riga. In alto o in basso, mai sul soggetto. */
.scrolly-lead, .scrolly-phase {
  position: absolute; left: 0; right: 0;
  display: flex; justify-content: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.scrolly-lead { top: 0; bottom: 0; align-items: center; z-index: 3; }
.scrolly-phase { z-index: 2; }
.scrolly-phase[data-side="top"] { top: calc(var(--bar-h) + 5vh); }
.scrolly-phase[data-side="bottom"] { bottom: 11vh; }
[data-mode="scrub"] .scrolly-phase { opacity: 0; }
.cap { position: relative; text-align: center; max-width: 46rem; padding: var(--s6) var(--s7); }
/* l'alone: un'ellisse nel buio del filmato, in una scatola larga cosi'
   lo zero cade fuori dal blocco e non si vede un rettangolo */
.cap::before {
  content: ''; position: absolute; inset: -60% -70%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(4, 7, 12, var(--halo-d, .6)) 0%, rgba(4, 7, 12, calc(var(--halo-d, .6) * .78)) 40%, rgba(4, 7, 12, 0) 100%);
}
.cap-kicker { font-size: var(--text-lg); color: var(--accent); margin-bottom: var(--s2); }
.scrolly-phase[data-accent="cyan"] .cap-kicker { color: var(--cyan); }
.scrolly-phase[data-accent="orange"] .cap-kicker { color: var(--orange); }
.scrolly-phase[data-accent="green"] .cap-kicker { color: var(--green); }
.scrolly-phase[data-accent="gold"] .cap-kicker { color: var(--gold); }
.cap h2, .cap h3 { font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.06; }
.cap p:last-child { margin-top: var(--s4); font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem); color: rgba(255, 255, 255, .92); line-height: 1.5; text-wrap: pretty; }
.cap--lead h2 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.4rem); }
.cap--lead p:last-child { max-width: 36rem; margin-inline: auto; }

/* il contatore e la barra, in basso: partono a zero e il motore li accende */
.scrolly-hud { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; z-index: 4; display: flex; align-items: center; gap: var(--s4); }
.scrolly-counter { font-family: var(--display); font-size: var(--text-lg); letter-spacing: .06em; color: var(--white); opacity: 0; display: flex; gap: .3em; align-items: baseline; }
.scrolly-counter b { font-weight: 500; font-size: 1.6em; line-height: 1; }
.scrolly-counter span { color: rgba(255, 255, 255, .6); font-size: var(--text-sm); }
.scrolly-progress { flex: 1; height: 2px; background: rgba(255, 255, 255, .18); border-radius: 2px; overflow: hidden; opacity: 0; }
.scrolly-progress i { display: block; height: 100%; width: 0; background: var(--white); }
[data-mode="static"] .scrolly-hud { display: none; }

/* --- il ripiego statico: poster, apertura, e i capitoli come colonna -----
   Le didascalie stanno DENTRO il palco (e' il contratto del motore).
   Senza JavaScript il palco smette di essere una finestra di 100svh
   che ritaglia: cresce con la colonna, il poster resta la prima
   schermata e l'apertura gli sta sopra. */
.scrolly[data-mode="static"] { height: auto; }
[data-mode="static"] .scrolly-stage { position: relative; height: auto; overflow: visible; }
[data-mode="static"] .scrolly-poster, [data-mode="static"] .scrolly-veil, [data-mode="static"] .scrolly-lead { height: 100svh; bottom: auto; }
[data-mode="static"] .scrolly-poster { position: relative; }
[data-mode="static"] .scrolly-canvas { display: none; }
[data-mode="static"] .scrolly-captions { padding: var(--s8) 0; display: grid; gap: var(--s8); }
[data-mode="static"] .scrolly-phase { position: static; flex-direction: column; align-items: center; opacity: 1; padding: 0 var(--gutter); }
[data-mode="static"] .scrolly-phase .cap::before { display: none; }
[data-mode="static"] .scrolly-still { width: min(1000px, 100%); border-radius: var(--r-mo); overflow: hidden; margin-top: var(--s5); }
[data-mode="scrub"] .scrolly-still { display: none; }

@media (max-width: 900px) {
  .cap { padding: var(--s5) var(--s4); max-width: 100%; }
  /* sul telefono il blocco e' largo quanto lo schermo: l'ellisse
     diventa una lavata piatta fino al 70% e sfuma solo ai bordi alto e
     basso, altrimenti ai lati resta mezza densita' */
  .cap::before { inset: -45% -10%; background: radial-gradient(ellipse closest-side at 50% 50%, rgba(4, 7, 12, var(--halo-d, .6)) 0%, rgba(4, 7, 12, var(--halo-d, .6)) 70%, rgba(4, 7, 12, 0) 100%); }
  .scrolly-phase[data-side="bottom"] { bottom: 13vh; }
  .scrolly-phase[data-side="top"] { top: calc(var(--bar-h) + 3vh); }
}

/* 05-blocks.css */
/* ============================================================
   I blocchi editoriali.
   ============================================================ */

/* --- la frase centrata --------------------------------------------------- */
.ledeblock { padding-bottom: 0; }
.lede-big { text-align: center; font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem); color: var(--grey); line-height: 1.65; text-wrap: pretty; }
.lede-big b, .lede-big strong { color: var(--white); font-weight: 600; }

/* --- il mosaico ---------------------------------------------------------- */
.mo-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 250px; grid-auto-flow: dense; gap: var(--gap); }
.mo {
  position: relative; overflow: hidden; border-radius: var(--r-mo);
  background: linear-gradient(160deg, var(--card-2) 0%, var(--card) 100%);
  display: flex; flex-direction: column;
}
.mo--tall { grid-row: span 2; }
.mo--wide { grid-column: span 2; }
.mo h3 {
  position: relative; z-index: 2; text-align: center;
  font-size: clamp(1.25rem, 1rem + .8vw, 1.5rem); font-weight: 600; letter-spacing: -.01em;
  padding: 22px 26px 0; text-wrap: balance;
}
.mo .clip, .mo-img { position: absolute; inset: 0; z-index: 1; }
.mo .clip img, .mo .clip video, .mo-img img { width: 100%; height: 100%; object-fit: cover; }
.mo .clip::after, .mo-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 7, 12, .62) 0%, rgba(4, 7, 12, .10) 38%, rgba(4, 7, 12, 0) 60%, rgba(4, 7, 12, .25) 100%); }
.mo--num { background: radial-gradient(ellipse 80% 70% at 50% 40%, #1A2A44 0%, var(--card) 100%); }
.mo-big { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; gap: .15em; padding-bottom: 20px; }
.mo-big b { font-family: var(--display); font-weight: 300; font-size: clamp(4.5rem, 3rem + 5vw, 7.5rem); line-height: 1; letter-spacing: .02em; color: var(--white); text-shadow: 0 0 40px rgba(var(--accent-rgb), .35); }
.mo-big small { font-family: var(--display); font-weight: 300; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); color: var(--grey); align-self: flex-end; padding-bottom: .55em; }
/* il tondo bianco del riferimento */
.mo-go {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  width: 48px; height: 48px; border-radius: 50%; background: var(--paper);
  display: grid; place-items: center;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.mo-go i { width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translate(-1px, -1px) rotate(-45deg); }
.mo-go:hover { transform: scale(1.08); background: var(--accent); }
.mo-go::after { content: ''; position: absolute; inset: 0; }
.mo:has(.mo-go:hover) .clip img, .mo:has(.mo-go:hover) .mo-img img { transform: scale(1.03); }
.mo .clip img, .mo-img img { transition: transform var(--t-slow) var(--ease); }
@media (max-width: 900px) { .mo-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } .mo--wide { grid-column: span 2; } }
@media (max-width: 560px) { .mo-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; } .mo--tall { grid-row: span 1; } .mo--wide { grid-column: span 1; } }

/* i ritagli in ciclo */
.clip { position: relative; overflow: hidden; background: var(--card); }
.clip img, .clip video { width: 100%; height: 100%; object-fit: cover; }
.clip video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.clip video[data-playing] { opacity: 1; }

/* --- il blocco firma: il campo --------------------------------------------- */
.campo { display: grid; gap: var(--s5); max-width: 1040px; margin-inline: auto; }
.campo input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.seg { justify-self: center; display: inline-flex; gap: 4px; padding: 4px; background: var(--card-2); border-radius: 999px; }
.seg-item { padding: 9px 18px; border-radius: 999px; font-size: var(--text-sm); color: var(--grey); cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); white-space: nowrap; }
.seg-item:hover { color: var(--white); }
/* lo stato scelto si INVERTE: pastiglia bianca piena, testo scuro */
#cv-rgb:checked ~ .seg [for="cv-rgb"], #cv-ndvi:checked ~ .seg [for="cv-ndvi"], #cv-dose:checked ~ .seg [for="cv-dose"] { background: var(--paper); color: var(--ink); font-weight: 600; }
#cv-rgb:focus-visible ~ .seg [for="cv-rgb"], #cv-ndvi:focus-visible ~ .seg [for="cv-ndvi"], #cv-dose:focus-visible ~ .seg [for="cv-dose"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.campo-stage { position: relative; border-radius: var(--r-mo); overflow: hidden; background: var(--card); padding: clamp(12px, 3vw, 28px); }
.campo-svg { width: 100%; height: auto; aspect-ratio: 16 / 12; }
.campo-svg .layer { transition: opacity var(--t-slow) var(--ease); }
.campo-svg .layer--ndvi, .campo-svg .layer--dose { opacity: 0; }
.campo-svg .layer rect { shape-rendering: crispEdges; }
.campo-grid line { stroke: rgba(4, 7, 12, .35); stroke-width: .35; }
.campo-route line { stroke: rgba(255, 255, 255, .55); stroke-width: .5; stroke-dasharray: 2 2; opacity: 0; transition: opacity var(--t-slow) var(--ease); }
#cv-ndvi:checked ~ .campo-stage .layer--ndvi { opacity: 1; }
#cv-dose:checked ~ .campo-stage .layer--dose { opacity: 1; }
#cv-dose:checked ~ .campo-stage .campo-route line { opacity: 1; }
.campo-legend { display: none; margin-top: var(--s4); font-size: var(--text-sm); color: var(--grey); text-align: center; }
#cv-rgb:checked ~ .campo-stage .campo-legend--rgb, #cv-ndvi:checked ~ .campo-stage .campo-legend--ndvi, #cv-dose:checked ~ .campo-stage .campo-legend--dose { display: block; }
.campo-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.campo-nums > div { background: var(--card); border-radius: var(--r-card); padding: var(--s5) var(--s5) var(--s5); }
.campo-nums dt { font-size: var(--text-sm); color: var(--grey); }
.campo-nums dd { display: flex; align-items: baseline; gap: .2em; margin-top: var(--s2); }
.campo-nums dd b { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); line-height: 1; color: var(--accent); letter-spacing: .01em; }
.campo-nums dd small { font-size: var(--text-lg); color: var(--grey); }
.campo-nums p { margin-top: var(--s3); font-size: var(--text-sm); color: var(--dim); line-height: 1.5; }
.campo-note { font-size: var(--text-sm); color: var(--dim); text-align: center; max-width: 70ch; margin-inline: auto; }
@media (max-width: 720px) { .campo-nums { grid-template-columns: 1fr; } .seg-item { padding: 8px 12px; font-size: var(--text-xs); } }

/* --- la griglia di pregi ------------------------------------------------------ */
.ft-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem) var(--s6); }
.ft-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ft-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ft-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ft h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
.ft p { margin-top: var(--s4); color: var(--grey); font-size: var(--text); line-height: 1.5; }
.ft p + p { margin-top: var(--s1); }
@media (max-width: 900px) { .ft-grid--3, .ft-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ft-grid--3, .ft-grid--2, .ft-grid--4 { grid-template-columns: 1fr; } }

/* --- la flotta: schede tecniche ---------------------------------------------- */
.fl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.fl { background: var(--card); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.fl-media { position: relative; aspect-ratio: 16 / 10; }
.fl-media .clip, .fl-img { position: absolute; inset: 0; }
.fl-img img { width: 100%; height: 100%; object-fit: cover; }
.fl-media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, rgba(13, 19, 28, 0), var(--card)); pointer-events: none; }
.fl-body { padding: var(--s5) var(--s6) var(--s6); display: flex; flex-direction: column; flex: 1; }
.fl-body .label { font-size: var(--text-sm); margin-bottom: var(--s2); }
.fl-body h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.fl-body > p { margin-top: var(--s3); color: var(--grey); font-size: var(--text-sm); line-height: 1.55; }
.fl-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s4); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.fl-specs--wide { grid-template-columns: repeat(4, 1fr); }
.fl-specs dd { display: flex; align-items: baseline; gap: .15em; }
.fl-specs dd b { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--white); white-space: nowrap; }
.fl-specs dd small { font-size: var(--text-sm); color: var(--grey); }
.fl-specs dt { font-size: var(--text-xs); color: var(--dim); margin-top: 2px; line-height: 1.35; }
.fl .more { margin-top: auto; padding-top: var(--s5); }
@media (max-width: 900px) { .fl-grid { grid-template-columns: 1fr; } .fl { flex-direction: row; } .fl-media { width: 40%; aspect-ratio: auto; } .fl-media::after { display: none; } }
@media (max-width: 640px) { .fl { flex-direction: column; } .fl-media { width: auto; aspect-ratio: 16 / 10; } .fl-media::after { display: block; } .fl-specs--wide { grid-template-columns: repeat(2, 1fr); } }

/* una macchina per esteso */
.mc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.mc--flip .mc-media { order: 2; }
.mc-media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; position: relative; }
.mc-media .clip, .mc-media .fl-img { position: absolute; inset: 0; }
.mc-media .fl-img img { width: 100%; height: 100%; object-fit: cover; }
.mc-body h2 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem); }
.mc-body .prose { margin-top: var(--s4); }
.mc-body .fl-specs { margin-top: var(--s6); }
@media (max-width: 900px) { .mc { grid-template-columns: 1fr; } .mc--flip .mc-media { order: 0; } }

/* --- numeri sul fotogramma ---------------------------------------------------- */
.st-frame { position: relative; border-radius: var(--r-mo); overflow: hidden; aspect-ratio: 16 / 9; max-height: 640px; background: var(--card); }
.st-frame .clip, .st-frame > picture { position: absolute; inset: 0; }
.st-frame > picture img { width: 100%; height: 100%; object-fit: cover; }
.st-veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 7, 12, .85) 0%, rgba(4, 7, 12, .45) 30%, rgba(4, 7, 12, 0) 60%); }
.st-row { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3rem); text-align: center; }
.st-row dd { display: inline-flex; align-items: baseline; gap: .15em; justify-content: center; }
.st-row dd b { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.st-row dd small { font-size: var(--text); color: rgba(255, 255, 255, .85); }
.st-row dt { font-size: var(--text-sm); color: rgba(255, 255, 255, .85); margin-top: var(--s2); }
@media (max-width: 720px) { .st-frame { aspect-ratio: 4 / 5; } .st-row { grid-template-columns: repeat(2, 1fr); } }

/* --- didascalia grande sopra una fotografia ----------------------------------- */
.capblock { padding: 0; }
.cb-frame { position: relative; height: clamp(520px, 78vh, 820px); overflow: hidden; display: grid; place-items: center; }
.cb-frame > picture, .cb-frame > .clip { position: absolute; inset: 0; }
.cb-frame > picture img { width: 100%; height: 100%; object-fit: cover; }
.cb-veil { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(4, 7, 12, .70) 0%, rgba(4, 7, 12, .35) 55%, rgba(4, 7, 12, .15) 100%); }
.cb-text { position: relative; text-align: center; max-width: 52rem; padding: 0 var(--gutter); }
.cb-text h2 { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4rem); text-shadow: 0 2px 24px rgba(4, 7, 12, .5); }
.cb-text p { margin-top: var(--s4); font-size: var(--text-lg); color: rgba(255, 255, 255, .92); max-width: 40rem; margin-inline: auto; text-shadow: 0 1px 12px rgba(4, 7, 12, .5); }

/* --- immagine e testo --------------------------------------------------------- */
.sp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.sp--flip .sp-img, .sp--flip .clip { order: 2; }
.sp-img, .sp .clip { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; }
.sp-img img { width: 100%; height: 100%; object-fit: cover; }
.sp-text h2 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.75rem); }
.sp-text .prose { margin-top: var(--s4); }
@media (max-width: 900px) { .sp { grid-template-columns: 1fr; } .sp--flip .sp-img, .sp--flip .clip { order: 0; } }

/* --- apertura di pagina interna ------------------------------------------------ */
.pagehero { position: relative; padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem); background: var(--night); overflow: hidden; }
.pagehero--media { min-height: 70svh; display: flex; align-items: flex-end; }
.ph-media { position: absolute; inset: 0; }
.ph-media picture, .ph-media .clip { position: absolute; inset: 0; }
.ph-media img { width: 100%; height: 100%; object-fit: cover; }
.ph-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 7, 12, .30) 0%, rgba(4, 7, 12, .25) 40%, rgba(4, 7, 12, .92) 100%); }
.pagehero .wrap { position: relative; }
.ph-text { max-width: 46rem; }
.ph-text .lede { margin-top: var(--s5); color: rgba(255, 255, 255, .9); }
.pagehero:not(.pagehero--media) .ph-text .lede { color: var(--grey); }

/* --- il punto -------------------------------------------------------------------- */
.pt { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pt-head h2 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.75rem); }
@media (max-width: 800px) { .pt { grid-template-columns: 1fr; } }

/* --- righe -------------------------------------------------------------------------- */
.row-list { border-top: 1px solid var(--line); }
.row-item { display: grid; grid-template-columns: 3rem 1fr auto; gap: var(--s4) var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--line); align-items: start; }
.row-n { font-family: var(--display); color: var(--accent); font-size: var(--text-lg); padding-top: .2em; }
.row-item h3 { font-size: var(--text-xl); }
.row-item p { margin-top: var(--s2); color: var(--grey); max-width: 62ch; }
.row-meta { font-size: var(--text-sm); color: var(--dim); white-space: nowrap; padding-top: .35em; }
@media (max-width: 640px) { .row-item { grid-template-columns: 2.5rem 1fr; } .row-meta { grid-column: 2; padding-top: 0; } }

/* --- passi ----------------------------------------------------------------------------- */
.step-list { display: grid; gap: var(--gap); counter-reset: step; }
.step-list--3 { grid-template-columns: repeat(3, 1fr); }
.step-list--2 { grid-template-columns: repeat(2, 1fr); }
.step-list li { background: var(--card); border-radius: var(--r-card); padding: var(--s6) var(--s5); }
.step-n { display: block; font-family: var(--display); font-size: 2rem; font-weight: 300; color: var(--accent); line-height: 1; margin-bottom: var(--s4); }
.step-list h3 { font-size: var(--text-xl); }
.step-list p { margin-top: var(--s2); color: var(--grey); font-size: var(--text-sm); }
@media (max-width: 900px) { .step-list--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .step-list--3, .step-list--2 { grid-template-columns: 1fr; } }

/* --- tabella ---------------------------------------------------------------------------- */
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-card); background: var(--card); }
.tbl { width: 100%; border-collapse: collapse; min-width: 640px; font-size: var(--text-sm); }
.tbl th, .tbl td { padding: var(--s4) var(--s5); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.tbl tbody th { font-weight: 600; color: var(--white); }
.tbl td { color: var(--grey); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }

/* --- domande ---------------------------------------------------------------------------- */
.fq { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); }
.fq-list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s4) 0; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--text-lg); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { flex: none; width: 12px; height: 12px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg); transition: transform var(--t) var(--ease); margin-right: 4px; }
.qa[open] summary i { transform: rotate(225deg); }
.qa-body { padding: 0 0 var(--s5); color: var(--grey); max-width: 62ch; }
.qa-body p + p { margin-top: .8em; }
@media (max-width: 800px) { .fq { grid-template-columns: 1fr; } }

/* --- collegamenti alle altre pagine ---------------------------------------------------------- */
.pl-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); }
.pl-list a { display: grid; gap: var(--s2); padding: var(--s5); border-radius: var(--r-card); background: var(--card); min-height: 130px; position: relative; transition: background var(--t-fast) var(--ease); }
.pl-list a:hover { background: var(--card-2); }
.pl-list b { font-size: var(--text-lg); font-weight: 600; }
.pl-list span { font-size: var(--text-sm); color: var(--grey); }
.pl-list i { position: absolute; right: var(--s5); top: var(--s5); width: 9px; height: 9px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); transform: rotate(45deg); }

/* --- chiusura ----------------------------------------------------------------------------------- */
.cta { text-align: center; }
.cta-inner { max-width: 48rem; margin-inline: auto; }
.cta-inner .lede { margin: var(--s4) auto 0; }
.cta-inner .actions { justify-content: center; }

/* --- la sezione bianca del modulo ----------------------------------------------------------------- */
.contact { background: var(--paper); color: var(--ink); }
.contact .section-head h2 { color: var(--ink); }
.contact .section-head .lede { color: var(--ink-2); }
.ct { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ct-lines { display: grid; gap: var(--s4); border-top: 1px solid var(--field-line); padding-top: var(--s5); }
.ct-lines li { display: grid; gap: 2px; }
.ct-lines span { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ct-lines a, .ct-lines b { font-weight: 600; color: var(--ink); text-decoration: none; }
.ct-lines a:hover { color: var(--link-paper); }
.ct-foot { margin-top: var(--s5); font-size: var(--text-sm); color: var(--ink-2); }
@media (max-width: 860px) { .ct { grid-template-columns: 1fr; } }

/* 06-forms.css */
/* ============================================================
   Il modulo del riferimento: campi bianchi con bordo sottile, raggio
   4, etichetta dentro il campo che sale quando si scrive, bottone
   antracite. Sulla carta e', nel pannello, sul buio.
   ============================================================ */
.form { display: grid; gap: var(--s4); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--gap); }
.fld { position: relative; display: grid; }
.fld--wide { grid-column: 1 / -1; }
.fld label {
  position: absolute; left: 14px; top: 15px; font-size: var(--text-sm); color: var(--ink-2);
  pointer-events: none; transition: transform var(--t-fast) var(--ease), font-size var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  transform-origin: left top;
}
.fld label em { font-style: normal; color: var(--ink-2); }
.fld input, .fld select, .fld textarea {
  width: 100%; min-height: 52px; padding: 22px 14px 8px;
  font: inherit; font-size: var(--text-sm); color: var(--ink);
  background: var(--paper); border: 1px solid var(--field-line); border-radius: var(--r-field);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.fld select { padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 24px, calc(100% - 15px) 24px; background-size: 5px 5px; background-repeat: no-repeat; }
.fld textarea { resize: vertical; min-height: 120px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--link-paper); box-shadow: 0 0 0 3px rgba(42, 118, 62, .18); outline: none; }
/* L'etichetta sale quando il campo ha il fuoco o un testo. Il menu a
   tendina un testo ce l'ha sempre («Scegliete»), quindi la sua
   etichetta sta sempre su. Il controllo precede l'etichetta nel DOM
   (blocks.mjs): il combinatore ~ guarda solo in avanti. */
.fld input:focus ~ label, .fld input:not(:placeholder-shown) ~ label,
.fld textarea:focus ~ label, .fld textarea:not(:placeholder-shown) ~ label,
.fld select ~ label { transform: translateY(-9px); font-size: .72rem; }
.fld-err { font-size: var(--text-xs); color: #B3261E; min-height: 0; margin-top: 4px; }
.fld[data-invalid] input, .fld[data-invalid] select, .fld[data-invalid] textarea { border-color: #B3261E; }
.hp { position: absolute; left: -9999px; }
.consents { display: grid; gap: var(--s3); font-size: var(--text-sm); color: var(--ink-2); }
.chk { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--brand); flex: none; }
.chk a { color: var(--link-paper); }
.form .actions { margin-top: var(--s2); }
.form-ok { padding: var(--s5); background: var(--paper-2); border-radius: var(--r-field); font-weight: 600; color: var(--ink); }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }

/* dentro il pannello, sul buio */
.b2b-panel .form { color: var(--white); }
.b2b-panel .fld label, .b2b-panel .fld label em { color: var(--grey); }
.b2b-panel .fld input, .b2b-panel .fld select, .b2b-panel .fld textarea { background: var(--card-2); border-color: var(--line-2); color: var(--white); }
.b2b-panel .fld select { background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%), linear-gradient(135deg, var(--grey) 50%, transparent 50%); }
.b2b-panel .fld input:focus, .b2b-panel .fld select:focus, .b2b-panel .fld textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.b2b-panel .consents { color: var(--grey); }
.b2b-panel .chk a { color: var(--accent); }
.b2b-panel .btn--ink { background: var(--brand); }
.b2b-panel .btn--ink:hover { background: var(--brand-hover); }
.b2b-panel .form-ok { background: var(--card-2); color: var(--white); }
.b2b-panel .fields { grid-template-columns: 1fr; }

/* 07-panels.css */
/* ============================================================
   Il pannello di contatto: entra al 40% di scroll o dopo 25 secondi,
   mai sopra i filmati o sul modulo, chiuso resta chiuso sette giorni.
   E' una scheda scura con raggio 16, come quelle del mosaico.
   ============================================================ */
.b2b-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: min(400px, calc(100vw - 40px));
  max-height: calc(100svh - 40px); overflow-y: auto;
  background: var(--card); color: var(--white);
  border-radius: var(--r-mo); padding: var(--s6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.b2b-panel.is-open { opacity: 1; transform: none; }
.b2b-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: var(--grey); }
.b2b-close:hover { background: var(--card-2); color: var(--white); }
.b2b-panel h2 { font-size: var(--text-xl); padding-right: 40px; }
.b2b-intro { margin-top: var(--s2); font-size: var(--text-sm); color: var(--grey); }
.b2b-choices { display: grid; gap: var(--s2); margin-top: var(--s5); }
.b2b-option { display: grid; gap: 2px; text-align: left; padding: var(--s3) var(--s4); border-radius: var(--r-card); background: var(--card-2); transition: background var(--t-fast) var(--ease); }
.b2b-option:hover { background: #18222F; }
.b2b-option b { font-weight: 600; }
.b2b-option span { font-size: var(--text-xs); color: var(--grey); }
.b2b-back { font-size: var(--text-xs); color: var(--grey); margin-bottom: var(--s3); text-decoration: underline; text-underline-offset: .2em; }
.b2b-panel .form { margin-top: var(--s4); }
@media (max-width: 480px) { .b2b-panel { right: 12px; bottom: 12px; left: 12px; width: auto; padding: var(--s5); } }

/* 08-motion.css */
/* ============================================================
   Le pagine di servizio: le immagini e il movimento.

   Tutto il movimento dei diagrammi sta in UNA variabile, --p, da 0 a
   1, registrata cosi' il browser la interpola. I pezzi del disegno la
   leggono con clamp() e min(): la cella si accende quando --p supera
   la sua frazione di rotta, la riga di scansione sta a --p per cento
   dell'altezza, il drone sta a --p per cento del percorso. app.js
   accende la classe che fa girare l'animazione solo quando il blocco
   e' in vista, e con il movimento ridotto tutto resta fermo nello
   stato finale.
   ============================================================ */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@keyframes mf-p { from { --p: 0; } to { --p: 1; } }
@keyframes mf-p-loop { 0% { --p: 0; } 88% { --p: 1; } 100% { --p: 1; } }

.wrap--mid { width: min(1040px, 100% - 2 * var(--gutter)); }
.note--center { text-align: center; margin-inline: auto; }
[data-count] { font-variant-numeric: tabular-nums; }

/* --- la tendina: le immagini entrano da sinistra con il filo d'accento ------- */
.js .wipe { clip-path: inset(0 100% 0 0); }
.js .is-in .wipe { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease) .1s; }
.js .wipe::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 6; pointer-events: none; opacity: 0; background: var(--accent); box-shadow: 0 0 18px 3px rgba(var(--accent-rgb), .55); }
.js .is-in .wipe::after { animation: wipe-line 1.1s var(--ease) .1s both; }
@keyframes wipe-line { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* --- l'apertura: parallasse dolce con lo scorrimento, solo dove il browser lo sa fare -------- */
@supports (animation-timeline: scroll()) {
  .js .pagehero--media .ph-media img, .js .pagehero--media .ph-media video { animation: ph-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  .js .cb-frame > picture img, .js .cb-frame > .clip img, .js .cb-frame > .clip video { animation: cb-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}
@keyframes ph-drift { from { transform: translateY(0) scale(1.06); } to { transform: translateY(16%) scale(1.06); } }
@keyframes cb-drift { from { transform: translateY(-7%) scale(1.14); } to { transform: translateY(7%) scale(1.14); } }

/* --- la telemetria sull'apertura ---------------------------------------------
   Una riga di scansione che passa una volta e le letture in alto a
   destra. Le letture sono DI ESEMPIO e lo dicono. */
.ph-hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hud-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), .95) 30%, rgba(var(--accent-rgb), .95) 70%, transparent 100%); box-shadow: 0 0 26px 4px rgba(var(--accent-rgb), .35); }
.hud-scan::after { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 110px; background: linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), 0)); }
.js .hud-scan { animation: hud-scan 3s cubic-bezier(.45, 0, .2, 1) .6s 1 both; }
@keyframes hud-scan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.hud-read { position: absolute; right: clamp(22px, 4vw, 44px); top: 52px; z-index: 3; text-align: right; }
/* l'alone locale, come dietro le didascalie del piano sequenza */
.hud-read::before { content: ''; position: absolute; inset: -50% -40%; z-index: -1; background: radial-gradient(ellipse closest-side at 50% 50%, rgba(4, 7, 12, .62) 0%, rgba(4, 7, 12, .45) 45%, rgba(4, 7, 12, 0) 100%); }
.hud-read dl { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.hud-read dd { display: flex; align-items: baseline; justify-content: flex-end; gap: .15em; }
.hud-read dd b { font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1; color: var(--white); letter-spacing: .02em; }
.hud-read dd small { font-size: var(--text-xs); color: rgba(255, 255, 255, .8); }
.hud-read dt { margin-top: 4px; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.hud-tag { margin-top: 10px; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--accent-rgb), .95); }
@media (max-width: 760px) { .hud-read { display: none; } }

/* --- il punto con la figura ---------------------------------------------------- */
.pt-fig { position: relative; margin-top: var(--s6); border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; background: var(--card); }
.pt-fig picture, .pt-fig .clip, .pt-fig .svg-fig { position: absolute; inset: 0; }
.pt-fig img { width: 100%; height: 100%; object-fit: cover; }
.pt-fig figcaption { position: absolute; left: 14px; right: 14px; bottom: 12px; font-size: var(--text-xs); color: rgba(255, 255, 255, .85); text-shadow: 0 1px 8px rgba(4, 7, 12, .8); }
@media (max-width: 800px) { .pt-fig { margin-top: var(--s5); max-width: 520px; } }

/* --- le righe con la fotografia che segue la lettura ------------------------------ */
.rw { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.rw-media { position: sticky; top: calc(var(--bar-h) + 24px); aspect-ratio: 4 / 5; max-height: calc(100svh - var(--bar-h) - 48px); border-radius: var(--r-mo); overflow: hidden; background: var(--card); }
.rw-shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.rw-shot.is-on { opacity: 1; transform: none; }
.rw-shot picture, .rw-shot .clip, .rw-shot .svg-fig { position: absolute; inset: 0; }
.rw-shot img { width: 100%; height: 100%; object-fit: cover; }
.rw-shot::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, rgba(4, 7, 12, 0), rgba(4, 7, 12, .55)); }
.rw-n { position: absolute; left: 20px; bottom: 16px; z-index: 2; font-family: var(--display); font-size: var(--text-sm); letter-spacing: .06em; color: rgba(255, 255, 255, .75); }
.rw-n b { font-weight: 500; font-size: 1.7em; color: var(--white); margin-right: .1em; }
.row-media { display: none; }
.rw-list .row-item { transition: opacity var(--t) var(--ease); }
.rw-list .row-item h3 { transition: color var(--t) var(--ease); }
.rw-list .row-item.is-on h3 { color: var(--accent); }
.svg-fig { position: absolute; inset: 0; background: var(--card); }
.svg-fig .campo-svg { width: 100%; height: 100%; aspect-ratio: auto; }
@media (max-width: 800px) {
  .rw { grid-template-columns: 1fr; }
  .rw-media { display: none; }
  .row-media { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; margin-bottom: var(--s4); background: var(--card); }
  .row-media picture, .row-media .clip, .row-media .svg-fig { position: absolute; inset: 0; }
  .row-media img { width: 100%; height: 100%; object-fit: cover; }
  .rw-list .row-item.is-on h3 { color: var(--white); }
}

/* --- i passi con la fotografia e la riga che avanza -------------------------------- */
.step-track { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: var(--s5); }
.step-track i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) .3s; }
.is-in .step-track i { transform: none; }
.step-list--media li { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.step-media { position: relative; aspect-ratio: 16 / 9; background: var(--card-2); }
.step-media picture, .step-media .clip { position: absolute; inset: 0; }
.step-media img { width: 100%; height: 100%; object-fit: cover; }
.step-list--media .step-body { padding: var(--s5) var(--s5) var(--s6); }

/* --- il confronto a cursore --------------------------------------------------------- */
.cmp { position: relative; }
.cmp-stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-mo); overflow: hidden; background: var(--card); touch-action: pan-y; }
.cmp-a, .cmp-b { position: absolute; inset: 0; }
.cmp-a picture, .cmp-b picture { position: absolute; inset: 0; }
.cmp-a img, .cmp-b img { width: 100%; height: 100%; object-fit: cover; }
.cmp-b { clip-path: inset(0 0 0 var(--x)); }
.cmp.is-auto { transition: --x 1.8s var(--ease); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 0; z-index: 3; pointer-events: none; }
.cmp-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--white); box-shadow: 0 0 14px rgba(0, 0, 0, .55); }
.cmp-handle i { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--paper); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.cmp-handle i::before, .cmp-handle i::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.cmp-handle i::before { left: 13px; transform: translateY(-50%) rotate(-45deg); }
.cmp-handle i::after { right: 13px; transform: translateY(-50%) rotate(135deg); }
.cmp-tag { position: absolute; top: 14px; z-index: 2; padding: 7px 12px; border-radius: 999px; background: rgba(4, 7, 12, .66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--white); pointer-events: none; }
.cmp-tag--a { left: 14px; } .cmp-tag--b { right: 14px; }
.cmp-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: col-resize; -webkit-appearance: none; appearance: none; }
.cmp-range:focus-visible ~ .cmp-handle i { outline: 2px solid var(--accent); outline-offset: 3px; }
.cmp-scale { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.cmp-scale i { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #F39A48 0%, #ECB860 50%, #3FA9E0 100%); }

/* --- i diagrammi: legende e numeri in comune ----------------------------------------- */
.diag-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3) var(--s6); font-size: var(--text-sm); color: var(--grey); }
.diag-legend span { display: inline-flex; align-items: center; gap: 9px; }
.diag-legend i { width: 14px; height: 14px; border-radius: 3px; background: var(--sw, var(--accent)); }
.diag-legend .diag-legend-route { height: 0; border-top: 2px solid rgba(255, 255, 255, .7); border-radius: 0; background: none; }
.diag-nums { display: grid; gap: var(--gap); }
.diag-nums--3 { grid-template-columns: repeat(3, 1fr); }
.diag-nums > div { background: var(--card); border-radius: var(--r-card); padding: var(--s5); }
.diag-nums dt { font-size: var(--text-sm); color: var(--grey); }
.diag-nums dd { display: flex; align-items: baseline; gap: .2em; margin-top: var(--s2); }
.diag-nums dd b { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem); line-height: 1; color: var(--accent); letter-spacing: .01em; }
.diag-nums dd small { font-size: var(--text-lg); color: var(--grey); }
.diag-nums p { margin-top: var(--s3); font-size: var(--text-sm); color: var(--dim); line-height: 1.5; }
@media (max-width: 720px) { .diag-nums--3 { grid-template-columns: 1fr; } }

/* --- la rotta ------------------------------------------------------------------------- */
.rt { display: grid; gap: var(--s5); max-width: 1000px; margin-inline: auto; }
.rt-stage { background: var(--card); border-radius: var(--r-mo); padding: clamp(12px, 3vw, 28px); }
.rt-svg { width: 100%; height: auto; aspect-ratio: 16 / 12; --p: 0; }
.is-playing .rt-svg { animation: mf-p-loop 11s linear infinite; }
.rt-base rect, .rt-cell { shape-rendering: crispEdges; }
.rt-cell { opacity: clamp(0, (var(--p) - var(--d)) * 60, 1); }
.rt-cell--2 { fill: var(--cyan); } .rt-cell--1 { fill: #2F6F8E; }
.rt-grid line { stroke: rgba(4, 7, 12, .5); stroke-width: .35; }
.rt-route { fill: none; stroke: rgba(255, 255, 255, .65); stroke-width: .55; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.rt-drone { offset-distance: calc(var(--p) * 100%); offset-rotate: 0deg; }
.rt-drone circle { fill: var(--white); }
.rt-drone .rt-glow { fill: rgba(var(--cyan-rgb), .3); }

/* --- lo spettro ------------------------------------------------------------------------ */
.spek { display: grid; gap: var(--s5); max-width: 1000px; margin-inline: auto; }
.sp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3) var(--s6); font-size: var(--text-sm); color: var(--grey); }
.sp-legend span { display: inline-flex; align-items: center; gap: 9px; }
.sp-key { display: inline-block; width: 20px; height: 2px; border-radius: 2px; }
.sp-key--a { background: var(--cyan-deep); } .sp-key--b { background: var(--orange-deep); }
.sp-stage { position: relative; background: var(--card); border-radius: var(--r-mo); padding: clamp(8px, 2.5vw, 24px) clamp(4px, 2vw, 20px); }
.sp-svg { width: 100%; height: auto; --p: 0; font-family: var(--font); }
.is-in .sp-svg { animation: mf-p 4.2s cubic-bezier(.3, 0, .2, 1) .3s forwards; }
.sp-grid line { stroke: rgba(255, 255, 255, .09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sp-grid text, .sp-axis text { fill: var(--dim); font-size: 11px; }
.sp-axis .sp-ytitle, .sp-axis text:last-child { fill: var(--grey); }
.sp-band { opacity: clamp(0, (var(--p) - var(--d)) * 8, 1); }
.sp-band rect { fill: rgba(var(--accent-rgb), .13); }
.sp-band text { fill: var(--white); font-size: 11px; font-weight: 600; }
.sp-band .sp-nm { fill: var(--grey); font-weight: 400; font-size: 10px; }
.sp-area { opacity: clamp(0, (var(--p) - .55) * 5, 1); }
.sp-area--a { fill: rgba(var(--cyan-rgb), .09); } .sp-area--b { fill: rgba(var(--orange-rgb), .09); }
.sp-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--p) * 1.65, 1)); }
.sp-line--a { stroke: var(--cyan-deep); } .sp-line--b { stroke: var(--orange-deep); }
.sp-end { opacity: clamp(0, (var(--p) - .6) * 6, 1); }
.sp-end text { fill: var(--grey); font-size: 12px; }
.sp-ca { fill: var(--cyan-deep); stroke: var(--card); stroke-width: 2; } .sp-cb { fill: var(--orange-deep); stroke: var(--card); stroke-width: 2; }
.sp-cross { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.sp-cross line { stroke: rgba(255, 255, 255, .45); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sp-read { position: absolute; z-index: 3; padding: 8px 12px; border-radius: 6px; background: rgba(13, 19, 28, .94); font-size: var(--text-xs); color: var(--grey); white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); }
.sp-read b { color: var(--white); margin-right: 6px; }
.sp-formula { text-align: center; font-family: var(--display); font-size: var(--text-lg); letter-spacing: .04em; color: var(--white); }
.sp-values summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .4em; color: var(--accent); font-size: var(--text-sm); font-weight: 600; }
.sp-values summary::-webkit-details-marker { display: none; }
.sp-values summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--t) var(--ease); margin-top: -3px; }
.sp-values[open] summary::after { transform: rotate(225deg); margin-top: 3px; }
.sp-values .table-scroll { margin-top: var(--s4); }
.tbl--tight { min-width: 520px; }
@media (max-width: 600px) { .sp-grid text, .sp-axis text, .sp-band text { font-size: 17px; } .sp-band .sp-nm { font-size: 15px; } .sp-end text { display: none; } .sp-formula { font-size: var(--text); } }

/* --- il termogramma ----------------------------------------------------------------------- */
.tm { display: grid; gap: var(--s5); max-width: 1000px; margin-inline: auto; }
.tm input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tm .seg { justify-self: center; }
#tm-vis:checked ~ .seg [for="tm-vis"], #tm-term:checked ~ .seg [for="tm-term"] { background: var(--paper); color: var(--ink); font-weight: 600; }
#tm-vis:focus-visible ~ .seg [for="tm-vis"], #tm-term:focus-visible ~ .seg [for="tm-term"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.tm-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-mo); overflow: hidden; background: var(--card); --p: 0; }
.tm-a, .tm-b { position: absolute; inset: 0; }
.tm-a picture, .tm-b picture { position: absolute; inset: 0; }
.tm-a img, .tm-b img { width: 100%; height: 100%; object-fit: cover; }
.tm-b { clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0); }
.is-in .tm-stage { animation: mf-p 3.4s cubic-bezier(.45, 0, .2, 1) .4s forwards; }
#tm-vis:checked ~ .tm-stage { animation: none; --p: 0; }
.tm-line { position: absolute; left: 0; right: 0; top: calc(var(--p) * 100%); height: 2px; background: linear-gradient(90deg, transparent, var(--accent) 25%, var(--accent) 75%, transparent); box-shadow: 0 0 22px 4px rgba(var(--accent-rgb), .45); opacity: min(clamp(0, var(--p) * 30, 1), clamp(0, (1 - var(--p)) * 30, 1)); }
.tm-spot { position: absolute; z-index: 3; transform: translate(-50%, -50%); opacity: clamp(0, (var(--p) - var(--t) - .05) * 25, 1); }
.tm-spot i { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 2px rgba(4, 7, 12, .55); position: relative; }
.tm-spot i::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); animation: tm-ring 2.4s var(--ease) infinite; }
@keyframes tm-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.tm-tip { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); display: grid; gap: 1px; padding: 7px 11px; border-radius: 6px; background: rgba(4, 7, 12, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; font-size: var(--text-xs); line-height: 1.35; }
.tm-tip b { color: var(--white); } .tm-tip em { font-style: normal; font-weight: 600; color: var(--accent); } .tm-tip small { color: rgba(255, 255, 255, .7); font-size: .6875rem; }
.tm-scale { position: absolute; right: 14px; top: 14px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; align-items: center; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 6px rgba(4, 7, 12, .8); opacity: clamp(0, var(--p) * 6, 1); }
.tm-scale i { flex: 1; width: 8px; border-radius: 4px; margin: 6px 0; background: linear-gradient(180deg, #FFFFF5 0%, #FCE25A 12%, #F89620 30%, #DE3E28 52%, #A0147A 72%, #3A0C6C 88%, #08041A 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
@media (max-width: 640px) { .tm-tip { display: none; } .tm-spot i { width: 14px; height: 14px; } }

/* --- il filare ---------------------------------------------------------------------------- */
.fi { display: grid; gap: var(--s5); max-width: 1000px; margin-inline: auto; }
.fi-stage { background: var(--card); border-radius: var(--r-mo); padding: clamp(12px, 3vw, 28px); }
.fi-svg { width: 100%; height: auto; aspect-ratio: 16 / 10; --p: 0; }
.is-playing .fi-svg { animation: mf-p-loop 13s linear infinite; }
.fi-rows line { stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.fi-rows circle { fill: #2E5A38; }
.fi-plan { fill: rgba(var(--green-rgb), .3); }
.fi-done { fill: var(--green); opacity: clamp(0, (var(--p) - var(--d)) * 60, 1); }
.fi-route { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: .8; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.fi-robot { offset-distance: calc(var(--p) * 100%); offset-rotate: auto; }
.fi-robot rect { fill: var(--white); }
.fi-robot .fi-track { fill: #6C7684; }
.fi-robot .fi-lamp { fill: var(--green); }
.fi-robot .fi-glow { fill: rgba(var(--green-rgb), .16); }

/* --- la linea del tempo ------------------------------------------------------------------- */
.tl { position: relative; padding-top: 34px; }
.tl-track { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.tl-track i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) .3s; }
.is-in .tl-track i { transform: scaleX(var(--fill)); }
.tl-list { display: grid; gap: var(--gap); }
.tl-list--3 { grid-template-columns: repeat(3, 1fr); }
.tl-item { position: relative; background: var(--card); border-radius: var(--r-card); padding: var(--s6) var(--s5); }
.tl-dot { position: absolute; top: -32px; left: var(--s5); width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--dim); background: var(--night); }
.tl-item--done .tl-dot { border-color: var(--accent); background: var(--accent); }
.tl-item--now .tl-dot { border-color: var(--accent); background: var(--accent); animation: tl-pulse 2.4s var(--ease) infinite; }
@keyframes tl-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); } 100% { box-shadow: 0 0 0 14px rgba(var(--accent-rgb), 0); } }
.tl-when { font-family: var(--display); font-size: var(--text-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tl-item h3 { margin-top: var(--s3); font-size: var(--text-xl); }
.tl-item p { margin-top: var(--s2); color: var(--grey); font-size: var(--text-sm); }
@media (max-width: 700px) {
  .tl { padding-top: 0; padding-left: 34px; }
  .tl-track { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .tl-track i { transform-origin: top; transform: scaleY(0); }
  .is-in .tl-track i { transform: scaleY(var(--fill)); }
  .tl-list--3 { grid-template-columns: 1fr; }
  .tl-dot { top: var(--s6); left: -32px; }
}

/* --- il movimento ridotto: tutto fermo nello stato finale ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .wipe, .js .is-in .wipe { clip-path: none; transition: none; }
  .js .wipe::after, .js .is-in .wipe::after { display: none; }
  .js .hud-scan { display: none; }
  .js .pagehero--media .ph-media img, .js .pagehero--media .ph-media video, .js .cb-frame > picture img, .js .cb-frame > .clip img, .js .cb-frame > .clip video { animation: none; }
  .rt-svg, .fi-svg, .sp-svg, .tm-stage, .is-playing .rt-svg, .is-playing .fi-svg, .is-in .sp-svg, .is-in .tm-stage { animation: none; --p: 1; }
  #tm-vis:checked ~ .tm-stage { --p: 0; }
  .tm-spot i::after, .tl-item--now .tl-dot { animation: none; }
  .rw-shot { transition: none; transform: none; }
  .cmp.is-auto { transition: none; }
}