/* ==========================================================================
   To Share Agency, landing v2: contenuti + marketing.
   Bianco e nero, un solo font (Archivo variabile, condensato per i titoli),
   il colore arriva solo dai media dei clienti. Rosso SOLO per il puntino REC.
   Il toro 3D del logo compare al massimo una volta per schermata.
   ========================================================================== */

:root {
  --carta: #FFFFFF;
  --inchiostro: #000000;
  --grafite: #555555;      /* testo secondario su bianco, 7,4:1 */
  --nebbia: #EDEDED;       /* fondi e filetti */
  --cenere: #B8B8B8;       /* testo secondario su nero, 10:1 */
  --notte: #1A1A1A;        /* fondo dei riquadri video prima del poster */
  --rec: #FF2A1F;          /* solo puntino REC */

  --gut: 24px;
  --max: 1440px;
  --gap: 24px;
  --nav-h: 64px;
  --r-phone: 22px;

  --fs-xs: 0.875rem;
  --fs-s: 1rem;
  --fs-body: 1.125rem;
  --fs-m: 1.375rem;
  --fs-l: 1.75rem;

  --sec: clamp(88px, 10vw, 168px);
  color-scheme: light;
}
@media (max-width: 899px) {
  :root { --gut: 16px; --gap: 16px; --nav-h: 58px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  font-stretch: 100%;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (max-width: 899px) { body { font-size: 1.0625rem; } }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
b, strong { font-weight: 650; }
p + p { margin-top: 0.9em; }

:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 3px; }
.band :focus-visible, .foot :focus-visible { outline-color: var(--carta); }

.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; left: 16px; top: -120px; z-index: 100;
  background: var(--inchiostro); color: var(--carta); padding: 12px 18px; font-weight: 650;
}
.skip:focus { top: 12px; }

