/* ════════════════════════════════════════════════════════════════════
   Mantra Productions · pagina nuova (13 ottobre 2026)
   Stesso impianto della home "mix" (token, caratteri, spazi, motore delle
   animazioni legate allo scroll), con l'accento della divisione: il TEAL
   del marchio. Fondo scuro, un solo momento colorato (Contatto, teal →
   petrolio scuro → Ink; il viola resta solo in Home), niente grana, niente azzurro elettrico.
   Movimento: transform, opacity, clip-path. Animazioni legate allo
   scroll con animation-timeline; dove non c'è le guida
   assets/productions-nuovo.js (stessi keyframes).
   ════════════════════════════════════════════════════════════════════ */

@property --r   { syntax: '*'; inherits: false; }
@property --tl  { syntax: '*'; inherits: false; }
@property --ease{ syntax: '*'; inherits: false; }

:root{
  /* accento Productions (gli altri gettoni sono in base.css) */
  --teal-veil:#234555;   /* veli */
  --teal-ink:#1F6870;    /* accento su fondo chiaro (5.8:1 sulla carta) */
  --teal-bg:#27767E;     /* fondo colorato: il testo chiaro ci sta sopra a 4.9:1 */
  --accent-t:var(--teal-t);
  --aura:rgba(47,138,146,.16);
}

.mp{ position:relative; overflow-x:clip; }

/* ════════ Motore delle animazioni legate allo scroll (dalla home) ════════
   Lo stato scritto in CSS è sempre quello finale e leggibile: senza
   animazioni (movimento ridotto, versione ferma, niente JS) si vede tutto. */
.sd{ animation-duration:1ms; animation-fill-mode:both; animation-iteration-count:1; animation-timing-function:var(--ease, cubic-bezier(.25,1,.5,1)); }
@supports (animation-timeline: view()){
  .sd{ animation-duration:auto; animation-timeline:var(--tl, view()); animation-range:var(--r, cover 0% cover 100%); }
}
@supports not (animation-timeline: view()){
  .sd{ animation-duration:1000ms; animation-play-state:paused; }
  html:not(.m3-live) .sd{ animation-name:none !important; }
}

.mp-ghost svg{ width:12px; height:12px; flex:none; }

/* ════════ Animazioni riusate ════════ */
@keyframes m3-sy{ from{ transform:scaleY(0); } }
@keyframes m3-sx{ from{ transform:scaleX(0); } }
@keyframes m3-fadeup{ from{ opacity:0; transform:translateY(24px); } }
@keyframes m3-fade{ from{ opacity:0; } }
@keyframes m3-rise{ from{ transform:translateY(115%); } }
@keyframes m3-light{ from{ opacity:.18; } }
@keyframes m3-wrise{ from{ transform:translateY(.55em); opacity:0; } }
@keyframes m3-failsafe{ to{ opacity:1; } }
.m3-w{ display:inline-block; }
.m3-w--light{ display:inline; }
.m3-mask{ display:block; padding-bottom:.1em; margin-bottom:-.1em; clip-path:inset(-40% -8% 0 -8%); }
.m3-rise{ display:inline-block; animation-name:m3-rise; }

/* ════════════════════════════════════════════════════════════════
   1 · APERTURA: il video diventa un fotogramma da cinema
   ════════════════════════════════════════════════════════════════ */
.mp-hero{ position:relative; height:200vh; view-timeline:--hero block; }
.mp-hero__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:clip; display:flex; }
/* P1 · scorrendo, il video si chiude in un formato cinemascope (2.39:1) */
.mp-hero__media{ position:absolute; inset:0; background:var(--ink); animation-name:mp-letterbox; --tl:--hero; --r:contain 4% contain 100%; --ease:cubic-bezier(.45,0,.25,1); }
@keyframes mp-letterbox{
  from{ clip-path:inset(0 0 0 0 round 0px); }
  to{ clip-path:inset(max(9vh, calc(50vh - 19vw)) var(--gut) max(9vh, calc(50vh - 19vw)) var(--gut) round 4px); }
}
.mp-hero__media video{ width:100%; height:100%; object-fit:cover; }
.mp-hero__shade{ position:absolute; inset:0; background:
  linear-gradient(180deg,rgba(13,12,17,.64) 0%,rgba(13,12,17,.26) 30%,rgba(13,12,17,.36) 58%,rgba(13,12,17,.9) 100%),
  linear-gradient(90deg,rgba(13,12,17,.56) 0%,rgba(13,12,17,.08) 72%),
  linear-gradient(0deg,rgba(35,69,85,.42) 0%,rgba(35,69,85,0) 55%); }
