/* Hallmark · shape: Scroll film with a form close · genre: atmospheric · theme: brand (Alkemia navy, azure for Andrei, fuchsia for Elenoire, Bricolage Grotesque) · job: book · redesign: full · draw: manual
 * hero: Stage, the speaker cut out of the reel in a beam of light · nav: edge-aligned, wordmark and one quiet action · footer: mast · imagery: the product itself (the Lumiera demo site, the real reels) and the two speakers · signature: the site takes the visitor's business name live, beside the form
 * axes: dark/grotesk-sans/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E5 S5 R4 V5 · weakest: R, the proof is three sentences and two reviews; set huge and in depth instead of padded with figures nobody gave */
/* Hallmark · copy: verbatim · the thank-you title and the three proof sentences are given by Andrei word for word */
/* Hallmark · waive 79 · a prose document with no hero, the informativa opens on its title · the privacy page is read from the top down and a hero would be invented */
/* Hallmark · answered F14 · the form errors do not reserve height because they show under the field only when they are needed */
/* Hallmark · dropped https://www.youtube.com/watch?v=UfcZFgPsSds, https://www.youtube.com/watch?v=jevf5hngfEA, /scena.js · the podcast links wait for consent «si» in the manifest (it is «in_attesa»); scena.js is replaced by palco.js and esperienza.js */
/* Hallmark · waive 44c · the speaker is bottom-anchored on the stage floor, the words sit on the same floor line · a figure standing in light reads as a person on a stage only if both rest on the ground */
/* Hallmark · waive 81 · .fascio, .pozza and .luce are lighting: the beam, the pool on the floor, the glow behind the glass · they are the stage light of the page, not slots waiting for a picture */
/* Hallmark · waive 83 · the pictures are the product: the demo site assembling, 15 real reels, client logos · the offer is a site and videos, so showing them is the argument */
/* Hallmark · waive 59 · the 93px gap is the apertura above the banda of clienti · la banda sta subito sotto «Sei bravo, ma nessuno lo sa.», dentro la prima schermata, come chiede Andrei */
:root {
  color-scheme: dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.1875rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(3rem, 6.2vw + 0.5rem, 7.75rem);
  --text-section: clamp(2.25rem, 3.6vw + 1rem, 5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.75rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --text-statement: clamp(2rem, 3.4vw + 0.75rem, 4.25rem); --text-figure: clamp(3.25rem, 7.5vw, 8.5rem);
  --text-numeral: clamp(15rem, 44vw, 44rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-scene: 900ms;
  --color-error: oklch(76% 0.14 27); --color-success: oklch(76% 0.13 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 160px; --section-gap-l: 220px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* Il navy del marchio (#0A1220) è il fondo; l'ink è un bianco freddo, mai #fff. */
  --color-paper: oklch(18.2% 0.031 261); --color-paper-2: oklch(22% 0.034 261); --color-paper-3: oklch(26% 0.036 261);
  --color-deep: oklch(12.5% 0.026 261);
  /* L'oro del marchio (#F5C451): stelle, evidenze, il segnale «guarda». */
  --color-gold: oklch(84.7% 0.139 87);
  --color-ink: oklch(95% 0.012 250); --color-ink-2: oklch(87% 0.025 250); --color-muted: oklch(74% 0.03 256);
  --color-rule: oklch(31% 0.035 261); --color-rule-2: oklch(44% 0.04 261);
  /* La luce del palco: bianca, appena tinta dall'accento di chi parla. */
  --light-a: oklch(97% 0.02 230); --light-e: oklch(97% 0.02 350);
  --color-light: var(--light-a);
  --color-shutter: oklch(30% 0.012 255); --color-shutter-2: oklch(24% 0.012 255); --color-shutter-3: oklch(36% 0.012 255);
  --color-mask: oklch(8% 0.03 261);
  /* Due accenti, uno per apertura: azzurro (#33C6E0) per chi arriva da un video di Andrei, fucsia (#FF2E93) per chi arriva da uno di Elenoire. */
  --accent-a: oklch(76.3% 0.123 213); --accent-a-2: oklch(64% 0.11 213); --focus-a: oklch(82% 0.12 213);
  --accent-e: oklch(66.5% 0.248 358); --accent-e-2: oklch(56% 0.2 358); --focus-e: oklch(72% 0.22 358);
  --color-accent: var(--accent-a); --color-accent-2: var(--accent-a-2); --color-accent-ink: oklch(18.2% 0.031 261); --color-focus: var(--focus-a);
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display); --font-outlier: var(--font-display);
  --radius-card: 22px; --radius-field: 12px; --radius-media: 12px; --radius-pill: 999px; --rule-hair: 1px;
  --shadow-card: 0 40px 80px -40px oklch(6% 0.03 261 / 0.85);
  --tracking-display: -0.035em; --display-weight: 700; --body-weight: 400;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Chi arriva da un video di Elenoire vede il fucsia: il testo sopra l'accento resta navy. */
:root[data-origine="e"] { --color-accent: var(--accent-e); --color-accent-2: var(--accent-e-2); --color-focus: var(--focus-e); --color-light: var(--light-e); }

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/bricolage.woff2") format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-weight: var(--body-weight); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 32%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.015em; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* Parti ripetute: barra, bottoni, campi, banner dei cookie, spazi per i fatti che mancano. */
.salta { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.salta:focus-visible { top: var(--space-md); }
html:not([data-origine="e"]) [data-per="e"], html[data-origine="e"] [data-per="a"] { display: none; }

body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-tooltip); pointer-events: none; background-image: var(--grain); opacity: 0.05; mix-blend-mode: overlay; }

.barra { position: fixed; z-index: var(--z-sticky-nav); inset-inline: 0; top: 0; min-height: 72px; display: flex; align-items: center; background: linear-gradient(to bottom, color-mix(in oklab, var(--color-deep) 80%, transparent), transparent); transition: transform var(--dur-long) var(--ease-out); }
.barra::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, var(--color-deep) 92%, transparent); box-shadow: 0 1px 0 color-mix(in oklab, var(--color-ink) 7%, transparent); opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.barra.piena::before { opacity: 1; }
.barra.scesa:not(:focus-within) { transform: translateY(-100%); }
.barra .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
[data-pagina="semplice"] .barra { position: static; background: none; }
.marchio { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: -0.045em; text-decoration: none; }
.marchio:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.corto { display: none; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: var(--display-weight) var(--text-md)/1 var(--font-body); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; cursor: pointer; translate: var(--mx, 0) var(--my, 0); box-shadow: 0 0 0 0 transparent, 0 18px 40px -18px var(--color-accent); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-long) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: color-mix(in oklab, var(--color-accent) 84%, var(--color-light)); border-color: color-mix(in oklab, var(--color-accent) 84%, var(--color-light)); box-shadow: 0 0 0 6px color-mix(in oklab, var(--color-accent) 18%, transparent), 0 24px 48px -16px var(--color-accent); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-quieto { min-height: 44px; background: color-mix(in oklab, var(--color-paper) 55%, transparent); border-color: var(--color-rule-2); color: var(--color-ink); box-shadow: none; }
.btn-quieto:hover { background: var(--color-paper-2); border-color: var(--color-ink-2); box-shadow: none; }
.btn-largo { min-height: 52px; padding-inline: var(--space-xl); font-size: var(--text-lg); }
.btn-pieno { width: 100%; }

.pausa { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-paper) 60%, transparent); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.pausa::before, .pausa::after { content: ""; position: absolute; top: 15px; width: 4px; height: 14px; border-radius: 1px; background: var(--color-ink-2); }
.pausa::before { left: 15px; } .pausa::after { right: 15px; }
.pausa[aria-pressed="true"]::before { left: 17px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--color-ink); }
.pausa[aria-pressed="true"]::after { display: none; }
.pausa:hover { border-color: var(--color-ink-2); }
.pausa:active { transform: translateY(1px); }
.pausa:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.pausa[aria-pressed="true"] { border-color: var(--color-accent); }

