/* Stili della pagina, dal prototipo (chi-siamo.html) */
/* Apertura in video, con barre cinema che si ritirano */
.hero{position:relative;height:max(640px,92vh);height:max(640px,92svh);color:#fff;overflow:hidden;background:var(--ink)}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,25,35,.3) 0%,rgba(15,25,35,0) 26%,rgba(15,25,35,0) 48%,rgba(15,25,35,.88) 100%)}
.bars::before,.bars::after{content:'';position:absolute;left:0;right:0;height:11vh;background:#05090C;z-index:4;transition:transform 1.6s var(--ease) .3s}
.bars::before{top:0}.bars::after{bottom:0}
.bars.open::before{transform:translateY(-100%)}
.bars.open::after{transform:translateY(100%)}
.hero-txt{position:absolute;z-index:3;left:0;right:0;bottom:clamp(40px,8vh,88px)}
.hero-txt .wrap{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:40px;align-items:end}
.hero h1{font-size:clamp(42px,5.4vw,92px);letter-spacing:-.045em;line-height:.9;max-width:12em}
.hero h1 em{font-style:normal;color:var(--azzurro);font-variation-settings:'wdth' 75}
.hero .lead{color:#E3ECEF;margin-top:22px}
.play{display:flex;align-items:center;gap:16px;background:none;border:0;color:#fff;cursor:pointer;font:600 15px/1.3 var(--body);text-align:left;justify-self:end}
.play i{width:76px;height:76px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center;transition:transform .4s var(--ease),background .4s,border-color .4s;flex:none}
.play:hover i{transform:scale(1.08);background:#fff;border-color:#fff;color:var(--ink)}
.play small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#C2D1D7;margin-top:2px}

/* Marmo */
.marble{position:relative;overflow:hidden;padding:clamp(120px,16vw,220px) 0;color:var(--ink)}
.marble canvas{position:absolute;inset:0;width:100%;height:100%}
.marble canvas.nogl{background:url(media/logo-marmo.webp) center/cover}
.marble .wrap{position:relative;z-index:2}
.marble .h2-xl{max-width:9.5em}
.marble .h2-xl span{color:#047A57}
.marble-cols{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);margin-top:56px;align-items:start}
.marble-cols p{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:#22323C;max-width:32em}
.seal{justify-self:end;width:min(300px,100%);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:2px solid #0BA676;display:grid;place-items:center;text-align:center;padding:28px}
.seal b{display:block;font:800 78px/.8 var(--display);letter-spacing:-.05em;color:#047A57;font-variation-settings:'wdth' 75}
.seal span{display:block;margin-top:10px;font:600 11px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#14513F}

/* Generazioni: scorrimento orizzontale */
.gen{position:relative;height:340vh;background:var(--paper)}
.gen-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:84px}
.gen-head{position:absolute;top:max(108px,12vh);left:0;right:0}
.gen-track{display:flex;gap:0;will-change:transform;transform:translateX(calc(var(--p,0) * -1 * (var(--tw,300vw) - 100vw)))}
.era{flex:none;width:min(100vw,1320px);height:min(60vh,620px);position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,72px);align-items:center;padding:0 var(--gut)}
.era:first-child{margin-left:calc((100vw - min(100vw,1320px))/2)}
.era:last-child{margin-right:calc((100vw - min(100vw,1320px))/2)}
.yr{position:absolute;right:var(--gut);bottom:-2vh;font-size:clamp(120px,16vw,260px);color:var(--azzurro);opacity:.22;pointer-events:none;z-index:0}
.era .media{position:relative;z-index:1;height:100%;border-radius:22px;overflow:hidden;background:var(--mist)}
.era .media img,.era .media video{width:100%;height:100%;object-fit:cover}
.era .txt{position:relative;z-index:1}
.era .txt .num{font-size:clamp(64px,7vw,112px);color:var(--ink)}
.era h3{font-size:clamp(28px,2.8vw,42px);margin-top:20px}
.era p{color:var(--muted);margin-top:16px;max-width:28em}
.gen-bar{position:absolute;left:var(--gut);right:var(--gut);bottom:44px;height:2px;background:var(--line);max-width:1320px;margin:0 auto}
.gen-bar i{display:block;height:100%;background:var(--verde);transform-origin:left;transform:scaleX(var(--p,0))}

/* Metodo: le parole si accendono */
.method{position:relative;height:260vh}
.method-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.mlist{display:grid;gap:clamp(18px,3vh,36px);margin-top:28px}
.mrow{display:grid;grid-template-columns:110px minmax(0,1fr);gap:24px;align-items:baseline}
.mrow .num{font-size:clamp(56px,6vw,92px);color:#2A3B47;transition:color .5s}
.mrow.on .num{color:var(--verde)}
.mrow p{font:750 clamp(28px,3.4vw,54px)/1.05 var(--display);letter-spacing:-.035em}
.w{color:#4E616D;transition:color .35s}
.w.on{color:#fff}
.mrow small{display:block;font:400 17px/1.55 var(--body);letter-spacing:0;color:#C2D1D7;margin-top:12px;max-width:40em}

/* Team */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:64px}
.card{position:relative;margin:0;perspective:900px}
.card .inner{position:relative;aspect-ratio:3/4.3;border-radius:20px;overflow:hidden;background:var(--mist);transform-style:preserve-3d;transition:transform .5s var(--ease)}
.card img,.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card video{opacity:0;transition:opacity .5s}
.card.live video{opacity:1}
.card .tag{position:absolute;left:14px;top:14px;z-index:2;font:600 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.88);padding:7px 10px;border-radius:999px;color:var(--ink)}
.card figcaption{padding:16px 2px 0}
.card h3{font-size:clamp(22px,1.9vw,28px)}
.card p{font-size:14px;color:var(--muted);margin-top:6px}
.card button{position:absolute;inset:0;z-index:3;background:none;border:0;cursor:pointer;border-radius:20px}

/* Film */
.film{position:relative;display:block;width:100%;aspect-ratio:21/9;border-radius:24px;overflow:hidden;border:0;padding:0;cursor:pointer;background:var(--ink);color:#fff;text-align:left}
.film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.film:hover img{transform:scale(1.04)}
.film .f-txt{position:absolute;left:clamp(20px,4vw,56px);bottom:clamp(20px,4vw,48px);z-index:2;display:flex;align-items:center;gap:22px}
.film .f-txt i{width:88px;height:88px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;flex:none}
.film b{display:block;font:750 clamp(26px,3vw,44px)/1 var(--display);letter-spacing:-.03em}
.film small{display:block;margin-top:8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#C2D1D7}
.film::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,25,35,.7),rgba(15,25,35,0) 60%)}
.modal{position:fixed;inset:0;z-index:250;background:rgba(5,9,12,.94);display:none;place-items:center;padding:24px}
.modal.open{display:grid}
.modal video{width:min(1280px,100%);max-height:84vh;border-radius:16px;background:#000}
.modal .close{position:absolute;top:20px;right:20px;min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid #fff;background:transparent;color:#fff;font:600 14px var(--body);cursor:pointer}

/* Lo studio: galleria trascinabile */
.gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--gut) 24px;margin-top:56px;cursor:grab;scrollbar-width:thin}
.gallery.drag{cursor:grabbing;scroll-snap-type:none}
.gallery figure{flex:none;margin:0;scroll-snap-align:start;width:min(72vw,620px)}
.gallery figure.tall{width:min(52vw,380px)}
.gallery .m{height:min(62vh,520px);border-radius:20px;overflow:hidden;background:var(--mist)}
.gallery img,.gallery video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.gallery figcaption{font-size:14px;color:var(--muted);margin-top:10px}
.equipe{grid-column:span 2;align-self:start;padding:clamp(28px,3vw,44px);background:var(--mist);border-radius:18px}
.equipe dl{margin-top:22px}
.equipe dl>div{padding:18px 0;border-top:1px solid var(--line)}
.equipe dt{font:500 clamp(18px,1.5vw,21px)/1.3 var(--display);color:var(--ink)}
.equipe dd{margin:8px 0 0;font-size:15px;color:var(--muted);line-height:1.6}
.instr{align-items:start}
.instr-list li{padding:20px 0;border-top:1px solid var(--line);font-size:18px;color:var(--ink)}
.instr-list li:last-child{border-bottom:1px solid var(--line)}
.instr-list b{font-weight:500;color:var(--ink)}
.instr-list span{color:var(--muted);font-size:15px}
.acc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.acc li{border-top:2px solid var(--ink);padding-top:18px}
.acc b{display:block;font:750 22px/1.15 var(--display);letter-spacing:-.02em}
.acc span{display:block;color:var(--muted);font-size:15px;margin-top:8px}

.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,6vw,96px)}

@media (max-width:1080px){
  .hero-txt .wrap,.marble-cols,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .play{justify-self:start}
  .seal{justify-self:start;width:220px}
  .seal b{font-size:58px}
  .era{grid-template-columns:minmax(0,1fr);grid-template-rows:52vh auto;height:auto;width:88vw;gap:20px}
  .era:first-child,.era:last-child{margin:0}
  .gen-head{top:96px}
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .instr-list li{grid-template-columns:1fr;gap:6px}
  .mrow{grid-template-columns:64px minmax(0,1fr);gap:14px}
  .acc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .era{grid-template-rows:44vh auto}
  .gen-head{top:84px}
  .gen-head .h2{font-size:30px}
  .film{aspect-ratio:4/5}
  .mrow small{display:none}
}