/* ---------- display: condensato, maiuscolo dal CSS ---------- */
.h2,
.h4,
.hero__title,
.verdict,
.proofs__n,
.ticker__list,
.faq__btn,
.foot__claim,
.btn,
.clip__sub,
.clip__btn,
.stage__t,
.stage__n,
.midcta__t,
.mc__big,
.mc__word,
.mc__pre,
.hero__q,
.vs__no,
.ev__h,
.ev__when,
.ev__k,
.ev__n,
.form__step,
.path__h,
.crew__ini,
.kase__n,
.tally__n {
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.005em;
}
.s { display: block; }
/* riga che contiene una maiuscola accentata: con l'interlinea stretta l'accento toccherebbe la riga sopra */
.h2 { font-size: clamp(3rem, 7.4vw, 8.25rem); }
.h2--m { font-size: clamp(2.75rem, 5.8vw, 6.5rem); }
.h4 { font-size: var(--fs-l); line-height: 0.95; }
.verdict { font-size: clamp(2.5rem, 5.6vw, 6rem); line-height: 0.98; margin-top: clamp(64px, 8vw, 120px); max-width: 18ch; }
.verdict--c { margin-inline: auto; text-align: center; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sec { padding-block: var(--sec); }
.sec--line { border-top: 1px solid var(--inchiostro); }
.band { background: var(--inchiostro); color: var(--carta); overflow-x: clip; }
.kick { font-weight: 650; font-size: var(--fs-s); line-height: 1.3; margin-bottom: 18px; }
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
.sec-sub { font-size: var(--fs-m); line-height: 1.4; max-width: 42ch; margin-top: 24px; }
.band .src { color: var(--cenere); }
.src { font-size: var(--fs-xs); color: var(--grafite); margin-top: 12px; line-height: 1.45; }
.src a { text-decoration: underline; }

@media (min-width: 900px) {
  .sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .sec-head > .kick { grid-column: 1 / -1; }
  .sec-head .h2 { grid-column: 1 / 9; }
  .sec-head .sec-sub { grid-column: 9 / 13; margin-top: 0; padding-bottom: 0.4em; }
  /* testa con il toro a destra */
  .sec-head--toro .h2 { grid-column: 1 / 8; }
  .sec-head--toro .sec-sub { grid-column: 8 / 11; }
  .sec-head--toro .toro { grid-column: 11 / 13; justify-self: end; align-self: end; }
  /* testa con il toro a sinistra che guarda verso destra */
}

/* ---------- bottoni e link ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 4px 30px 0;
  background: var(--inchiostro); color: var(--carta);
  border: 2px solid var(--inchiostro);
  font-size: 1.375rem; line-height: 1; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s, color .18s;
}
.btn:hover { background: var(--carta); color: var(--inchiostro); }
.btn--sm { min-height: 42px; padding: 3px 18px 0; font-size: 1.125rem; }
.btn--wide { width: 100%; }
.band .btn { background: var(--carta); color: var(--inchiostro); border-color: var(--carta); }
.band .btn:hover { background: var(--inchiostro); color: var(--carta); }
.btn[disabled] { opacity: .6; cursor: progress; }
.wa-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.ico { width: 22px; height: 22px; flex: none; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--carta); border-bottom: 1px solid var(--nebbia); }
.nav__in { display: flex; align-items: center; gap: 32px; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { width: 46px; height: auto; }
.brand__word { display: block; width: 116px; height: 33px; overflow: hidden; }
.brand__word img { width: 116px; height: 33px; object-fit: cover; object-position: 50% 100%; }
.nav__links { margin-left: auto; }
.nav__links ul { display: flex; gap: 28px; }
.nav__links a { text-decoration: none; font-weight: 600; font-size: var(--fs-s); }
.nav__links a:hover { text-decoration: underline; }
@media (max-width: 899px) {
  .nav__links { display: none; }
  .nav .btn { margin-left: auto; }
  .brand__mark { width: 40px; }
  .brand__word { width: 96px; height: 27px; }
  .brand__word img { width: 96px; height: 27px; }
}

/* ==========================================================================
   IL TORO (avatar 2D a linea nera) + fumetto
   ========================================================================== */
/* il toro si dimensiona in altezza: le pose hanno larghezze molto diverse */
.toro { position: relative; width: max-content; flex: none; margin: 0; }
.toro img { height: var(--th, 220px); width: auto; max-width: none; position: relative; z-index: 1; }
.toro__say {
  position: absolute; z-index: 2; bottom: calc(100% - 6px); right: 55%;
  width: max-content; max-width: 190px;
  background: var(--carta); color: var(--inchiostro); border: 2px solid var(--inchiostro);
  padding: 8px 12px 7px; font-weight: 700; font-stretch: 80%; font-size: 0.9375rem; line-height: 1.2;
}
.toro__say::after {
  content: ""; position: absolute; right: 18px; top: 100%; width: 12px; height: 12px;
  background: var(--carta); border-right: 2px solid var(--inchiostro); border-bottom: 2px solid var(--inchiostro);
  transform: translateY(-6px) rotate(45deg);
}
.toro__say--r { right: auto; left: 55%; }
.toro__say--r::after { right: auto; left: 18px; }
/* sulle fasce nere il toro prende un bordo bianco da adesivo, altrimenti corna e pantaloni spariscono */
.band .toro img, .foot__toro img {
  filter: drop-shadow(3px 0 0 var(--carta)) drop-shadow(-3px 0 0 var(--carta)) drop-shadow(0 3px 0 var(--carta)) drop-shadow(0 -3px 0 var(--carta));
}
@media (max-width: 899px) {
  .toro--desk { display: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(420px, 40vw, 620px);
  column-gap: clamp(24px, 3vw, 56px);
  min-height: max(660px, calc(100svh - var(--nav-h)));
  padding-left: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
}
.hero__copy { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(28px, 4vh, 56px) clamp(24px, 3vh, 40px); min-width: 0; }
.hero__kicker { font-size: var(--fs-s); font-weight: 650; line-height: 1.3; margin-bottom: clamp(12px, 2vh, 20px); }
.hero__title { font-size: clamp(3.5rem, min(7.4vw, 10.2vh), 9.25rem); }
.hl { display: block; overflow: hidden; padding-bottom: 0.04em; margin-bottom: -0.04em; }
.hl__in { display: block; }
/* unico momento d'apertura: le quattro frasi salgono una dopo l'altra (solo CSS, niente titolo nascosto se JS manca) */
.motion .hl__in { animation: lineUp .85s cubic-bezier(.16, 1, .3, 1) both; }
.motion .hl:nth-child(2) .hl__in { animation-delay: .1s; }
.motion .hl:nth-child(3) .hl__in { animation-delay: .2s; }
.motion .hl:nth-child(4) .hl__in { animation-delay: .3s; }
@keyframes lineUp { from { transform: translateY(108%); } to { transform: none; } }
.hero__sub { font-size: var(--fs-m); line-height: 1.42; max-width: 46ch; margin-top: clamp(18px, 2.6vh, 32px); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(18px, 2.6vh, 30px); }
.hero__micro { font-size: var(--fs-xs); color: var(--grafite); margin-top: 12px; }
.hero__foot { display: flex; align-items: flex-end; gap: 24px; margin-top: clamp(24px, 4vh, 48px); }
.proofs {
  flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  border-top: 1px solid var(--inchiostro); padding-top: 16px; max-width: 760px;
}
.proofs li { display: flex; flex-direction: column; gap: 8px; }
.proofs__n { font-size: clamp(2.1rem, 3.1vw, 3.25rem); }
.proofs__t { font-size: var(--fs-xs); line-height: 1.4; color: var(--grafite); max-width: 24ch; }
.toro--hero { --th: clamp(150px, 19vh, 190px); margin-bottom: -4px; }
.hero__scroll { margin-top: 18px; font-size: var(--fs-xs); font-weight: 650; align-self: flex-start; }

/* muro di reel: tre colonne sfalsate, ferme; parte un video solo, gli altri dopo il primo gesto */
.wall { position: relative; overflow: hidden; height: max(660px, calc(100svh - var(--nav-h))); }
.wall__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wall__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wall__col--1 { margin-top: 36px; }
.wall__col--2 { margin-top: -110px; }
.wall__col--3 { margin-top: 90px; }
.rec {
  position: absolute; z-index: 4; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--inchiostro); color: var(--carta);
  padding: 7px 11px 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; line-height: 1;
}
.rec__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); flex: none; }
.motion .rec__dot { animation: blink 1.1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }
.wall__note {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  background: var(--carta); padding: 10px 14px; font-size: var(--fs-xs); color: var(--grafite);
  border-top: 1px solid var(--nebbia);
}