/* Campi del modulo */
.campo { display: grid; gap: var(--space-xs); align-content: start; }
.campo > label:not(.spunta) { font-size: var(--text-sm); line-height: 1.3; color: var(--color-ink-2); }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"], .campo select { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-field); background: color-mix(in oklab, var(--color-deep) 70%, transparent); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.campo input::placeholder { color: var(--color-muted); opacity: 1; }
.campo input:hover, .campo select:hover { border-color: var(--color-ink-2); }
.campo input:focus-visible, .campo select:focus-visible { outline-color: var(--color-focus); border-color: var(--color-focus); background: var(--color-deep); }
.campo [aria-invalid="true"] { border-color: var(--color-error); }
.campo input:disabled { opacity: 0.55; cursor: not-allowed; }
.selezione { position: relative; }
.selezione select { appearance: none; padding-right: var(--space-2xl); cursor: pointer; }
.selezione select option { background: var(--color-paper-2); color: var(--color-ink); }
.selezione::after { content: ""; position: absolute; right: var(--space-lg); top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.errore { font-size: var(--text-sm); color: var(--color-error); }
.errore:empty { display: none; }
.spunta { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); align-items: start; font-size: var(--text-md); line-height: 1.45; color: var(--color-ink-2); cursor: pointer; }
.spunta input { width: 24px; height: 24px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.spunta input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.spunta a { text-decoration-color: var(--color-accent); }
.esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.esito { min-height: 1lh; font-size: var(--text-md); color: var(--color-ink-2); }

/* Un fatto che manca: si vede che è un vuoto da riempire, non un link. */
.fill { display: block; padding: var(--space-lg); border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); color: var(--color-muted); }

/* Banner dei cookie: il pixel parte solo dopo «Accetto». */
.banner-cookie { position: fixed; z-index: var(--z-toast); inset-inline: var(--space-md); bottom: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); max-width: 64rem; margin-inline: auto; padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: var(--shadow-card); font-size: var(--text-sm); line-height: 1.5; }
.banner-cookie p { max-width: 70ch; }
.banner-cookie div { display: flex; gap: var(--space-sm); }
.banner-cookie button { min-width: 7rem; min-height: 44px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-weight: var(--display-weight); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.banner-cookie button:hover { background: var(--color-paper-2); }
.banner-cookie button:active { transform: translateY(1px); }
.banner-cookie button[data-scelta="si"] { border-color: var(--color-accent); border-width: 2px; }
.banner-cookie button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 40rem) { .banner-cookie div { width: 100%; } .banner-cookie button { flex: 1; } }
.link-cookie { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 0.16em; cursor: pointer; }
.link-cookie:hover { text-decoration-color: var(--color-accent); }
.link-cookie:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Barra fissa sul telefono: compare quando il modulo (o il calendario) non si vede */
.barra-bassa { position: fixed; z-index: var(--z-sticky); inset-inline: 0; bottom: 0; display: none; padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--color-deep) 55%, transparent); transform: translateY(110%); transition: transform var(--dur-long) var(--ease-out); }
.barra-bassa.attiva { transform: none; }
@media (max-width: 60rem) { .barra-bassa { display: block; } }

.piede { position: relative; overflow: clip; padding-block: var(--space-3xl) var(--space-xl); background: var(--color-deep); }
.piede .container { display: grid; gap: var(--space-xl); }
.piede-marchio { font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 22vw, 22rem); letter-spacing: -0.06em; line-height: 0.8; color: var(--color-muted); }
.piede-testo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.piede-testo p { max-width: 52ch; }
.piede-link { display: flex; gap: var(--space-lg); }
.piede-link a { min-height: 44px; display: inline-flex; align-items: center; color: var(--color-ink-2); }
.piede-link a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 40rem) {
  .lungo { display: none; }
  .corto { display: inline; }
  .piede { padding-bottom: calc(var(--space-3xl) + var(--space-xl)); }
}

/* Pagine di solo testo: privacy e 404 */
.testo-lungo { width: 100%; max-width: 44rem; margin-inline: auto; padding: var(--space-2xl) var(--gutter) var(--space-3xl); }
.testo-lungo h1 { font-size: var(--text-display-s); margin-bottom: var(--space-lg); }
.testo-lungo h2 { max-width: none; font-size: var(--text-xl); margin-top: var(--space-2xl); margin-bottom: var(--space-sm); letter-spacing: -0.015em; }
.testo-lungo p { max-width: 65ch; margin-top: var(--space-md); line-height: 1.65; color: var(--color-ink-2); }
.testo-lungo .intro { font-size: var(--text-lead); color: var(--color-ink); }
.testo-lungo .data { color: var(--color-muted); font-size: var(--text-sm); }
.testo-lungo a { text-decoration-color: var(--color-accent); }

/* Landing «award»: una storia in scorrimento, dalla serranda al sito.
   Base: tutto si legge fermo (niente JavaScript, «riduci movimento»). Con html.moto i capitoli diventano lunghi
   e il quadro resta fermo mentre lo scorrimento guida la scena (esperienza.js). Solo transform e opacity. */
[data-pagina="landing"] { --banda-vista: 96px; background: var(--color-deep); }
@media (max-width: 60.99rem) { [data-pagina="landing"] { --banda-vista: 84px; } }
[data-pagina="landing"] main > section { position: relative; }
.capitolo .quadro { position: relative; }

/* Avanzamento: una linea sottile in cima che segue lo scorrimento */
.avanzamento { position: fixed; z-index: var(--z-toast); inset: 0 0 auto; height: 2px; pointer-events: none; }
.avanzamento span { display: block; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: 0 50%; }
html:not(.moto) .avanzamento { display: none; }

/* 1 · Apertura ------------------------------------------------------------ */
.apertura { --fuoco: 63%; min-height: max(calc(100svh - var(--banda-vista)), 600px); display: grid; align-items: end; overflow: clip; isolation: isolate; background: var(--color-deep); }
.palco { position: absolute; inset: 0; z-index: 0; }
.fascio { position: absolute; left: var(--fuoco, 66%); top: -12%; width: min(78vw, 1100px); height: 118%; translate: -50% 0; background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, color-mix(in oklab, var(--color-light) 22%, transparent) 14deg, color-mix(in oklab, var(--color-light) 34%, transparent) 20deg, color-mix(in oklab, var(--color-light) 22%, transparent) 26deg, transparent 40deg); mask-image: linear-gradient(to bottom, var(--color-mask) 20%, transparent 96%); filter: blur(18px); animation: accendi 1.6s var(--ease-out) both; }
.pozza { position: absolute; left: var(--fuoco, 66%); bottom: -6%; width: min(52vw, 760px); aspect-ratio: 4 / 1; translate: -50% 0; background: radial-gradient(closest-side, color-mix(in oklab, var(--color-light) 22%, transparent), transparent); animation: accendi 2s var(--ease-out) both; }
.oratore { position: absolute; left: var(--fuoco, 66%); bottom: 0; height: min(100svh, 1060px); aspect-ratio: 9 / 16; translate: -50% 0; background: url("/media/parla-a.webp") 50% 100% / contain no-repeat; mask-image: linear-gradient(to top, transparent, var(--color-mask) 16%); }
[data-origine="e"] .oratore { background-image: url("/media/parla-e.webp"); }
.palco-tela { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--dur-scene) var(--ease-out); }
.palco-tela.viva { opacity: 1; }
.palco.con-video .oratore, .palco.con-video .fascio, .palco.con-video .pozza { visibility: hidden; transition: visibility 0s linear var(--dur-scene); }
.apertura-testo { position: relative; z-index: 2; padding-top: 140px; padding-bottom: clamp(48px, 9svh, 112px); display: grid; gap: var(--space-lg); justify-items: start; }
.apertura h1 { max-width: 8.6ch; font-size: var(--text-display); font-weight: 800; line-height: 0.92; letter-spacing: -0.05em; }
.apertura .lead { max-width: 30ch; color: var(--color-ink-2); }
.apertura-azioni { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xs); }
@keyframes accendi { from { opacity: 0; } 30% { opacity: 0.35; } 38% { opacity: 0.1; } to { opacity: 1; } }

