/* Michele Giannelli, stile Vox: lo stesso linguaggio dei reel.
   Carta colorata con la grana, ritagli col bordo bianco e l'ombra, etichette con lo scotch,
   pennarello, bordi strappati fra un capitolo e l'altro, la striscia con la testina.
   Palette del brand (stile-visivo): bosco, notte, crema, verde medio; il lime è l'unico accento
   e vive solo sullo scuro; il corallo solo per il "no". Caratteri: Inter + Playfair Display Italic,
   il corsivo accende una parola per schermata. */

:root {
  --notte: #071A14;
  --bosco: #0E3B2C;
  --medio: #1C6B4F;
  --crema: #F3F0E7;
  --lime: #C8F24C;
  --corallo: #E25C40;
  --bianco-carta: #FBF8F0;
  --testina: #113025;

  --font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1rem + 1.1vw, 2rem);
  --step-head: clamp(2.5rem, 1.2rem + 4.6vw, 5.25rem);
  --step-display: clamp(3rem, 1rem + 6.2vw, 7.25rem);

  --margin: clamp(1rem, 2.4vw, 2.25rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --header-h: 72px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;

  --ombra: drop-shadow(0 10px 12px rgba(20, 16, 10, 0.38)) drop-shadow(0 2px 2px rgba(20, 16, 10, 0.25)); /* taste-skill-ignore: ombra dei ritagli Vox, stile del brand */
  --tear-a: polygon(0% 100%, 0.0% 25%, 2.2% 86%, 4.3% 28%, 6.6% 32%, 8.7% 35%, 11.2% 25%, 12.8% 5%, 15.6% 69%, 16.8% 54%, 20.1% 66%, 21.9% 9%, 23.3% 57%, 25.6% 10%, 28.0% 20%, 30.4% 24%, 33.0% 56%, 35.0% 27%, 37.2% 52%, 38.9% 55%, 41.9% 80%, 43.7% 17%, 45.3% 39%, 47.3% 42%, 49.9% 81%, 52.0% 53%, 54.8% 18%, 56.2% 50%, 58.7% 91%, 60.7% 4%, 63.2% 76%, 64.9% 5%, 67.2% 89%, 69.9% 6%, 71.4% 25%, 73.4% 44%, 75.7% 59%, 78.2% 10%, 80.7% 28%, 82.8% 6%, 84.7% 34%, 86.7% 53%, 89.5% 41%, 91.8% 12%, 93.4% 81%, 95.8% 6%, 98.4% 34%, 100.0% 14%, 100% 100%);
  --tear-b: polygon(0% 100%, 0.0% 51%, 2.7% 84%, 3.8% 33%, 6.4% 57%, 8.3% 11%, 10.8% 34%, 13.0% 1%, 14.7% 71%, 17.3% 28%, 19.8% 45%, 21.2% 43%, 24.0% 67%, 26.2% 53%, 28.1% 74%, 30.3% 31%, 32.8% 41%, 34.3% 26%, 37.2% 62%, 39.1% 35%, 40.9% 31%, 43.3% 45%, 45.3% 26%, 47.3% 2%, 49.7% 60%, 52.6% 18%, 54.2% 39%, 56.3% 43%, 58.8% 37%, 60.4% 43%, 63.3% 79%, 64.9% 30%, 67.9% 62%, 70.1% 9%, 72.3% 22%, 73.8% 1%, 76.5% 69%, 78.8% 44%, 81.0% 58%, 83.2% 41%, 84.6% 90%, 86.8% 11%, 88.6% 52%, 90.9% 51%, 94.0% 34%, 95.2% 29%, 97.4% 58%, 100.0% 45%, 100% 100%);
  --tear-c: polygon(0% 100%, 0.0% 38%, 1.7% 64%, 4.8% 46%, 6.5% 65%, 8.5% 29%, 10.4% 69%, 13.2% 16%, 15.1% 72%, 17.3% 53%, 20.1% 80%, 21.2% 4%, 23.7% 45%, 26.3% 45%, 28.3% 65%, 30.5% 2%, 32.6% 34%, 34.7% 0%, 37.1% 85%, 38.6% 32%, 40.7% 44%, 43.1% 47%, 45.9% 84%, 47.5% 40%, 50.2% 56%, 52.7% 34%, 54.1% 71%, 56.5% 12%, 58.8% 22%, 60.8% 31%, 62.4% 66%, 64.7% 36%, 67.2% 20%, 70.2% 4%, 71.3% 55%, 73.6% 29%, 76.1% 61%, 78.3% 16%, 80.1% 69%, 82.5% 29%, 85.3% 19%, 86.7% 31%, 88.6% 74%, 91.2% 17%, 93.1% 90%, 95.1% 45%, 98.1% 84%, 100.0% 39%, 100% 100%);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--notte); }
body { margin: 0; background: var(--notte); color: var(--crema); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: var(--header-h); }
::selection { background: var(--lime); color: var(--notte); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.ch--crema :focus-visible, .ch--lime :focus-visible { outline-color: var(--notte); }
.defs { position: absolute; width: 0; height: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip: auto; left: var(--margin); top: 12px; z-index: 100; background: var(--lime); color: var(--notte); padding: 12px 18px; font-weight: 600; text-decoration: none; }
.wrap { padding-inline: var(--margin); }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- tipografia: il numero che conta e la parola che lo accende ---------- */
h1, h2, h3, .display, .head, .figure { font-family: var(--font); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; text-wrap: balance; }
.display { font-size: var(--step-display); line-height: 0.92; }
.head { font-size: var(--step-head); }
.lead { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; text-wrap: pretty; }
.small { font-size: var(--step-small); line-height: 1.5; }
.label { font-size: var(--step-small); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.35; color: var(--soft); }
.figure { font-size: var(--step-display); letter-spacing: -0.05em; line-height: 0.88; }
em.acc { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--acc); }
p { text-wrap: pretty; }
.nobr { white-space: nowrap; }