/* ---------- reel: schermo di telefono ---------- */
.reel { position: relative; margin: 0; }
.reel__screen {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; isolation: isolate;
  border-radius: var(--r-phone); border: 1px solid rgba(0, 0, 0, .1); background: var(--notte);
}
.band .reel__screen { border-color: rgba(255, 255, 255, .18); }
.reel__screen > video, .reel__screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.reel__cap { font-size: var(--fs-xs); line-height: 1.35; margin-top: 10px; color: var(--grafite); }
.reel__cap b { display: block; color: var(--inchiostro); font-weight: 650; }
.band .reel__cap { color: var(--cenere); }
.band .reel__cap b { color: var(--carta); }
.wall .reel__cap {
  position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; margin: 0;
  background: var(--carta); padding: 6px 8px 5px; font-size: 12px; line-height: 1.25;
}

/* ==========================================================================
   #clienti: barra dei nomi
   ========================================================================== */
.ticker { background: var(--inchiostro); color: var(--carta); padding: 18px 0 14px; display: flex; align-items: center; overflow: hidden; }
.ticker__lab { flex: none; padding-inline: var(--gut) 20px; font-weight: 650; font-size: var(--fs-s); color: var(--cenere); border-right: 1px solid #333; margin-right: 0; position: relative; z-index: 2; background: var(--inchiostro); }
.ticker__win { overflow: hidden; flex: 1; min-width: 0; }
.ticker__track { display: flex; width: max-content; }
.ticker__list { display: flex; font-size: clamp(1.5rem, 2.2vw, 2rem); white-space: nowrap; padding-left: 28px; }
.ticker__list li { display: inline-flex; align-items: center; }
.ticker__list li::after {
  content: ""; width: 34px; height: 30px; margin-inline: 28px; flex: none;
  background: url("../logo/toshare-marchio-bianco.svg") center / contain no-repeat;
  transform: translateY(-2px);
}
.motion .ticker__track.is-looped { animation: tick 80s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
html:not(.motion) .ticker { flex-direction: column; align-items: flex-start; gap: 10px; }
html:not(.motion) .ticker__lab { border: 0; }
html:not(.motion) .ticker__track { width: auto; }
html:not(.motion) .ticker__list { flex-wrap: wrap; white-space: normal; row-gap: 10px; padding-inline: var(--gut); }



/* ==========================================================================
   #casi
   ========================================================================== */

.quote { margin-top: 36px; }
.quote blockquote p { font-size: clamp(1.35rem, 1.8vw, 1.7rem); line-height: 1.3; font-weight: 650; font-stretch: 88%; }
.quote figcaption { font-size: var(--fs-xs); color: var(--grafite); margin-top: 12px; max-width: 40ch; }
.band .quote figcaption { color: var(--cenere); }

/* Bully: due inaugurazioni affiancate */

/* SpaccaNapoli */

/* Carlo */

/* Automoto + FitActive: due casi affiancati */

.midcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: clamp(48px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--inchiostro); }
.band .midcta { border-top-color: var(--carta); }
.midcta__t { font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 0.95; max-width: 26ch; }



/* ==========================================================================
   #marketing (fascia nera): il boost e lo schema in 5 tappe
   ========================================================================== */
.funnel { display: grid; grid-template-columns: clamp(140px, 12vw, 190px) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: end; margin-top: clamp(72px, 9vw, 136px); }
.funnel__toro { --th: clamp(200px, 17vw, 250px); }
.funnel__toro .toro__say { left: 0; right: auto; max-width: 170px; }
.funnel__toro .toro__say::after { left: 18px; right: auto; }
.funnel__h { font-weight: 650; font-size: var(--fs-s); margin-bottom: 18px; color: var(--cenere); }
.rail { position: relative; height: 56px; }
.rail__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #3a3a3a; }
.rail__fill { position: absolute; left: 0; top: 50%; height: 2px; width: 100%; background: var(--carta); transform-origin: 0 50%; }
.rail__plane { position: absolute; top: 50%; left: 0; width: 52px; height: 52px; margin-top: -26px; color: var(--inchiostro); background: var(--carta); padding: 8px; }
.rail__plane svg { width: 100%; height: 100%; transform: rotate(28deg); }
.stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.stage { position: relative; padding-top: 30px; }
.stage::before { content: ""; position: absolute; top: -34px; left: 0; width: 14px; height: 14px; background: var(--carta); transition: background-color .25s; }
.stage__n { font-size: 1.25rem; color: var(--cenere); display: block; margin-bottom: 6px; }
.stage__t { font-size: clamp(1.5rem, 2.2vw, 2.4rem); margin-bottom: 12px; transition: color .25s; overflow-wrap: anywhere; }
.stage p { color: var(--carta); font-size: var(--fs-s); max-width: 26ch; transition: color .25s; }
/* con il motion attivo le tappe si accendono quando passa l'aeroplanino */
.motion .funnel.is-live .stage:not(.is-on) .stage__t,
.motion .funnel.is-live .stage:not(.is-on) p { color: #6b6b6b; }
.motion .funnel.is-live .stage:not(.is-on)::before { background: #3a3a3a; }



/* ==========================================================================
   #team
   ========================================================================== */

/* clip con audio (play al clic, sottotitoli) */
.clip__sub { position: absolute; left: 8%; right: 8%; bottom: 14%; z-index: 2; text-align: center; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.3; min-height: 1em; }
.clip__sub span { background: var(--inchiostro); color: var(--carta); padding: 0.12em 0.3em 0.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.clip__btn {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 18px 2px 14px;
  background: var(--inchiostro); color: var(--carta); border: 2px solid var(--inchiostro); cursor: pointer; font-size: 1.2rem; line-height: 1;
}

/* ==========================================================================
   #domande
   ========================================================================== */
.domande__head { grid-column: 1 / 5; align-self: start; }
.domande__head .toro { --th: 230px; margin-top: 88px; }
.faq { grid-column: 6 / 13; border-bottom: 1px solid var(--inchiostro); }
.faq__item { border-top: 1px solid var(--inchiostro); }
.faq__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: none; border: 0; padding: 24px 0 20px; text-align: left; cursor: pointer;
  font-size: clamp(1.75rem, 2.8vw, 2.75rem); line-height: 1.02;
}
.faq__btn::after { content: ""; flex: none; width: 22px; height: 22px; background:
  linear-gradient(currentColor, currentColor) center / 22px 3px no-repeat,
  linear-gradient(currentColor, currentColor) center / 3px 22px no-repeat; transition: transform .2s; }
.faq__btn[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq__a { padding-bottom: 28px; max-width: 58ch; }
.faq__a blockquote { display: inline; }

/* ==========================================================================
   #call + form
   ========================================================================== */
.call { background: var(--nebbia); }
.call__grid { align-items: start; }
.call__side { grid-column: 1 / 6; }
.call__side .h2 { font-size: clamp(2.75rem, 5.6vw, 6rem); }
.call__side .h4 { margin-top: 44px; margin-bottom: 4px; }
.next { counter-reset: n; }
.next li { counter-increment: n; position: relative; padding-left: 44px; margin-top: 16px; max-width: 42ch; }
.next li::before { content: counter(n); position: absolute; left: 0; top: -2px; font-stretch: 62%; font-weight: 900; font-size: 1.75rem; line-height: 1; }
.call__wa { margin-top: 32px; }
.call__wa p { margin-bottom: 8px; }
.form { grid-column: 7 / 12; background: var(--carta); padding: clamp(24px, 3vw, 44px); border: 1px solid var(--inchiostro); }
.call__toro { grid-column: 12 / 13; align-self: start; justify-self: end; margin-top: 170px; --th: 240px; }
.call__toro .toro__say { right: 0; max-width: 118px; }
.field { margin-bottom: 22px; border: 0; padding: 0; min-width: 0; }
.field > label, .field legend { display: block; font-weight: 650; font-size: var(--fs-s); margin-bottom: 8px; padding: 0; }
.req { font-weight: 400; }
.opt { font-weight: 400; color: var(--grafite); }
.field input[type="text"], .field input[type="tel"], .field input[type="date"], .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--inchiostro); border-radius: 0;
  background: var(--carta); font: inherit; font-size: 1.0625rem; color: var(--inchiostro); appearance: none; -webkit-appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; }
.field ::placeholder { color: #707070; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 1px; }
.field__help { font-size: var(--fs-xs); color: var(--grafite); margin-top: 6px; }
.field__err { font-size: var(--fs-xs); font-weight: 700; margin-top: 6px; }
.field__err:empty { display: none; }
.field__err:not(:empty)::before { content: "! "; }
[aria-invalid="true"] { border-width: 3px !important; }
.field--radio.is-invalid, .field--check.is-invalid { border-left: 3px solid var(--inchiostro); padding-left: 12px; }
.radio, .check { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-s); padding-block: 7px; cursor: pointer; }
.radio input, .check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--inchiostro); flex: none; }
.form__summary, .form__fail { border: 3px solid var(--inchiostro); padding: 14px 16px; font-weight: 700; margin-bottom: 20px; }
.form__micro { font-size: var(--fs-xs); color: var(--grafite); margin-top: 12px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { background: var(--inchiostro); color: var(--carta); padding-block: clamp(64px, 8vw, 120px) 40px; position: relative; overflow: hidden; }
.foot__grid { position: relative; }
.foot__logo { width: clamp(120px, 12vw, 170px); }
.foot .foot__claim { font-size: clamp(3.5rem, 10.4vw, 13rem); margin-top: clamp(40px, 5vw, 72px); max-width: 11ch; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid #333; padding-top: 28px; }
.foot__h { font-size: var(--fs-s); font-weight: 650; margin-bottom: 10px; }
.foot p { font-size: var(--fs-s); }
.foot p + p { margin-top: 6px; }
.foot__copy { margin-top: 56px; color: var(--cenere); font-size: var(--fs-xs) !important; }
.foot__toro { position: absolute; right: clamp(24px, 4vw, 72px); top: clamp(24px, 3vw, 56px); --th: 170px; }

/* ==========================================================================
   BARRA MOBILE
   ========================================================================== */
.mbar { display: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) and (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) 380px; }
  .hero__title { font-size: min(6.4vw, 11.2vh); }
  .proofs { grid-template-columns: 1fr; gap: 12px; }
  .proofs li { flex-direction: row; align-items: baseline; gap: 14px; }
  .proofs__t { max-width: none; }
}