@media (max-width: 60.99rem) {
  .apertura { --fuoco: 50%; align-items: end; }
  .oratore { top: 60px; bottom: auto; height: min(68svh, 640px); background-image: url("/media/parla-a-m.webp"); }
  [data-origine="e"] .oratore { background-image: url("/media/parla-e-m.webp"); }
  .fascio { width: 150vw; }
  .pozza { bottom: auto; top: calc(60px + min(68svh, 640px) - 4%); width: 110vw; }
  .apertura::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--color-deep) 32%, color-mix(in oklab, var(--color-deep) 70%, transparent) 46%, transparent 64%); pointer-events: none; }
  .apertura-testo { padding-bottom: var(--space-xl); gap: var(--space-md); }
  .apertura h1 { max-width: 10ch; }
}

/* 1b · Banda d'autorità ---------------------------------------------------- */
.banda { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm) var(--space-3xl); background: var(--color-deep); overflow: clip; }
.nastro { min-width: 0; overflow: clip; mask-image: linear-gradient(90deg, transparent, var(--color-mask) 5%, var(--color-mask) 95%, transparent); }
.nastro-traccia { display: flex; width: max-content; animation: scorri var(--durata, 70s) linear infinite; }
.moto:not(.desto) .nastro-traccia { animation-play-state: paused; }
.nastro-voci .nastro-traccia { --durata: 150s; animation-direction: reverse; }
.nastro ul { list-style: none; margin: 0; padding: 0 var(--space-md) 0 0; display: flex; align-items: stretch; gap: var(--space-md); }
.nastro:hover .nastro-traccia, .nastro:focus-within .nastro-traccia, .fermo .nastro-traccia { animation-play-state: paused; }
@keyframes scorri { to { transform: translateX(-50%); } }
.cliente { flex: none; height: 72px; display: flex; align-items: center; gap: var(--space-sm); padding: 0 var(--space-lg); border-radius: var(--radius-field); background: var(--color-ink); color: var(--color-paper); }
.cliente img { height: 38px; width: auto; }
.cliente-volto { padding-left: var(--space-sm); }
.cliente-volto img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.cliente-volto span { font-weight: var(--display-weight); font-size: var(--text-sm); letter-spacing: -0.01em; white-space: nowrap; }
.voce { flex: none; width: min(80vw, 380px); display: grid; align-content: space-between; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-media); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); }
.voce p { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink); }
.voce a { justify-self: start; min-height: 24px; font-size: var(--text-sm); color: var(--color-muted); text-decoration-color: var(--color-accent); }
.voce a:hover { color: var(--color-ink); }
.voce a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.voce-stelle { width: auto; min-width: 15rem; align-content: center; gap: var(--space-2xs); background: var(--color-accent); box-shadow: none; color: var(--color-accent-ink); }
.voce-stelle strong { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.03em; line-height: 1; }
.voce-stelle span { font-size: var(--text-sm); }
.voce-intervista span { font-size: var(--text-sm); color: var(--color-muted); }
.voce-intervista a { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.015em; color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) {
  .nastro-traccia { animation: none; }
  .nastro { overflow-x: auto; mask-image: none; }
  .nastro ul[aria-hidden] { display: none; }
}

/* 1c · La promessa --------------------------------------------------------- */
.promessa { padding-block: var(--space-2xl) var(--section-gap-s); background: var(--color-deep); }
.promessa-griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.promessa-testa { grid-column: 1 / span 6; display: grid; gap: var(--space-md); }
.promessa h2 { font-size: var(--text-section); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; max-width: 12ch; }
.promessa .lead { color: var(--color-ink-2); }
.promessa-fatti { grid-column: 7 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.promessa-fatti li { max-width: 46ch; padding-left: var(--space-lg); border-left: 2px solid var(--color-accent); color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.45; }
.promessa-fatti strong { color: var(--color-ink); }
.promessa .btn { grid-column: 1 / span 6; justify-self: start; }
@media (max-width: 60.99rem) {
  .promessa-griglia { grid-template-columns: minmax(0, 1fr); }
  .promessa-testa, .promessa-fatti, .promessa .btn { grid-column: 1; }
  .promessa-fatti li { font-size: var(--text-md); }
}
.modulo-scarsita { max-width: 44ch; padding-left: var(--space-md); border-left: 2px solid var(--color-accent); color: var(--color-ink-2); }

/* 2 · La vetrina ------------------------------------------------------------ */
.problema { background: var(--color-deep); }
.problema .quadro { padding-block: var(--section-gap); }
.problema-griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: center; }
.dichiarazione { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-statement); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.frase-prima { grid-column: 1 / span 4; grid-row: 1; color: var(--color-ink-2); }
.frase-seconda { grid-column: 1 / span 4; grid-row: 2; }
.vetrina-scena { grid-column: 5 / -1; grid-row: 1 / span 2; perspective: 1400px; }
.vetrina { position: relative; padding: 5% 5% 6%; border-radius: var(--radius-media) var(--radius-media) 0 0; background: repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in oklab, var(--color-ink) 4%, transparent) 46px 47px), linear-gradient(170deg, var(--color-paper-3), var(--color-paper) 60%); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-ink) 8%, transparent), var(--shadow-card); transform-origin: 50% 100%; }
.insegna { margin-bottom: 4%; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 2.4vw, 2.5rem); letter-spacing: -0.03em; color: var(--color-accent); text-shadow: 0 0 18px color-mix(in oklab, var(--color-accent) 70%, transparent), 0 0 42px color-mix(in oklab, var(--color-accent) 45%, transparent); }
.vetro { position: relative; aspect-ratio: 4 / 3; overflow: clip; border-radius: 4px; background: var(--color-deep); box-shadow: 0 0 0 6px var(--color-shutter-2), 0 0 0 7px color-mix(in oklab, var(--color-ink) 10%, transparent); }
.vetro-sito img { width: 100%; height: 100%; object-fit: cover; }
.luce { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--color-light) 22%, transparent), transparent 60%); mix-blend-mode: screen; }
.serranda { position: absolute; inset: 0; transform: translateY(-101%); background: linear-gradient(to bottom, transparent 70%, color-mix(in oklab, var(--color-deep) 55%, transparent)), repeating-linear-gradient(to bottom, var(--color-shutter) 0 13px, var(--color-shutter-3) 13px 15px, var(--color-shutter-2) 15px 18px); box-shadow: inset 0 -10px 18px -8px var(--color-deep); }
.maniglia { position: absolute; left: 50%; bottom: 7%; width: 18%; height: 6px; translate: -50% 0; border-radius: var(--radius-pill); background: var(--color-shutter-3); box-shadow: 0 2px 0 var(--color-deep); }
.riflesso { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, color-mix(in oklab, var(--color-ink) 7%, transparent) 45%, transparent 56%); pointer-events: none; }
.pavimento { position: relative; height: clamp(56px, 9vw, 140px); overflow: clip; background: radial-gradient(60% 100% at 50% 0%, color-mix(in oklab, var(--color-light) 14%, transparent), transparent); }
.pavimento-riflesso { position: absolute; left: 5%; right: 5%; top: 0; transform: scaleY(-1); transform-origin: 50% 0; translate: 0 100%; opacity: 0.2; mask-image: linear-gradient(to top, var(--color-mask), transparent 32%); filter: blur(2px); }
.pavimento-riflesso img { width: 100%; height: auto; }
.insegna.spenta { color: var(--color-rule-2); text-shadow: none; }
.insegna.accesa { animation: neon 1.1s steps(1, end) both; }
@keyframes neon { 0% { opacity: 0.2; } 12% { opacity: 1; } 20% { opacity: 0.35; } 34% { opacity: 1; } 42% { opacity: 0.6; } 50%, 100% { opacity: 1; } }