/* ---------- capitoli: carta colorata, mai due uguali di fila ---------- */
.ch {
  position: relative;
  background-color: var(--bg); color: var(--ink);
  background-image: url('../vox/carta.jpg'); background-size: 700px; background-blend-mode: multiply;
  padding-block: clamp(5rem, 9vw, 8.5rem);
}
.ch--notte { --bg: var(--notte); --ink: var(--crema); --soft: color-mix(in srgb, var(--crema) 74%, var(--notte)); --acc: var(--lime); --btn-bg: var(--lime); --btn-ink: var(--notte); }
.ch--bosco { --bg: var(--bosco); --ink: var(--crema); --soft: color-mix(in srgb, var(--crema) 76%, var(--bosco)); --acc: var(--lime); --btn-bg: var(--lime); --btn-ink: var(--notte); }
.ch--medio { --bg: var(--medio); --ink: var(--crema); --soft: color-mix(in srgb, var(--crema) 84%, var(--medio)); --acc: var(--lime); --btn-bg: var(--lime); --btn-ink: var(--notte); }
.ch--crema { --bg: var(--crema); --ink: var(--notte); --soft: color-mix(in srgb, var(--notte) 72%, var(--crema)); --acc: var(--bosco); --btn-bg: var(--notte); --btn-ink: var(--crema); }
/* le scene hanno già il loro respiro dentro il palco: niente margine del capitolo in più */
.ch.scene { padding-block: 0; }
.ch--lime  { --bg: var(--lime); --ink: var(--notte); --soft: color-mix(in srgb, var(--notte) 78%, var(--lime)); --acc: var(--bosco); --btn-bg: var(--notte); --btn-ink: var(--crema); }

/* il bordo strappato: ogni capitolo morde quello sopra */
.ch:not(.hero)::before {
  content: ''; position: absolute; left: 0; right: 0; top: -15px; height: 16px; z-index: 3;
  background: inherit; clip-path: var(--tear-a); pointer-events: none;
}
.ch:nth-of-type(3n+1)::before { clip-path: var(--tear-b); }
.ch:nth-of-type(3n+2)::before { clip-path: var(--tear-c); }

/* ---------- ritagli, etichette, pennarello ---------- */
.cut { filter: var(--ombra); transform: rotate(var(--r, 0deg)); }
.mascot { filter: drop-shadow(0 10px 10px rgba(20, 16, 10, 0.35)); } /* taste-skill-ignore: ombra dei ritagli Vox, stile del brand */

.tag {
  display: inline-block; position: relative; width: fit-content;
  background: var(--tag-bg, var(--crema)); color: var(--tag-ink, var(--notte));
  font-weight: 800; font-size: var(--step-small); line-height: 1.15; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.72em 0.95em 0.62em; transform: rotate(var(--r, -2deg));
  box-shadow: 0 5px 12px rgba(20, 16, 10, 0.3); /* taste-skill-ignore: ombra dei ritagli Vox, stile del brand */
}
.tag::before { content: ''; position: absolute; top: -0.55em; left: 50%; width: 2.8em; height: 1.05em; margin-left: -1.4em; background: rgba(245, 238, 210, 0.62); transform: rotate(-4deg); }
.ch--crema .tag, .ch--lime .tag { --tag-bg: var(--notte); --tag-ink: var(--crema); }
.tag--no { --tag-bg: var(--corallo); --tag-ink: var(--notte); }