@media (max-width: 899px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > * { grid-column: 1 / -1 !important; }
  .sec-head .toro { display: none; }

  /* hero mobile */
  .hero { display: flex; flex-direction: column; padding: 26px var(--gut) 36px; min-height: 0; }
  .hero__copy { display: contents; }
  .hero__kicker { order: 1; font-size: 0.9375rem; }
  /* la riga più lunga («fanno conoscere.») misura circa 7,6 em: una frase per riga */
  .hero__title { order: 1; font-size: min(calc((100vw - 2 * var(--gut)) / 7.9), 5.5rem); }
  .hero__q { order: 2; }
  .hero__sub { order: 2; font-size: 1.1875rem; }
  .hero__close { order: 2; }
  .hero__cta { order: 3; }
  .hero__micro { order: 4; }
  .wall { order: 5; height: auto; margin: 26px calc(-1 * var(--gut)) 0; overflow: visible; }
  .hero__foot { order: 6; flex-direction: column; align-items: stretch; gap: 20px; margin-top: 26px; }
  .proofs { grid-template-columns: 1fr; gap: 14px; }
  .proofs li { display: grid; grid-template-columns: 9.2rem minmax(0, 1fr); align-items: baseline; gap: 12px; }
  .proofs li + li { border-top: 1px solid var(--nebbia); padding-top: 12px; }
  .proofs__n { font-size: 2.25rem; }
  .toro--hero { align-self: flex-end; --th: 150px; margin-right: 8px; margin-top: 44px; }
  .hero__scroll { display: none; }
  .wall__cols {
    position: static; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; padding: 0 var(--gut) 4px; scroll-padding-inline: var(--gut); scrollbar-width: none;
  }
  .wall__cols::-webkit-scrollbar { display: none; }
  .wall__col { display: contents; }
  .wall .reel { flex: 0 0 42vw; max-width: 200px; margin: 0; scroll-snap-align: start; }
  .rec { top: 10px; left: calc(var(--gut) + 10px); }
  .wall__note { display: none; }

  .ticker { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ticker__lab { border: 0; }
  .ticker__win { width: 100%; }

  .verdict--c { text-align: left; }


  .midcta { flex-direction: column; align-items: flex-start; }



  .funnel { grid-template-columns: 1fr; margin-top: 56px; }
  .funnel__toro { display: none; }
  .funnel__flow { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
  .funnel__h { grid-column: 1 / -1; }
  .rail { height: auto; grid-column: 1; grid-row: 2; }
  .stages { grid-column: 2; grid-row: 2; }
  .rail__line { top: 0; bottom: 0; left: 19px; right: auto; width: 2px; height: auto; }
  .rail__fill { top: 0; left: 19px; width: 2px; height: 100%; transform-origin: 50% 0; }
  .rail__plane { left: 0; top: 0; margin-top: 0; width: 40px; height: 40px; padding: 6px; }
  .rail__plane svg { transform: rotate(118deg); }
  .stages { grid-template-columns: 1fr; gap: 30px; }
  .stage { padding-top: 0; }
  .stage::before { display: none; }




  .domande__head .toro { display: none; }
  .form { margin-top: 32px; padding: 20px 16px; }
  .call__grid { display: flex; flex-direction: column; }
  .call__side { order: 1; }
  .call__toro { order: 2; }
  .form { order: 3; }
  .call__toro { align-self: flex-end; margin: 72px 12px 0 0; --th: 170px; }
  .call__toro .toro__say { right: 70%; max-width: 170px; }
  .foot__cols { grid-template-columns: 1fr; gap: 28px; }
  .foot__toro { display: none; }

  .mbar {
    display: flex; gap: 10px; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background: var(--carta); border-top: 1px solid var(--inchiostro);
    transform: translateY(110%); transition: transform .28s ease; visibility: hidden;
  }
  .mbar.is-on { transform: none; visibility: visible; }
  .mbar__btn { flex: 1; min-height: 50px; }
  .mbar__wa { flex: none; width: 54px; min-height: 50px; display: grid; place-items: center; border: 2px solid var(--inchiostro); }
  .mbar__wa .ico { width: 26px; height: 26px; }
  .foot { padding-bottom: 96px; }
}

@media (max-width: 380px) {
  .proofs li { grid-template-columns: 8rem minmax(0, 1fr); }
  .btn { padding-inline: 22px; }
}

/* ==========================================================================
   STRUTTURA CORTA (30/09/2026): hero col mestiere, #cosa-facciamo,
   #perche-noi, #casi compatti con la striscia dei numeri
   ========================================================================== */
/* riga del titolo con la À: l'accento non deve restare tagliato dall'overflow della riga */
.hl--acc { padding-top: 0.2em; margin-top: -0.2em; }

#cosa-facciamo .funnel { margin-top: 0; }
.cosa__line { font-size: var(--fs-m); line-height: 1.45; max-width: 52ch; margin-top: clamp(48px, 6vw, 80px); }

.vs table { width: 100%; border-collapse: collapse; }
.vs th, .vs td { text-align: left; vertical-align: top; padding: 16px 14px 14px; border-bottom: 1px solid var(--nebbia); line-height: 1.4; }
.vs thead th { font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: var(--fs-l); line-height: 0.9; border-bottom: 2px solid var(--inchiostro); vertical-align: bottom; }
.vs tbody th { font-weight: 650; width: 22%; }
.vs td { width: 39%; color: var(--grafite); }
.vs .us { background: var(--inchiostro); color: var(--carta); border-bottom-color: #333; font-weight: 600; }
.vs thead .us { border-bottom-color: var(--inchiostro); }


.crew { margin-top: clamp(56px, 7vw, 96px); padding-top: 24px; border-top: 1px solid var(--inchiostro); }
.crew__h { font-weight: 650; font-size: var(--fs-m); line-height: 1.3; margin-bottom: 24px; }
.crew__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.crew__list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
.crew__ini { display: grid; place-items: center; width: 64px; height: 64px; background: var(--inchiostro); color: var(--carta); font-size: 2.4rem; line-height: 1; }
.crew__list p { font-size: var(--fs-s); line-height: 1.45; }
.crew__list b { display: block; font-size: var(--fs-body); }

.kases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) var(--gap); }
.kase { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; border-top: 3px solid var(--inchiostro); padding-top: 20px; }
.kase__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--notte); }
.kase__media video, .kase__media img { width: 100%; height: 100%; object-fit: cover; }
.kase__client { font-weight: 650; font-size: var(--fs-xs); color: var(--grafite); line-height: 1.3; }
.kase__n { font-size: clamp(2.8rem, 4.6vw, 5rem); margin-top: 12px; }
.kase .kase__t { font-weight: 650; line-height: 1.35; margin-top: 10px; }
.kase__d { margin-top: 12px; font-size: var(--fs-s); color: var(--grafite); }
.kase__d + .kase__d { margin-top: 8px; }
.kase__d b { color: var(--inchiostro); }
.kases__quote { margin-top: clamp(48px, 6vw, 80px); max-width: 60ch; }
.tally__h { font-weight: 650; font-size: var(--fs-s); margin-top: clamp(48px, 6vw, 80px); margin-bottom: 16px; }
.tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gap); }
.tally li { border-top: 1px solid var(--inchiostro); padding-block: 14px 18px; }
.tally__n { font-size: clamp(2rem, 2.8vw, 2.75rem); }
.tally li p + p { margin-top: 6px; font-size: var(--fs-xs); color: var(--grafite); line-height: 1.4; }
.tally b { display: block; color: var(--inchiostro); }