@media (max-width: 60.99rem) {
  .problema-griglia { grid-template-columns: minmax(0, 1fr); }
  .frase-prima, .frase-seconda, .vetrina-scena { grid-column: 1; grid-row: auto; }
  .vetrina-scena { order: 2; }
  .frase-seconda { order: 3; }
}

/* 3 · Il sito si costruisce -------------------------------------------------- */
.costruzione { background: var(--color-deep); }
.costruzione .quadro { padding-block: var(--section-gap); }
.costruzione-griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: center; }
.costruzione-testo { grid-column: 1 / span 5; display: grid; gap: var(--space-2xl); }
.costruzione-testo h2 { font-size: var(--text-section); font-weight: 800; line-height: 0.98; letter-spacing: -0.045em; }
.costruzione-sito { display: grid; gap: var(--space-sm); max-width: 34ch; }
.costruzione-sito p { color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.45; }
.cantiere { grid-column: 6 / -1; margin: 0; display: grid; gap: var(--space-md); }
.cantiere figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.cantiere-scena { perspective: 1600px; perspective-origin: 50% 40%; }
.pagina3d { position: relative; aspect-ratio: 4 / 3; transform-style: preserve-3d; transform: rotateX(6deg) rotateY(-10deg); border-radius: var(--radius-media); box-shadow: 0 60px 120px -50px var(--color-mask), 0 0 0 1px color-mix(in oklab, var(--color-ink) 10%, transparent); }
.frammento { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); transform-style: preserve-3d; }
.frammento img { width: 100%; height: 100%; object-fit: cover; }
.frammento-pagina img { border-radius: var(--radius-media); }
.pagina-lunga { position: absolute; inset: 0; overflow: clip; border-radius: var(--radius-media); transform: translateZ(1px); }
.pagina-lunga img { width: 100%; height: auto; }

@media (max-width: 60.99rem) {
  .costruzione-griglia { grid-template-columns: minmax(0, 1fr); }
  .costruzione-testo, .cantiere { grid-column: 1; }
  .costruzione-testo { gap: var(--space-lg); }
}

/* 4 · I 15 video ---------------------------------------------------------- */
.quindici { background: var(--color-deep); }
.quindici .quadro { padding-block: var(--section-gap); display: grid; gap: var(--space-2xl); overflow: clip; }
.cifra-gigante { position: absolute; left: 50%; top: 50%; translate: -50% -52%; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--text-numeral); line-height: 0.8; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--color-accent) 60%, transparent); pointer-events: none; user-select: none; }
.anello-scena { position: relative; }
.anello { list-style: none; margin: 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); max-width: var(--container); margin-inline: auto; }
.reel { position: relative; aspect-ratio: 9 / 16; overflow: clip; border-radius: var(--radius-media); background: var(--color-paper-2); }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel::after { content: ""; position: absolute; inset: 0; background: var(--color-deep); opacity: var(--ombra, 0); pointer-events: none; }
.quindici-testo { position: relative; z-index: 2; display: grid; gap: var(--space-md); justify-items: start; }
.quindici-testo h3 { max-width: 14ch; font-size: var(--text-section); font-weight: 800; line-height: 0.98; letter-spacing: -0.045em; }
.quindici-testo .cifra { color: var(--color-accent); }
.quindici-testo p { max-width: 38ch; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }
@media (max-width: 60.99rem) { .anello { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 5 · Prova sociale in profondità ------------------------------------------- */
.prova { padding-block: var(--section-gap) var(--section-gap-s); background: linear-gradient(to bottom, var(--color-deep), var(--color-paper) 40%); overflow: clip; }
.prova h2 { font-size: var(--text-section); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; }
.numeri { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; gap: var(--space-xl); }
.numeri li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xs) var(--gap-columns); align-items: end; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.numeri li:nth-child(2) { margin-left: clamp(0px, 8vw, 140px); }
.numeri li:nth-child(3) { margin-left: clamp(0px, 16vw, 280px); }
.numero-forte { font-family: var(--font-display); font-weight: 800; font-size: var(--text-figure); line-height: 0.92; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; overflow-wrap: break-word; min-width: 0; }
.numero-resto { max-width: 34ch; padding-bottom: 0.5em; font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); }
.numero-resto small { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.prova-coda { margin-top: var(--space-3xl); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-2xl) var(--gap-columns); align-items: end; }
.voci { display: grid; gap: var(--space-2xl); }
.voci blockquote { margin: 0; display: grid; gap: var(--space-md); }
.voci blockquote:nth-child(2) { margin-left: clamp(0px, 10vw, 160px); }
.voci blockquote p { max-width: 34ch; font-family: var(--font-display); font-weight: var(--body-weight); font-size: var(--text-xl); line-height: 1.3; letter-spacing: -0.02em; }
.voci cite { font-style: normal; font-size: var(--text-sm); color: var(--color-muted); }
.voci cite a, .articoli a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.voci a:focus-visible, .articoli a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.prova-lato { display: grid; gap: var(--space-md); }
.articoli { max-width: 36ch; color: var(--color-ink-2); }
.loghi { margin: var(--space-3xl) 0 0; display: grid; gap: var(--space-md); }
.loghi-nastro { display: flex; width: max-content; }
.loghi ul { list-style: none; margin: 0; padding: 0 0 0 var(--gutter); display: flex; align-items: center; gap: var(--space-2xl); }
.loghi ul[aria-hidden] { display: none; }
.loghi li img { height: clamp(26px, 3vw, 40px); width: auto; opacity: 0.72; }
.loghi figcaption { padding-inline: var(--gutter); max-width: var(--container); margin-inline: auto; width: 100%; font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60.99rem) {
  .numeri li { grid-template-columns: minmax(0, 1fr); }
  .numeri li:nth-child(n) { margin-left: 0; }
  .prova-coda { grid-template-columns: minmax(0, 1fr); }
  .voci blockquote:nth-child(2) { margin-left: 0; }
  .loghi ul { flex-wrap: wrap; padding-right: var(--gutter); }
}

/* Persone */
.persone { padding-block: var(--section-gap-s) var(--section-gap); background: var(--color-paper); }
.persone h2 { font-size: var(--text-section); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; max-width: 14ch; }
.coppia { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.persona { margin: 0; display: grid; gap: var(--space-md); }
.persona:nth-child(2) { margin-top: var(--space-3xl); }
.persona picture { display: block; overflow: clip; border-radius: var(--radius-media); background: var(--color-paper-2); }
.persona img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; mix-blend-mode: luminosity; }
.persona figcaption { display: grid; gap: var(--space-2xs); max-width: 36ch; color: var(--color-ink-2); }
.persona strong { font-family: var(--font-display); font-size: var(--text-title); letter-spacing: -0.02em; color: var(--color-ink); }
.persona span { font-size: var(--text-sm); color: var(--color-muted); }

