/* style.css - stile comune a tutte le pagine (basato su riferimento2). Il footer resta in footer.css */
:root{
  --font-title:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-body:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --band:#121721; --paper:#fff; --ink:#121721; --light:#f2f3f5;
  --content:80%; --content-max:1400px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-weight:200;font-size:1.125rem;line-height:1.6}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* Lingua */
body.lang-it .en{display:none!important}
body.lang-en .it{display:none!important}

/* Barra superiore: menu + lingua (iniettata da site.js) */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.75rem;color:var(--light);font-family:var(--font-title);font-size:.7rem;letter-spacing:.2em;pointer-events:none}
.topbar>*{pointer-events:auto}
.menu-btn,.lang-switch button{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;padding:.3rem .1rem}
.menu-btn{text-transform:uppercase;opacity:.9}
.lang-switch{display:flex;gap:.6rem;align-items:center}
.lang-switch button{opacity:.55}
.lang-switch button.active{opacity:1;border-bottom:1px solid currentColor}
.lang-switch span{opacity:.4}
.topbar.solid{background:rgba(18,23,33,.92)}

/* Menu a tutto schermo */
.menu-overlay{position:fixed;inset:0;z-index:40;background:rgba(18,23,33,.97);color:var(--light);display:flex;align-items:center;justify-content:center;text-align:center;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.menu-overlay.open{opacity:1;visibility:visible}
.menu-overlay ul{list-style:none;margin:0;padding:0}
.menu-overlay>ul>li{margin:.9rem 0}
.menu-overlay a{text-decoration:none;font-family:var(--font-title);font-weight:300;font-size:clamp(1rem,2.4vw,1.3rem);letter-spacing:.25em;text-transform:uppercase;opacity:.85}
.menu-overlay a:hover{opacity:1}
.menu-overlay ul ul{margin-top:.5rem}
.menu-overlay ul ul a{font-size:.75rem;letter-spacing:.18em;opacity:.55}

/* Hero (ogni pagina: immagine fissa con velo) */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;background:var(--band) center/cover no-repeat;color:var(--light);text-align:center}
.hero::after{content:"";position:absolute;inset:0;background:rgba(18,23,33,.55)}
.hero__text{position:relative;z-index:1;padding:0 1.5rem}
.hero h1{margin:0;font-weight:200;font-size:clamp(1rem,5vw,1.5rem);letter-spacing:.6em;line-height:1.1}
.hero p{margin:1rem 0 0;font-size:clamp(.8rem,2vw,1rem);letter-spacing:.6em;opacity:.9}
.hero--short{min-height:50vh}

/* Sezioni */
.title-music{display:block;margin-top:.9em}
.section{padding:clamp(3rem,8vw,6rem) 0}
.wrap{width:var(--content);max-width:var(--content-max);margin:0 auto}
h2{margin:0 0 2rem;text-align:center;font-weight:300;font-size:clamp(1rem,2.5vw,1.2rem);letter-spacing:.15em;line-height:1.3}
h2 a{text-decoration:none}
.subtext{max-width:58ch;margin:0 auto 1.1rem;text-align:center;font-weight:300;font-size:clamp(.9rem,1.7vw,1.02rem);letter-spacing:.02em;line-height:1.85;opacity:.85}
hr.fade{border:0;height:1px;margin:0;background-image:linear-gradient(to right,rgba(18,23,33,0),rgba(18,23,33,.25),rgba(18,23,33,0))}

/* Griglia di tile (progetti, spettacoli) */
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.tile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;text-decoration:none;color:var(--light);background:var(--band)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(18,23,33,.72);transition:background-color .4s ease}
.tile:hover::before{background:rgba(18,23,33,.4)}
.tile-grid--shows .tile::before{background:rgba(18,23,33,.62)}
.tile-grid--shows .tile:hover::before{background:rgba(18,23,33,.3)}
.tile:hover img{transform:scale(1.04)}
.tile__text{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.2rem}
.tile__text h3{margin:0 0 .5rem;font-weight:300;font-size:clamp(.85rem,1.3vw,1rem);letter-spacing:.14em;line-height:1.35}
.tile__text p{margin:0;max-width:28ch;font-size:.72rem;letter-spacing:.04em;line-height:1.5;opacity:.75}
@media(max-width:1100px){.tile-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.tile-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tile-grid{grid-template-columns:1fr}}

/* Banda immagine con CTA */
.band-card{position:relative;min-height:55vh;display:grid;place-items:center;text-align:center;color:var(--light);background:var(--band) center/cover no-repeat}
.band-card::after{content:"";position:absolute;inset:0;background:rgba(18,23,33,.78)}
.band-card>div{position:relative;z-index:1;padding:2rem}
.band-card h2{margin-bottom:1.8rem}