@media (max-width: 899px) {
  .vs th, .vs td { padding: 12px 8px 10px; font-size: 0.9375rem; }
  .vs thead th { font-size: 1.3rem; }
  .vs tbody th { width: 28%; }
  .crew__list { grid-template-columns: 1fr; gap: 18px; }
  .kases { grid-template-columns: 1fr; gap: 36px; }
  .kase { grid-template-columns: 124px minmax(0, 1fr); gap: 16px; }
  .kase__n { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tally__n { font-size: 1.75rem; }
}

/* ==========================================================================
   MANIFESTO #manifesto (effetto della v1: titolone fissato allo scroll,
   poi la scritta gigante che si riempie con la folla).
   Di base è statico; .is-live lo mette v2.js solo con GSAP e movimento.
   ========================================================================== */
.mc { padding-block: var(--sec) 0; }
.mc__stage { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 96px); text-align: center; padding-inline: var(--gut); }
.mc__big { font-size: clamp(3rem, 8.4vw, 9.5rem); max-width: 13ch; margin-inline: auto; font-variation-settings: "wdth" var(--w, 62); }
.mc__big--l { max-width: 15ch; font-size: clamp(2.75rem, 7vw, 8rem); }
.mc__pre { font-size: clamp(1.5rem, 3vw, 2.75rem); margin-bottom: 12px; }
.mc__frame { position: relative; isolation: isolate; overflow: hidden; background: var(--carta); }
.mc__video { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: cover; background: var(--notte); }
/* bianco pieno con le lettere nere in "screen": il nero diventa trasparente e dentro le lettere si vede il video */
.mc__knock {
  position: relative; background: var(--carta); color: var(--inchiostro);
  mix-blend-mode: screen; display: flex; align-items: center; justify-content: center;
  padding-block: 1vw;
}
.mc__word { font-size: clamp(4rem, 15.5vw, 19rem); line-height: 0.8; text-align: center; white-space: nowrap; }
.mc__word span { display: block; }