.marker { overflow: visible; pointer-events: none; }
.marker path { fill: none; stroke: var(--corallo); stroke-width: 6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: url(#pennarello); }

/* ---------- pulsanti e collegamenti ---------- */
.button {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 28px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; font-weight: 700; font-size: var(--step-body);
  transition: transform var(--t-press) var(--ease-out), filter var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.button--small { min-height: 42px; padding: 0 20px; font-size: var(--step-small); letter-spacing: 0.06em; text-transform: uppercase; }
.button__arrow { display: inline-block; transition: transform var(--t-ui) var(--ease-out); }
.link { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { filter: brightness(1.06); }
  .button:hover .button__arrow { transform: translateX(4px); }
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- intestazione: prende il colore del capitolo sotto ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: var(--margin);
  background-color: var(--hbg, var(--notte)); color: var(--hink, var(--crema));
  background-image: url('../vox/carta.jpg'); background-size: 700px; background-blend-mode: multiply;
  transition: background-color 300ms ease, color 300ms ease;
  --btn-bg: var(--lime); --btn-ink: var(--notte);
}
.site-header[data-field="bosco"] { --hbg: var(--bosco); }
.site-header[data-field="medio"] { --hbg: var(--medio); }
.site-header[data-field="crema"] { --hbg: var(--crema); --hink: var(--notte); --btn-bg: var(--notte); --btn-ink: var(--crema); --logo-ring: var(--bosco); }
.site-header[data-field="lime"] { --hbg: var(--lime); --hink: var(--notte); --btn-bg: var(--notte); --btn-ink: var(--crema); --logo-ring: var(--bosco); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--step-body); letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
.wordmark em { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.1em; letter-spacing: -0.01em; }
/* la testina dei reel, nell'anello: lime sullo scuro, bosco sui fondi chiari */
.wordmark__face { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: clip; background: var(--testina); box-shadow: 0 0 0 2.5px var(--logo-ring, var(--lime)); } /* taste-skill-ignore: anello della testina, come nei reel */
.wordmark__face img { width: 100%; height: 100%; object-fit: cover; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__links { display: flex; gap: clamp(14px, 1.6vw, 26px); font-weight: 600; font-size: var(--step-small); letter-spacing: 0.06em; text-transform: uppercase; }
.nav__links a { text-decoration: none; position: relative; white-space: nowrap; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } }
.menu { display: contents; }
.menu__mascot, .nav__toggle { display: none; }

/* sotto i 1280 px le sezioni stanno in un foglio che scende dall'intestazione, aperto dal pulsante Menu */
@media (max-width: 1279px) {
  .nav__links { display: none; }
  .js .nav__toggle {
    display: inline-flex; align-items: center; min-height: 42px; padding: 0 4px;
    font-weight: 700; font-size: var(--step-small); letter-spacing: 0.06em; text-transform: uppercase; color: inherit;
  }
  .js .menu {
    display: block; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: -1;
    padding: clamp(28px, 6vw, 56px) var(--margin) 0; overflow: clip;
    background: var(--notte) url('../vox/carta.jpg'); background-size: 700px; background-blend-mode: multiply; color: var(--crema);
    visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path 520ms var(--ease-expo), visibility 0s linear 520ms;
  }
  .js .menu .nav__links {
    display: grid; gap: clamp(6px, 1.4vh, 14px); font-size: clamp(2rem, 1.2rem + 4vw, 3.5rem); font-weight: 800;
    letter-spacing: -0.04em; text-transform: none; line-height: 1.1;
  }
  .js .menu .nav__links a { display: inline-block; padding-block: 4px; }
  .js .menu .nav__links a::after { display: none; }
  .js .menu .nav__links li { opacity: 0; transform: translateY(18px); transition: opacity 300ms ease, transform 500ms var(--ease-out); }
  .js .menu__mascot { display: block; position: absolute; right: var(--margin); bottom: 0; width: clamp(92px, 22vw, 150px); }
  .site-header.is-open { --hbg: var(--notte); --hink: var(--crema); --btn-bg: var(--lime); --btn-ink: var(--notte); --logo-ring: var(--lime); }
  .site-header.is-open .menu { visibility: visible; clip-path: inset(0); transition: clip-path 520ms var(--ease-expo), visibility 0s; }
  .site-header.is-open .menu .nav__links li { opacity: 1; transform: none; transition-delay: calc(140ms + var(--i, 0) * 45ms); }
  html.menu-open { overflow: hidden; }
}
@media (max-width: 1279px) and (hover: hover) and (pointer: fine) { .js .menu .nav__links a:hover { color: var(--lime); } }
@media (max-width: 400px) {
  .wordmark { font-size: 0.95rem; gap: 8px; }
  .wordmark__face { width: 30px; height: 30px; }
  .nav { gap: 10px; }
  .js .nav__toggle { padding: 0; }
  .nav .button--small { padding: 0 13px; }
}
@media (max-width: 1279px) and (prefers-reduced-motion: reduce) {
  .js .menu, .site-header.is-open .menu { transition: none; }
  .js .menu .nav__links li { transition: none; transform: none; }
}

/* ---------- la striscia dei reel: testina e didascalia ---------- */
.strip {
  position: relative; display: flex; align-items: center; gap: 18px;
  padding: 20px var(--margin) 22px; background: var(--notte) url('../vox/carta.jpg'); background-size: 700px; background-blend-mode: multiply; color: var(--crema);
}
.strip::before { content: ''; position: absolute; left: 0; right: 0; top: -15px; height: 16px; background: inherit; clip-path: var(--tear-c); }
.testina { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: clip; background: var(--testina); box-shadow: 0 0 0 4px var(--lime); } /* taste-skill-ignore: ombra dei ritagli Vox, stile del brand */
.testina img { width: 100%; height: 100%; object-fit: cover; }
.strip__say { font-size: var(--step-lead); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; max-width: 46ch; }
.strip__say b { color: var(--lime); font-weight: 500; }

/* ---------- 1. apertura ---------- */
.hero { min-height: 100svh; padding: calc(var(--header-h) + 32px) 0 0; display: flex; flex-direction: column; }
.hero__grid { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; padding-bottom: 56px; }
.hero__text { grid-column: 1 / span 6; display: grid; gap: 28px; }
.hero h1 .line { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 [data-line] { display: block; }
.hero__lead { max-width: 34ch; color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; font-weight: 500; }
.hero__collage { grid-column: 7 / span 6; position: relative; aspect-ratio: 1.12; width: 100%; max-width: 760px; justify-self: end; }
.hero__map { position: absolute; left: 0; top: 6%; width: 100%; }
.hero__shop { position: absolute; left: 31%; top: 25%; width: 40%; }
.hero__ring { position: absolute; left: 13%; top: 3%; width: 76%; height: auto; aspect-ratio: 1; }
.hero__tag { position: absolute; right: 4%; top: 7%; }
.hero__car { position: absolute; left: 6%; bottom: 10%; width: 22%; }
.hero__strip { margin-top: auto; }

/* ---------- 2. scena: il raggio ---------- */
.radius__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; min-height: 100svh; padding-top: calc(var(--header-h) + 16px); padding-bottom: 32px; }
.radius__text { grid-column: 1 / span 5; display: grid; gap: 40px; align-content: center; }
.radius__beat { display: grid; gap: 14px; }
.radius__say { font-size: var(--step-lead); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; max-width: 18ch; }
.radius__beat .figure { color: var(--lime); }
.radius__map { grid-column: 6 / span 7; justify-self: center; width: min(100%, calc(76svh * 0.782)); display: grid; gap: 14px; }
.radius__paper { position: relative; aspect-ratio: 1400 / 1790; background: var(--crema); border: 10px solid var(--bianco-carta); transform: rotate(-1.5deg); filter: var(--ombra); overflow: clip; }
.radius__paper img:not(.cut) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.radius__dark { filter: brightness(0.38) contrast(1.1); }
/* la parte accesa ha un foglio crema tutto suo: si fonde con la carta, non con la mappa spenta sotto */
.radius__litbox { position: absolute; inset: 0; background: var(--crema); clip-path: circle(var(--r, 100%) at var(--cx, 40.1%) var(--cy, 35.3%)); }
.radius__dots { position: absolute; inset: 0; }
.dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--notte); }
.radius__ring { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.radius__shop { position: absolute; left: var(--cx, 40.1%); top: var(--cy, 35.3%); width: 13%; margin: -5% 0 0 -6.5%; }
.radius__map figcaption { justify-self: start; }
/* senza movimento: le due battute una sotto l'altra, la carta tutta accesa, tutte le persone, niente cerchio */
.radius:not(.is-live) .radius__litbox { --r: 100%; }
.radius:not(.is-live) .radius__ring { display: none; }
.radius.is-live .radius__beat { grid-area: 1 / 1; }
.radius.is-live .dot { opacity: 0; transform: translateY(-6px); transition: opacity 250ms ease, transform 350ms var(--ease-out); }
.radius.is-live .dot.is-on { opacity: 1; transform: none; }

/* ---------- 3. a chi farlo fare ---------- */
.achi__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.achi__post { grid-column: 1 / span 5; position: relative; width: min(100%, 440px); aspect-ratio: 0.72; justify-self: center; }
.achi__pole { position: absolute; left: 50%; bottom: 0; width: 44%; margin-left: -22%; }
.arrow {
  position: absolute; display: inline-flex; align-items: center; height: 12%; padding: 0 2.2em; z-index: 2;
  background: var(--bianco-carta); color: var(--notte); font-weight: 800; font-size: clamp(0.95rem, 0.7rem + 0.8vw, 1.35rem); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  filter: var(--ombra); transform: rotate(var(--r, 0deg));
}
.arrow--r { left: 44%; clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); padding-right: 2.8em; }
.arrow--l { right: 44%; clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%); padding-left: 2.8em; }
.achi__post .arrow:nth-of-type(1) { top: 26%; }
.achi__post .arrow:nth-of-type(2) { top: 40%; }
.achi__post .arrow:nth-of-type(3) { top: 54%; }
.achi__post .arrow:nth-of-type(4) { top: 68%; }
.arrow--me { background: var(--bosco); color: var(--crema); }
.strike { position: absolute; left: 14%; right: 14%; top: 50%; width: 72%; height: 0.9em; margin-top: -0.45em; }
.strike path { stroke-width: 5px; }
.achi__text { grid-column: 7 / span 6; display: grid; gap: 40px; }
.achi__list { display: grid; gap: 22px; }
.achi__list > div { display: grid; grid-template-columns: 9em 1fr; gap: 18px; align-items: baseline; }
.achi__list dd { font-size: var(--step-body); max-width: 46ch; }
.achi__me dt { color: var(--bosco); }
.achi__me dd { font-weight: 600; }