/* Bottoni */
.btn{display:inline-block;border:1px solid currentColor;padding:.7em 1.8em;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;opacity:.85;transition:background-color .3s,opacity .3s}
.btn:hover{background:rgba(128,128,128,.18);opacity:1}

/* Servizi: tile grandi a tutta larghezza */
.section--flush{padding-bottom:0}
.space-end{height:clamp(4rem,10vw,8rem)}
.service-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.service-tile{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;text-decoration:none;color:var(--light);background:var(--band)}
.service-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.service-tile::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(18,23,33,.88) 0%,rgba(18,23,33,.55) 55%,rgba(18,23,33,.65) 100%);transition:opacity .4s ease}
.service-tile:hover img{transform:scale(1.05)}
.service-tile:hover::before{opacity:.8}
.service-tile__text{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:2rem 2rem 3.5rem}
.service-tile h3{margin:0 0 1rem;font-weight:300;font-size:clamp(1rem,1.7vw,1.25rem);letter-spacing:.16em;line-height:1.4}
.service-tile p{margin:0;max-width:30ch;font-size:.85rem;font-weight:300;line-height:1.7;opacity:.8}
@media(max-width:900px){.service-tiles{grid-template-columns:1fr}.service-tile{aspect-ratio:3/2}}

/* Pulsante indietro */
.back-link{display:block;width:var(--content);max-width:var(--content-max);margin:2rem auto 0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;opacity:.6}
.back-link:hover{opacity:1}

/* Galleria + lightbox (sostituisce il template html5up poptrox) */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px}
.gallery a{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--band)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,opacity .3s}
.gallery a:hover img{transform:scale(1.05);opacity:.85}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(18,23,33,.96);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:92vw;max-height:84vh;object-fit:contain}
.lightbox button{position:absolute;background:none;border:0;color:var(--light);font-size:2.4rem;cursor:pointer;opacity:.7;padding:.5rem 1rem}
.lightbox button:hover{opacity:1}
.lb-close{top:.5rem;right:.8rem}.lb-prev{left:.3rem}.lb-next{right:.3rem}
.lb-cap{position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;color:var(--light);font-size:.75rem;letter-spacing:.14em;margin:0;opacity:.7}

/* ---- Sottopagine ---- */
.prose{max-width:820px}
.prose h2,.prose h3{text-align:center;margin:3rem 0 1.2rem}
.prose h3{font-weight:300;font-size:clamp(.9rem,1.8vw,1.05rem);letter-spacing:.14em}
.prose p{font-weight:300;font-size:clamp(.95rem,1.7vw,1.05rem);line-height:1.9;margin:0 0 1.3rem}
.prose p.lead{text-align:center;font-size:clamp(1rem,2vw,1.2rem);letter-spacing:.03em;opacity:.9}
.prose p.credits{text-align:center;font-size:.85rem;letter-spacing:.06em;opacity:.75;border-top:1px solid rgba(18,23,33,.15);border-bottom:1px solid rgba(18,23,33,.15);padding:1rem 0}
.prose strong{font-weight:500}
.prose a{border-bottom:1px solid rgba(18,23,33,.3);text-decoration:none}
.center{text-align:center}
.big{font-size:1.3rem}
.photo{margin:2rem 0}
.photo img{width:100%;height:auto;display:block}
.video{position:relative;aspect-ratio:16/9;margin:2rem 0}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Schede a tutta larghezza (liste progetti, spettacoli, media) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);column-gap:2px;row-gap:0;margin-top:1rem}
.card{display:flex;flex-direction:column}
.card__img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--band);color:var(--light);text-decoration:none}
.card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card__img::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(18,23,33,.6);transition:background-color .4s ease}
.card__img:hover::before{background:rgba(18,23,33,.32)}
.card__img:hover img{transform:scale(1.04)}
.card__title{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.2rem;font-weight:300;font-size:clamp(.9rem,1.5vw,1.15rem);letter-spacing:.14em;line-height:1.4}
.card p{margin:1.4rem auto 3.2rem;max-width:42ch;padding:0 1.5rem;text-align:center;font-size:.92rem;font-weight:300;line-height:1.8;opacity:.8}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.service-tiles--two{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.service-tiles--two{grid-template-columns:1fr}}