.mc.is-live .mc__stage { position: relative; height: 100vh; height: 100svh; padding: 0; gap: 0; display: block; overflow: hidden; background: var(--carta); }
.mc.is-live .mc__p {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--gut);
}
.mc.is-live .mc__p1 .mc__big { --w: 100; max-width: 12ch; }
.mc.is-live .mc__p:not(.mc__p1) { visibility: hidden; }
.mc.is-live .mc__final { position: absolute; inset: 0; }
.mc.is-live .mc__frame { position: absolute; inset: 0; }
.mc.is-live .mc__knock { position: absolute; inset: -2px; padding: var(--nav-h) 0 0; }
.mc.is-live .mc__word { transform-origin: 50% 50%; }
.mc.is-live .mc__pre { position: absolute; left: 0; right: 0; z-index: 3; margin: 0; top: 18%; }

.mc__after { max-width: var(--max); margin-inline: auto; padding: clamp(64px, 8vw, 120px) var(--gut) var(--sec); }
.mc__lead { font-size: var(--fs-m); line-height: 1.45; max-width: 46ch; margin-inline: auto; text-align: center; }

@media (max-width: 899px) {
  .mc__big { font-size: clamp(2.6rem, 13vw, 4.5rem); }
  .mc__big--l { font-size: clamp(2.4rem, 11.5vw, 4rem); }
  .mc__word { font-size: 24vw; }
  .mc__lead { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .nav, .mbar, .wall, .ticker, .toro { display: none; }
}

/* ==========================================================================
   PAGINE ACCESSORIE (grazie, privacy, 404)
   ========================================================================== */
.page__main { padding-block: clamp(56px, 9vw, 140px); }
.page__title { max-width: 12ch; }
.page__title--xl { font-size: clamp(4rem, 13vw, 13rem); max-width: 10ch; }
.page__lead { font-size: var(--fs-m); line-height: 1.45; max-width: 44ch; margin-top: 32px; }
.page__txt { margin-top: 24px; max-width: 60ch; }
.page__main .wa-link { margin-top: 12px; }
.page__back { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 12px; }
.page__toro { --th: 220px; margin-top: 48px; }
.legal { max-width: 860px; }
.legal__date { color: var(--grafite); font-size: var(--fs-s); margin-top: 24px; }
.legal h2 { font-stretch: 62%; font-weight: 900; text-transform: uppercase; line-height: 0.95; font-size: var(--fs-l); margin-top: 48px; margin-bottom: 14px; }
.legal li { position: relative; padding-left: 22px; margin-top: 8px; }
.legal li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--inchiostro); }
.legal ul + p, .legal p + ul, .legal .legal__table + p { margin-top: 14px; }
.legal__table { overflow-x: auto; margin-block: 8px 16px; }
.legal table { width: 100%; border-collapse: collapse; min-width: 480px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--nebbia); font-size: var(--fs-s); }
.legal thead th { border-bottom: 2px solid var(--inchiostro); font-weight: 650; }