/* ---------- 4. il conto ---------- */
.calc__head { max-width: 14ch; }
.calc__intro { margin-top: 24px; max-width: 36ch; }
.calc__board { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; }
.paper-card { background: var(--crema) url('../vox/carta.jpg'); background-size: 700px; background-blend-mode: multiply; color: var(--notte); --soft: color-mix(in srgb, var(--notte) 70%, var(--crema)); filter: var(--ombra); }
.calc__controls { grid-column: 1 / span 5; display: grid; gap: 40px; align-content: start; padding: clamp(24px, 3vw, 40px); transform: rotate(-0.6deg); }
.calc__people { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 10px; font-weight: 600; }
.calc__people output { font-weight: 800; font-size: var(--step-head); line-height: 0.9; letter-spacing: -0.045em; }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
.calc input[type=range]::-webkit-slider-runnable-track { height: 10px; background: color-mix(in srgb, var(--notte) 16%, var(--crema)); border-radius: 999px; }
.calc input[type=range]::-moz-range-track { height: 10px; background: color-mix(in srgb, var(--notte) 16%, var(--crema)); border-radius: 999px; }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -12px; border-radius: 50%; background: var(--bosco); border: 4px solid var(--lime); transition: transform var(--t-press) var(--ease-out); }
.calc input[type=range]::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: var(--bosco); border: 4px solid var(--lime); }
.calc input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.calc__range-ends { display: flex; justify-content: space-between; }
.calc__choices { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.calc__choices legend { padding: 0; margin-bottom: 12px; }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: flex; justify-content: space-between; gap: 12px; padding: 15px 20px; background: color-mix(in srgb, var(--notte) 9%, var(--crema)); border-radius: 999px; font-weight: 600; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.choice span small { font-size: var(--step-small); font-weight: 500; }
.choice input:checked + span { background: var(--notte); color: var(--lime); }
.choice input:focus-visible + span { outline: 3px solid var(--notte); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .choice input:not(:checked):hover + span { background: color-mix(in srgb, var(--notte) 16%, var(--crema)); } }
.calc__results { grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc__result { position: relative; padding: clamp(24px, 3vw, 36px); padding-top: clamp(96px, 9vw, 130px); display: grid; align-content: end; gap: 10px; min-height: 360px; }
.calc__result--here { background: var(--crema) url('../vox/carta.jpg'); background-size: 700px; background-blend-mode: multiply; color: var(--notte); --soft: color-mix(in srgb, var(--notte) 70%, var(--crema)); transform: rotate(0.8deg); filter: var(--ombra); }
.calc__result--italy { background: var(--notte) url('../vox/carta.jpg'); background-size: 700px; background-blend-mode: multiply; color: var(--crema); --soft: color-mix(in srgb, var(--crema) 74%, var(--notte)); transform: rotate(-0.8deg); filter: var(--ombra); }
.calc__pic { position: absolute; top: -34px; right: 18px; width: 48%; }
.calc__value { font-weight: 800; font-size: var(--step-display); line-height: 0.88; letter-spacing: -0.05em; }
.calc__result--italy .calc__value { color: var(--lime); }
.calc__unit { font-weight: 600; }
.calc__moral { grid-column: 6 / span 7; margin-top: 16px; }
.calc__note { grid-column: 6 / span 7; max-width: 60ch; color: var(--soft); }

/* ---------- 5. scena: l'orario ---------- */
.hours__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; min-height: 100svh; padding-top: calc(var(--header-h) + 16px); padding-bottom: 32px; }
.hours__shopbox { grid-column: 1 / span 7; position: relative; aspect-ratio: 1.18; width: 100%; max-width: 780px; }
.hours__luna { position: absolute; left: 6%; top: 2%; width: 15%; opacity: var(--night, 1); }
.hours__lamp { position: absolute; left: 3%; bottom: 4%; width: 9%; opacity: var(--night, 1); }
.hours__front { position: absolute; left: 15%; bottom: 4%; width: 58%; }
.hours__shop { width: 100%; }
.hours__window { position: absolute; left: 10%; right: 10%; top: 40%; bottom: 9%; overflow: clip; }
.hours__shutter { position: absolute; left: 9%; right: 9%; top: 39%; bottom: 8%; overflow: clip; }
.hours__shutter svg { width: 100%; height: 100%; transform: translateY(var(--shut, -100%)); }
.hours__closed { position: absolute; left: 50%; top: 58%; margin-left: -3em; opacity: var(--closed, 0); --r: -6deg; font-size: var(--step-body); }
.hours__clock { position: absolute; right: 0; top: 0; width: 30%; }
.hours__clock img { width: 100%; }
.hand { position: absolute; left: 50%; bottom: 50%; width: 6px; margin-left: -3px; border-radius: 3px; background: var(--notte); transform-origin: 50% 100%; }
.hand--h { height: 22%; transform: rotate(var(--hdeg, 210deg)); }
.hand--m { height: 33%; width: 4px; margin-left: -2px; transform: rotate(var(--mdeg, 348deg)); }
.hand__pin { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--corallo); }
.hours__time { position: absolute; left: 50%; top: 100%; margin: 10px 0 0 -2.6em; font-size: var(--step-body); --r: 3deg; }
.hours__side { grid-column: 9 / span 4; display: grid; gap: 24px; align-content: center; }
.hours__lady { width: 70%; --r: -2deg; }
.orders { display: grid; gap: 14px; justify-items: start; }
.order { font-size: var(--step-small); }
.order .num { margin-right: 0.6em; }
.hours__note { max-width: 42ch; color: var(--soft); }
.hours:not(.is-live) { --shut: -46%; --closed: 1; --night: 1; }

