/* ════════════════════════════════════════════════════════════════════
   Project Mantra · Pagine interne: Servizi, Works, Contatti
   Si appoggia a assets/home-mix.css (gettoni del marchio, barra alta,
   footer, motore delle animazioni legate allo scroll, scena colorata
   "Parliamone"). Qui ci sono solo le parti nuove, con il prefisso pg-.
   Movimento: transform, opacity, clip-path. Dove il browser non ha
   animation-timeline, le guida assets/pagine.js (stessi keyframes).
   ════════════════════════════════════════════════════════════════════ */

:root{ --navs:66px; }
.pg{ min-height:100vh; }
.pg-sec{ position:relative; }
.pg [hidden]{ display:none !important; }

input,textarea,button{ font:inherit; }
::placeholder{ opacity:1; }

/* ════════════════════════════════════════════════════════════════
   Apertura breve (Servizi, Works)
   ════════════════════════════════════════════════════════════════ */
.pg-hero{ position:relative; padding:calc(var(--navh) + clamp(56px,8vw,var(--sp-120))) 0 var(--sec-y); view-timeline:--pgh block; }
.pg-hero__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); }
.pg-hero .m3-tag{ grid-column:1 / -1; margin-bottom:clamp(28px,4.4vh,52px); }
.pg-hero__title{ grid-column:1 / -1; color:var(--text); font:var(--w-title) var(--fs-hero)/var(--lh-hero) var(--f-title); letter-spacing:var(--ls-hero); }
.pg-hero__title em{ font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
.pg-hero__lead{ grid-column:7 / span 5; margin-top:clamp(36px,6vh,72px); max-width:44ch; color:var(--t1); font-size:var(--fs-lead); line-height:var(--lh-lead); }

/* righe del titolo: maschera per l'entrata, riga per l'uscita legata allo scroll */
.pg-l{ display:block; }
.pg-l--b{ padding-left:clamp(0px,7vw,128px); }
.pg-l__mask{ display:block; padding-bottom:.1em; margin-bottom:-.1em; clip-path:inset(-40% -10% 0 -10%); }
.pg-l__in{ display:inline-block; }
/* all'apertura le righe salgono dalla loro linea (non legato allo scroll) */
.js .pg-l__in{ animation:pg-line 620ms var(--e-out) 120ms backwards; }
.js .pg-l + .pg-l .pg-l__in{ animation-delay:230ms; }
@keyframes pg-line{ from{ transform:translateY(104%); } }
.js .pg-load{ animation:m3-fadeup 420ms var(--e-out) backwards; }
.js .pg-load--1{ animation-delay:40ms; }
.js .pg-load--3{ animation-delay:460ms; }
.js .pg-load--4{ animation-delay:560ms; }
/* Nota 12 · ogni pagina apre a modo suo. Servizi: le righe salgono dalla loro linea (sopra).
   Works: messa a fuoco, come in macchina da presa. Contatti: le righe si scrivono da sinistra. */
.js .pg-workspage .pg-l__in{ transform-origin:0 70%; animation:pg-focus 1000ms var(--e-out) 120ms backwards; }
.js .pg-workspage .pg-l + .pg-l .pg-l__in{ animation-delay:340ms; }
@keyframes pg-focus{ from{ filter:blur(16px); opacity:0; transform:scale(1.05); } 55%{ opacity:1; } to{ filter:blur(0); } }
.js .pg-contatti .pg-l__in{ animation:pg-write 820ms var(--e-in-out) 140ms backwards; }
.js .pg-contatti .pg-l + .pg-l .pg-l__in{ animation-delay:520ms; }
@keyframes pg-write{ from{ clip-path:inset(-20% 100% -30% 0); } to{ clip-path:inset(-20% -6% -30% 0); } }

/* P1 · mentre lasci l'apertura: la prima riga arretra, la seconda avanza */
.pg-l{ --tl:--pgh; }
.pg-l--a{ animation-name:pg-recede; --r:exit 0% exit 80%; transform-origin:0 100%; }
.pg-l--b{ animation-name:pg-advance; --r:exit 0% exit 80%; transform-origin:0 50%; }
@keyframes pg-recede{ to{ opacity:.14; transform:translate3d(-4vw,0,0) scale(.95); } }
@keyframes pg-advance{ to{ transform:translate3d(2.4vw,0,0) scale(1.035); } }
/* Works: le parole arretrano tutte e due, il lavoro prende il posto */
.pg-l--fade{ animation-name:pg-recede; --r:exit 10% exit 90%; transform-origin:0 50%; }

/* linea sottile che taglia lo schermo, come nella home (A29) */
.pg-cut{ margin:0; }

/* ════════════════════════════════════════════════════════════════
   SERVIZI · 2 · Cinque discipline (colonna ferma a sinistra, righe a destra)
   ════════════════════════════════════════════════════════════════ */
.pg-disc{ padding:var(--sec-y) 0; }
.pg-disc__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); align-items:start; view-timeline:--dl block; }
.pg-disc__head{ grid-column:1 / span 4; position:sticky; top:calc(var(--navs) + 48px); padding-right:clamp(0px,2vw,32px); }
.pg-disc__head .m3-tag{ margin-bottom:28px; }
.pg-disc__count{ display:block; color:var(--text); font-variant-numeric:tabular-nums; font:var(--w-mono) var(--fs-h2)/1 var(--f-mono); letter-spacing:-.04em; }
.pg-disc__count b{ font-weight:500; }
.pg-disc__count span{ color:rgba(247,247,248,.42); }
/* P2 · la barra sotto il contatore si riempie mentre leggi le discipline */
.pg-disc__prog{ position:relative; display:block; width:min(220px,100%); height:2px; margin-top:28px; background:rgba(247,247,248,.14); }
.pg-disc__prog i{ position:absolute; inset:0; display:block; background:var(--text); transform-origin:0 50%; animation-name:m3-sx; --tl:--dl; --r:cover 18% cover 82%; --ease:linear; }
.pg-disc__list{ grid-column:5 / -1; list-style:none; border-bottom:1px solid var(--rule); }
.pg-disc__item{ position:relative; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,6fr); column-gap:clamp(20px,2.4vw,40px); padding:clamp(40px,5.4vw,72px) 0; view-timeline:--di block; }
/* P3 · la linea sopra ogni disciplina si disegna da sinistra */
.pg-disc__rule{ position:absolute; left:0; right:0; top:0; height:1px; background:var(--rule); transform-origin:0 50%; animation-name:m3-sx; --tl:--di; --r:entry 0% entry 60%; --ease:cubic-bezier(.65,0,.35,1); }
.pg-disc__item .m3-odo{ align-self:start; }
.pg-disc__title{ color:var(--text); text-wrap:balance; font:var(--w-sub) var(--fs-h2)/var(--lh-h2) var(--f-title); letter-spacing:var(--ls-h2); }
/* P4 · titolo, testo e voci salgono in quest'ordine */
.pg-disc__title{ animation-name:pg-rise; --tl:--di; --r:entry 15% cover 38%; font:var(--w-sub) var(--fs-h2)/var(--lh-h2) var(--f-title); letter-spacing:var(--ls-h2); }
.pg-disc__desc{ margin-top:20px; max-width:58ch; color:var(--t1); animation-name:pg-rise; --tl:--di; --r:entry 30% cover 44%; font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }
.pg-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; animation-name:pg-rise; --tl:--di; --r:entry 45% cover 50%; }
.pg-tags li{ padding:8px 13px; border:1px solid rgba(247,247,248,.24); border-radius:999px; color:var(--t1); font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
@keyframes pg-rise{ from{ opacity:0; transform:translate3d(0,28px,0); } }

/* ════════════════════════════════════════════════════════════════
   SERVIZI · 3 · Tre fasi, su carta (il foglio si apre come nella home, A30)
   ════════════════════════════════════════════════════════════════ */
.pg-phases{ padding:var(--sec-y) 0; }
.pg-phases__head{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:32px; align-items:end; margin-bottom:clamp(72px,10vh,120px); }
.pg-phases__head > div{ grid-column:1 / span 7; }
.pg-phases__title{ color:var(--ink); font:var(--w-title) var(--fs-display)/var(--lh-display) var(--f-title); letter-spacing:var(--ls-display); }
.pg-phases__title span{ display:block; }
.pg-phases__title .pg-it{ font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
.pg-phases__intro{ grid-column:8 / -1; max-width:46ch; color:rgba(13,12,17,.82); font-size:var(--fs-lead); line-height:var(--lh-lead); }
.pg-track{ position:relative; view-timeline:--ph block; }
/* P5 · la linea del tempo si disegna e accende le tre fasi una dopo l'altra */
.pg-track__line{ position:absolute; left:0; right:0; top:6px; height:1px; background:rgba(13,12,17,.14); }
.pg-track__line i{ position:absolute; inset:0; display:block; background:var(--ink); transform-origin:0 50%; animation-name:m3-sx; --tl:--ph; --r:cover 14% cover 48%; --ease:linear; }
.pg-phase-list{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); }
.pg-phase{ position:relative; padding-top:44px; padding-right:clamp(0px,1.6vw,24px); }
.pg-phase__dot{ position:absolute; left:0; top:0; width:13px; height:13px; border-radius:50%; border:1px solid var(--ink); background:var(--paper); }
.pg-phase__dot i{ position:absolute; inset:2px; border-radius:50%; background:var(--ink); animation-name:pg-on; --tl:--ph; --ease:linear; }
@keyframes pg-on{ from{ opacity:0; transform:scale(.4); } }
.pg-phase:nth-child(1) .pg-phase__dot i{ --r:cover 13% cover 16%; }
.pg-phase:nth-child(2) .pg-phase__dot i{ --r:cover 25% cover 28%; }
.pg-phase:nth-child(3) .pg-phase__dot i{ --r:cover 37% cover 40%; }
.pg-phase__body{ animation-name:pg-rise; --tl:--ph; }
.pg-phase:nth-child(1) .pg-phase__body{ --r:cover 8% cover 24%; }
.pg-phase:nth-child(2) .pg-phase__body{ --r:cover 20% cover 36%; }
.pg-phase:nth-child(3) .pg-phase__body{ --r:cover 32% cover 48%; }
.pg-phase__no{ color:rgba(13,12,17,.74); font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.pg-phase__title{ margin:18px 0 14px; color:var(--ink); font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.pg-phase__desc{ color:rgba(13,12,17,.82); max-width:40ch; font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }
.pg-phase__kind{ display:inline-block; margin-top:24px; padding:8px 14px; border:1px solid rgba(13,12,17,.36); border-radius:999px; color:var(--ink); font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
/* la prima fase è il primo passo: la sua etichetta è piena */
.pg-phase:first-child .pg-phase__kind{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* ════════════════════════════════════════════════════════════════
   Scena colorata di chiusura (stessa della home, un po' più corta)
   ════════════════════════════════════════════════════════════════ */
.pg-cta{ height:170vh; }


/* ════════════════════════════════════════════════════════════════
   WORKS · 2 · Il film in evidenza: la finestra si apre fino ai bordi
   ════════════════════════════════════════════════════════════════ */
.pg-feature{ padding-bottom:var(--sec-y); }
.pg-feature__a{ position:relative; display:block; width:100%; aspect-ratio:16 / 9; max-height:92svh; overflow:hidden; background:#08070a; color:var(--text); -webkit-tap-highlight-color:transparent; animation-name:pg-window; --r:entry 0% entry 100%; --ease:cubic-bezier(.25,1,.5,1); }
@keyframes pg-window{ from{ clip-path:inset(0 6% 0 6% round 18px); } to{ clip-path:inset(0 0 0 0 round 0px); } }
.pg-feature__media{ position:absolute; inset:0; animation-name:pg-settle; --tl:--pgf; --r:cover 0% cover 70%; --ease:linear; }
.pg-feature{ view-timeline:--pgf block; }
@keyframes pg-settle{ from{ transform:scale(1.1); } }
.pg-feature__media video{ width:100%; height:100%; object-fit:cover; }
.pg-feature__shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,12,17,.72) 0%,rgba(13,12,17,0) 34%,rgba(13,12,17,0) 52%,rgba(13,12,17,.82) 100%); }
.pg-feature__label{ position:absolute; left:var(--pad-f); right:var(--pad-f); top:clamp(20px,3vw,40px); color:var(--text); font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.pg-feature__foot{ position:absolute; left:var(--pad-f); right:var(--pad-f); bottom:clamp(20px,3.4vw,48px); display:flex; align-items:center; justify-content:space-between; gap:16px 32px; flex-wrap:wrap; }
.pg-feature__a{ --pad-f:max(var(--gut), calc((100% - 1440px) / 2 + var(--gut))); }
.pg-feature__meta{ color:var(--t1); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }

/* pulsante "Guarda" (cerchio con triangolo, poi la parola) */
.pg-play{ display:inline-flex; align-items:center; gap:14px; color:var(--text); font:var(--w-ui) var(--fs-card)/1.25 var(--f-title); letter-spacing:-.01em; }
.pg-play__ico{ position:relative; flex:none; display:grid; place-items:center; width:clamp(52px,4.4vw,68px); aspect-ratio:1; border-radius:50%; background:var(--text); color:var(--ink); transition:transform 200ms var(--e-out), background-color 200ms ease; }
.pg-play__ico svg{ width:38%; height:38%; margin-left:8%; }
.pg-feature__a:active .pg-play__ico,.pg-card__link:active .pg-play__ico{ transform:scale(.94); }

/* ════════════════════════════════════════════════════════════════
   WORKS · 3 · Filtri per settore (fermi sotto la barra mentre scorri)
   ════════════════════════════════════════════════════════════════ */
.pg-works{ padding-bottom:var(--sec-y); }
.pg-filterbar{ position:sticky; top:var(--navs); z-index:30; background:rgba(13,12,17,.96); border-bottom:1px solid var(--line-soft); }
.pg-filter{ display:flex; align-items:center; gap:8px; padding-top:14px; padding-bottom:14px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
.pg-filter::-webkit-scrollbar{ display:none; }
/* (responsive 13/10) i filtri non ci stanno in una riga a nessuna larghezza: la sfumatura a destra dice che si scorre (prima solo sul telefono) */
.pg-filter{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent); padding-right:max(var(--gut),56px); }
.pg-filter__lab{ flex:none; margin-right:10px; color:var(--t2); font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.pg-chip{ flex:none; display:inline-flex; align-items:baseline; gap:8px; padding:10px 15px; border:1px solid rgba(247,247,248,.22); border-radius:999px; background:transparent; color:var(--t1); cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; transition:background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--e-out); font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.pg-chip sup{ font-size:11px; letter-spacing:.04em; color:var(--t2); top:0; vertical-align:baseline; font-variant-numeric:tabular-nums; transition:color 160ms ease; }
.pg-chip:active{ transform:scale(.96); }
@media (pointer:coarse){ .pg-chip{ padding-top:13px; padding-bottom:13px; } }   /* (responsive 13/10) 44 px al tocco */
.pg-chip[aria-pressed="true"]{ background:var(--text); border-color:var(--text); color:var(--ink); }
.pg-chip[aria-pressed="true"] sup{ color:rgba(13,12,17,.6); }
@media (hover:hover) and (pointer:fine){
  .pg-chip:hover{ border-color:rgba(247,247,248,.6); color:var(--text); }
  .pg-chip[aria-pressed="true"]:hover{ color:var(--ink); }
}
::view-transition-old(root),::view-transition-new(root){ animation-duration:200ms; animation-timing-function:ease; }

/* ════════════════════════════════════════════════════════════════
   WORKS · 4 · Due strisce che scorrono di lato (nota 14), come i Lavori
   della home: una fila di schede tutte uguali, scatto scheda per scheda,
   frecce e dito; il video muto parte nella scheda al centro.
   ════════════════════════════════════════════════════════════════ */
.pg-strip-sec{ margin-top:var(--gap-head); }
.pg-strip-sec + .pg-strip-sec{ margin-top:var(--sec-y); }
.pg-strip-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:clamp(20px,2.4vw,40px); row-gap:20px; margin-bottom:clamp(28px,3vw,44px); }
.pg-strip-head .m3-tag{ grid-column:1; margin:0; }
.pg-strip-head .pg-vhead__p{ grid-column:1; grid-row:2; max-width:52ch; color:var(--t1); font-size:var(--fs-lead); line-height:var(--lh-lead); }
.pg-strip-nav{ grid-column:2; grid-row:1 / span 2; align-self:end; display:flex; gap:10px; }
.pg-strip-sec--short .pg-strip-nav{ visibility:hidden; }
.pg-arrow{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; border:0; background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px rgba(247,247,248,.42); cursor:pointer; transition:box-shadow var(--d-fast) ease, opacity var(--d-fast) ease, transform var(--d-press) var(--e-out); -webkit-tap-highlight-color:transparent; }
.pg-arrow svg{ width:20px; height:20px; }
.pg-arrow:active{ transform:scale(.94); }
.pg-arrow:disabled{ opacity:.3; cursor:default; }
@media (hover:hover) and (pointer:fine){ .pg-arrow:not(:disabled):hover{ box-shadow:inset 0 0 0 1px rgba(247,247,248,.9); } }

/* la striscia va da bordo a bordo, ma la prima scheda parte allineata al testo */
.pg-strip{ --edge:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); list-style:none; display:flex; gap:clamp(14px,1.6vw,24px); width:100vw; margin-left:calc(50% - 50vw); padding:0 var(--edge) 8px; scroll-padding-inline:var(--edge); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.pg-strip::-webkit-scrollbar{ display:none; }
.pg-card{ flex:none; scroll-snap-align:start; }
.pg-card--h{ width:clamp(300px,36vw,560px); }
.pg-card--v{ width:clamp(200px,17vw,260px); }
.pg-card[hidden]{ display:none; }
.pg-card__link{ display:block; color:inherit; -webkit-tap-highlight-color:transparent; }
.pg-card__media{ position:relative; display:block; overflow:hidden; border-radius:var(--r-s); background:#08070a; aspect-ratio:16 / 9; }
.pg-card--v .pg-card__media{ aspect-ratio:9 / 16; }
.pg-card__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; transition:opacity var(--d-base) ease, transform 600ms var(--e-out); }
.pg-card.is-on .pg-card__media video{ opacity:1; }
.pg-card__shade{ position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(180deg,rgba(13,12,17,0),rgba(13,12,17,.7)); pointer-events:none; }
.pg-card__media .pg-play{ position:absolute; left:14px; bottom:14px; }
.pg-card__media .pg-play__ico{ width:44px; }
/* didascalia uguale per tutte: "Cliente · Settore" in Mono, come i Lavori della home */
.pg-card__cap{ display:block; margin-top:14px; font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.pg-card__t{ color:var(--text); }
.pg-card__c{ color:var(--t2); }
.pg-card__link:active .pg-card__media{ transform:scale(.985); }
.pg-card__media{ transition:transform var(--d-press) var(--e-out); }

@media (hover:hover) and (pointer:fine){
  .pg-card__link:hover .pg-card__media video{ opacity:1; transform:scale(1.035); }
  .pg-feature__a:hover .pg-feature__media video{ transform:scale(1.035); }
  .pg-card__link:hover .pg-play__ico,.pg-feature__a:hover .pg-play__ico{ background:var(--accent-t); transform:scale(1.06); }
}
.pg-card__link:focus-visible,.pg-feature__a:focus-visible{ outline:2px solid var(--amber-b); outline-offset:6px; border-radius:var(--r-s); }
@media (max-width:768px){
  .pg-card--h{ width:82vw; }
  .pg-card--v{ width:56vw; }
  .pg-arrow{ width:48px; height:48px; }
  .pg-strip-nav{ grid-row:1; }
  .pg-strip-head .pg-vhead__p{ grid-column:1 / -1; }
}
.pg-works__noscript{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:40px; color:var(--t2); font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }

/* ════════════════════════════════════════════════════════════════
   CONTATTI · 1 · Apertura breve e subito il modulo
   ════════════════════════════════════════════════════════════════ */
.pg-ct{ padding:calc(var(--navh) + clamp(48px,8vh,96px)) 0 clamp(96px,13vh,150px); }
.pg-ct__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:48px; align-items:start; }
.pg-ct__intro{ grid-column:1 / span 6; position:sticky; top:calc(var(--navs) + 40px); padding-right:clamp(0px,3vw,48px); }
.pg-ct__intro .m3-tag{ margin-bottom:clamp(28px,4vh,44px); }
.pg-ct__title{ color:var(--text); margin-bottom:clamp(26px,4vh,40px); font:var(--w-title) var(--fs-display)/var(--lh-display) var(--f-title); letter-spacing:var(--ls-display); }
.pg-ct__title em{ font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
.pg-ct__noscript{ margin-top:16px; color:var(--t1); font-family:var(--f-text); font-size:var(--fs-small); line-height:1.5; }
.pg-ct__noscript a{ text-decoration:underline; text-underline-offset:.2em; }
.pg-ct__lead{ max-width:42ch; color:var(--t1); font-size:var(--fs-lead); line-height:var(--lh-lead); }
.pg-ct__form{ grid-column:7 / -1; }

/* ── Il modulo a domande: stesso motore di index.html, vestito come la home ── */
.mform-panel{ position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:520px; padding:clamp(28px,3vw,48px) clamp(24px,3vw,48px); border:1px solid rgba(247,247,248,.13); border-radius:8px; background:var(--surface); box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 2px 0 rgba(247,247,248,.04) inset; }
.mform-dots{ display:flex; gap:6px; margin-bottom:30px; }
.mform-dots i{ display:block; width:24px; height:3px; border-radius:3px; background:rgba(247,247,248,.16); transition:background-color 220ms ease; }
.mform-dots i.on{ background:var(--text); }
.mform-body{ flex:1; display:flex; flex-direction:column; justify-content:center; animation:pg-step 260ms var(--e-out) both; }
@keyframes pg-step{ from{ opacity:0; transform:translate3d(0,8px,0); } }
.mform-q-title{ margin-bottom:10px; color:var(--text); text-wrap:balance; font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.mform-q-hint{ margin-bottom:20px; color:var(--t2); 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:18px; }
.mform-opt{ padding:16px 18px; border:1px solid rgba(247,247,248,.2); border-radius:8px; background:rgba(247,247,248,.03); color:var(--t1); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms var(--e-out); 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(--text); background:var(--text); color:var(--ink); }
.mform-field{ width:100%; margin-bottom:12px; padding:15px 16px; border:1px solid rgba(247,247,248,.2); border-radius:8px; background:rgba(247,247,248,.04); color:var(--text); caret-color:var(--amber-b); transition:border-color 160ms ease, background-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,.56); }
.mform-field:focus{ outline:none; border-color:var(--text); background:rgba(247,247,248,.07); }
.mform-area{ min-height:120px; resize:vertical; }
.mform-next,.mform-submit{ align-self:flex-start; display:inline-flex; align-items:center; margin-top:18px; padding:16px 28px; border:0; border-radius:999px; background:var(--text); color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color 200ms ease, transform 160ms var(--e-out); 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:8px 0; /* (responsive 13/10) 44 px */ border:0; background:none; color:var(--t2); cursor:pointer; transition:color 160ms ease; font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-mono); }
.mform-sum-title{ margin-bottom:18px; 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:280px; overflow-y:auto; scrollbar-width:thin; }
.mform-sum-row{ display:flex; justify-content:space-between; gap:16px; 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{ max-width:60%; text-align:right; font-weight:500; color:var(--text); }
.mform-done-title{ margin-bottom:14px; color:var(--text); font:var(--w-sub) var(--fs-h2)/var(--lh-h2) var(--f-title); letter-spacing:var(--ls-h2); }
.mform-done-p{ max-width:46ch; 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{ display:block; position:relative; padding-left:30px; margin:4px 0 14px; color:var(--t1); cursor:pointer; font-family:var(--f-text); font-size:var(--fs-small); line-height:1.5; }
.mform-consent input{ position:absolute; left:0; top:1px; width:18px; height:18px; margin:0; accent-color:var(--amber-b); cursor:pointer; }
.mform-consent a{ color:var(--text); text-decoration:underline; text-underline-offset:.2em; text-decoration-color:rgba(247,247,248,.5); }
.mform-err{ margin:4px 0 0; color:#ff9e9e; 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:rgba(247,247,248,.56); background:rgba(247,247,248,.07); color:var(--text); }
  .mform-opt.sel:hover{ color:var(--ink); background:var(--text); }
  .mform-next:hover,.mform-submit:hover{ background:var(--amber-b); }
  .mform-back:hover{ color:var(--text); }
}

/* ════════════════════════════════════════════════════════════════
   CONTATTI · 2 · Tre promesse in fila
   ════════════════════════════════════════════════════════════════ */
.pg-points{ padding:0 0 var(--sec-y); }
.pg-points__list{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); row-gap:40px; }
.pg-point{ position:relative; padding-top:clamp(26px,3vw,40px); view-timeline:--pt block; }
/* P8 · le tre linee si disegnano in cascata */
.pg-point__rule{ position:absolute; left:0; right:0; top:0; height:1px; background:rgba(247,247,248,.5); transform-origin:0 50%; animation-name:m3-sx; --tl:--pt; --ease:cubic-bezier(.65,0,.35,1); }
.pg-point:nth-child(1) .pg-point__rule{ --r:entry 0% cover 30%; }
.pg-point:nth-child(2) .pg-point__rule{ --r:entry 15% cover 36%; }
.pg-point:nth-child(3) .pg-point__rule{ --r:entry 30% cover 42%; }
.pg-point__t{ color:var(--text); margin-bottom:12px; font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); }
.pg-point__p{ max-width:34ch; color:var(--t1); font-family:var(--f-text); font-weight:var(--w-text); font-size:var(--fs-body); line-height:var(--lh-body); }

/* ════════════════════════════════════════════════════════════════
   CONTATTI · 3 · Scrivere o chiamare direttamente (righe di registro)
   ════════════════════════════════════════════════════════════════ */
.pg-direct{ padding:var(--sec-y) 0; background:var(--surface); }
.pg-direct__list{ list-style:none; border-bottom:1px solid var(--rule); }
.pg-direct__row{ border-top:1px solid var(--rule); view-timeline:--dr block; }
.pg-direct__a{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,10fr) auto; column-gap:clamp(20px,2.4vw,40px); align-items:baseline; padding:clamp(28px,4vw,52px) 0; color:var(--text); -webkit-tap-highlight-color:transparent; }
.pg-direct__lab{ color:var(--t2); font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; }
.pg-direct__val{ overflow-wrap:anywhere; transition:color 200ms ease; font:var(--w-sub) var(--fs-h2)/var(--lh-h2) var(--f-title); letter-spacing:var(--ls-h2); }
/* P9 · il recapito entra da sinistra quando arriva la sua riga */
.pg-direct__val{ animation-name:pg-slide; --tl:--dr; --r:entry 10% cover 40%; font:var(--w-sub) var(--fs-h2)/var(--lh-h2) var(--f-title); letter-spacing:var(--ls-h2); }
@keyframes pg-slide{ from{ opacity:0; transform:translate3d(-5vw,0,0); } }
.pg-direct__arr{ font:300 clamp(24px,2.4vw,36px)/1 'Inter',sans-serif; transition:transform 220ms var(--e-out); }
.pg-direct__a:active .pg-direct__val{ transform:scale(.99); }
@media (hover:hover) and (pointer:fine){
  .pg-direct__a:hover .pg-direct__val{ color:var(--amber-b); }
  .pg-direct__a:hover .pg-direct__arr{ transform:translate(4px,-4px); }
}

/* ════════════════════════════════════════════════════════════════
   Schermi medi e telefono
   ════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .pg-hero__lead{ grid-column:5 / -1; }
  .pg-disc__head{ grid-column:1 / span 4; }
  .pg-ct__intro{ grid-column:1 / span 6; }
  .pg-ct__form{ grid-column:7 / -1; }
}
@media (max-width:900px){
  .pg-disc__head{ grid-column:1 / -1; position:static; margin-bottom:48px; }
  .pg-disc__list{ grid-column:1 / -1; }
  .pg-phases__head > div,.pg-phases__intro{ grid-column:1 / -1; }
  .pg-ct__intro{ grid-column:1 / -1; position:static; }
  .pg-ct__form{ grid-column:1 / -1; }
  .pg-points__list{ grid-template-columns:minmax(0,1fr); }
  .pg-direct__a{ grid-template-columns:minmax(0,1fr) auto; row-gap:10px; }
  .pg-direct__lab{ grid-column:1 / -1; }
}
@media (max-width:768px){
  :root{ --navs:66px; }
  .pg-hero{ padding-top:calc(var(--navh) + 48px); }
  .pg-hero__lead{ grid-column:1 / -1; }
  .pg-l--b{ padding-left:0; }
  .pg-disc__item{ grid-template-columns:minmax(0,1fr); row-gap:18px; }
  .pg-phase-list{ grid-template-columns:minmax(0,1fr); row-gap:52px; padding-left:34px; }
  .pg-phase{ padding-top:0; }
  .pg-track__line{ left:6px; right:auto; top:6px; bottom:0; width:1px; height:auto; }
  .pg-track__line i{ transform-origin:50% 0; animation-name:m3-sy; }
  .pg-phase__dot{ left:-34px; }
  .pg-feature__a{ aspect-ratio:4 / 5; max-height:none; }
  .pg-feature__foot{ align-items:flex-end; }
  .pg-filter{ -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); padding-right:40px; }
  .pg-filter__lab{ display:none; }
  .mform-panel{ min-height:0; }
  .pg-cta{ height:150vh; }
}

/* ════════════════════════════════════════════════════════════════
   Movimento ridotto e versione ferma (?fermo)
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .js .pg-l__in,.js .pg-load{ animation:none !important; }
  .mform-body{ animation:pg-fade 200ms ease both; }
  .pg-card__media video,.pg-play__ico,.pg-chip,.film-in,.mform-opt,.mform-next,.mform-submit,.pg-direct__arr{ transition-property:opacity, background-color, border-color, color; }

  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}
@keyframes pg-fade{ from{ opacity:0; } }
html.m3-still .pg-l__in,html.m3-still .pg-load{ animation:none !important; }
html.m3-still .pg-disc__head,html.m3-still .pg-ct__intro{ position:static; }
html.m3-still .pg-filterbar{ position:relative; top:auto; }

/* Schede con il solo spezzone: niente clic, niente tasto play (13 ottobre 2026) */
.pg-card__link--still{ cursor:default; }
.pg-card__link--still .pg-play{ display:none; }