/* ==========================================================================
   TESTI DI MARIA (06/10/2026): hero con la domanda, manifesto con le frasi
   di passaggio, sei tappe, tabella con le icone, blocco eventi, screen
   delle prove, form a due percorsi
   ========================================================================== */
.hero__q { font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 0.95; margin-top: clamp(16px, 2.2vh, 26px); max-width: 24ch; text-wrap: balance; }
.hero__close { font-weight: 650; font-size: var(--fs-s); margin-top: 12px; max-width: 46ch; }
.hero__sub + .hero__close { margin-top: 12px; }

/* manifesto: la frase che chiude ogni schermata e quella sotto la scritta gigante */
/* manifesto: le frasi di Maria sono lunghe, la prima parte larga e si stringe come nella v1 */
.mc__big--l { text-wrap: balance; }
.mc.is-live .mc__p1 .mc__big--l { max-width: 17ch; }
.verdict--w { max-width: 24ch; }

/* sei tappe: su desktop una riga sola, il titolo si stringe */
@media (min-width: 900px) {
  .stages--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
  .stages--6 .stage__t { font-size: clamp(1.25rem, 1.65vw, 1.9rem); line-height: 0.92; }
  .stages--6 .stage p { font-size: 0.9375rem; }
}

/* tabella: la frase di Maria sopra e un'icona per riga */
.vs__intro { margin-bottom: clamp(28px, 3.5vw, 44px); max-width: 52ch; }
.vs__no { font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: 0.92; margin-bottom: 12px; }
.vs__intro p:not(.vs__no) { font-size: var(--fs-m); line-height: 1.4; }
.vs__ico { width: 26px; height: 26px; margin-bottom: 8px; }