/* ---------- 6. cosa faccio ---------- */
.work { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.work__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 22px; }
.work__head p { max-width: 26ch; font-size: var(--step-lead); line-height: 1.2; font-weight: 500; }
.work__list { grid-column: 7 / span 6; display: grid; gap: clamp(64px, 7vw, 104px); }
.job { display: grid; grid-template-columns: minmax(120px, 0.38fr) 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.job:nth-child(even) { grid-template-columns: 1fr minmax(120px, 0.38fr); }
.job:nth-child(even) .job__pic { order: 2; }
.job__pic { width: 100%; max-width: 230px; margin-top: 12px; }
.job h3 { font-size: var(--step-lead); letter-spacing: -0.03em; line-height: 1.05; }
.job__for { margin-top: 10px; font-weight: 600; max-width: 46ch; }
.job ul { margin-top: 20px; display: grid; gap: 12px; padding: 0; list-style: none; }
.job li { padding-left: 26px; position: relative; max-width: 46ch; }
.job li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 12px; height: 12px; border-radius: 50%; background: var(--bosco); }
.job__time { margin-top: 24px; }

/* ---------- 7. le regole ---------- */
/* ---------- casi studio: fascicoli di carta, il nome coperto col pennarello nero ---------- */
.cases__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; row-gap: 24px; }
.cases__head .head { grid-column: 1 / span 7; max-width: 14ch; }
.cases__lead { grid-column: 8 / span 5; max-width: 34ch; color: var(--soft); }
.cases__list { margin-top: clamp(64px, 8vw, 112px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 6vw, 88px) clamp(28px, 4vw, 64px); align-items: start; }
.case:nth-child(even) { margin-top: clamp(40px, 6vw, 96px); }
.case {
  position: relative; display: grid; justify-items: start; align-content: start;
  padding: clamp(28px, 3vw, 44px); padding-right: clamp(28px, 4vw, 56px);
  background: var(--crema) url('../vox/carta.jpg'); background-size: 700px; background-blend-mode: multiply; color: var(--notte);
  transform: rotate(var(--r, 0deg));
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.38); /* taste-skill-ignore: ombra dei ritagli Vox, stile del brand */
}
.case::before { content: ''; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: rgba(245, 238, 210, 0.62); transform: rotate(-3deg); }
.case__kind { max-width: 64%; color: color-mix(in srgb, var(--notte) 72%, var(--crema)); }
.case__pic { position: absolute; top: clamp(-56px, -4vw, -32px); right: clamp(-28px, -1.5vw, -12px); width: clamp(104px, 24%, 168px); }
.case__name { margin-top: 14px; justify-self: stretch; }
.censura {
  display: inline-block; min-width: min(100%, 23em); padding: 1.45em 2.4em 1.35em; background: var(--notte); color: color-mix(in srgb, var(--crema) 70%, var(--notte)); text-align: center;
  font-size: var(--step-small); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  transform: rotate(-1.2deg);
  clip-path: polygon(1% 12%, 9% 4%, 22% 9%, 37% 2%, 52% 8%, 66% 1%, 81% 7%, 94% 2%, 100% 14%, 98% 52%, 100% 88%, 90% 97%, 74% 92%, 58% 99%, 43% 93%, 27% 100%, 12% 94%, 2% 98%, 0% 56%);
}
.case__fig { margin-top: 18px; font-size: clamp(2.75rem, 1.4rem + 3.6vw, 4.75rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; color: var(--bosco); }
.case__unit { margin-top: 8px; color: color-mix(in srgb, var(--notte) 72%, var(--crema)); }
.case__body { margin-top: 18px; max-width: 40ch; }

.rules__head { max-width: 12ch; }
.rules__list { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(28px, 3vw, 44px); }
.rule { position: relative; grid-column: span 6; display: grid; gap: 14px; align-content: start; padding-right: 22%; }
.rule__tag { font-size: var(--step-body); }
.rule p { max-width: 42ch; }
.rule__pic { position: absolute; right: 0; top: -8px; width: 18%; }

/* ---------- 8. come lavoriamo ---------- */
.steps-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.steps__head { grid-column: 1 / span 6; }
.steps__intro { grid-column: 7 / span 5; align-self: end; font-weight: 500; max-width: 44ch; }
.steps { grid-column: 1 / -1; margin-top: 64px; display: flex; height: 520px; gap: 0; filter: var(--ombra); }
.stepp { --c: var(--notte); --i: var(--crema); position: relative; flex: 1 1 0; min-width: 0; background: var(--c) url('../vox/carta.jpg'); background-size: 700px; background-blend-mode: multiply; color: var(--i); overflow: clip; transition: flex-grow 450ms var(--ease-in-out); --soft: color-mix(in srgb, var(--i) 76%, var(--c)); }
.stepp:nth-child(2) { --c: var(--bosco); }
.stepp:nth-child(3) { --c: var(--medio); }
.stepp:nth-child(4) { --c: var(--lime); --i: var(--notte); }
.stepp.is-open { flex-grow: 4.2; }
.stepp__tab { position: absolute; inset: 0; width: 100%; text-align: left; display: flex; align-items: flex-end; padding: 24px; }
.stepp__tab span { display: block; transform-origin: left bottom; transform: rotate(-90deg) translate(0, 100%); white-space: nowrap; font-weight: 800; font-size: var(--step-body); letter-spacing: 0.06em; text-transform: uppercase; transition: opacity 200ms ease; }
.stepp.is-open .stepp__tab { pointer-events: none; }
.stepp.is-open .stepp__tab span { opacity: 0; }
.stepp__body { position: absolute; inset: 0; padding: 32px; display: grid; align-content: space-between; opacity: 0; visibility: hidden; transition: opacity 300ms ease 0ms, visibility 0s linear 300ms; pointer-events: none; min-width: 440px; }
.stepp.is-open .stepp__body { opacity: 1; visibility: visible; transition: opacity 300ms ease 200ms, visibility 0s linear 0s; pointer-events: auto; }
.stepp__body h3 { font-size: var(--step-head); }
.stepp__body p { max-width: 40ch; }
.stepp__body .label { margin-bottom: 8px; }
.stepp__pic { position: absolute; right: 28px; top: 26px; width: 34%; max-width: 200px; --r: 5deg; }

/* ---------- 9. chi sono ---------- */
.me { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.me__text { grid-column: 1 / span 6; display: grid; gap: 28px; }
.me__text .lead { max-width: 36ch; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; margin-top: 12px; }
.facts dd { margin-top: 6px; font-weight: 800; font-size: var(--step-lead); letter-spacing: -0.035em; line-height: 1.05; }
.me__scene { grid-column: 8 / span 5; position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: 0; }
.me__award { display: grid; gap: 8px; justify-items: start; padding-bottom: 18px; }
.me__award img { width: 80%; max-width: 230px; }
.me__award .figure { color: var(--lime); font-size: var(--step-head); }
.me__award .label { max-width: 24ch; }
.me__mascot { width: 100%; max-width: 260px; justify-self: end; }

/* ---------- 10. domande ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.faq__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 32px; justify-items: start; }
.faq__mascot { width: 120px; }
.faq__list { grid-column: 5 / span 8; display: grid; gap: 10px; }
.qa { background: var(--crema) url('../vox/carta.jpg'); background-size: 700px; background-blend-mode: multiply; color: var(--notte); border-radius: 22px; transition: background-color var(--t-ui) ease; }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; padding: 18px 26px; cursor: pointer; font-weight: 600; font-size: var(--step-body); line-height: 1.3; }
.qa summary::-webkit-details-marker { display: none; }
.qa__sign { position: relative; flex: none; width: 18px; height: 18px; }
.qa__sign::before, .qa__sign::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: currentColor; border-radius: 2px; transition: transform var(--t-ui) var(--ease-out); }
.qa__sign::after { transform: rotate(90deg); }
.qa[open] { background-color: var(--lime); }
.qa[open] .qa__sign::after { transform: rotate(0deg); }
.qa__answer { padding: 0 26px 26px; max-width: 60ch; }

/* ---------- 11. scrivimi ---------- */
.contact { padding-top: 40px; overflow: clip; }
.belt { display: flex; width: max-content; padding-block: 22px 10px; }
.belt__set { display: flex; align-items: center; gap: 46px; padding-right: 46px; }
.belt .cut { height: 120px; width: auto; }
.belt .cut:nth-child(odd) { --r: -5deg; }
.belt .cut:nth-child(even) { --r: 4deg; }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-top: 48px; }
.contact__text { grid-column: 1 / span 7; display: grid; gap: 22px; }
/* un reel vero, dentro il telefono: il sito e i video sono la stessa voce */
.reel { grid-column: 8 / span 3; justify-self: center; display: grid; gap: 12px; justify-items: center; align-self: center; }
.reel__tag { position: relative; z-index: 2; margin-bottom: -22px; }
.reel__phone { width: min(100%, 240px); aspect-ratio: 9 / 16; border-radius: 32px; background: var(--notte); border: 8px solid var(--bianco-carta); padding: 6px; filter: var(--ombra); overflow: clip; }
.reel__video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; background: var(--notte); }
.contact__text .lead { max-width: 34ch; }
.bar { margin-top: 18px; display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 10px; }
.bar label { display: block; }
.bar input { width: 100%; height: 76px; border: 0; border-radius: 999px; padding: 0 28px; background: var(--bianco-carta); color: var(--notte); font-size: var(--step-body); font-weight: 500; box-shadow: 0 4px 10px rgba(20, 16, 10, 0.15); } /* taste-skill-ignore: ombra dei ritagli Vox, stile del brand */
.bar input::placeholder { color: color-mix(in srgb, var(--notte) 64%, transparent); }
.bar input:focus { outline: 3px solid var(--notte); outline-offset: 2px; }
.bar button { height: 76px; padding: 0 32px; border-radius: 999px; background: var(--notte); color: var(--crema); font-weight: 800; font-size: var(--step-body); display: flex; align-items: center; justify-content: center; gap: 12px; transition: transform var(--t-press) var(--ease-out); }
.bar button:active { transform: scale(0.98); }
.bar button span { transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .bar button:hover span { transform: translateX(4px); } }
.bar__notes { display: flex; flex-wrap: wrap; gap: 6px 36px; color: var(--soft); }
.contact__mascot { grid-column: 11 / span 2; width: 100%; max-width: 200px; justify-self: end; margin-bottom: -6px; }