/* Servizi: testi dentro le tile */
.service-tile .instr{margin:.9rem 0 1.4rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;opacity:.65;max-width:38ch}
.service-tile .cta{display:inline-block;border:1px solid rgba(242,243,245,.55);padding:.55em 1.4em;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;transition:background-color .3s,border-color .3s}
.service-tile:hover .cta{background:rgba(242,243,245,.15);border-color:rgba(242,243,245,.9)}
.band-card p{margin:0 0 1.8rem;font-size:.85rem;font-weight:300;letter-spacing:.12em;opacity:.85}
.band-card p:last-child{margin-bottom:0}
.cards--two{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.cards--two{grid-template-columns:1fr}}

/* Galleria con didascalie */
.gallery{column-gap:2px;row-gap:1.8rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.gallery--tight{row-gap:2px}
.gallery figure{margin:0}
.gallery img{object-position:center 30%}
.gallery figcaption{text-align:center;padding:.9rem 1rem 0;font-size:.85rem;font-weight:300;line-height:1.6}
.gallery figcaption strong{display:block;font-weight:400;letter-spacing:.08em}
.gallery figcaption span{display:block;opacity:.7;font-size:.8rem}
.service-tile p + .cta{margin-top:1.4rem}
.service-tile .instr + .cta{margin-top:0}
.band-card + .band-card{margin-top:2px}

/* ===== GRUPPO C: video hero, fasce immagine, video a tutta larghezza ===== */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.img-band{height:60vh;min-height:320px;background-size:cover;background-position:center}
.video--full{width:100%;margin:0}
.section-label{text-align:center;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;opacity:.55;margin:0 0 2.2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2rem}
.pad-top{padding-top:0}

/* ===== Portfolio (masonry) ===== */
.masonry{columns:3 280px;column-gap:2px}
.masonry a{position:relative;display:block;break-inside:avoid;margin-bottom:2px;overflow:hidden;background:var(--band)}
.masonry img{width:100%;height:auto;display:block;transition:transform .6s ease}
.masonry a:hover img{transform:scale(1.03)}
.masonry .caption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1rem .9rem;background:linear-gradient(to top,rgba(18,23,33,.7),rgba(18,23,33,0));color:var(--light);opacity:0;transition:opacity .35s ease;pointer-events:none}
.masonry a:hover .caption{opacity:1}
.masonry .caption strong{display:block;font-weight:400;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.masonry .caption small{display:block;font-size:.65rem;letter-spacing:.1em;opacity:.7;margin-top:.2rem}
@media(hover:none){.masonry .caption{opacity:1}}
@media(max-width:700px){.masonry{columns:1}}

/* ===== Tabella concerti ===== */
.concerti{width:var(--content);max-width:1100px;margin:0 auto}
.concerti-table{width:100%;border-collapse:collapse}
.concerti-table th{text-align:left;font-weight:400;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;padding:.8rem;border-bottom:1px solid rgba(18,23,33,.35)}
.concerti-table td{padding:1rem .8rem;border-bottom:1px solid rgba(18,23,33,.1);vertical-align:top;font-weight:300;font-size:.95rem;line-height:1.5}
.concerti-table .col-data{white-space:nowrap;width:9.5em;letter-spacing:.04em}
.concerti-table .col-ora{width:4.5em;text-align:right;white-space:nowrap}
.concerti-table .col-titolo{font-weight:400}
.concerti-table small{display:block;margin-top:.25rem;font-weight:300;font-size:.8rem;opacity:.65}
.concerti-table tr.next{background:#edf5ff;box-shadow:inset 3px 0 0 #1c5991}
.concerti-table tr.year-label td{padding:2.6rem .8rem .8rem;font-size:1.05rem;letter-spacing:.24em;font-weight:300;border-bottom:1px solid rgba(18,23,33,.35)}
.concerti-table tr.no-events td{text-align:center;padding:2.5rem 1rem;opacity:.6;font-style:italic}
.concerti-table tr[hidden]{display:none}
#year-filter{width:var(--content);max-width:1100px;margin:0 auto 2rem;display:flex;flex-wrap:wrap;gap:.4rem}
.yr-btn{background:none;border:1px solid rgba(18,23,33,.3);color:inherit;font:inherit;font-size:.7rem;letter-spacing:.14em;padding:.45em 1em;cursor:pointer;transition:background .2s}
.yr-btn:hover{background:rgba(18,23,33,.08)}
.yr-btn.active{background:var(--ink);color:var(--light);border-color:var(--ink)}
@media(max-width:700px){
  .concerti{width:calc(100% - 2rem)}
  .concerti-table thead{display:none}
  .concerti-table tr{display:grid;grid-template-columns:1fr auto;gap:0 1rem;padding:1rem .6rem;border-bottom:1px solid rgba(18,23,33,.1)}
  .concerti-table td{display:block;border:0;padding:0;width:auto}
  .concerti-table .col-data{grid-column:1;grid-row:1;font-size:.8rem;letter-spacing:.1em;opacity:.7;width:auto}
  .concerti-table .col-ora{grid-column:2;grid-row:1;font-size:.8rem;opacity:.7;width:auto}
  .concerti-table .col-titolo{grid-column:1/-1;grid-row:2;margin-top:.3rem}
  .concerti-table .col-luogo{grid-column:1/-1;grid-row:3;margin-top:.3rem;font-size:.85rem;opacity:.8}
  .concerti-table tr.year-label,.concerti-table tr.no-events{display:block}
}

/* ===== Home ===== */
.subtext--narrow{max-width:30ch}
.band-card--tall{min-height:68vh}

/* ===== Tile quadrate 1:1 con testo (pagine progetto) ===== */
.sq-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.sq{position:relative;flex:0 0 calc(20% - 2px);aspect-ratio:1/1;overflow:hidden;background:var(--band);color:var(--light)}
.sq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.sq::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(18,23,33,.62);transition:background .4s ease}
.sq:hover::before{background:rgba(18,23,33,.3)}
.sq:hover img{transform:scale(1.04)}
.sq__text{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem}
.sq__text h3{margin:0 0 .4rem;font-weight:300;font-size:clamp(.78rem,1.2vw,.95rem);letter-spacing:.12em;line-height:1.35;text-transform:uppercase}
.sq__text p{margin:0;font-size:.75rem;letter-spacing:.08em;opacity:.8}
.sq__text p.note{margin-top:.5rem;font-size:.68rem;opacity:.6;font-style:italic}
@media(max-width:900px){.sq{flex-basis:calc(33.333% - 2px)}}
@media(max-width:560px){.sq{flex-basis:calc(50% - 2px)}}
.btn i{margin-right:.8em}

/* ===== Testo su due colonne (pagine progetto) ===== */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;width:var(--content);max-width:1200px;margin:2rem auto 0}
.cols-2>.prose{max-width:none}
.cols-2>.prose>h3:first-child{margin-top:0}
.cols-2 h3{font-weight:500}
.cols-2 .spotify{margin-top:2.5rem}
.cover{margin:0 0 2.5rem}
.cover img{display:block;width:100%;height:auto}
@media(max-width:800px){.cols-2{grid-template-columns:1fr}}