/* eventi: prima, durante, dopo + la prova di Bully */
.ev { margin-top: clamp(64px, 8vw, 112px); padding-top: 24px; border-top: 3px solid var(--inchiostro); }
.ev__h { font-size: clamp(2.5rem, 5vw, 5.25rem); line-height: 0.92; max-width: 16ch; }
.ev__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); margin-top: clamp(28px, 3.5vw, 48px); align-items: start; }
.ev__them { font-size: var(--fs-m); line-height: 1.4; color: var(--grafite); max-width: 44ch; }
.ev__lead { font-weight: 650; font-size: var(--fs-m); margin-top: 20px; }
.ev__steps { margin-top: 16px; }
.ev__steps li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start; padding-block: 18px; border-top: 1px solid var(--inchiostro); }
.ev__steps li:last-child { border-bottom: 1px solid var(--inchiostro); }
.ev__when { display: inline-block; justify-self: start; background: var(--inchiostro); color: var(--carta); font-size: 1.5rem; padding: 6px 10px 3px; line-height: 1; }
.ev__steps p { max-width: 50ch; }
.ev__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--notte); }
.ev__k { font-size: clamp(2rem, 3.2vw, 3.25rem); margin-top: 20px; }
.ev__nums li { border-top: 1px solid var(--inchiostro); padding-block: 12px; font-size: var(--fs-s); color: var(--grafite); }
.ev__nums { margin-top: 14px; }
.ev__n { display: block; font-size: clamp(1.75rem, 2.4vw, 2.4rem); color: var(--inchiostro); margin-bottom: 4px; }
.ev__verdict { font-size: clamp(2.25rem, 4.4vw, 4.75rem); max-width: none; }

/* citazione di SpaccaNapoli: lo screen del messaggio vero */
.quote--shot img { width: 100%; max-width: 620px; border: 1px solid var(--nebbia); }

/* numeri con lo screen sopra, si apre grande al clic */
.tally li { display: flex; flex-direction: column; }
.tally__shot { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--nebbia); margin-bottom: 14px; border: 1px solid var(--nebbia); }
.tally__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .3s; }
a.tally__shot:hover img { transform: scale(1.03); }
.tally__zoom { position: absolute; left: 8px; bottom: 8px; background: var(--inchiostro); color: var(--carta); font-size: var(--fs-xs); font-weight: 650; padding: 5px 9px 4px; line-height: 1.2; }
.shot-link { font-weight: 650; color: var(--inchiostro); white-space: nowrap; }

.shotbox { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; }
.shotbox::backdrop { background: rgba(0, 0, 0, .86); }
.shotbox__img { max-width: min(94vw, 720px); max-height: 88vh; width: auto; height: auto; margin-inline: auto; }
.shotbox__x {
  position: absolute; top: -52px; right: 0; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--carta); color: var(--inchiostro); border: 0; font-size: 2rem; line-height: 1; cursor: pointer;
}
.shotbox__x:focus-visible { outline-color: var(--carta); }

/* form a due percorsi */
.field--path .opts { display: grid; gap: 8px; }
.field--path .radio { border: 1px solid var(--inchiostro); padding: 14px 14px 12px; font-weight: 650; }
.field--path .radio:has(input:checked) { background: var(--inchiostro); color: var(--carta); }
.field--path .radio input { accent-color: var(--carta); }
.path__set { border: 0; padding: 0; margin: 8px 0 0; min-width: 0; }
.path__h { display: block; width: 100%; background: var(--inchiostro); color: var(--carta); font-size: 1.5rem; padding: 10px 14px 6px; margin-bottom: 4px; }
.form__step { font-size: 1.5rem; line-height: 0.95; margin: 30px 0 16px; padding-top: 14px; border-top: 1px solid var(--inchiostro); }
.path__h + .form__step { border-top: 0; margin-top: 14px; padding-top: 0; }
.field__help--top { margin: -4px 0 4px; }
.field input[type="date"] { min-height: 52px; }
fieldset.field.is-invalid { border-left: 3px solid var(--inchiostro); padding-left: 12px; }

@media (min-width: 900px) {
  .call__side { position: sticky; top: calc(var(--nav-h) + 24px); }
}
@media (max-width: 899px) {
  .ev__grid { grid-template-columns: 1fr; }
  .ev__steps li { grid-template-columns: 1fr; gap: 10px; }
  .ev__done { max-width: 460px; }
  .tally__shot { aspect-ratio: 3 / 4; }
  .shotbox__x { top: -50px; }
}