/* 6 · I tre passi ----------------------------------------------------------- */
.passi { padding-block: var(--section-gap); background: var(--color-paper); }
.passi h2 { font-size: var(--text-section); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; max-width: 16ch; }
.scala { position: relative; list-style: none; margin: var(--space-3xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.scala-linea { position: absolute; left: 28px; right: 0; top: 27px; height: 2px; background: var(--color-rule); }
.scala-linea span { position: absolute; inset: 0; background: var(--color-accent); transform-origin: 0 50%; }
.passo { position: relative; display: grid; gap: var(--space-sm); align-content: start; }
.passo-nodo { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: var(--space-md); border-radius: var(--radius-pill); border: 2px solid var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); transition: background-color var(--dur-long) var(--ease-out), color var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); }
.passo p { max-width: 30ch; color: var(--color-ink-2); }
.moto .passo:not(.acceso) .passo-nodo { background: var(--color-paper); color: var(--color-ink); box-shadow: none; }
.moto .passo.acceso .passo-nodo { box-shadow: 0 0 0 8px color-mix(in oklab, var(--color-accent) 18%, transparent), 0 0 40px color-mix(in oklab, var(--color-accent) 60%, transparent); }
@media (max-width: 60.99rem) {
  .scala { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-left: 80px; }
  .scala-linea { left: 27px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .scala-linea span { transform-origin: 50% 0; }
  .passo-nodo { position: absolute; left: -80px; top: -12px; margin: 0; }
}

/* Domande */
.domande { padding-block: var(--section-gap-s); background: var(--color-paper); }
.domande h2 { font-size: var(--text-section); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; max-width: 16ch; }
.domande .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.righe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); }
.riga { display: grid; gap: var(--space-xs); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.riga h3 { font-size: var(--text-xl); letter-spacing: -0.025em; }
.riga p { color: var(--color-ink-2); max-width: 40ch; }
@media (max-width: 60.99rem) { .domande .container { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .righe { grid-template-columns: minmax(0, 1fr); } .riga { padding-block: var(--space-lg); } }

/* 7 · Il modulo e il sito vivo ------------------------------------------------ */
.modulo-sezione { padding-block: var(--section-gap) var(--section-gap-l); background: radial-gradient(70% 60% at 25% 30%, var(--color-paper-2), var(--color-paper) 70%); scroll-margin-top: 0; }
.modulo-griglia { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; }
.modulo-testa { position: sticky; top: 120px; display: grid; gap: var(--space-md); }
.modulo-testa h2 { font-size: var(--text-section); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; }
.modulo-testa .lead { color: var(--color-ink-2); }
.vivo { margin-top: var(--space-xl); perspective: 1400px; }
.vivo-foglio { position: relative; aspect-ratio: 16 / 10; overflow: clip; display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: var(--radius-media); background: radial-gradient(90% 120% at 85% 0%, color-mix(in oklab, var(--color-light) 16%, transparent), transparent 60%), var(--color-deep); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ink) 12%, transparent), 0 50px 100px -40px var(--color-mask); transform: rotateY(var(--ry, -14deg)) rotateX(var(--rx, 6deg)); transform-style: preserve-3d; transition: transform var(--dur-long) var(--ease-out); }
.vivo-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 4% 5%; font-size: clamp(0.625rem, 0.9vw, 0.8125rem); color: var(--color-ink-2); }
.vivo-marchio { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--color-ink); white-space: nowrap; overflow: clip; text-overflow: ellipsis; min-width: 0; }
.vivo-voci { display: flex; gap: 1.4em; white-space: nowrap; }
.vivo-eroe { align-self: end; display: grid; gap: 0.6em; justify-items: start; padding: 0 5% 6%; }
.vivo-titolo { --lunghezza: 15; max-width: 100%; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, calc(var(--base, 4.6rem) * 15 / max(var(--lunghezza), 9)), var(--base, 4.6rem)); line-height: 0.92; letter-spacing: -0.05em; overflow-wrap: break-word; min-width: 0; }
.vivo-citta { font-size: clamp(0.75rem, 1vw, 0.9375rem); color: var(--color-ink-2); }
.vivo-bottone { display: inline-flex; align-items: center; min-height: 2.4em; padding: 0 1.2em; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: var(--display-weight); font-size: clamp(0.625rem, 0.9vw, 0.8125rem); }
.vivo-didascalia { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.vivo-foglio.lampo .vivo-titolo { animation: lampo 0.5s var(--ease-out); }
@keyframes lampo { from { opacity: 0.4; translate: 0 0.08em; } to { opacity: 1; translate: 0 0; } }
.vivo-mini { display: none; }

.modulo { position: relative; display: grid; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); background: linear-gradient(180deg, var(--color-paper-3), var(--color-paper-2) 40%, var(--color-paper)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-ink) 10%, transparent), 0 0 0 1px color-mix(in oklab, var(--color-ink) 7%, transparent), var(--shadow-card); }
.modulo::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, color-mix(in oklab, var(--color-light) 40%, transparent), transparent 38%); mask: linear-gradient(var(--color-mask) 0 0) content-box exclude, linear-gradient(var(--color-mask) 0 0); pointer-events: none; }
.modulo-riga { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
@media (max-width: 60.99rem) {
  .modulo-griglia { grid-template-columns: minmax(0, 1fr); }
  .modulo-testa { position: static; }
  .vivo { display: none; }
  .vivo-mini { display: block; padding: var(--space-md) 0 var(--space-xs); perspective: 900px; }
  .vivo-mini .vivo-foglio { --base: 2.6rem; aspect-ratio: 16 / 9; --ry: -6deg; --rx: 4deg; }
  .vivo-mini .vivo-voci { display: none; }
  .modulo-riga { grid-template-columns: minmax(0, 1fr); }
  .modulo { padding: var(--space-lg); }
}

/* Con il movimento: capitoli lunghi, quadro fermo, scena guidata dallo scorrimento -------------- */
@media (prefers-reduced-motion: no-preference) {
  .moto .capitolo .quadro { position: sticky; top: 0; height: 100svh; min-height: 560px; padding-block: 0; display: grid; align-content: center; overflow: clip; }
  .moto .problema { height: 290vh; }
  .moto .costruzione { height: 360vh; }
  .moto .quindici { height: 340vh; }
  .moto .problema-griglia { padding-top: var(--space-2xl); }
  .moto .frase-prima, .moto .frase-seconda { grid-row: 1; align-self: center; }
  .moto .vetrina-scena { grid-row: 1; }
  .moto .serranda, .moto .pagina3d { transform: none; }
  .moto .pagina-lunga { opacity: 0; }
  .moto .insegna { color: var(--color-rule-2); text-shadow: none; }
  .moto .insegna.accesa { color: var(--color-accent); text-shadow: 0 0 18px color-mix(in oklab, var(--color-accent) 70%, transparent), 0 0 42px color-mix(in oklab, var(--color-accent) 45%, transparent); }
  .moto .costruzione-griglia { padding-top: var(--space-2xl); }

  .moto .quindici .quadro { display: block; }
  .moto .cifra-gigante { top: 46%; }
  .moto .anello-scena { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1500px; perspective-origin: 50% 42%; }
  .moto .anello { --r: 700px; position: relative; display: block; width: 230px; aspect-ratio: 9 / 16; padding: 0; transform-style: preserve-3d; }
  .moto .reel { position: absolute; inset: 0; transform: rotateY(calc(var(--i) * 24deg)) translateZ(var(--r)); backface-visibility: hidden; box-shadow: 0 30px 60px -30px var(--color-mask); }
  .moto .quindici-testo { position: absolute; left: 0; right: 0; bottom: clamp(32px, 7svh, 88px); margin-inline: auto; }
  .moto .quindici-testo::before { content: ""; position: absolute; inset: -40% -10% -30%; z-index: -1; background: radial-gradient(60% 60% at 20% 70%, var(--color-deep), transparent 75%); }

  @media (max-width: 60.99rem) {
    .moto .problema { height: 250vh; }
    .moto .costruzione { height: 300vh; }
    .moto .quindici { height: 300vh; }
    .moto .problema-griglia { align-content: center; gap: var(--space-lg); }
    .moto .frase-prima, .moto .frase-seconda { grid-row: 1; align-self: end; }
    .moto .vetrina-scena { grid-row: 2; }
    .moto .dichiarazione { font-size: clamp(1.75rem, 7.4vw, 2.75rem); min-height: 3.2em; display: grid; align-items: end; }
    .moto .costruzione-testo h2 { font-size: clamp(1.875rem, 8vw, 3rem); }
    .moto .costruzione-sito p { font-size: var(--text-md); }
    .moto .anello { --r: 230px; width: 120px; }
    .moto .anello-scena { perspective: 820px; perspective-origin: 50% 42%; padding-bottom: 22svh; }
    .moto .cifra-gigante { top: 40%; }
  }
}

/* Pagina «grazie»: prima il video lungo con il suo avviso, sotto il calendario, poi la parete di prove, in fondo di nuovo il calendario.
   Mobile prima di tutto: sul telefono le file di video, recensioni e interviste si sfogliano di lato; sul desktop diventano griglie.
   Le entrate allo scorrimento sono CSS puro (animation-timeline: view()), solo dove il browser le sa fare e senza «riduci movimento»: altrimenti tutto è già lì. */
[data-pagina="grazie"] { background: var(--color-deep); }
/* La barra sta sopra file e video che scorrono: sulla pagina «grazie» ha sempre il suo fondo. */
[data-pagina="grazie"] .barra::before { opacity: 1; }
.grazie { padding-bottom: 0; }
.grazie section { position: relative; }

/* 1 · Apertura: avviso e VSL, nient'altro davanti al video ---------------------------------------- */
.apertura-grazie { isolation: isolate; overflow: clip; padding-block: calc(72px + var(--space-lg)) var(--section-gap-s); }
.grazie-fascio { position: absolute; z-index: -1; left: 50%; top: -10%; width: min(110vw, 1500px); height: 100%; translate: -50% 0; background: conic-gradient(from 155deg at 50% 0%, transparent 0deg, color-mix(in oklab, var(--color-light) 14%, transparent) 18deg, color-mix(in oklab, var(--color-light) 22%, transparent) 25deg, color-mix(in oklab, var(--color-light) 14%, transparent) 32deg, transparent 50deg); mask-image: linear-gradient(to bottom, var(--color-mask) 30%, transparent 92%); animation: accendi 1.6s var(--ease-out) both; pointer-events: none; }
.grazie-griglia { --w: max(24rem, min(58rem, calc((100svh - 300px) * 16 / 9))); display: grid; gap: var(--space-lg); justify-items: center; }
.avviso { width: 100%; max-width: var(--w); display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); text-align: center; border: var(--rule-hair) solid color-mix(in oklab, var(--color-gold) 38%, transparent); border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-gold) 7%, var(--color-deep)); box-shadow: 0 30px 70px -40px color-mix(in oklab, var(--color-gold) 45%, transparent); }
.avviso h1 { max-width: none; margin-inline: auto; font-size: clamp(1.75rem, 2.6vw + 1rem, 3.25rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.avviso p { max-width: none; margin-inline: auto; font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); }
.avviso strong { color: var(--color-gold); font-weight: 800; }
.schermo { position: relative; width: 100%; overflow: clip; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ink) 12%, transparent), 0 70px 140px -50px color-mix(in oklab, var(--color-accent) 55%, transparent), var(--shadow-card); }
.schermo-vsl { max-width: var(--w); }
.video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--color-mask); object-fit: cover; }
.video:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.video-posto { aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; border: 0; }