.mp-hero__inner{ position:relative; z-index:1; width:100%; max-width:1600px; margin:0 auto; padding:calc(var(--navh) + 2.2vh) var(--gut) clamp(26px,5vh,56px); display:flex; flex-direction:column; justify-content:space-between; gap:2.4vh; }
.mp-hero__signs{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px 24px; color:var(--t1); animation-name:mp-out; --tl:--hero; --r:contain 0% contain 24%; font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.mp-hero__tag{ display:inline-flex; align-items:center; gap:12px; }
.mp-hero__tag::before{ content:''; width:28px; height:1px; background:var(--teal-t); }
.mp-hero__tele{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.85; color:var(--t2); }
@keyframes mp-out{ to{ opacity:0; } }
.mp-hero__title{ color:var(--text); font:var(--w-title) var(--fs-hero)/var(--lh-hero) var(--f-title); letter-spacing:var(--ls-hero); }
.mp-hl{ display:block; white-space:nowrap; }
.mp-hl__in{ position:relative; display:inline-block; }
.mp-hl--b{ margin-top:.06em; transform-origin:0 100%; }
.mp-hl--b em{ display:inline-block; padding-right:.1em; color:var(--teal-t); filter:drop-shadow(0 .02em .2em rgba(13,12,17,.5)); position:relative; font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
/* P2 · "Non documentiamo il lusso." esce verso l'alto; "Lo mettiamo in scena." resta e cresce */
.mp-hl--a{ animation-name:mp-hl-a; --tl:--hero; --r:contain 4% contain 44%; --ease:cubic-bezier(.55,0,.6,1); }
.mp-hl--a2{ animation-name:mp-hl-a2; --tl:--hero; --r:contain 10% contain 50%; --ease:cubic-bezier(.55,0,.6,1); }
.mp-hl--b{ animation-name:mp-hl-b; --tl:--hero; --r:contain 0% contain 92%; --ease:cubic-bezier(.45,0,.25,1); }
@keyframes mp-hl-a{ to{ transform:translateY(-16vh); opacity:0; } }
@keyframes mp-hl-a2{ to{ transform:translateY(-12vh); opacity:0; } }
@keyframes mp-hl-b{ to{ transform:translateY(-9vh) scale(1.1); } }
/* all'apertura le righe salgono dalla loro linea (non legato allo scroll) */
/* ── Entrata da cinema (solo all'apertura, non legata allo scroll; propria di questa pagina) ──
   1. due bande nere chiudono lo schermo, si aprono fino al formato cinemascope, restano un attimo, poi si aprono del tutto;
   2. la riga in Mono in alto e le tre righe a destra "si digitano", con il cursore teal;
   3. le tre righe del titolo entrano da sinistra una alla volta;
   4. una luce teal scorre sul testo di ogni riga (una copia teal del testo dietro una maschera a gradiente che si sposta);
   5. per ultimi arrivano testo, pulsanti, settori e "Scorri".
   Solo transform, opacity e clip-path. Con "riduci movimento" e nella versione ferma non parte niente. */
.mp-bars,.mp-sheen{ display:none; }
.mp-type{ position:relative; display:inline-block; }
.mp-type__t{ display:inline-block; }
.mp-type__c{ position:absolute; left:0; top:.08em; width:.62em; height:1.04em; background:var(--teal-t); font-style:normal; opacity:0; pointer-events:none; }
@media (prefers-reduced-motion:no-preference){
  .js:not(.m3-still) .mp-bars{ display:block; position:absolute; inset:0; z-index:2; pointer-events:none; --lb:max(6vh, calc((100vh - var(--navh) - 41.84vw) / 2)); }
  .js:not(.m3-still) .mp-bars i{ position:absolute; left:0; right:0; height:50.5%; background:#000; }
  .js:not(.m3-still) .mp-bars__t{ top:0; box-shadow:inset 0 -1px 0 rgba(79,176,184,.4); animation:mp-bar-t 2600ms 150ms both; }
  .js:not(.m3-still) .mp-bars__b{ bottom:0; box-shadow:inset 0 1px 0 rgba(79,176,184,.4); animation:mp-bar-b 2600ms 150ms both; }

  .js:not(.m3-still) .mp-type__t{ animation:mp-type calc(var(--n) * 38ms) steps(var(--n), end) var(--d, 0ms) both; }
  .js:not(.m3-still) .mp-type__c{ animation:mp-caret-move calc(var(--n) * 38ms) steps(var(--n), end) var(--d, 0ms) both, mp-on 1ms linear var(--d, 0ms) forwards, mp-blink 820ms linear calc(var(--d, 0ms) + var(--n) * 38ms) 2 forwards; }

  .js:not(.m3-still) .mp-hl__in{ animation:mp-enter 1150ms cubic-bezier(.16,1,.3,1) both; }
  .js:not(.m3-still) .mp-hl--a .mp-hl__in{ animation-delay:1000ms; }
  .js:not(.m3-still) .mp-hl--a2 .mp-hl__in{ animation-delay:1180ms; }
  .js:not(.m3-still) .mp-hl--b .mp-hl__in{ animation-delay:1360ms; }

  .js:not(.m3-still) .mp-sheen{ display:block; position:absolute; inset:0; overflow:visible; pointer-events:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 32%,#000 50%,transparent 68%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0%,transparent 32%,#000 50%,transparent 68%,transparent 100%);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; animation:mp-sheen-o 1500ms cubic-bezier(.45,0,.25,1) both; }
  .js:not(.m3-still) .mp-sheen::before{ content:attr(data-t); display:block; color:var(--teal-t); animation:mp-sheen-i 1500ms cubic-bezier(.45,0,.25,1) both; }
  .js:not(.m3-still) .mp-hl--b .mp-sheen::before{ color:#E6F6F7; }
  .js:not(.m3-still) .mp-hl--a .mp-sheen,.js:not(.m3-still) .mp-hl--a .mp-sheen::before{ animation-delay:1650ms; }
  .js:not(.m3-still) .mp-hl--a2 .mp-sheen,.js:not(.m3-still) .mp-hl--a2 .mp-sheen::before{ animation-delay:1820ms; }
  .js:not(.m3-still) .mp-hl--b .mp-sheen,.js:not(.m3-still) .mp-hl--b .mp-sheen::before{ animation-delay:2000ms; }

  .js:not(.m3-still) .m3-load{ animation:m3-fadeup 700ms var(--e-out) backwards; }
  .js:not(.m3-still) .mp-hero__lead.m3-load{ animation-delay:2050ms; }
  .js:not(.m3-still) .mp-hero__cta.m3-load{ animation-delay:2180ms; }
  .js:not(.m3-still) .mp-hero__meta.m3-load{ animation-delay:2300ms; }
  .js:not(.m3-still) .mp-cue__in.m3-load{ animation:m3-fade 900ms ease 2700ms backwards; }
}
@media (max-width:768px){ .mp-bars{ --lb:20vh !important; } }
/* la banda alta conta anche la barra del menu, così la fessura di video resta al centro di ciò che si vede */
@keyframes mp-bar-t{
  0%{ transform:translateY(0); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  42%,62%{ transform:translateY(calc(-100% + var(--navh) + var(--lb))); animation-timing-function:cubic-bezier(.7,0,.2,1); }
  100%{ transform:translateY(-101%); }
}
@keyframes mp-bar-b{
  0%{ transform:translateY(0); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  42%,62%{ transform:translateY(calc(100% - var(--lb))); animation-timing-function:cubic-bezier(.7,0,.2,1); }
  100%{ transform:translateY(101%); }
}
@keyframes mp-type{ from{ clip-path:inset(-30% 100% -30% 0); } to{ clip-path:inset(-30% 0 -30% 0); } }
@keyframes mp-caret-move{ from{ transform:translateX(0); } to{ transform:translateX(calc(var(--n) * (1ch + .18em))); } }
@keyframes mp-on{ from,to{ opacity:1; } }
@keyframes mp-blink{ 0%,49.9%{ opacity:1; } 50%,100%{ opacity:0; } }
@keyframes mp-enter{ from{ transform:translateX(-7vw); opacity:0; clip-path:inset(-25% 100% -25% 0); } to{ transform:none; opacity:1; clip-path:inset(-25% -12% -25% -12%); } }
@keyframes mp-sheen-o{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }
@keyframes mp-sheen-i{ from{ transform:translateX(100%); } to{ transform:translateX(-100%); } }
/* P3 · testo e pulsanti escono per primi */
.mp-hero__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; animation-name:mp-foot-out; --tl:--hero; --r:contain 0% contain 30%; --ease:cubic-bezier(.4,0,1,1); }
@keyframes mp-foot-out{ to{ transform:translateY(-6vh); opacity:0; } }
.mp-hero__lead{ max-width:46ch; color:var(--t1); font-size:var(--fs-lead); line-height:var(--lh-lead); }
.mp-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.mp-hero__meta{ list-style:none; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 22px; max-width:34ch; color:var(--t2); font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.mp-cue{ position:absolute; left:50%; bottom:clamp(22px,4vh,44px); z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; transform:translateX(-50%); color:var(--t2); animation-name:mp-out; --tl:--hero; --r:contain 0% contain 14%; font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.mp-cue i{ display:block; width:1px; height:38px; background:linear-gradient(180deg,var(--teal-t),rgba(79,176,184,0)); transform-origin:50% 0; animation:mp-cue 2.4s cubic-bezier(.65,0,.35,1) infinite; }
.mp-cue__in{ display:flex; flex-direction:column; align-items:center; gap:10px; }
@keyframes mp-cue{ 0%{ transform:scaleY(0); } 55%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }

/* ════════════════════════════════════════════════════════════════
   2 · QUATTRO SETTORI: quattro colonne sfalsate che si allineano
   ════════════════════════════════════════════════════════════════ */
.mp-four{ position:relative; padding:clamp(56px,6vw,var(--sp-80)) 0 var(--sec-y); view-timeline:--four block; }
.mp-four__row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(8px,.8vw,14px); max-width:1600px; margin:0 auto; padding:0 var(--gut); overflow:clip; }
/* P4 · le colonne partono a quote diverse e si allineano: "lo stesso standard" */
.mp-four__cell{ position:relative; display:block; width:100%; aspect-ratio:3/4; overflow:hidden; border:0; border-radius:3px; background:#08070a; color:var(--text); text-align:left; animation-name:mp-align; --tl:--four; --r:entry 0% cover 46%; --ease:cubic-bezier(.25,1,.5,1); -webkit-tap-highlight-color:transparent; }
.mp-four__cell:nth-child(1){ --off:15vh; } .mp-four__cell:nth-child(2){ --off:4vh; }
.mp-four__cell:nth-child(3){ --off:22vh; } .mp-four__cell:nth-child(4){ --off:9vh; }
@keyframes mp-align{ from{ transform:translateY(var(--off, 10vh)); } }
button.mp-four__cell{ cursor:pointer; }
button.mp-four__cell:focus-visible{ outline-offset:-4px; outline-color:#fff; }
.mp-four__cell video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--e-out); }
.mp-four__cell::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(13,12,17,.82) 0%,rgba(13,12,17,.18) 42%,rgba(13,12,17,0) 60%); pointer-events:none; }
.mp-four__cap{ position:absolute; left:clamp(14px,1.4vw,22px); right:clamp(14px,1.4vw,22px); bottom:clamp(14px,1.4vw,22px); z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.mp-four__sec{ display:block; color:var(--text); font:var(--w-ui) var(--fs-card)/1.25 var(--f-title); letter-spacing:-.01em; }
.mp-four__cli{ display:block; margin-top:6px; color:var(--t2); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.mp-four__dur{ display:inline-flex; align-items:center; gap:8px; flex:none; color:var(--text); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.mp-four__dur svg{ width:9px; height:10px; color:var(--teal-t); }
.mp-four__line{ margin-top:clamp(26px,3.6vw,44px); text-align:center; padding:0 var(--gut); color:var(--t2); animation-name:m3-fade; --tl:--four; --r:cover 30% cover 46%; font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
@media (hover:hover) and (pointer:fine){
  button.mp-four__cell:hover video{ transform:scale(1.035); }
}

/* ════════════════════════════════════════════════════════════════
   3 · LAVORI SELEZIONATI: le schede si aprono come un otturatore
   ════════════════════════════════════════════════════════════════ */
.mp-sel{ padding:var(--sec-y) 0; scroll-margin-top:60px; }
.mp-head{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:32px; align-items:end; }
.mp-head__l{ grid-column:1 / span 7; }
.mp-head__r{ grid-column:9 / span 4; color:var(--t1); font-size:var(--fs-lead); line-height:var(--lh-lead); }
.mp-h2{ color:var(--text); text-wrap:balance; font:var(--w-title) var(--fs-display)/var(--lh-display) var(--f-title); letter-spacing:var(--ls-display); }
.mp-h2 em{ padding-right:.06em; color:var(--teal-t); font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
.mp-sel .mp-head{ margin-bottom:clamp(56px,7vw,110px); }
/* parole del titolo che salgono una dopo l'altra (come la home, A20) */
.mp-h2[data-words="rise"]{ view-timeline:--h2 block; }
.m3-w--rise{ animation-name:m3-wrise; --tl:--h2; }
.mp-sel__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(16px,1.8vw,28px); row-gap:clamp(48px,6vw,92px); align-items:end; }
.mp-film{ margin:0; min-width:0; grid-column:span 6; }
.mp-film--grande{ grid-column:span 7; }
.mp-film--medio{ grid-column:span 5; }
.mp-film--panoramico{ grid-column:1 / -1; }
.mp-film--quadrato{ grid-column:span 4; }
.mp-film__media{ position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden; border:0; border-radius:3px; background:#08070a; color:var(--text); text-align:left; -webkit-tap-highlight-color:transparent;
  animation-name:mp-shutter; --r:entry 5% entry 90%; --ease:cubic-bezier(.65,0,.35,1); }
.mp-film--medio .mp-film__media{ aspect-ratio:4/3; }
.mp-film--panoramico .mp-film__media{ aspect-ratio:2.39/1; }
.mp-film--quadrato .mp-film__media{ aspect-ratio:1/1; }
/* P5 · l'otturatore: la scheda si apre da una fessura orizzontale */
@keyframes mp-shutter{ from{ clip-path:inset(47% 0 47% 0 round 3px); } to{ clip-path:inset(0 0 0 0 round 3px); } }
.mp-film__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation-name:mp-settle; --r:entry 5% cover 50%; transition:filter 400ms ease; }
@keyframes mp-settle{ from{ transform:scale(1.14); } }
button.mp-film__media,a.mp-film__media{ cursor:pointer; }
.mp-film__media:focus-visible{ outline-offset:-4px; outline-color:#fff; }
.mp-film__meta{ position:absolute; top:clamp(14px,1.4vw,22px); right:clamp(14px,1.4vw,22px); z-index:1; padding:7px 10px; border-radius:2px; background:rgba(13,12,17,.62); color:var(--text); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.mp-film__play{ position:absolute; left:50%; top:50%; z-index:1; display:flex; align-items:center; justify-content:center; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; border:1px solid rgba(247,247,248,.7); background:rgba(13,12,17,.38); color:#fff; opacity:.9; transform:scale(.94); transition:transform 220ms var(--e-out), opacity 200ms ease, background-color 200ms ease, border-color 200ms ease; }
.mp-film__play svg{ width:16px; height:18px; margin-left:3px; }
.mp-film figcaption{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:16px; animation-name:m3-fadeup; --r:entry 60% cover 42%; font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.mp-film__title{ display:block; width:100%; margin-bottom:6px; color:var(--text); font:var(--w-ui) var(--fs-card)/1.25 var(--f-title); letter-spacing:-.01em; }
.mp-film__n{ color:var(--teal-t); margin-right:4px; }
.mp-film__name{ color:var(--text); }
.mp-film__sec{ color:var(--t2); }
@media (hover:hover) and (pointer:fine){
  .mp-film__play{ opacity:0; }
  button.mp-film__media:hover .mp-film__play,a.mp-film__media:hover .mp-film__play{ opacity:1; transform:scale(1); border-color:var(--teal-t); background:rgba(35,69,85,.55); }
  button.mp-film__media:hover video,a.mp-film__media:hover video{ filter:brightness(1.08) saturate(1.05); }
}
button.mp-film__media:focus-visible .mp-film__play{ opacity:1; transform:scale(1); }
.mp-noscript{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 24px; color:var(--t2); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }

/* ════════════════════════════════════════════════════════════════
   4 · QUATTRO FORMATI: titolo fermo a sinistra, le frasi dei clienti
       si accendono parola per parola come sottotitoli
   ════════════════════════════════════════════════════════════════ */
.mp-svc{ padding:0 0 var(--sec-y); scroll-margin-top:60px; }
.mp-svc__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:56px; align-items:start; }
.mp-svc__head{ grid-column:1 / span 4; position:sticky; top:calc(var(--navh) * .7 + 24px); padding-top:clamp(30px,3.6vw,52px); }

.mp-svc__lead{ margin-top:clamp(24px,2.6vw,36px); max-width:40ch; color:var(--t1); font-size:var(--fs-lead); line-height:var(--lh-lead); }
.mp-svc__list{ grid-column:6 / -1; list-style:none; border-bottom:1px solid var(--rule); }
.mp-svc__row{ position:relative; display:grid; grid-template-columns:clamp(48px,4.6vw,76px) minmax(0,1fr); column-gap:clamp(14px,1.8vw,28px); padding:clamp(30px,3.6vw,52px) 0; view-timeline:--svc block; }
.mp-svc__rule{ position:absolute; left:0; right:0; top:0; height:1px; background:var(--rule); transform-origin:0 50%; animation-name:m3-sx; --tl:--svc; --r:entry 0% cover 28%; --ease:cubic-bezier(.65,0,.35,1); }
.mp-svc__n{ color:var(--teal-t); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.mp-svc__row h3{ color:var(--text); font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.mp-svc__q{ margin-top:14px; max-width:30ch; color:var(--text); font:var(--w-text) var(--fs-h3)/1.32 var(--f-title); letter-spacing:-.01em; }
/* P6 · le parole della frase si accendono in sequenza */
.mp-svc__q .m3-w--light{ animation-name:m3-light; --tl:--svc; --ease:linear; }

/* ════════════════════════════════════════════════════════════════
   5 · UN SOLO CRITERIO, su carta
   ════════════════════════════════════════════════════════════════ */
.mp-crit{ background:var(--paper); color:var(--ink); padding:var(--sec-y) 0; scroll-margin-top:0; animation-name:mp-sheet; --r:entry 0% entry 75%; }
/* P7 · il foglio chiaro si allarga fino ai bordi (come A30 della home) */
@keyframes mp-sheet{ from{ clip-path:inset(0 4.5% 0 4.5% round 36px 36px 0 0); } to{ clip-path:inset(0 0 0 0 round 0px 0px 0px 0px); } }
.mp-crit :focus-visible{ outline-color:var(--ink); }
.mp-crit .m3-tag{ color:rgba(13,12,17,.74); }
.mp-crit .m3-tag::after{ background:linear-gradient(90deg,rgba(13,12,17,.42),rgba(13,12,17,0)); }
.mp-crit__title{ color:var(--ink); font:var(--w-title) var(--fs-display)/var(--lh-display) var(--f-title); letter-spacing:var(--ls-display); }
.mp-crit__title em{ padding-right:.06em; color:var(--teal-ink); font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
.mp-crit__title .m3-mask:nth-child(1) .m3-rise{ --r:entry 20% cover 40%; }
.mp-crit__title .m3-mask:nth-child(2) .m3-rise{ --r:entry 45% cover 46%; }
.mp-crit__body{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); margin-top:clamp(36px,5vw,72px); }
/* (14/10) la frase sta nella colonna del titolo (prima galleggiava in colonna 7, allineata a niente) */
.mp-crit__lead{ grid-column:1 / span 5; max-width:29em; text-wrap:pretty; color:rgba(13,12,17,.82); animation-name:m3-fadeup; --r:entry 20% cover 40%; font-size:var(--fs-lead); line-height:var(--lh-lead); }
.mp-crit__list{ list-style:none; margin-top:clamp(72px,10vw,140px); border-bottom:1px solid rgba(13,12,17,.18); }
.mp-crit__row{ position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); align-items:baseline; padding:clamp(24px,2.8vw,40px) 0; view-timeline:--crow block; }
.mp-crit__rule{ position:absolute; left:0; right:0; top:0; height:1px; background:rgba(13,12,17,.18); transform-origin:0 50%; animation-name:m3-sx; --tl:--crow; --r:entry 0% cover 30%; --ease:cubic-bezier(.65,0,.35,1); }
.mp-crit__i{ grid-column:1 / span 2; color:var(--teal-ink); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
/* P8 · ogni condizione arriva da sinistra dietro la sua linea */
.mp-crit__t{ grid-column:3 / -1; color:var(--ink); text-wrap:balance; animation-name:mp-from-l; --tl:--crow; --r:entry 10% cover 36%; font:var(--w-sub) var(--fs-h2)/var(--lh-h2) var(--f-title); letter-spacing:var(--ls-h2); }
@keyframes mp-from-l{ from{ transform:translateX(-5vw); opacity:0; } }

/* ════════════════════════════════════════════════════════════════
   6 · COME LAVORIAMO, su fondo appena più chiaro: i quattro verbi
       entrano uno alla volta, sotto le fasi
   ════════════════════════════════════════════════════════════════ */
.mp-met{ background:var(--surface); padding:var(--sec-y) 0; scroll-margin-top:0; }
.mp-met .mp-h2 em{ color:var(--teal-t); }
.mp-steps{ position:relative; height:250vh; view-timeline:--steps block; margin-top:clamp(8px,2vh,24px); }
.mp-steps__stage{ position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; padding-top:calc(var(--navh) * .45); }
.mp-steps__list{ list-style:none; width:100%; max-width:1440px; margin:0 auto; padding:0 var(--gut); display:flex; flex-direction:column; gap:clamp(4px,1.2vh,14px); }
/* (14/10) stessa griglia a 12 colonne delle righe C—01…C—04 qui sopra: numero in colonna 1, verbo dalla colonna 3 */
.mp-step{ position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); align-items:baseline; padding:clamp(14px,2.4vh,26px) 0; }
.mp-step__rule{ position:absolute; left:0; right:0; top:0; height:1px; background:var(--rule); transform-origin:0 50%; animation-name:m3-sx; --tl:--steps; --ease:cubic-bezier(.65,0,.35,1); }
.mp-step__n{ grid-column:1 / span 2; color:var(--teal-t); animation-name:m3-fade; --tl:--steps; font:var(--w-mono) var(--fs-h3)/1 var(--f-mono); letter-spacing:.02em; }
.mp-step__m{ grid-column:3 / -1; display:block; padding-bottom:.12em; margin-bottom:-.12em; clip-path:inset(-40% -2% 0 -2%); }
.mp-step__t{ display:inline-block; color:var(--t1); white-space:nowrap; animation-name:mp-step; --tl:--steps; --ease:cubic-bezier(.25,1,.5,1); font:var(--w-text) var(--fs-h2)/1.16 var(--f-title); letter-spacing:var(--ls-h2); }
.mp-step__t strong{ color:var(--text); font-weight:var(--w-sub); }
@keyframes mp-step{ from{ transform:translateY(112%); } }
/* P9 · i quattro passi entrano uno alla volta mentre la scena resta ferma */
.mp-step:nth-child(1) > *{ --r:entry 70% contain 14%; }
.mp-step:nth-child(2) > *, .mp-step:nth-child(2) .mp-step__t{ --r:contain 22% contain 38%; }
.mp-step:nth-child(3) > *, .mp-step:nth-child(3) .mp-step__t{ --r:contain 44% contain 60%; }
.mp-step:nth-child(4) > *, .mp-step:nth-child(4) .mp-step__t{ --r:contain 66% contain 82%; }
.mp-step:nth-child(1) .mp-step__t{ --r:entry 70% contain 14%; }
.mp-phases{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:52px; margin-top:clamp(40px,6vh,80px); }
.mp-phase{ position:relative; padding:2px 0 0 clamp(18px,1.6vw,26px); }
.mp-phase__rule{ position:absolute; left:0; top:0; bottom:0; width:1px; background:linear-gradient(180deg,rgba(79,176,184,.9),rgba(247,247,248,.08)); transform-origin:50% 0; animation-name:m3-sy; }
.mp-phase:nth-child(1) .mp-phase__rule{ --r:entry 0% cover 30%; }
.mp-phase:nth-child(2) .mp-phase__rule{ --r:entry 15% cover 36%; }
.mp-phase:nth-child(3) .mp-phase__rule{ --r:entry 30% cover 42%; }
.mp-phase:nth-child(4) .mp-phase__rule{ --r:entry 45% cover 48%; }
.mp-phase__ph{ color:var(--teal-t); font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.mp-phase h3{ margin:16px 0 12px; color:var(--text); font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.mp-phase p:not(.mp-phase__ph){ color:var(--t1); font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }

/* ════════════════════════════════════════════════════════════════
   7 · NEI NOSTRI LAVORI: striscia di loghi che scorre piano
   ════════════════════════════════════════════════════════════════ */
.mp-logos{ padding:var(--sec-y) 0; overflow-x:clip; }
.mp-marquee{ --h:clamp(36px,3vw,44px); position:relative; overflow:hidden; padding:10px 0; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%); }
.mp-marquee__track{ display:flex; width:max-content; animation:mp-marquee var(--dur,80s) linear infinite; }
.mp-marquee__set{ list-style:none; display:flex; align-items:center; gap:clamp(56px,6vw,104px); padding-right:clamp(56px,6vw,104px); }
.mp-marquee__set li{ flex:none; display:flex; align-items:center; height:calc(var(--h) * 1.2); }
.mp-marquee__set img{ display:block; width:auto; height:calc(var(--h) * var(--k, 1)); max-width:none; opacity:.8; -webkit-user-drag:none; user-select:none; }
@keyframes mp-marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@media (hover:hover) and (pointer:fine){
  .mp-marquee:hover .mp-marquee__track{ animation-play-state:paused; }
}

/* ════════════════════════════════════════════════════════════════
   8 · APRI UN PROGETTO: l'unico momento colorato, dal teal al petrolio scuro (14/10: niente viola su Productions)
   ════════════════════════════════════════════════════════════════ */
.mp-cta{ position:relative; scroll-margin-top:0; }
.mp-cta__scene{ position:relative; height:165vh; view-timeline:--cta block; }
.mp-cta__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:clip; }
/* P10 · il pannello colorato si apre da una fessura orizzontale */
.mp-cta__panel{ position:absolute; inset:0; isolation:isolate; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:calc(var(--navh) * .8) var(--gut) clamp(32px,6vh,64px); background:var(--teal-bg); color:var(--text); animation-name:mp-open; --tl:--cta; --r:entry 30% entry 100%; --ease:cubic-bezier(.65,0,.35,1); }
@keyframes mp-open{ from{ clip-path:inset(46% 5% 46% 5% round 20px); } to{ clip-path:inset(0 0 0 0 round 0px); } }
.mp-cta__panel > :not(.mp-band){ width:100%; max-width:1440px; }
/* P11 · il fondo scivola dal teal al teal profondo mentre la scena resta ferma */
.mp-band{ position:absolute; left:0; right:0; top:0; height:200%; z-index:-1; pointer-events:none; background:linear-gradient(180deg,var(--teal-bg) 0%,var(--teal-bg) 18%,var(--teal-veil) 82%,var(--teal-veil) 100%); transform:translate3d(0,-50%,0); will-change:transform; animation-name:mp-band; --tl:--cta; --r:entry 30% contain 100%; --ease:linear; }
@keyframes mp-band{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-50%,0); } }
.mp-cta .m3-tag{ color:var(--t1); }
/* P12 · il titolo cresce fino al suo posto */
.mp-cta__title{ color:var(--text); text-wrap:balance; transform-origin:50% 100%; animation-name:mp-fill; --tl:--cta; --r:entry 55% contain 40%; font:var(--w-title) var(--fs-hero)/var(--lh-hero) var(--f-title); letter-spacing:var(--ls-hero); }
.mp-cta__title em{ padding-right:.05em; font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
@keyframes mp-fill{ from{ transform:scale(.7); opacity:0; } }
.mp-cta__lead{ max-width:56ch; margin:clamp(22px,3.4vh,36px) auto 0; color:var(--text); animation-name:m3-fadeup; --tl:--cta; --r:contain 25% contain 60%; font-size:var(--fs-lead); line-height:var(--lh-lead); }
.mp-cta__form{ position:relative; background:linear-gradient(180deg,var(--teal-veil) 0%,#1A3240 45%,#141E26 75%,var(--ink) 100%); padding:clamp(24px,4vh,56px) 0 var(--sec-y); }
.mform-wrap{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:36px; align-items:start; text-align:left; }
.mp-why{ grid-column:1 / span 4; padding-top:clamp(20px,2.4vw,34px); border-top:1px solid rgba(247,247,248,.32); }
.mp-why h3{ color:var(--text); margin-bottom:16px; font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.mp-why p{ color:var(--t1); max-width:40ch; font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }

/* ── Modulo a domande (stesso motore, nuova veste) ── */
.mform-panel{ grid-column:6 / -1; min-height:440px; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(28px,3vw,44px) clamp(22px,3vw,46px); border-radius:6px; background:#121117; border:1px solid rgba(247,247,248,.12); box-shadow:0 24px 60px rgba(8,8,14,.34); color:var(--text); }
.mform-dots{ display:flex; gap:6px; margin-bottom:28px; }
.mform-dots i{ display:block; width:24px; height:3px; border-radius:3px; background:rgba(247,247,248,.18); transition:background-color 200ms ease; }
.mform-dots i.on{ background:var(--teal-t); }
.mform-body{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.mform-q-title{ color:var(--text); margin-bottom:10px; text-wrap:balance; font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.mform-q-hint{ text-transform:uppercase; color:var(--t2); margin-bottom:18px; font-family:var(--f-text); font-size:var(--fs-small); line-height:1.5; }
.mform-opts{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.mform-opt{ text-align:left; padding:16px 18px; border-radius:4px; border:1px solid rgba(247,247,248,.2); background:transparent; color:var(--t1); cursor:pointer; transition:border-color 160ms ease, background-color 160ms ease, transform 160ms var(--e-out); -webkit-tap-highlight-color:transparent; font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }
.mform-opt:active{ transform:scale(.985); }
.mform-opt.sel{ border-color:var(--teal-t); background:rgba(79,176,184,.14); color:var(--text); }
.mform-field{ width:100%; padding:15px 16px; border-radius:4px; border:1px solid rgba(247,247,248,.22); background:rgba(247,247,248,.04); color:var(--text); margin-bottom:12px; transition:border-color 160ms ease; font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }
.mform-field::placeholder{ color:rgba(247,247,248,.62); }
.mform-field:focus{ outline:none; border-color:var(--teal-t); box-shadow:0 0 0 3px rgba(79,176,184,.22); }
.mform-area{ min-height:120px; resize:vertical; }
.mform-next,.mform-submit{ align-self:flex-start; display:inline-flex; align-items:center; gap:10px; margin-top:18px; padding:15px 28px; border:0; border-radius:999px; background:var(--text); color:var(--ink); cursor:pointer; transition:transform 160ms var(--e-out), background-color 200ms ease; -webkit-tap-highlight-color:transparent; font:var(--w-ui) var(--fs-btn)/1 var(--f-title); letter-spacing:var(--ls-ui); }
.mform-next:active,.mform-submit:active{ transform:scale(.97); }
.mform-submit:disabled{ opacity:.6; cursor:progress; }
.mform-back{ align-self:flex-start; margin-top:18px; min-height:44px; padding:6px 0; /* (responsive 13/10) 44 px */ background:none; border:0; color:var(--t2); cursor:pointer; font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.mform-sum-title{ margin-bottom:16px; color:var(--text); font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.mform-sum-list{ max-height:240px; overflow-y:auto; }
.mform-sum-row{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid rgba(247,247,248,.12); font-family:var(--f-text); font-size:var(--fs-small); line-height:1.5; }
.mform-sum-row span{ color:var(--t2); } .mform-sum-row b{ text-align:right; font-weight:500; max-width:60%; color:var(--text); }
.mform-done-title{ margin-bottom:12px; color:var(--text); font:var(--w-sub) var(--fs-h2)/var(--lh-h2) var(--f-title); letter-spacing:var(--ls-h2); }
.mform-done-p{ color:var(--t1); font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }
.mform-consent{ position:relative; display:block; padding-left:29px; color:var(--t1); margin:2px 0 14px; cursor:pointer; font-family:var(--f-text); font-size:var(--fs-small); line-height:1.5; }
.mform-consent input{ position:absolute; left:0; top:2px; margin:0; width:17px; height:17px; accent-color:var(--teal-t); cursor:pointer; }
.mform-consent a{ color:inherit; text-decoration:underline; text-underline-offset:.18em; }
.mform-err{ color:#ffb0b0; margin:0 0 12px; font-family:var(--f-text); font-size:var(--fs-small); line-height:1.5; }
@media (hover:hover) and (pointer:fine){
  .mform-opt:hover{ border-color:var(--teal-t); background:rgba(247,247,248,.04); color:var(--text); }
  .mform-next:hover,.mform-submit:hover{ background:var(--teal-t); }
  .mform-back:hover{ color:var(--text); }
}

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

/* ════════════════════════════════════════════════════════════════
   Schermi medi e telefono
   ════════════════════════════════════════════════════════════════ */
/* (responsive 13/10) sotto i 1240 px "Scorri" (al centro) finisce sopra il tasto "Il video completo": lo togliamo */
@media (max-width:1240px){ .mp-cue{ display:none; } }
@media (max-width:1100px){
  .mp-head__l{ grid-column:1 / -1; }
  .mp-head__r{ grid-column:1 / span 8; }
  .mp-svc__head{ grid-column:1 / -1; position:static; }
  .mp-svc__list{ grid-column:1 / -1; }
  .mp-crit__lead{ grid-column:1 / span 8; }
  .mp-phases{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mp-step__t{ white-space:normal; }
  .mp-why{ grid-column:1 / -1; }
  .mform-panel{ grid-column:1 / -1; }
}
@media (max-width:900px){
  :root{ --navh:84px; }

}
@media (max-width:768px){

  .mp-hero{ height:170vh; }
  .mp-hero__media{ animation-name:mp-letterbox-m; }
  @keyframes mp-letterbox-m{ from{ clip-path:inset(0 0 0 0 round 0px); } to{ clip-path:inset(15vh 4vw 15vh 4vw round 14px); } }
  .mp-hero__tele{ display:none; }

  .mp-hl{ white-space:normal; }
  .mp-hero__foot{ flex-direction:column; align-items:flex-start; }
  .mp-hero__meta{ justify-content:flex-start; max-width:none; }
  .mp-cue{ display:none; }
  .mp-four__row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mp-four__cell:nth-child(1){ --off:8vh; } .mp-four__cell:nth-child(2){ --off:2vh; }
  .mp-four__cell:nth-child(3){ --off:11vh; } .mp-four__cell:nth-child(4){ --off:5vh; }
  .mp-head__r{ grid-column:1 / -1; }
  .mp-film,.mp-film--grande,.mp-film--medio,.mp-film--quadrato{ grid-column:1 / -1; }
  .mp-film--medio .mp-film__media{ aspect-ratio:16/10; }
  .mp-film--panoramico .mp-film__media{ aspect-ratio:16/9; }
  .mp-film__play{ width:60px; height:60px; margin:-30px 0 0 -30px; }
  .mp-svc__row{ grid-template-columns:minmax(0,1fr); row-gap:8px; }
  .mp-crit__lead{ grid-column:1 / -1; }
  .mp-crit__row{ grid-template-columns:minmax(0,1fr); row-gap:12px; }
  .mp-crit__i,.mp-crit__t{ grid-column:1 / -1; }
  .mp-steps{ height:230vh; }
  .mp-step{ grid-template-columns:minmax(0,1fr); row-gap:8px; }
  .mp-step__n,.mp-step__m{ grid-column:1 / -1; }

  .mp-phases{ grid-template-columns:minmax(0,1fr); row-gap:40px; }
  .mp-cta__scene{ height:150vh; }


}
@media (max-width:420px){
  .mp-hero__cta .m3-btn,.mp-hero__cta .mp-ghost{ flex:1 1 100%; justify-content:center; }
}

/* ════════════════════════════════════════════════════════════════
   Movimento ridotto: niente si sposta, solo dissolvenze
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .sd{ animation-name:none !important; }
  .js .mp-hl__in,.js .m3-load,.js .mp-type__t,.js .mp-type__c{ animation:none !important; }
  .js .rv{ opacity:0; transition:opacity 300ms ease-out; }
  .js .rv.is-in{ opacity:1; }
  html:not(.m3-ok) .rv{ animation:m3-failsafe 0s 3s forwards; }
  .mp-hero,.mp-steps,.mp-cta__scene{ height:auto !important; }
  .mp-hero__stage,.mp-steps__stage{ position:relative; }
  .mp-hero__stage{ min-height:100vh; min-height:100svh; height:auto; }
  .mp-steps__stage{ height:auto; padding:clamp(60px,8vh,100px) 0 0; }
  .mp-cta__stage{ position:relative; height:auto; }
  .mp-cta__panel{ position:relative; inset:auto; min-height:80vh; }
  .mp-band{ height:100%; transform:none; will-change:auto; }
  .mp-cue i{ animation:none; }
  .mp-marquee{ -webkit-mask-image:none; mask-image:none; }
  .mp-marquee__track{ animation:none; width:100%; }
  .mp-marquee__set{ flex-wrap:wrap; justify-content:center; row-gap:32px; padding:0 var(--gut); width:100%; }
  .mp-marquee__set[aria-hidden="true"]{ display:none; }

  .m3-btn,.mp-ghost,.mform-opt,.mform-next,.mform-submit{ transition-property:background-color, border-color, opacity; }

}

/* ════════════════════════════════════════════════════════════════
   Versione ferma (?fermo): tutto al suo stato finale, comodo per le foto
   ════════════════════════════════════════════════════════════════ */
html.m3-still .sd,html.m3-still .mp-hl__in,html.m3-still .m3-load,html.m3-still .mp-type__t,html.m3-still .mp-type__c{ animation:none !important; }
html.m3-still .mp-hero,html.m3-still .mp-steps,html.m3-still .mp-cta__scene{ height:auto !important; }
html.m3-still .mp-hero__stage{ position:relative; height:100vh; }
html.m3-still .mp-steps__stage{ position:relative; height:auto; padding:clamp(60px,8vh,100px) 0 0; }
html.m3-still .mp-cta__stage{ position:relative; height:auto; }
html.m3-still .mp-cta__panel{ position:relative; inset:auto; min-height:90vh; }
html.m3-still .mp-band{ height:100%; transform:none; will-change:auto; }
html.m3-still .mp-marquee__track{ animation-play-state:paused; }
html.m3-still .mp-svc__head{ position:static; }