/* ===== Didattica: elenco di punti centrati ===== */
.points{display:flex;flex-wrap:wrap;justify-content:center;gap:2.8rem 3rem;width:var(--content);max-width:1100px;margin:0 auto}
.point{flex:1 1 280px;max-width:340px;text-align:center}
.point h3{margin:0 0 .9rem;font-weight:300;font-size:clamp(.9rem,1.6vw,1rem);letter-spacing:.14em;text-transform:uppercase;padding-top:1.1rem;border-top:1px solid rgba(18,23,33,.25)}
.point p{margin:0;font-weight:300;font-size:.92rem;line-height:1.8;opacity:.8}
.credits-line{max-width:60ch;margin:0 auto;text-align:center;font-size:.8rem;letter-spacing:.06em;line-height:1.8;opacity:.75}

/* ===== PAGINA events/vocefemminile.html (body class="vf"): stili propri della pagina, identici all'originale ===== */
body.vf .space-sm { height: 2rem; }
body.vf .space-md { height: 4rem; }
body.vf .space-lg { height: 7rem; }
body.vf *, body.vf *::before, body.vf *::after { box-sizing: border-box; }
body.vf .hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: var(--band); color: var(--light); text-align: center; }
body.vf .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
body.vf .hero::after { content: ""; position: absolute; inset: 0; background: rgba(18, 23, 33, .65); }
body.vf .hero__text { position: relative; z-index: 1; padding: 0 1.5rem; }
body.vf .hero h1 { margin: 0; font-family: var(--font-title); font-weight: 200; font-size: clamp(1.0rem, 5vw, 1.5rem); letter-spacing: 0.6em; line-height: 1.1; }
body.vf .hero p { margin: 1rem 0 0; font-size: clamp(0.8rem, 2vw, 1.0rem); letter-spacing: 0.6em; opacity: .9; }
body.vf .section { padding: clamp(3rem, 8vw, 6rem) 0; }
body.vf .wrap { width: var(--content); max-width: var(--content-max); margin: 0 auto; }
body.vf h2 { margin: 0 0 2rem; text-align: center; font-family: var(--font-title); font-weight: 300; font-size: clamp(1.0rem, 2.5vw, 1.2rem); letter-spacing: .15em; line-height: 1.3; }
body.vf .subtext-label { text-align: center; margin: -1rem 0 2rem; font-family: var(--font-title); font-weight: 300; font-size: clamp(.75rem, 1.4vw, .85rem); letter-spacing: .18em; opacity: .6; }
body.vf .subtext { max-width: 58ch; margin: 2.5rem auto 0; text-align: center; font-family: var(--font-title); font-weight: 300; font-size: clamp(.85rem, 1.6vw, .95rem); letter-spacing: .02em; line-height: 1.8; opacity: .85; }
body.vf .demo-video { position: relative; margin: 0; padding: 0; line-height: 0; }
body.vf .demo-video__box { padding: 56.25% 0 0 0; position: relative; }
body.vf .demo-video__box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
body.vf .demo-video__sound { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 2; cursor: pointer; background: rgba(18, 23, 33, .55); color: var(--light); border: 1px solid rgba(242, 243, 245, .55); border-radius: 2em; padding: .55em 1.5em; font-family: var(--font-title); font-size: .7rem; letter-spacing: .18em; backdrop-filter: blur(3px); transition: background-color .25s ease; }
body.vf .demo-video__sound:hover { background: rgba(18, 23, 33, .8); }
body.vf .demo-video__box iframe { pointer-events: none; }
body.vf .feature-photo { position: relative; margin: 0; width: 100%; min-height: 100vh; display: grid; align-items: flex-end; justify-items: center; padding-bottom: 12%; overflow: hidden; color: var(--light); text-align: center; }
body.vf .feature-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
body.vf .feature-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, rgba(18, 23, 33, 0)    45%, rgba(18, 23, 33, .7)   68%, rgba(18, 23, 33, .7)   85%, rgba(18, 23, 33, 0)   100% ); opacity: .85; transition: opacity .4s ease; }
body.vf .feature-photo:hover::before { opacity: 1; }
body.vf .feature-photo__text { position: relative; z-index: 2; padding: 0 1.5rem; }
body.vf .photo { margin: 0; overflow: hidden; background: #1d2536; }
body.vf .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.vf .photo--ph { display: grid; place-items: center; color: rgba(242, 243, 245, .55); font-size: .95rem; background: linear-gradient(135deg, #2a3346, #171d2b); }
body.vf .photo--wide { aspect-ratio: 16 / 9; }
body.vf .grid { display: grid; gap: clamp(.5rem, 1.5vw, 1.25rem); }
body.vf .grid--2 { grid-template-columns: repeat(2, 1fr); }
body.vf .grid--3 { grid-template-columns: repeat(3, 1fr); }
body.vf .grid--2 .photo { aspect-ratio: 3 / 4; }
body.vf .grid--3 .photo { aspect-ratio: 2 / 3; }
body.vf .styles__list { list-style: none; margin: 0; padding: 0; text-align: center; font-family: var(--font-title); font-weight: 300; font-size: clamp(.85rem, 1.7vw, 1rem); letter-spacing: .06em; line-height: 2.3; }
body.vf .formazioni { text-align: center; }
body.vf .formazioni p { margin: 0 auto; max-width: 22ch; font-family: var(--font-title); font-weight: 300; font-size: clamp(1.8rem, 4vw, 1.8rem); line-height: 1.3; }
body.vf .band { background: var(--band); color: var(--light); }
body.vf .band .logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem 4rem; min-height: 6rem; }
body.vf .band .logos img { max-height: 70px; width: auto; }
body.vf .band .logos .empty { opacity: .5; font-size: .95rem; }
body.vf .statement { max-width: 46ch; margin: 0 auto 1.1rem; text-align: center; font-family: var(--font-title); font-weight: 300; font-size: clamp(.85rem, 1.6vw, .95rem); line-height: 1.75; opacity: .85; }
body.vf .statement:last-of-type { margin-bottom: 0; }
body.vf hr.fade { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)); margin: 40px 0; }
body.vf .demo-video__seek { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(242, 243, 245, .25); cursor: pointer; z-index: 2; }
body.vf .demo-video__seek-fill { height: 100%; width: 0%; background: #1c5991; pointer-events: none; }
body.vf .demo-video__seek-fill { position: relative; }
body.vf .demo-video__seek-fill::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #1c5991; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); transform: translateY(-50%); }
body.vf .section.pad-top { padding-top: 0; }

/* ===== Hero su telefono: posizione della foto =====
   Generale: in una pagina si imposta con style="...; --pos-m: 70% center" nell'hero (default: centro).
   0% = sinistra / alto, 100% = destra / basso. */
@media (max-width: 700px) {
  .hero { background-position: var(--pos-m, center); }
  .hero--home { background-position: 28% center; }
}

.prose p.space-above { margin-top: 4rem; }