/* 2 · Prenotazione (in alto e in fondo) ---------------------------------------------------------- */
.prenota { padding-block: var(--section-gap-s); scroll-margin-top: var(--space-xl); }
.prenota-griglia { display: grid; gap: var(--space-xl); justify-items: center; }
.prenota-testa { display: grid; gap: var(--space-sm); justify-items: center; text-align: center; }
.prenota h2 { max-width: 22ch; font-size: clamp(1.875rem, 2.8vw + 1rem, 3.5rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.prenota-testa p { font-size: var(--text-lead); color: var(--color-ink-2); }
.calendario { width: 100%; max-width: 68rem; min-height: 40rem; overflow: clip; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ink) 10%, transparent), var(--shadow-card); scroll-margin-top: 96px; }
.calendario iframe { display: block; width: 100%; min-height: 50rem; border: 0; background: var(--color-paper-2); }
.calendario .fill { min-height: 40rem; display: grid; place-items: center; text-align: center; border: 0; }
.prenota-fine { background: linear-gradient(to bottom, var(--color-paper), var(--color-deep) 70%); padding-top: var(--section-gap); }

/* 3 · La parete di prove -------------------------------------------------------------------------- */
.prova-cifre, .prova-video, .prova-recensioni, .prova-articoli, .prova-podcast, .prova-nastri { padding-block: var(--section-gap-s); }
.grazie h2 { text-wrap: balance; }
.prova-cifre h2, .prova-video h2, .prova-recensioni h2, .prova-articoli h2, .prova-podcast h2 { max-width: 18ch; font-size: var(--text-section); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; }
.prova-sotto { margin-top: var(--space-md); max-width: 46ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.prova-sotto a { text-decoration-color: var(--color-accent); }

.prova-cifre { background: var(--color-paper); overflow: clip; }
.prova-cifre::before { content: ""; position: absolute; z-index: 0; right: -15%; top: -20%; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, var(--color-paper-3), transparent); pointer-events: none; }
.prova-cifre .container { position: relative; z-index: 1; }
.cifre { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; }
.cifra { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-sm) var(--gap-columns); align-items: end; padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule-2); }
.cifra:last-child { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.cifra-forte { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 6.6vw, 7.25rem); line-height: 0.92; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.cifra-resto { max-width: 34ch; font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); }
.cifra-resto small { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.cifra-link { grid-column: 2; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; font-size: var(--text-md); color: var(--color-gold); text-decoration-color: currentColor; }
.cifra-link:hover { color: var(--color-ink); }
.cifra-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Le file che sul telefono si sfogliano di lato e sul desktop sono griglie */
.rotaia { list-style: none; margin: var(--space-xl) 0 0; padding: 0 var(--gutter) var(--space-md); display: flex; align-items: flex-start; gap: var(--space-md); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--color-rule-2) transparent; }
.rotaia > li { flex: none; scroll-snap-align: start; }
.clip-fila, .articoli-griglia { align-items: stretch; }
.rotaia:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }

.prova-video { background: var(--color-deep); }
.clip { width: 68vw; max-width: 300px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; border-radius: var(--radius-card); overflow: clip; background: var(--color-paper-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 9%, transparent), var(--shadow-card); }
.clip-media { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; background: var(--color-mask); overflow: clip; cursor: pointer; color: inherit; }
.clip-media img, .clip-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--color-mask); }
.clip-media:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.clip-media.in-onda { cursor: default; }
.gioca { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; translate: -50% -50%; border-radius: var(--radius-pill); background: var(--color-accent); box-shadow: 0 0 0 8px color-mix(in oklab, var(--color-accent) 24%, transparent), 0 18px 40px -12px var(--color-mask); transition: scale var(--dur-short) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); }
.gioca-vsl { display: none; left: auto; top: auto; right: 24px; bottom: 64px; translate: none; width: 72px; height: 72px; padding: 0; border: 0; cursor: pointer; }
.gioca-vsl:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.js .gioca-vsl { display: block; }
.schermo-vsl.partito .gioca-vsl { display: none; }
/* Il pulsante sta in basso a destra, dove la copertina è vuota: mai sopra le parole del titolo. */
.gioca-vsl::before { left: 29px !important; top: 22px !important; border-width: 14px 0 14px 23px !important; }
@media (max-width: 40rem) {
  .gioca-vsl { right: 8px; bottom: 52px; width: 40px; height: 40px; box-shadow: 0 0 0 5px color-mix(in oklab, var(--color-accent) 24%, transparent), 0 12px 28px -10px var(--color-mask); }
  .gioca-vsl::before { left: 15px !important; top: 11px !important; border-width: 9px 0 9px 14px !important; }
}
.gioca::before { content: ""; position: absolute; left: 27px; top: 21px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--color-accent-ink); }
.clip-media:hover .gioca { scale: 1.08; box-shadow: 0 0 0 12px color-mix(in oklab, var(--color-accent) 22%, transparent), 0 18px 40px -12px var(--color-mask); }
.clip-media:active .gioca { scale: 0.96; }
.clip-testo { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-md) var(--space-lg) var(--space-lg); }
.clip-nome strong { font-weight: 800; color: var(--color-ink); }
.clip-nome { font-family: var(--font-display); font-weight: 500; color: var(--color-ink-2); font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1.3; }
.clip-ruolo { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.4; }
.clip-citazione { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }

.prova-recensioni { background: linear-gradient(to bottom, var(--color-deep), var(--color-paper) 30%, var(--color-paper)); overflow: clip; }
.prova-recensioni::before { content: ""; position: absolute; z-index: 0; left: -20%; top: 10%; width: 60%; aspect-ratio: 1; background: radial-gradient(closest-side, color-mix(in oklab, var(--color-gold) 11%, transparent), transparent); pointer-events: none; }
.prova-recensioni > * { position: relative; z-index: 1; }
.recensioni-fila { display: grid; overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
.recensione { width: auto; max-width: none; display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 9%, transparent); }
.stelle { width: 110px; height: 20px; fill: var(--color-gold); }
.recensione h3 { font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.02em; font-weight: 800; }
.recensione blockquote { margin: 0; display: grid; gap: var(--space-sm); font-size: var(--text-md); line-height: 1.55; color: var(--color-ink); }
.recensione-firma { display: grid; gap: var(--space-3xs); margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.4; color: var(--color-muted); }
.recensione-firma strong { color: var(--color-ink); font-weight: 700; }
.recensione > a, .articolo-link { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; font-size: var(--text-sm); color: var(--color-ink-2); text-decoration-color: var(--color-accent); }
.recensione > a:hover, .articolo-link:hover { color: var(--color-ink); }
.recensione > a:focus-visible, .articolo-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.prova-articoli { background: var(--color-paper); }
.articolo { width: 82vw; max-width: 400px; display: grid; align-content: start; border-radius: var(--radius-card); overflow: clip; background: var(--color-paper-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 9%, transparent), var(--shadow-card); }
.articolo-schermata { display: block; aspect-ratio: 16 / 9; overflow: clip; background: var(--color-ink); }
.articolo-schermata img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.articolo-schermata:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.articolo-testo { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-lg); }
.articolo-testata { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.articolo-testata img { height: 28px; width: auto; padding: var(--space-2xs) var(--space-xs); border-radius: 6px; background: var(--color-ink); }
.articolo h3 { font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.02em; font-weight: 800; max-width: none; }
.articolo-ruolo { font-size: var(--text-sm); color: var(--color-muted); }
.articolo-citazione { margin: 0; display: grid; gap: var(--space-sm); font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); }

.prova-podcast { background: var(--color-deep); padding-block: var(--section-gap-s) var(--space-2xl); }
.podcast-lista { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-md); }
.podcast-ep a { height: 100%; display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 9%, transparent); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.podcast-ep a:hover { background: var(--color-paper-3); box-shadow: inset 0 0 0 1px var(--color-accent); }
.podcast-ep a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.podcast-serie, .podcast-vai { font-size: var(--text-sm); color: var(--color-muted); }
.podcast-ep strong { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.025em; }
.podcast-vai { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.16em; }

.prova-nastri { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); background: var(--color-deep); padding-top: var(--space-2xl); }
.nastro-etichetta { max-width: var(--container); width: 100%; margin: var(--space-md) auto 0; padding-inline: var(--gutter); font-size: var(--text-sm); color: var(--color-muted); }
.nastro:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.nastro-autorita .nastro-traccia { --durata: 90s; animation-direction: reverse; }
.autorita { flex: none; height: 72px; display: flex; align-items: center; padding: 0 var(--space-xl); border-radius: var(--radius-field); box-shadow: inset 0 0 0 1px var(--color-rule-2); }
.autorita img { height: 30px; width: auto; max-width: 240px; object-fit: contain; opacity: 0.85; }

/* Entrate allo scorrimento: solo dove il browser le sa fare e senza «riduci movimento» */
@keyframes sale { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-rivela] { animation: sale linear both; animation-timeline: view(); animation-range: entry 4% entry 42%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .nastro-traccia { animation: none; }
  .nastro { overflow-x: auto; mask-image: none; }
  .nastro ul[aria-hidden] { display: none; }
}
.grazie h2:not(.visually-hidden)::after { content: ""; display: block; width: 72px; height: 4px; margin-top: var(--space-md); border-radius: 2px; background: var(--color-gold); }

/* Desktop: le file diventano griglie */
@media (min-width: 61rem) {
  .rotaia { overflow: visible; max-width: var(--container); margin-inline: auto; padding-bottom: 0; scroll-snap-type: none; }
  .rotaia > li { scroll-snap-align: none; width: auto; max-width: none; }
  /* Quattro video per volta, gli altri si sfogliano di lato: con tanti video la griglia lascerebbe un'orfana a ogni riga. */
  .clip-fila { margin-top: var(--space-xl); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-md); gap: var(--gap-columns); }
  .clip-fila > .clip { flex: 0 0 calc((100% - 3 * var(--gap-columns)) / 4); scroll-snap-align: start; }
  .recensioni-fila { display: block; columns: 3; column-gap: var(--gap-columns); }
  .recensione { margin-bottom: var(--gap-columns); break-inside: avoid; }
  .articoli-griglia { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-columns); align-items: stretch; }
  .articoli-griglia > .articolo { grid-column: span 2; }
  .articoli-griglia > .articolo:nth-child(2), .articoli-griglia > .articolo:nth-child(3) { grid-column: span 3; }
  .articoli-griglia > .articolo-grande { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .articolo-grande .articolo-testo { padding: var(--space-xl); }
  .articolo-grande h3 { font-size: var(--text-2xl); }
  .podcast-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
}
@media (min-width: 61rem) and (prefers-reduced-motion: reduce) { .rotaia { overflow: visible; } }

@media (max-width: 60.99rem) {
  .cifra { grid-template-columns: minmax(0, 1fr); }
  .cifra-link { grid-column: 1; }
  .cifre { margin-top: var(--space-xl); }
}
@media (max-width: 40rem) {
  .apertura-grazie { padding-top: calc(72px + var(--space-sm)); padding-bottom: var(--section-gap-s); }
  .grazie-griglia { gap: var(--space-md); }
  .avviso { padding: var(--space-md); }
  .calendario, .calendario .fill { min-height: 32rem; }
  .calendario iframe { min-height: 44rem; }
  .schermo, .clip, .recensione, .articolo { border-radius: var(--radius-media); }
  .cifra { padding-block: var(--space-lg); }
}
.prenota h2::after { margin-inline: auto; }

/* Abbiamo lavorato con: due ritratti e due loghi, solo nomi */
.prova-partner { padding-block: var(--space-2xl); background: var(--color-deep); }
.partner-lista { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); align-items: center; }
.partner-persona { display: grid; gap: var(--space-sm); }
.partner-persona img { width: 100%; max-width: 240px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-media); }
.partner-persona p { font-size: var(--text-md); color: var(--color-ink); font-weight: 700; line-height: 1.3; }
.partner-logo { display: grid; place-items: center; min-height: 80px; padding: var(--space-md); border-radius: var(--radius-field); box-shadow: inset 0 0 0 1px var(--color-rule-2); }
.partner-logo img { width: auto; height: 38px; max-width: 100%; object-fit: contain; }
@media (min-width: 61rem) { .partner-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; } .partner-logo { align-self: center; } }

