/* Variante B: "foglio di montaggio". Fondo chiaro, titoli condensati maiuscoli come i crediti di coda, blu dei pannelli acustici come unico accento. Foto a tutta larghezza, senza velature. */
:root{
  --ink:#f4f5f7;        /* fondo */
  --panel:#ffffff;
  --panel-2:#e7eaf0;
  --line:#d4d9e2;
  --paper:#0f131b;      /* testo */
  --muted:#596377;
  --tungsten:#2347d4;   /* blu pannelli */
  --tungsten-ink:#ffffff;
  color-scheme:light;
}
h1,h2,h3{font-stretch:68%;font-weight:820;text-transform:uppercase;letter-spacing:-.005em;line-height:.94}
h1{font-size:clamp(3.1rem,9.5vw,7.6rem)}
h2{font-size:clamp(2.2rem,5vw,3.6rem)}
h3{font-size:1.45rem;font-stretch:72%;font-weight:780;line-height:1.02}
.case h3{font-size:clamp(1.8rem,3.4vw,2.6rem);font-stretch:68%}
.work h3{font-size:1.5rem}
.card h3{font-size:1.7rem}
h3 em,h1 em,h2 em{font-style:normal}

.brand span:first-child{font-stretch:70%;font-weight:820;text-transform:uppercase;font-size:1.35rem;letter-spacing:.01em}
.top{background:color-mix(in srgb,var(--ink) 92%,transparent)}

/* hero: testo a sinistra, foto intera 3:2 a destra (nessun taglio); su telefono foto sopra */
.hero{display:grid;grid-template-columns:minmax(var(--gutter),1fr) minmax(0,504px) minmax(0,644px) minmax(var(--gutter-r),1fr);align-items:center;padding-block:clamp(36px,4.5vw,64px);border-bottom:0}
.hero .wrap{grid-column:2;grid-row:1;max-width:none;margin:0;width:auto;padding:0 clamp(24px,3.5vw,48px) 0 0;align-content:center;gap:22px}
.hero .bg{position:relative;grid-column:3 / span 2;grid-row:1;aspect-ratio:3/2;max-width:100%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 38%),linear-gradient(to bottom,transparent 0,#000 14%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 38%),linear-gradient(to bottom,transparent 0,#000 14%,#000 84%,transparent 100%);mask-composite:intersect}
.hero .bg img{opacity:1}
.hero .bg::after{display:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:12ch;font-size:clamp(2.8rem,5.2vw,4.8rem)}
.hero p{color:var(--muted);font-size:1.1rem}
.hero p.label{color:var(--paper);font-size:var(--s-1)}
.hero p.label b{color:var(--tungsten)}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);padding-block:0 40px}
  .hero .bg{grid-column:1;grid-row:1;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent);-webkit-mask-composite:source-over;mask-composite:add}
  .hero .wrap{grid-column:1;grid-row:2;padding:28px var(--gutter-r) 0 var(--gutter)}
  .hero h1{font-size:clamp(2.7rem,12vw,4rem)}
}

/* crediti su banda blu */
.strip{background:var(--tungsten);border-bottom:0}
.strip .wrap{color:#dfe5ff}
.strip-l{color:#ffffff}
.ticker{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent)}

.btn{border-color:var(--paper);border-radius:0}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.primary:hover{background:#1736ad;border-color:#1736ad;color:#fff}
.label{color:var(--muted)}
.facts strong{font-stretch:68%;font-weight:820;font-size:clamp(3rem,6vw,4.6rem)}
.card,.work,.side,.intl{border-radius:0;box-shadow:none}
.card .still{border-radius:0}
.still,.photos figure,.bio figure{border-radius:0}
.work .slate .kind{background:var(--panel);color:var(--paper)}
.work .slate img{opacity:1}
.wave{fill:var(--tungsten);opacity:.35}
.filters button,.lang,.menu-btn{border-radius:0}
.filters button[aria-pressed=true]{background:var(--tungsten);border-color:var(--tungsten);color:#fff}
.badge{border-radius:0}
input,textarea,select{background:#fff;border-radius:0}
.chips label{border-radius:0;background:#fff}
.phase .tc{font-size:1rem}
.steps li::before{font-size:1.1rem}
.cue span::before{color:var(--tungsten)}
.faq summary,.steps li b,.lines li>span:first-child{font-stretch:72%;font-weight:780;text-transform:uppercase;letter-spacing:.01em}
.faq summary{font-size:1.25rem}
.lines li>span:first-child{font-size:1.2rem}
.steps li b{font-size:1.35rem}
.cta{background:var(--paper);color:var(--ink);border-top:0}
.cta .label{color:#9aa3b5}
.cta .btn{border-color:var(--ink);color:var(--ink)}
.cta .btn:hover{background:var(--ink);color:var(--paper)}
.cta .btn.primary{color:#fff;border-color:var(--tungsten)}
.foot{background:var(--paper);color:#9aa3b5;border-top:1px solid #262c38}
.foot .wrap>span:first-child{color:var(--ink)}
.foot a:hover{color:var(--ink)}