/* ---------- 12. piede ---------- */
.foot { padding-bottom: 32px; }
.foot__name { font-weight: 800; font-size: var(--step-display); line-height: 0.9; letter-spacing: -0.05em; overflow: clip; padding-bottom: 0.08em; }
.foot__name [data-line] { display: inline-block; }
.foot__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: 64px; }
.foot__reach { grid-column: 1 / span 6; display: grid; gap: 8px; justify-items: start; }
.foot__reach a { font-size: var(--step-lead); font-weight: 800; letter-spacing: -0.025em; color: var(--lime); text-decoration: none; line-height: 1.15; }
.foot__reach .label { margin-top: 10px; }
@media (hover: hover) and (pointer: fine) { .foot__reach a:hover { color: var(--crema); } }
.foot__links { grid-column: 8 / span 5; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.foot__links ul { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.foot__links a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot__links a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.foot__legal { margin-top: 88px; display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; color: var(--soft); }
.foot__legal p { max-width: 62ch; }
.foot__credits { margin-top: 14px; max-width: 62ch; color: var(--soft); }

/* ---------- schermi medi ---------- */
@media (min-width: 768px) and (max-width: 1100px) {
  .cases__head .head, .cases__lead { grid-column: 1 / -1; }
  .hero__text { grid-column: 1 / span 7; }
  .hero__collage { grid-column: 8 / span 5; }
  .radius__stage, .hours__stage { grid-template-columns: 1fr; row-gap: 24px; align-content: center; }
  .radius__text, .radius__map, .hours__shopbox, .hours__side { grid-column: 1; }
  .radius__map { width: min(100%, calc(50svh * 0.782)); }
  .hours__shopbox { max-width: 560px; }
  .achi__post { grid-column: 1 / span 5; }
  .achi__text { grid-column: 6 / span 7; }
  .calc__controls, .calc__results, .calc__moral, .calc__note { grid-column: 1 / -1; }
  .work__head { grid-column: 1 / span 4; }
  .work__list { grid-column: 5 / span 8; }
  .rule { grid-column: span 12; padding-right: 20%; }
  .me__text { grid-column: 1 / -1; }
  .me__scene { grid-column: 1 / -1; margin-top: 48px; max-width: 620px; }
  .faq__head { grid-column: 1 / span 4; }
  .faq__list { grid-column: 5 / span 8; }
  .contact__text { grid-column: 1 / -1; }
  .reel { grid-column: 2 / span 5; margin-top: 48px; }
  .contact__mascot { grid-column: 9 / span 3; }
}

/* ---------- telefono ---------- */
@media (max-width: 767px) {
  .cases__head .head, .cases__lead { grid-column: 1 / -1; }
  .cases__list { grid-template-columns: 1fr; gap: 64px; margin-top: 72px; }
  .case:nth-child(even) { margin-top: 0; }
  .case__pic { width: 28%; top: -40px; right: -6px; }
  :root { --header-h: 62px; }
  .hero__grid { grid-template-columns: 1fr; row-gap: 28px; align-content: start; padding-bottom: 36px; }
  .hero__collage { grid-column: 1; order: -1; width: 92%; justify-self: center; }
  .hero__text { grid-column: 1; gap: 22px; }
  .strip__say { font-size: var(--step-body); }
  .testina { width: 58px; height: 58px; }

  .radius__stage { grid-template-columns: 1fr; row-gap: 18px; align-content: center; padding-bottom: 20px; }
  .radius__text, .radius__map { grid-column: 1; }
  .radius__text { gap: 18px; }
  /* la mappa prende l'altezza che resta sotto al testo: niente verde vuoto, niente taglio sui telefoni bassi */
  .radius__map { width: min(100%, calc((100svh - var(--header-h) - 290px) * 0.782)); justify-self: center; }

  .achi__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .achi__post, .achi__text { grid-column: 1; }
  .achi__post { width: min(100%, 320px); }
  .arrow { font-size: 0.9rem; }
  .achi__list > div { grid-template-columns: 1fr; gap: 4px; }

  .calc__controls, .calc__results, .calc__moral, .calc__note { grid-column: 1 / -1; }
  .calc__results { grid-template-columns: 1fr; gap: 40px; margin-top: 24px; }
  .calc__result { min-height: 0; padding-top: 128px; }
  .calc__pic { width: 36%; top: -28px; }

  .hours__stage { grid-template-columns: 1fr; row-gap: 14px; align-content: start; }
  .hours__shopbox, .hours__side { grid-column: 1; }
  .hours__shopbox { width: 100%; }
  .hours__side { gap: 14px; }
  .hours__lady { width: 44%; position: absolute; right: var(--margin); bottom: 18px; }
  .hours__note { display: none; }

  .work__head { grid-column: 1 / -1; position: static; }
  .work__list { grid-column: 1 / -1; margin-top: 40px; }
  .job, .job:nth-child(even) { grid-template-columns: 96px 1fr; }
  .job:nth-child(even) .job__pic { order: 0; }

  .rule { grid-column: 1 / -1; padding-right: 26%; }

  .steps__head, .steps__intro { grid-column: 1 / -1; }
  .steps__intro { margin-top: 20px; }
  .steps { flex-direction: column; height: auto; margin-top: 40px; }
  .stepp { flex: none; }
  .stepp__tab { position: relative; min-height: 64px; padding: 0 20px; align-items: center; }
  .stepp__tab span { transform: none; }
  .stepp.is-open .stepp__tab { display: none; }
  .stepp__body { position: relative; min-width: 0; padding: 24px 20px; display: none; gap: 18px; }
  .stepp.is-open .stepp__body { display: grid; }
  .stepp__pic { width: 30%; right: 18px; top: 18px; }

  .me__text, .me__scene { grid-column: 1 / -1; }
  .me__scene { margin-top: 40px; }
  .facts { grid-template-columns: 1fr; }

  .faq__head, .faq__list { grid-column: 1 / -1; }
  .faq__head { position: static; grid-auto-flow: column; align-items: end; justify-content: space-between; margin-bottom: 28px; }
  .faq__mascot { width: 76px; }
  .qa summary { min-height: 64px; padding: 16px 20px; }
  .qa__answer { padding: 0 20px 22px; }

  .belt .cut { height: 84px; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__text { grid-column: 1; }
  .reel { grid-column: 1; margin-top: 40px; }
  .reel__phone { width: 220px; }
  .contact__mascot { grid-column: 1; max-width: 110px; margin-top: 28px; justify-self: end; }
  .bar { grid-template-columns: 1fr; }
  .bar input, .bar button { height: 62px; }

  .foot__row { grid-template-columns: 1fr; row-gap: 40px; }
  .foot__reach, .foot__links { grid-column: 1; }
  .foot__legal { margin-top: 56px; }
}

@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 368deg; }

/* ---------- movimento (solo se il visitatore non ha chiesto di ridurlo) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* apertura: il titolo sale dalla sua maschera, il resto arriva in ordine */
  .js .hero h1 [data-line] { transform: translateY(105%); animation: line-up 1000ms var(--ease-expo) forwards; animation-delay: calc(120ms + var(--i) * 110ms); }
  .js [data-load] { opacity: 0; transform: translateY(16px); animation: rise 650ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
  .js .site-header { opacity: 0; animation: fade 600ms ease 200ms forwards; }

  /* i ritagli "sbattono" sul fondo, come nei reel: arrivano ruotati e si posano */
  .js [data-pop] { opacity: 0; transform: rotate(calc(var(--r, 0deg) - 8deg)) scale(0.9); transition: opacity 260ms ease var(--d, 0ms), transform 720ms var(--ease-expo) var(--d, 0ms); }
  .js [data-pop].is-in { opacity: 1; transform: rotate(var(--r, 0deg)); }

  /* il pennarello si traccia */
  /* niente tratteggio: con vector-effect i browser spezzano la linea a pezzi. Si scopre il tratto con una maschera */
  .js .strike[data-draw] { clip-path: inset(-60% 100% -60% -6%); transition: clip-path 650ms var(--ease-in-out) var(--d, 0ms); }
  .js .strike[data-draw].is-in { clip-path: inset(-60% -6% -60% -6%); }
  .js .hero__ring[data-draw] { --sweep: 0deg; -webkit-mask: conic-gradient(from -8deg, #000 var(--sweep), transparent 0); mask: conic-gradient(from -8deg, #000 var(--sweep), transparent 0); transition: --sweep 1100ms var(--ease-in-out) var(--d, 0ms); } /* taste-skill-ignore: maschera che scopre il cerchio, non un riempimento */
  .js .hero__ring[data-draw].is-in { --sweep: 368deg; }

  /* entrate dei testi, in ordine di lettura */
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 650ms var(--ease-out), transform 900ms var(--ease-expo); transition-delay: calc(var(--d, 0) * 1ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* il tremolio dei ritagli, quello che nei reel li fa sembrare carta vera */
  .boil.is-in { animation: boil 900ms steps(1) infinite; animation-delay: calc(var(--d, 0ms) + 760ms); }

  /* il nastro dei ritagli scorre piano */
  .belt { animation: belt 48s linear infinite; }
  .belt.is-paused { animation-play-state: paused; }

  .js .foot__name [data-line] { transform: translateY(100%); transition: transform 1100ms var(--ease-expo); }
  .js .foot__name.is-in [data-line] { transform: none; }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes belt { to { transform: translateX(-50%); } }
@keyframes boil {
  0% { transform: rotate(var(--r, 0deg)); }
  33% { transform: rotate(calc(var(--r, 0deg) + 0.5deg)) translate(0.6px, -0.5px); }
  66% { transform: rotate(calc(var(--r, 0deg) - 0.4deg)) translate(-0.5px, 0.5px); }
}