/* Pagine locali (siti web, video, content marketing) e blocco «Dove lavoriamo». Colonna di lettura stretta, stesso navy e stessi accenti della landing. */
.locale { padding-top: 72px; }
.locale-colonna { max-width: calc(46rem + 2 * var(--gutter)); margin-inline: 0 auto; }
.locale-apertura { padding-block: var(--space-3xl) var(--space-2xl); }
.locale-apertura h1 { max-width: 16ch; font-size: var(--text-display-s); }
.locale-apertura .lead { margin-block: var(--space-lg) var(--space-xl); color: var(--color-ink-2); }
.locale-sezione { padding-block: var(--space-xl); }
.locale-sezione h2, .locale-domande h2 { max-width: 28ch; font-size: var(--text-2xl); letter-spacing: -0.025em; margin-bottom: var(--space-md); }
.locale-sezione p, .locale-domande p { margin-top: var(--space-md); line-height: 1.65; color: var(--color-ink-2); }
.locale-sezione a, .locale-domande a, .dove p a { text-decoration-color: var(--color-accent); }
.locale-video { padding-block: var(--space-xl); }
.locale-video h2 { max-width: 28ch; font-size: var(--text-2xl); letter-spacing: -0.025em; margin-bottom: var(--space-lg); }
.locale-video .video { max-width: 60rem; border-radius: var(--radius-media); }
.locale-citazione { padding-block: var(--space-xl); }
.locale-citazione figure { margin: 0; padding-left: var(--space-lg); border-left: 3px solid var(--color-accent); }
.locale-citazione blockquote { margin: 0; font-size: var(--text-lg); line-height: 1.55; color: var(--color-ink); }
.locale-citazione figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.locale-domande { padding-block: var(--space-xl); }
.locale-domande h3 { margin-top: var(--space-xl); font-size: var(--text-lg); }
.locale-fine { padding-block: var(--space-2xl) var(--space-3xl); }
.locale-fine .lead { margin-bottom: var(--space-lg); font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-xl); letter-spacing: -0.02em; }

.dove { padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.dove h2 { max-width: none; font-size: var(--text-xl); letter-spacing: -0.015em; }
.dove p { margin-top: var(--space-sm); color: var(--color-muted); }
.dove ul { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--gap-columns); }
.dove li a { display: grid; gap: var(--space-2xs); min-height: 44px; padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-field); text-decoration: none; }
.dove li a:hover { border-color: var(--color-accent); }
.dove li a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.dove li strong { font-weight: 600; }
.dove li span { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 40rem) { .locale-apertura { padding-block: var(--space-2xl) var(--space-xl); } }

/* Telefono (schermi sotto i 61rem): la stessa pagina, scura, ma semplice e fluida sotto il pollice.
   Una colonna, un messaggio per schermata, niente 3D, niente scene guidate dal dito, niente strati a schermo intero che costano a ogni fotogramma.
   Il movimento vero (Lenis, GSAP, palco WebGL) parte solo oltre i 61rem: qui esperienza.js non scarica nemmeno le librerie. */

@media (max-width: 60.99rem) {
  :root {
    /* Più luce sui testi: niente grigio spento su navy. ink-2 ≈ 14:1, muted ≈ 10:1 sul fondo più chiaro. */
    --color-ink-2: oklch(92% 0.012 250);
    --color-muted: oklch(84% 0.02 256);
    --shadow-card: 0 10px 24px -14px oklch(6% 0.03 261 / 0.8);
  }

  /* La grana è un velo a schermo intero con fusione: il telefono lo ridisegna a ogni scorrimento. Fuori. */
  body::after { display: none; }

  /* Barra: sempre piena e bassa, mai trasparente sopra il testo. */
  .barra { min-height: 56px; }
  .barra::before { opacity: 1; }
  .marchio { font-size: var(--text-lg); }

  /* Niente prospettiva: le cose stanno dritte. */
  .vetrina-scena, .cantiere-scena, .vivo, .vivo-mini { perspective: none; }
  .pagina3d, .vivo-foglio, .vivo-mini .vivo-foglio { transform: none; transform-style: flat; transition: none; }
  .vetrina, .pagina3d, .vivo-foglio, .modulo, .schermo { box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ink) 12%, transparent), var(--shadow-card); }
  .fascio { filter: none; }

  /* Una pagina più corta: meno aria fra le schermate, stessi contenuti. */
  .banda { padding-block: var(--space-xs) var(--space-xl); }
  .promessa { padding-block: var(--space-xl) var(--section-gap-s); }
  .problema .quadro, .costruzione .quadro, .quindici .quadro { padding-block: var(--section-gap-s); }
  .persone, .passi { padding-block: var(--section-gap-s); }
  .modulo-sezione { padding-block: var(--section-gap-s) var(--section-gap); }

  /* Le bande che scorrono: loghi interi e nitidi, senza velo ai bordi; si legge ogni logo uno per uno. */
  .nastro { mask-image: none; }
  .cliente { height: 80px; padding-inline: var(--space-lg); }
  .cliente img { height: 44px; }
  .cliente-volto img { width: 52px; height: 52px; }
  .cliente-volto span { font-size: var(--text-md); }
  .loghi-nastro { width: 100%; }
  .loghi ul { gap: var(--space-lg) var(--space-xl); padding-left: var(--gutter); }
  .loghi li img { height: 34px; opacity: 1; }
  .loghi figcaption, .cantiere figcaption, .vivo-didascalia { font-size: var(--text-sm); }
  .voce p, .voce a, .voce-intervista span { font-size: var(--text-md); }
  .voce { width: min(84vw, 380px); }

  /* I 15 video: una fila da sfogliare col dito; si tocca e parte. */
  .cifra-gigante { display: none; }
  .anello { display: flex; max-width: none; gap: var(--space-sm); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; padding-bottom: var(--space-xs); }
  .anello::-webkit-scrollbar { display: none; }
  .reel { flex: 0 0 52vw; max-width: 240px; scroll-snap-align: start; cursor: pointer; }
  .reel::after { display: none; }
  .reel::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 56px; height: 56px; translate: -50% -50%; border-radius: var(--radius-pill); background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M22 17v22l18-11z' fill='%230A1220'/%3E%3C/svg%3E") center / 100% no-repeat; pointer-events: none; }
  .reel.in-onda::before { display: none; }

  /* Persone: due colonne vicine, senza lo scalino. */
  .persona:nth-child(2) { margin-top: 0; }
  .coppia { margin-top: var(--space-xl); }

  /* Testi e pulsanti */
  .numeri { margin-top: var(--space-xl); gap: var(--space-lg); }
  .prova-coda { margin-top: var(--space-xl); }
  .loghi { margin-top: var(--space-xl); }
  .btn, .btn-largo { min-height: 56px; }
  .modulo { padding: var(--space-lg) var(--space-md); }
  .campo input[type="text"], .campo input[type="tel"], .campo input[type="email"], .campo select { min-height: 56px; }
  .vivo-mini { padding-top: var(--space-sm); }

  /* Pagina «grazie»: niente entrate guidate dallo scorrimento, niente ombre da 140 pixel, loghi nitidi. */
  [data-rivela] { animation: none; }
  .avviso { box-shadow: none; }
  .autorita img { height: 36px; opacity: 1; }
  .autorita { height: 80px; }
  .recensione-firma, .clip-ruolo, .clip-citazione, .articolo-testata, .articolo-ruolo, .podcast-serie, .podcast-vai, .cifra-resto small { font-size: var(--text-sm); }
  .recensione > a, .articolo-link { font-size: var(--text-md); }
}

@media (max-width: 40rem) {
  :root {
    /* Corpo comodo col pollice: nulla sotto i 15 px, il testo corrente 17. */
    --text-xs: 0.9375rem;
    --text-sm: 1rem;
    --text-md: 1.0625rem;
    --text-lead: 1.1875rem;
    --section-gap-s: 48px;
    --section-gap: 56px;
    --section-gap-l: 72px;
  }
  .promessa-fatti li, .riga p, .passo p { font-size: var(--text-md); }
  .passo p { max-width: none; }
}