:root{--bianco:#FAFAF9;--nero:#0E0E0E;--ink:#16171A;--grigio:#83857E;--linea:#E1E0DB;
  --gutter:clamp(1.5rem,6vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bianco);color:var(--ink);
  font:300 17px/1.72 'Archivo',system-ui,sans-serif;font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.barra{background:var(--nero);color:#fff;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-block:1rem;padding-inline:var(--gutter)}
.marchio{font-size:clamp(17px,3.6vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.marchio small{display:block;font-size:8.5px;font-weight:400;letter-spacing:.2em;opacity:.8;margin-top:.28rem}
.burger{background:none;border:0;padding:.4rem;cursor:pointer;display:grid;gap:5px}
.burger i{display:block;width:30px;height:2px;background:#fff}

.menu{position:fixed;inset:0;z-index:80;background:var(--nero);color:#fff;display:none;flex-direction:column;
  justify-content:center;padding-block:2rem;padding-inline:var(--gutter)}
.menu.on{display:flex}
.menu a{font-size:clamp(24px,5vw,34px);font-weight:500;letter-spacing:-.02em;padding:.3rem 0}
.menu .lingue{margin-top:2.4rem;display:flex;gap:1.2rem;font-size:11px;font-weight:500;letter-spacing:.2em}
.menu .lingue b{border-bottom:1px solid #fff;padding-bottom:2px}
.menu .chiudi{position:absolute;top:1.2rem;right:var(--gutter);background:none;border:0;color:#fff;
  font-size:32px;cursor:pointer;line-height:1}

.credstrip{display:flex;gap:.45rem;flex-wrap:wrap;padding-block:.9rem;padding-inline:var(--gutter);
  border-bottom:1px solid var(--linea)}
.credstrip span{font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio);border:1px solid var(--linea);padding:.32rem .5rem;line-height:1.3}

.colonna{max-width:68ch;margin:0 auto;padding-inline:var(--gutter)}
.occhiello{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--grigio);margin:0 0 .9rem}
h2{font-weight:500;font-size:clamp(24px,5.6vw,38px);line-height:1.12;margin:0 0 1.1rem;letter-spacing:-.028em}
p{margin:0 0 1.15rem}
.blocco{padding-block:clamp(2.6rem,7vw,4.6rem);border-top:1px solid var(--linea)}

.contatti{background:var(--nero);color:#fff;padding-block:clamp(2.8rem,8vw,5rem);padding-inline:var(--gutter);
  margin-top:clamp(2.6rem,7vw,4rem)}
.contatti h2{margin:0 0 1.7rem;color:#fff}
.pill{display:block;border-radius:100px;text-align:center;padding:1.05rem 1rem;font-size:13.5px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.contatti .pill{background:#fff;color:var(--nero);max-width:420px}
.contatti .righe{margin-top:2rem;font-size:14px;line-height:2;color:#c6c7c1}
footer{padding-inline:var(--gutter);padding-block:1.7rem 3.6rem;font-size:10.5px;font-weight:400;
  letter-spacing:.1em;color:var(--grigio);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.wa{position:fixed;right:clamp(.8rem,3vw,1.6rem);bottom:clamp(.9rem,3vw,1.8rem);z-index:70;background:var(--nero);
  color:#fff;border-radius:100px;display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;
  font-size:13.5px;font-weight:500;letter-spacing:.04em;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.wa svg{width:19px;height:19px;fill:#fff}

.apertura{background:var(--nero);color:#fff;padding-inline:var(--gutter);
  padding-block:clamp(2.4rem,6vw,4rem) clamp(2.4rem,6vw,4rem)}
.apertura .occhio{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  opacity:.6;margin:0 0 1.5rem}
.apertura h1{font-weight:500;font-size:clamp(34px,6.5vw,64px);line-height:1.04;margin:0;letter-spacing:-.03em}
.apertura .sotto{margin:1.6rem 0 0;max-width:52ch;color:#b9bab4;font-size:clamp(15px,3.6vw,19px)}
.azioni{padding-block:clamp(1.6rem,5vw,2.4rem) 0;padding-inline:var(--gutter);display:grid;gap:.65rem;max-width:760px}
.coppia{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.azioni .pill{background:var(--nero);color:#fff}
.azioni .pill.vuota{background:none;color:var(--nero);border:1px solid var(--nero)}
.indice{max-width:78ch;margin:0 auto;padding-inline:var(--gutter)}
.famiglia{margin-top:2.4rem}
.famiglia:first-of-type{margin-top:1.4rem}
.riga{display:grid;grid-template-columns:2.6rem 1fr auto;gap:.9rem;align-items:baseline;
  padding-block:.85rem;border-top:1px solid var(--linea)}
.riga:last-child{border-bottom:1px solid var(--linea)}
.riga:hover{background:#F2F1ED}
.riga .n{font-size:11px;font-weight:500;color:var(--grigio);font-variant-numeric:tabular-nums}
.riga .t{font-size:clamp(15px,3.7vw,18px);font-weight:400;letter-spacing:-.014em;line-height:1.28}
.riga .c{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);text-align:right}
@media(max-width:640px){.riga{grid-template-columns:2.4rem 1fr;row-gap:.2rem}.riga .c{grid-column:2;text-align:left}}
.tutti{display:inline-block;margin-top:1.8rem;font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}


/* ── galleria orizzontale: immagini piccole, tutte alla stessa altezza ── */
/* la striscia sta dentro i margini della pagina: cio' che eccede resta nascosto
   e scorre dentro la cornice, come una pellicola */
.carosello{position:relative;margin-block:clamp(1.6rem,5vw,3rem);margin-inline:var(--gutter);
  overflow:hidden}
html,body{overflow-x:hidden}
.galleria{display:flex;gap:var(--tes-gap);overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none}
.galleria::-webkit-scrollbar{display:none}
:root{--tes-l:439px;--tes-a:269px;--tes-gap:4px}
@media(max-width:620px){:root{--tes-l:260px;--tes-a:159px}}
:root{--gutter:clamp(1.5rem,6vw,53px)}
.galleria figure{flex:0 0 auto;margin:0;position:relative;scroll-snap-align:start;
  width:var(--tes-l);height:var(--tes-a);background:#FAFAF9;overflow:hidden}
.galleria figure img,.galleria figure video{width:100%;height:100%;object-fit:cover;display:block}
.galleria figure.disegno{background:#fff}
.galleria figure.disegno img{object-fit:contain;padding:.8rem}
.galleria figure.disegno figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.45rem .7rem;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#83857E;background:rgba(255,255,255,.9)}
.galleria figure .eti{position:absolute;inset:auto 0 0 0;margin:0;padding:.55rem .75rem .6rem;z-index:2;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.66));text-shadow:0 1px 2px rgba(0,0,0,.4);pointer-events:none}
.galleria figure .eti .n{display:block;font-size:9px;font-weight:500;letter-spacing:.26em;opacity:.75;margin:0 0 .15rem}
.galleria figure .eti h2{margin:0;color:#fff;font-weight:500;font-size:15px;line-height:1.25;letter-spacing:0}
.freccia{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:46px;height:46px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  border:0;border-radius:50%;background:rgba(250,250,249,.88);color:#16171A;font-size:17px;
  cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.16)}
.freccia.sx{left:.7rem}
.freccia.dx{right:.7rem}

@media(max-width:620px){.freccia{width:36px;height:36px;font-size:15px}}

[data-mod]{outline:1px dashed rgba(22,23,26,.4);outline-offset:3px;
  -webkit-user-select:text;user-select:text;cursor:text}
[data-mod]:focus{outline:2px solid #16171A;background:rgba(255,255,255,.7)}

/* ── testo di progetto e riga dati ── */
.testo{padding-block:clamp(2rem,6vw,3.4rem)}
.testo .lead{font-size:clamp(19px,4.4vw,26px);font-weight:400;line-height:1.34;
  letter-spacing:-.022em;margin-bottom:1.5rem}
.dati-p{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem 1.2rem;
  padding-inline:var(--gutter);margin:0 0 clamp(1.6rem,5vw,2.6rem)}
.dati-p div{border-top:1px solid var(--linea);padding-top:.6rem}
.dati-p dt{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--grigio)}
.dati-p dd{margin:.3rem 0 0;font-size:15px;font-weight:400;line-height:1.4}
.dati-p dd.vuoto{color:#C4C3BC}

/* ── comparsa allo scorrimento ── */
.rvl{opacity:0;transform:translateY(30px);
  transition:opacity 1.05s cubic-bezier(.16,.84,.3,1),transform 1.15s cubic-bezier(.16,.84,.3,1)}
.rvl.on{opacity:1;transform:none}

/* ── parallasse: l'immagine scorre piu lenta della pagina ── */
.par{overflow:hidden;position:relative}
.par img{transform:scale(1.16);will-change:transform;transition:none}

/* ── filo di avanzamento in cima ── */
#avanz{position:fixed;top:0;left:0;height:2px;width:0;z-index:99;
  background:#fff;mix-blend-mode:difference;pointer-events:none}

/* ── anello che insegue il puntatore (solo desktop) ── */
#anello{position:fixed;top:0;left:0;width:26px;height:26px;border:1px solid #fff;border-radius:50%;
  z-index:98;pointer-events:none;mix-blend-mode:difference;opacity:0;
  transform:translate(-50%,-50%);transition:width .45s cubic-bezier(.16,.84,.3,1),
  height .45s cubic-bezier(.16,.84,.3,1),opacity .35s}
#anello.grande{width:84px;height:84px}
@media(hover:none),(pointer:coarse){#anello{display:none}}

/* ── titolo di copertina che si allontana ── */
.hero-txt{will-change:transform,opacity}

/* ── ingresso lento della copertina ── */
@keyframes entra{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero>img,.hero>video{animation:entra 2.6s cubic-bezier(.16,.84,.3,1) both}

/* ── filetto che cresce sotto le etichette ── */
.occhiello{position:relative;padding-bottom:.7rem}
.occhiello::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--linea);transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s cubic-bezier(.16,.84,.3,1) .15s}
.rvl.on.occhiello::after,.on .occhiello::after{transform:scaleX(1)}

/* ── righe dell'indice: freccia che entra ── */
.riga{transition:background .4s,padding-left .4s}
.riga:hover{padding-left:.5rem}

/* ── l'immagine riempie sempre il contenitore: mai fondo scoperto ── */
.med.alta .par{height:100%}
.med.alta .par img{height:100%;object-fit:cover}
.serie .med,.serie figure,.disegno{background:#FAFAF9}
.hero{background:#FAFAF9}

/* ── ogni blocco tocca i bordi, video compreso ── */
.serie .med{max-width:none;margin-inline:0}
.serie .med video{width:100%;height:auto;display:block}

/* ── i disegni stanno su fondo bianco, mai nero ── */
.disegni,.disegno,.disegno img{background:#fff}
.serie .med>img,.serie .med>video,.serie .med .par>img{display:block}

/* ── su telefono nessun ritaglio in altezza: niente fondo nero scoperto ── */
@media(max-width:620px){
  .duo .med.alta{height:auto}
  .duo .med.alta img,.duo .med.alta .par img{height:auto;object-fit:fill}
  .med.alta .par{height:auto}
}

@media(prefers-reduced-motion:reduce){
  .rvl{opacity:1!important;transform:none!important;transition:none!important}
  .par img{transform:none!important}
  .hero>img,.hero>video{animation:none}
  #anello,#avanz{display:none}
  .occhiello::after{transform:scaleX(1)!important}
}

:root{--bianco:#FAFAF9;--nero:#0E0E0E;--ink:#16171A;--grigio:#83857E;--linea:#E1E0DB;
  --gutter:clamp(1.5rem,6vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bianco);color:var(--ink);
  font:300 17px/1.72 'Archivo',system-ui,sans-serif;font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.barra{background:var(--nero);color:#fff;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-block:1rem;padding-inline:var(--gutter)}
.marchio{font-size:clamp(17px,3.6vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.marchio small{display:block;font-size:8.5px;font-weight:400;letter-spacing:.2em;opacity:.8;margin-top:.28rem}
.burger{background:none;border:0;padding:.4rem;cursor:pointer;display:grid;gap:5px}
.burger i{display:block;width:30px;height:2px;background:#fff}
.menu{position:fixed;inset:0;z-index:80;background:var(--nero);color:#fff;display:none;flex-direction:column;
  justify-content:center;padding-block:2rem;padding-inline:var(--gutter)}
.menu.on{display:flex}
.menu a{font-size:clamp(24px,5vw,34px);font-weight:500;letter-spacing:-.02em;padding:.3rem 0}
.menu .lingue{margin-top:2.4rem;display:flex;gap:1.2rem;font-size:11px;font-weight:500;letter-spacing:.2em}
.menu .lingue b{border-bottom:1px solid #fff;padding-bottom:2px}
.menu .chiudi{position:absolute;top:1.2rem;right:var(--gutter);background:none;border:0;color:#fff;
  font-size:32px;cursor:pointer;line-height:1}

.testa{padding-inline:var(--gutter);padding-block:clamp(2.4rem,8vw,5rem) clamp(1.2rem,4vw,2rem)}
.testa h1{font-weight:500;font-size:clamp(34px,6.5vw,64px);line-height:1.04;margin:0;letter-spacing:-.03em}
.testa p{margin:1rem 0 0;color:var(--grigio);font-size:14px;letter-spacing:.02em}

.filtri{display:flex;gap:.4rem;overflow-x:auto;padding-inline:var(--gutter);
  padding-block:.6rem clamp(1.2rem,4vw,2rem);-webkit-overflow-scrolling:touch}
.filtri::-webkit-scrollbar{display:none}
.filtri button{flex:0 0 auto;background:none;border:1px solid var(--linea);color:#4a4c46;
  border-radius:100px;padding:.55rem 1rem;font:500 11px/1 'Archivo',sans-serif;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:all .35s}
.filtri button[aria-pressed="true"]{background:var(--nero);border-color:var(--nero);color:#fff}

.griglia{display:grid;grid-template-columns:1fr;gap:6px;padding-inline:var(--gutter);padding-bottom:4rem}
@media(min-width:680px){.griglia{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.griglia{grid-template-columns:repeat(3,1fr)}}

.tes{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#1A1B1D;
  transition:opacity .5s,transform .5s}
.tes .im{position:absolute;inset:0}
.tes .im img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s cubic-bezier(.16,.84,.3,1)}
.tes::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%);transition:background .55s}
.tes .ov{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.2rem;color:#fff}
.tes .cat{display:block;font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  opacity:.72;margin-bottom:.3rem}
.tes h3{margin:0;font-weight:500;font-size:clamp(17px,3.2vw,21px);line-height:1.14;letter-spacing:-.022em}
.tes .premio{display:inline-block;border:1px solid rgba(255,255,255,.5);padding:.24rem .5rem;
  font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.6rem}
.tes.vuota{background:#16171A}
.tes.vuota::after{background:linear-gradient(150deg,#26282B,#131416)}

@media(hover:hover) and (pointer:fine){
  .tes:not(.vuota)::after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%)}
  .tes:not(.vuota) .ov{opacity:0;transform:translateY(16px);
    transition:opacity .5s,transform .75s cubic-bezier(.16,.84,.3,1)}
  .tes:not(.vuota):hover::after{background:rgba(12,12,13,.66)}
  .tes:not(.vuota):hover .ov{opacity:1;transform:none}
  .tes:not(.vuota):hover .im img{transform:scale(1.07)}
  .tes.vuota:hover .ov{transform:translateY(-4px);transition:transform .6s cubic-bezier(.16,.84,.3,1)}
}
.tes.via{opacity:0;transform:scale(.97);pointer-events:none;position:absolute;visibility:hidden}

footer{padding-inline:var(--gutter);padding-block:1.7rem 3.6rem;font-size:10.5px;letter-spacing:.1em;
  color:var(--grigio);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  border-top:1px solid var(--linea)}

:root{--bianco:#FAFAF9;--nero:#0E0E0E;--ink:#16171A;--grigio:#83857E;--linea:#E1E0DB;
  --gutter:clamp(1.5rem,6vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bianco);color:var(--ink);
  font:300 17px/1.72 'Archivo',system-ui,sans-serif;font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.barra{background:var(--nero);color:#fff;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-block:1rem;padding-inline:var(--gutter)}
.marchio{font-size:clamp(17px,3.6vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.marchio small{display:block;font-size:8.5px;font-weight:400;letter-spacing:.2em;opacity:.8;margin-top:.28rem}
.burger{background:none;border:0;padding:.4rem;cursor:pointer;display:grid;gap:5px}
.burger i{display:block;width:30px;height:2px;background:#fff}
.credstrip{display:flex;gap:.45rem;flex-wrap:wrap;padding-block:.9rem;padding-inline:var(--gutter);
  border-bottom:1px solid var(--linea)}
.credstrip span{font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio);border:1px solid var(--linea);padding:.32rem .5rem;line-height:1.3}

.menu{position:fixed;inset:0;z-index:80;background:var(--nero);color:#fff;display:none;flex-direction:column;
  justify-content:center;padding-block:2rem;padding-inline:var(--gutter)}
.menu.on{display:flex}
.menu a{font-size:clamp(24px,5vw,34px);font-weight:500;letter-spacing:-.02em;padding:.3rem 0}
.menu .lingue{margin-top:2.4rem;display:flex;gap:1.2rem;font-size:11px;font-weight:500;letter-spacing:.2em}
.menu .lingue b{border-bottom:1px solid #fff;padding-bottom:2px}
.menu .chiudi{position:absolute;top:1.2rem;right:var(--gutter);background:none;border:0;color:#fff;
  font-size:32px;cursor:pointer;line-height:1}

.hero{position:relative;background:#0E0E0E;overflow:hidden}
.hero-txt{background:#0E0E0E;color:#fff;padding-inline:var(--gutter);padding-block:1.4rem 1.9rem;max-width:32ch}
.hero-txt .occhio{font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 .55rem;opacity:.85}
.hero-txt h1{font-weight:500;font-size:clamp(30px,5.2vw,54px);line-height:1.06;margin:0;letter-spacing:-.03em}
@media(min-width:860px){
  .hero{min-height:78svh;display:flex;align-items:flex-end}
  .hero video,.hero img{position:absolute;inset:0;height:100%;object-fit:cover}
  .hero-txt{position:relative;background:none;padding-block:0 clamp(1.8rem,6vw,3.2rem);max-width:24ch;
    text-shadow:0 2px 22px rgba(0,0,0,.5)}
}

.crediti{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem 1.2rem;
  padding-block:clamp(1.6rem,5vw,2.6rem);padding-inline:var(--gutter);margin:0}
.crediti div{border-top:1px solid var(--linea);padding-top:.6rem}
.crediti dt{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--grigio)}
.crediti dd{margin:.3rem 0 0;font-size:15px;font-weight:400;color:#BFBFB8}

.colonna{max-width:68ch;margin:0 auto;padding-inline:var(--gutter)}
.occhiello{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--grigio);margin:0 0 .9rem}
.blocco{padding-block:clamp(2.4rem,6vw,4rem);border-top:1px solid var(--linea)}
.attesa{max-width:68ch;margin:0 auto;padding-inline:var(--gutter)}
.attesa div{border:1px dashed #C9C8C1;padding:1.1rem 1.2rem;color:#8A8B84;font-size:13.5px;line-height:1.6}
figure{margin:clamp(1.5rem,4vw,2.4rem) 0 0}
figure:first-of-type{margin-top:0}

/* ── immagini: flusso continuo, titoli sovrapposti, niente didascalie ── */
.serie{display:grid;gap:4px;margin-block:clamp(1.4rem,4vw,2.4rem)}
.med{position:relative;margin:0;background:#0E0E0E;overflow:hidden}
.med img,.med video{width:100%;height:auto;display:block}
.med.alta{height:88svh}
.med.alta img,.med.alta video{height:100%;object-fit:cover}
.med.tit::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.62) 100%)}
.med .eti{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding-inline:var(--gutter);padding-bottom:clamp(1.3rem,4vw,2.6rem)}
.med .eti .n{display:block;font-size:9.5px;font-weight:500;letter-spacing:.26em;opacity:.65;margin-bottom:.45rem}
.med .eti h2{margin:0;color:#fff;font-weight:500;font-size:clamp(20px,3vw,34px);
  letter-spacing:-.035em;line-height:.98}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.duo .med.alta{height:64svh}

/* ── parallasse anche sulle immagini ritagliate in altezza ── */
.med.alta .par{height:100%}
.med.alta .par img{height:100%;object-fit:cover}
/* ── comparsa a sipario invece che in dissolvenza ── */
.serie figure.mask{clip-path:inset(0 0 100% 0);
  transition:clip-path 1.35s cubic-bezier(.16,.84,.3,1)}
.serie figure.mask.on{clip-path:inset(0 0 0 0)}

/* ── dimensione proporzionata alla risoluzione reale ── */
.med.ris-b{height:auto}
.med.ris-b img,.med.ris-b video{height:auto;object-fit:fill}

.duo .med.alta{height:52svh}
@media(max-width:620px){.duo .med.alta{height:auto}
  .duo .med.alta img{height:auto;object-fit:fill}}

@media(max-width:620px){.duo{grid-template-columns:1fr}.duo .med.alta{height:54svh}}
.nota-lav{padding-inline:var(--gutter);padding-block:clamp(1.4rem,4vw,2.2rem);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#A9AAA3}

/* ── impaginazione delle immagini: alterna piena pagina e blocchi rientrati ── */
.f-piena{margin-block:clamp(2.4rem,7vw,5.5rem) 0}
.f-stretta,.f-media{padding-inline:var(--gutter);margin-block:clamp(2.4rem,7vw,5.5rem) 0}
.f-media img{max-width:880px;margin-inline:auto}
.f-piena figcaption,.f-stretta figcaption,.f-media figcaption{max-width:46ch;margin:0}
.f-stretta figcaption,.f-media figcaption{padding-inline:0}
@media(min-width:900px){
  .f-stretta{max-width:60%;margin-inline-start:var(--gutter);padding-inline:0}
  .f-stretta.dx{margin-inline-start:auto;margin-inline-end:var(--gutter);text-align:right}
  .f-stretta.dx figcaption{margin-inline-start:auto}
  .f-stretta.bassa{margin-top:clamp(4rem,11vw,9rem)}
  .f-media{max-width:76%;margin-inline:auto}
}


.contatti{background:var(--nero);color:#fff;padding-block:clamp(2.8rem,8vw,5rem);padding-inline:var(--gutter);
  margin-top:clamp(2.6rem,7vw,4rem)}
.contatti h2{font-weight:500;font-size:clamp(24px,5.6vw,38px);letter-spacing:-.028em;margin:0 0 1.7rem;color:#fff}
.pill{display:block;background:#fff;color:var(--nero);border-radius:100px;text-align:center;
  padding:1.05rem 1rem;font-size:13.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;max-width:420px}
.contatti .righe{margin-top:2rem;font-size:14px;line-height:2;color:#c6c7c1}
footer{padding-inline:var(--gutter);padding-block:1.7rem 3.6rem;font-size:10.5px;letter-spacing:.1em;
  color:var(--grigio);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.wa{position:fixed;right:clamp(.8rem,3vw,1.6rem);bottom:clamp(.9rem,3vw,1.8rem);z-index:70;background:var(--nero);
  color:#fff;border-radius:100px;display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;
  font-size:13.5px;font-weight:500;letter-spacing:.04em;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.wa svg{width:19px;height:19px;fill:#fff}

:root{--bianco:#FAFAF9;--nero:#0E0E0E;--ink:#16171A;--grigio:#83857E;--linea:#E1E0DB;
  --gutter:clamp(1.5rem,6vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bianco);color:var(--ink);
  font:300 17px/1.72 'Archivo',system-ui,sans-serif;font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.barra{background:var(--nero);color:#fff;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-block:1rem;padding-inline:var(--gutter)}
.marchio{font-size:clamp(17px,3.6vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.marchio small{display:block;font-size:8.5px;font-weight:400;letter-spacing:.2em;opacity:.8;margin-top:.28rem}
.burger{background:none;border:0;padding:.4rem;cursor:pointer;display:grid;gap:5px}
.burger i{display:block;width:30px;height:2px;background:#fff}
.credstrip{display:flex;gap:.45rem;flex-wrap:wrap;padding-block:.9rem;padding-inline:var(--gutter);
  border-bottom:1px solid var(--linea)}
.credstrip span{font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio);border:1px solid var(--linea);padding:.32rem .5rem;line-height:1.3}
.menu{position:fixed;inset:0;z-index:80;background:var(--nero);color:#fff;display:none;flex-direction:column;
  justify-content:center;padding-block:2rem;padding-inline:var(--gutter)}
.menu.on{display:flex}
.menu a{font-size:clamp(24px,5vw,34px);font-weight:500;letter-spacing:-.02em;padding:.3rem 0}
.menu .lingue{margin-top:2.4rem;display:flex;gap:1.2rem;font-size:11px;font-weight:500;letter-spacing:.2em}
.menu .lingue b{border-bottom:1px solid #fff;padding-bottom:2px}
.menu .chiudi{position:absolute;top:1.2rem;right:var(--gutter);background:none;border:0;color:#fff;
  font-size:32px;cursor:pointer;line-height:1}

.hero{position:relative;background:#0E0E0E;overflow:hidden}
.hero-txt{background:#0E0E0E;color:#fff;padding-inline:var(--gutter);padding-block:1.4rem 1.9rem;max-width:32ch}
.hero-txt .occhio{font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 .55rem;opacity:.85}
.hero-txt h1{font-weight:500;font-size:clamp(30px,5.2vw,54px);line-height:1.06;margin:0;letter-spacing:-.03em}
@media(min-width:860px){
  .hero{min-height:78svh;display:flex;align-items:flex-end}
  .hero img{position:absolute;inset:0;height:100%;object-fit:cover}
  .hero-txt{position:relative;background:none;padding-block:0 clamp(1.8rem,6vw,3.2rem);max-width:24ch;
    text-shadow:0 2px 22px rgba(0,0,0,.5)}
}

.nota-lav{padding-inline:var(--gutter);padding-block:clamp(1.4rem,4vw,2.2rem);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#A9AAA3}
.serie{display:grid;gap:4px;margin-block:clamp(1.4rem,4vw,2.4rem)}
.med{position:relative;margin:0;background:#0E0E0E;overflow:hidden}
.med.alta{height:88svh}
.med.alta img{height:100%;object-fit:cover}
.med.tit::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.62) 100%)}
.med .eti{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding-inline:var(--gutter);padding-bottom:clamp(1.3rem,4vw,2.6rem)}
.med .eti .n{display:block;font-size:9.5px;font-weight:500;letter-spacing:.26em;opacity:.65;margin-bottom:.45rem}
.med .eti h2{margin:0;color:#fff;font-weight:500;font-size:clamp(20px,3vw,34px);
  letter-spacing:-.035em;line-height:.98}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.duo .med.alta{height:64svh}
@media(max-width:620px){.duo{grid-template-columns:1fr}.duo .med.alta{height:54svh}}

/* i prospetti sono disegni: fondo chiaro e aria attorno, mai a tutto schermo */
.disegni{background:#fff;padding:clamp(1.6rem,5vw,3.2rem) var(--gutter);
  display:flex;align-items:flex-end;gap:clamp(1.4rem,4vw,3.2rem)}
.disegni .disegno{flex-basis:0;min-width:0;padding:0}
.disegni .d-ovest{flex-grow:2.45}   /* larghezza proporzionale al rapporto del disegno: */
.disegni .d-sud{flex-grow:1.48}     /* cosi i due prospetti risultano alti uguali */
@media(max-width:680px){.disegni{display:grid;grid-template-columns:1fr;gap:2rem}}
.disegno{background:#fff;padding:clamp(1.4rem,5vw,3rem) var(--gutter);margin:0}
.disegno img{width:100%}
.disegno figcaption{margin:.9rem 0 0;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grigio)}

.contatti{background:var(--nero);color:#fff;padding-block:clamp(2.8rem,8vw,5rem);padding-inline:var(--gutter);
  margin-top:clamp(2.6rem,7vw,4rem)}
.contatti h2{font-weight:500;font-size:clamp(24px,5.6vw,38px);letter-spacing:-.028em;margin:0 0 1.7rem;color:#fff}
.pill{display:block;background:#fff;color:var(--nero);border-radius:100px;text-align:center;
  padding:1.05rem 1rem;font-size:13.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;max-width:420px}
.contatti .righe{margin-top:2rem;font-size:14px;line-height:2;color:#c6c7c1}
footer{padding-inline:var(--gutter);padding-block:1.7rem 3.6rem;font-size:10.5px;letter-spacing:.1em;
  color:var(--grigio);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.wa{position:fixed;right:clamp(.8rem,3vw,1.6rem);bottom:clamp(.9rem,3vw,1.8rem);z-index:70;background:var(--nero);
  color:#fff;border-radius:100px;display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;
  font-size:13.5px;font-weight:500;letter-spacing:.04em;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.wa svg{width:19px;height:19px;fill:#fff}

:root{--bianco:#FAFAF9;--nero:#0E0E0E;--ink:#16171A;--grigio:#83857E;--linea:#E1E0DB;
  --gutter:clamp(1.5rem,6vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bianco);color:var(--ink);
  font:300 17px/1.72 'Archivo',system-ui,sans-serif;font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.barra{background:var(--nero);color:#fff;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-block:1rem;padding-inline:var(--gutter)}
.marchio{font-size:clamp(17px,3.6vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.marchio small{display:block;font-size:8.5px;font-weight:400;letter-spacing:.2em;opacity:.8;margin-top:.28rem}
.burger{background:none;border:0;padding:.4rem;cursor:pointer;display:grid;gap:5px}
.burger i{display:block;width:30px;height:2px;background:#fff}
.credstrip{display:flex;gap:.45rem;flex-wrap:wrap;padding-block:.9rem;padding-inline:var(--gutter);
  border-bottom:1px solid var(--linea)}
.credstrip span{font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio);border:1px solid var(--linea);padding:.32rem .5rem;line-height:1.3}
.menu{position:fixed;inset:0;z-index:80;background:var(--nero);color:#fff;display:none;flex-direction:column;
  justify-content:center;padding-block:2rem;padding-inline:var(--gutter)}
.menu.on{display:flex}
.menu a{font-size:clamp(24px,5vw,34px);font-weight:500;letter-spacing:-.02em;padding:.3rem 0}
.menu .lingue{margin-top:2.4rem;display:flex;gap:1.2rem;font-size:11px;font-weight:500;letter-spacing:.2em}
.menu .lingue b{border-bottom:1px solid #fff;padding-bottom:2px}
.menu .chiudi{position:absolute;top:1.2rem;right:var(--gutter);background:none;border:0;color:#fff;
  font-size:32px;cursor:pointer;line-height:1}

.hero{position:relative;background:#0E0E0E;overflow:hidden}
.hero-txt{background:#0E0E0E;color:#fff;padding-inline:var(--gutter);padding-block:1.4rem 1.9rem;max-width:32ch}
.hero-txt .occhio{font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 .55rem;opacity:.85}
.hero-txt h1{font-weight:500;font-size:clamp(30px,5.2vw,54px);line-height:1.06;margin:0;letter-spacing:-.03em}
@media(min-width:860px){
  .hero{min-height:78svh;display:flex;align-items:flex-end}
  .hero img{position:absolute;inset:0;height:100%;object-fit:cover}
  .hero-txt{position:relative;background:none;padding-block:0 clamp(1.8rem,6vw,3.2rem);max-width:24ch;
    text-shadow:0 2px 22px rgba(0,0,0,.5)}
}

.nota-lav{padding-inline:var(--gutter);padding-block:clamp(1.4rem,4vw,2.2rem);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#A9AAA3}
.serie{display:grid;gap:4px;margin-block:clamp(1.4rem,4vw,2.4rem)}
.med{position:relative;margin:0;background:#0E0E0E;overflow:hidden}
.med.alta{height:88svh}
.med.alta img{height:100%;object-fit:cover}
.med.tit::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.62) 100%)}
.med .eti{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding-inline:var(--gutter);padding-bottom:clamp(1.3rem,4vw,2.6rem)}
.med .eti .n{display:block;font-size:9.5px;font-weight:500;letter-spacing:.26em;opacity:.65;margin-bottom:.45rem}
.med .eti h2{margin:0;color:#fff;font-weight:500;font-size:clamp(20px,3vw,34px);
  letter-spacing:-.035em;line-height:.98}
.duo{display:grid;grid-template-columns:1.62fr 1fr;gap:4px;align-items:stretch}
/* la seconda immagine riempie l'altezza della prima: niente vuoti sotto */
.duo > figure:last-child{position:relative}
.duo > figure:last-child img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:620px){
  .duo{grid-template-columns:1fr}
  .duo > figure:last-child{position:static}
  .duo > figure:last-child img{position:static;height:auto;object-fit:fill}
}
.duo .med.alta{height:64svh}
@media(max-width:620px){.duo{grid-template-columns:1fr}.duo .med.alta{height:54svh}}

/* i prospetti sono disegni: fondo chiaro e aria attorno, mai a tutto schermo */
.disegni{background:#fff;padding:clamp(1.6rem,5vw,3.2rem) var(--gutter);
  display:flex;align-items:flex-end;gap:clamp(1.4rem,4vw,3.2rem)}
.disegni .disegno{flex-basis:0;min-width:0}
.disegni .d-ovest{flex-grow:2.45}   /* larghezza proporzionale al rapporto: */
.disegni .d-sud{flex-grow:1.48}     /* cosi i due disegni risultano alti uguali */
@media(max-width:680px){.disegni{display:grid;grid-template-columns:1fr;gap:2rem}}
.disegno{background:#fff;margin:0}
.disegno img{width:100%;height:auto;background:#fff}
.disegno figcaption{margin:.9rem 0 0;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grigio)}

.contatti{background:var(--nero);color:#fff;padding-block:clamp(2.8rem,8vw,5rem);padding-inline:var(--gutter);
  margin-top:clamp(2.6rem,7vw,4rem)}
.contatti h2{font-weight:500;font-size:clamp(24px,5.6vw,38px);letter-spacing:-.028em;margin:0 0 1.7rem;color:#fff}
.pill{display:block;background:#fff;color:var(--nero);border-radius:100px;text-align:center;
  padding:1.05rem 1rem;font-size:13.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;max-width:420px}
.contatti .righe{margin-top:2rem;font-size:14px;line-height:2;color:#c6c7c1}
footer{padding-inline:var(--gutter);padding-block:1.7rem 3.6rem;font-size:10.5px;letter-spacing:.1em;
  color:var(--grigio);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.wa{position:fixed;right:clamp(.8rem,3vw,1.6rem);bottom:clamp(.9rem,3vw,1.8rem);z-index:70;background:var(--nero);
  color:#fff;border-radius:100px;display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;
  font-size:13.5px;font-weight:500;letter-spacing:.04em;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.wa svg{width:19px;height:19px;fill:#fff}

:root{--bianco:#FAFAF9;--nero:#0E0E0E;--ink:#16171A;--grigio:#83857E;--linea:#E1E0DB;
  --gutter:clamp(1.5rem,6vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bianco);color:var(--ink);
  font:300 17px/1.72 'Archivo',system-ui,sans-serif;font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

header{position:relative;z-index:30;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-block:1rem;padding-inline:var(--gutter);color:#fff;background:#0E0E0E}
header .credenziali{display:none}
.credstrip{display:flex;gap:.45rem;flex-wrap:wrap;padding-block:.85rem;padding-inline:var(--gutter);
  border-bottom:1px solid var(--linea)}
.credstrip span{font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio);border:1px solid var(--linea);padding:.32rem .5rem;line-height:1.3}
@media(min-width:860px){
  header{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:auto 1fr auto;
    padding-block:1.25rem;background:none}
  header::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0))}
  header .credenziali{display:flex}
  .credstrip{display:none}
}
.marchio{font-size:clamp(17px,3.6vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.marchio small{display:block;font-size:8.5px;font-weight:400;letter-spacing:.2em;opacity:.8;margin-top:.28rem}
.credenziali{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem}
.credenziali span{border:1px solid rgba(255,255,255,.5);padding:.3rem .5rem;font-size:8px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.3;text-align:center}
.burger{background:none;border:0;padding:.4rem;cursor:pointer;display:grid;gap:5px}
.burger i{display:block;width:30px;height:2px;background:#fff}

.menu{position:fixed;inset:0;z-index:80;background:var(--nero);color:#fff;display:none;flex-direction:column;
  justify-content:center;padding-block:2rem;padding-inline:var(--gutter)}
.menu.on{display:flex}
.menu a{font-size:clamp(24px,5vw,34px);font-weight:500;letter-spacing:-.02em;padding:.3rem 0}
.menu .lingue{margin-top:2.4rem;display:flex;gap:1.2rem;font-size:11px;font-weight:500;letter-spacing:.2em}
.menu .lingue b{border-bottom:1px solid #fff;padding-bottom:2px}
.menu .chiudi{position:absolute;top:1.2rem;right:var(--gutter);background:none;border:0;color:#fff;font-size:32px;cursor:pointer;line-height:1}

.hero{position:relative;background:#0E0E0E;overflow:hidden}
.hero img{width:100%;height:auto}
.hero-txt{background:#0E0E0E;color:#fff;padding-inline:var(--gutter);padding-block:1.4rem 1.9rem;max-width:32ch}
@media(min-width:860px){
  .hero{min-height:78svh;display:flex;align-items:flex-end}
  .hero img{position:absolute;inset:0;height:100%;object-fit:cover}
  .hero-txt{position:relative;background:none;padding-block:0 clamp(1.8rem,6vw,3.2rem);max-width:22ch;
    text-shadow:0 2px 22px rgba(0,0,0,.5)}
}
.hero-txt .occhio{font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;margin:0 0 .55rem;opacity:.92}
.hero-txt h1{font-weight:500;font-size:clamp(30px,5.2vw,54px);line-height:1.06;margin:0;letter-spacing:-.03em}
.hero-txt p.pay{margin:.8rem 0 0;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;opacity:.9}

.colonna{max-width:68ch;margin:0 auto;padding-inline:var(--gutter)}
.occhiello{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--grigio);margin:0 0 .9rem}
h2{font-weight:500;font-size:clamp(24px,5.6vw,38px);line-height:1.12;margin:0 0 1.1rem;letter-spacing:-.028em}
p{margin:0 0 1.15rem}
.blocco{padding-block:clamp(2.6rem,7vw,4.6rem);border-top:1px solid var(--linea)}

.crediti{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem 1.2rem;
  padding-block:clamp(1.6rem,5vw,2.6rem);padding-inline:var(--gutter);margin:0}
.crediti div{border-top:1px solid var(--linea);padding-top:.6rem}
.crediti dt{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--grigio)}
.crediti dd{margin:.3rem 0 0;font-size:15px;font-weight:400;line-height:1.4}
.crediti dd.vuoto{color:#BFBFB8}

figure{margin:0}

/* ── immagini: flusso continuo, titoli sovrapposti, niente didascalie ── */
.serie{display:grid;gap:4px;margin-block:clamp(1.4rem,4vw,2.4rem)}
.med{position:relative;margin:0;background:#0E0E0E;overflow:hidden}
.med img,.med video{width:100%;height:auto;display:block}
.med.alta{height:88svh}
.med.alta img,.med.alta video{height:100%;object-fit:cover}
.med.tit::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.62) 100%)}
.med .eti{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding-inline:var(--gutter);padding-bottom:clamp(1.3rem,4vw,2.6rem)}
.med .eti .n{display:block;font-size:9.5px;font-weight:500;letter-spacing:.26em;opacity:.65;margin-bottom:.45rem}
.med .eti h2{margin:0;color:#fff;font-weight:500;font-size:clamp(20px,3vw,34px);
  letter-spacing:-.035em;line-height:.98}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.duo .med.alta{height:64svh}

/* ── parallasse anche sulle immagini ritagliate in altezza ── */
.med.alta .par{height:100%}
.med.alta .par img{height:100%;object-fit:cover}
/* ── comparsa a sipario invece che in dissolvenza ── */
.serie figure.mask{clip-path:inset(0 0 100% 0);
  transition:clip-path 1.35s cubic-bezier(.16,.84,.3,1)}
.serie figure.mask.on{clip-path:inset(0 0 0 0)}

/* ── dimensione proporzionata alla risoluzione reale ── */
.med.ris-b{height:auto}
.med.ris-b img,.med.ris-b video{height:auto;object-fit:fill}

.duo .med.alta{height:52svh}
@media(max-width:620px){.duo .med.alta{height:auto}
  .duo .med.alta img{height:auto;object-fit:fill}}

@media(max-width:620px){.duo{grid-template-columns:1fr}.duo .med.alta{height:54svh}}
.nota-lav{padding-inline:var(--gutter);padding-block:clamp(1.4rem,4vw,2.2rem);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#A9AAA3}

/* ── impaginazione delle immagini: alterna piena pagina e blocchi rientrati ── */
.f-piena{margin-block:clamp(2.4rem,7vw,5.5rem) 0}
.f-stretta,.f-media{padding-inline:var(--gutter);margin-block:clamp(2.4rem,7vw,5.5rem) 0}
.f-media img{max-width:880px;margin-inline:auto}
.f-piena figcaption,.f-stretta figcaption,.f-media figcaption{max-width:46ch;margin:0}
.f-stretta figcaption,.f-media figcaption{padding-inline:0}
@media(min-width:900px){
  .f-stretta{max-width:60%;margin-inline-start:var(--gutter);padding-inline:0}
  .f-stretta.dx{margin-inline-start:auto;margin-inline-end:var(--gutter);text-align:right}
  .f-stretta.dx figcaption{margin-inline-start:auto}
  .f-stretta.bassa{margin-top:clamp(4rem,11vw,9rem)}
  .f-media{max-width:76%;margin-inline:auto}
}

figcaption{max-width:68ch;margin:0 auto;padding-inline:var(--gutter);padding-top:.9rem;
  font-size:14px;line-height:1.6;color:#5c5e57}
figcaption b{font-weight:500;color:var(--ink)}

.contatti{background:var(--nero);color:#fff;padding-block:clamp(2.8rem,8vw,5rem);padding-inline:var(--gutter);
  margin-top:clamp(2.6rem,7vw,4rem)}
.contatti h2{margin:0 0 1.7rem;color:#fff}
.pill{display:block;background:#fff;color:var(--nero);border-radius:100px;text-align:center;
  padding:1.05rem 1rem;font-size:13.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;max-width:420px}
.contatti .righe{margin-top:2rem;font-size:14px;line-height:2;color:#c6c7c1}
footer{padding-inline:var(--gutter);padding-block:1.7rem 3.6rem;font-size:10.5px;font-weight:400;
  letter-spacing:.1em;color:var(--grigio);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.wa{position:fixed;right:clamp(.8rem,3vw,1.6rem);bottom:clamp(.9rem,3vw,1.8rem);z-index:70;background:var(--nero);
  color:#fff;border-radius:100px;display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;
  font-size:13.5px;font-weight:500;letter-spacing:.04em;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.wa svg{width:19px;height:19px;fill:#fff}
.attesa{max-width:68ch;margin:0 auto;padding-inline:var(--gutter)}
.attesa div{border:1px dashed #C9C8C1;padding:1.1rem 1.2rem;color:#8A8B84;font-size:13.5px;line-height:1.6}




























/* == stili home == */
:root{--bianco:#FAFAF9;--nero:#0E0E0E;--ink:#16171A;--grigio:#83857E;--linea:#E1E0DB;
  --gutter:clamp(1.5rem,6vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bianco);color:var(--ink);
  font:300 17px/1.72 'Archivo',system-ui,sans-serif;font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.barra{background:var(--nero);color:#fff;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-block:1rem;padding-inline:var(--gutter)}
.marchio{font-size:clamp(17px,3.6vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.marchio small{display:block;font-size:8.5px;font-weight:400;letter-spacing:.2em;opacity:.8;margin-top:.28rem}
.burger{background:none;border:0;padding:.4rem;cursor:pointer;display:grid;gap:5px}
.burger i{display:block;width:30px;height:2px;background:#fff}

.menu{position:fixed;inset:0;z-index:80;background:var(--nero);color:#fff;display:none;flex-direction:column;
  justify-content:center;padding-block:2rem;padding-inline:var(--gutter)}
.menu.on{display:flex}
.menu a{font-size:clamp(24px,5vw,34px);font-weight:500;letter-spacing:-.02em;padding:.3rem 0}
.menu .lingue{margin-top:2.4rem;display:flex;gap:1.2rem;font-size:11px;font-weight:500;letter-spacing:.2em}
.menu .lingue b{border-bottom:1px solid #fff;padding-bottom:2px}
.menu .chiudi{position:absolute;top:1.2rem;right:var(--gutter);background:none;border:0;color:#fff;
  font-size:32px;cursor:pointer;line-height:1}

.credstrip{display:flex;gap:.45rem;flex-wrap:wrap;padding-block:.9rem;padding-inline:var(--gutter);
  border-bottom:1px solid var(--linea)}
.credstrip span{font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio);border:1px solid var(--linea);padding:.32rem .5rem;line-height:1.3}

.colonna{max-width:68ch;margin:0 auto;padding-inline:var(--gutter)}
.occhiello{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--grigio);margin:0 0 .9rem}
h2{font-weight:500;font-size:clamp(24px,5.6vw,38px);line-height:1.12;margin:0 0 1.1rem;letter-spacing:-.028em}
p{margin:0 0 1.15rem}
.blocco{padding-block:clamp(2.6rem,7vw,4.6rem);border-top:1px solid var(--linea)}

.contatti{background:var(--nero);color:#fff;padding-block:clamp(2.8rem,8vw,5rem);padding-inline:var(--gutter);
  margin-top:clamp(2.6rem,7vw,4rem)}
.contatti h2{margin:0 0 1.7rem;color:#fff}
.pill{display:block;border-radius:100px;text-align:center;padding:1.05rem 1rem;font-size:13.5px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.contatti .pill{background:#fff;color:var(--nero);max-width:420px}
.contatti .righe{margin-top:2rem;font-size:14px;line-height:2;color:#c6c7c1}
footer{padding-inline:var(--gutter);padding-block:1.7rem 3.6rem;font-size:10.5px;font-weight:400;
  letter-spacing:.1em;color:var(--grigio);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.wa{position:fixed;right:clamp(.8rem,3vw,1.6rem);bottom:clamp(.9rem,3vw,1.8rem);z-index:70;background:var(--nero);
  color:#fff;border-radius:100px;display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;
  font-size:13.5px;font-weight:500;letter-spacing:.04em;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.wa svg{width:19px;height:19px;fill:#fff}
/* il marchio disegnato prende il posto della scritta */
.marchio{display:block;width:clamp(168px,42vw,272px);line-height:0}
.marchio img{display:block;width:100%;height:auto}
.barra{padding-block:.8rem}


.apertura{position:relative;isolation:isolate;overflow:hidden;background:var(--nero);color:#fff;
  padding-inline:var(--gutter);padding-block:clamp(2.4rem,6vw,4rem) clamp(2.4rem,6vw,4rem)}
/* il filmato sta dietro al titolo, con un velo scuro che tiene leggibile il testo */
.apertura > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.apertura::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,
  rgba(14,14,14,.42) 0%,rgba(14,14,14,.62) 52%,rgba(14,14,14,.88) 100%)}
@media(min-width:860px){.apertura{min-height:62svh;display:flex;flex-direction:column;justify-content:flex-end}}
@media(prefers-reduced-motion:reduce){.apertura > video{display:none}}
.apertura .occhio{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  opacity:.6;margin:0 0 1.5rem}
.apertura h1{font-weight:500;font-size:clamp(34px,6.5vw,64px);line-height:1.04;margin:0;letter-spacing:-.03em}
.apertura .sotto{margin:1.6rem 0 0;max-width:52ch;color:#b9bab4;font-size:clamp(15px,3.6vw,19px)}
.azioni{padding-block:clamp(1.6rem,5vw,2.4rem) 0;padding-inline:var(--gutter);display:grid;gap:.65rem;max-width:760px}
.coppia{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.azioni .pill{background:var(--nero);color:#fff}
.azioni .pill.vuota{background:none;color:var(--nero);border:1px solid var(--nero)}
.indice{max-width:78ch;margin:0 auto;padding-inline:var(--gutter)}
.famiglia{margin-top:2.4rem}
.famiglia:first-of-type{margin-top:1.4rem}
.riga{display:grid;grid-template-columns:2.6rem 1fr auto;gap:.9rem;align-items:baseline;
  padding-block:.85rem;border-top:1px solid var(--linea)}
.riga:last-child{border-bottom:1px solid var(--linea)}
a.riga:hover{background:#F2F1ED}
.riga.spenta .t{color:#9A9C95}
.riga .n{font-size:11px;font-weight:500;color:var(--grigio);font-variant-numeric:tabular-nums}
.riga .t{font-size:clamp(15px,3.7vw,18px);font-weight:400;letter-spacing:-.014em;line-height:1.28}
.riga .c{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);text-align:right}
@media(max-width:640px){.riga{grid-template-columns:2.4rem 1fr;row-gap:.2rem}.riga .c{grid-column:2;text-align:left}}
.tutti{display:inline-block;margin-top:1.8rem;font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}
/* == fine home == */



/* == stili lo-studio == */
:root{--bianco:#FAFAF9;--nero:#0E0E0E;--ink:#16171A;--grigio:#83857E;--linea:#E1E0DB;
  --gutter:clamp(1.5rem,6vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bianco);color:var(--ink);
  font:300 17px/1.72 'Archivo',system-ui,sans-serif;font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.barra{background:var(--nero);color:#fff;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-block:1rem;padding-inline:var(--gutter)}
.marchio{font-size:clamp(17px,3.6vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.marchio small{display:block;font-size:8.5px;font-weight:400;letter-spacing:.2em;opacity:.8;margin-top:.28rem}
.burger{background:none;border:0;padding:.4rem;cursor:pointer;display:grid;gap:5px}
.burger i{display:block;width:30px;height:2px;background:#fff}
.credstrip{display:flex;gap:.45rem;flex-wrap:wrap;padding-block:.9rem;padding-inline:var(--gutter);
  border-bottom:1px solid var(--linea)}
.credstrip span{font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio);border:1px solid var(--linea);padding:.32rem .5rem;line-height:1.3}
.menu{position:fixed;inset:0;z-index:80;background:var(--nero);color:#fff;display:none;flex-direction:column;
  justify-content:center;padding-block:2rem;padding-inline:var(--gutter)}
.menu.on{display:flex}
.menu a{font-size:clamp(24px,5vw,34px);font-weight:500;letter-spacing:-.02em;padding:.3rem 0}
.menu .lingue{margin-top:2.4rem;display:flex;gap:1.2rem;font-size:11px;font-weight:500;letter-spacing:.2em}
.menu .lingue b{border-bottom:1px solid #fff;padding-bottom:2px}
.menu .chiudi{position:absolute;top:1.2rem;right:var(--gutter);background:none;border:0;color:#fff;
  font-size:32px;cursor:pointer;line-height:1}

.hero{position:relative;background:#0E0E0E;overflow:hidden}
.hero-txt{background:#0E0E0E;color:#fff;padding-inline:var(--gutter);padding-block:1.4rem 1.9rem;max-width:32ch}
.hero-txt .occhio{font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 .55rem;opacity:.85}
.hero-txt h1{font-weight:500;font-size:clamp(30px,5.2vw,54px);line-height:1.06;margin:0;letter-spacing:-.03em}
@media(min-width:860px){
  .hero{min-height:78svh;display:flex;align-items:flex-end}
  .hero img{position:absolute;inset:0;height:100%;object-fit:cover}
  .hero-txt{position:relative;background:none;padding-block:0 clamp(1.8rem,6vw,3.2rem);max-width:24ch;
    text-shadow:0 2px 22px rgba(0,0,0,.5)}
}

.colonna{max-width:68ch;margin:0 auto;padding-inline:var(--gutter)}
.occhiello{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--grigio);margin:0 0 .9rem}
p{margin:0 0 1.15rem}
.blocco{padding-block:clamp(2.6rem,7vw,4.6rem)}

.serie{display:grid;gap:4px;margin-block:clamp(1.4rem,4vw,2.4rem)}
.med{position:relative;margin:0;background:#0E0E0E;overflow:hidden}
.med.alta{height:88svh}
.med.alta img{height:100%;object-fit:cover}
.med.tit::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.62) 100%)}
.med .eti{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding-inline:var(--gutter);padding-bottom:clamp(1.3rem,4vw,2.6rem)}
.med .eti .n{display:block;font-size:9.5px;font-weight:500;letter-spacing:.26em;opacity:.65;margin-bottom:.45rem}
.med .eti h2{margin:0;color:#fff;font-weight:500;font-size:clamp(20px,3vw,34px);
  letter-spacing:-.035em;line-height:.98}

.disegni{background:#fff;padding:clamp(1.6rem,5vw,3.2rem) var(--gutter);
  display:flex;align-items:flex-end;gap:clamp(1.4rem,4vw,3.2rem)}
.disegni .disegno{flex-basis:0;min-width:0}
@media(max-width:680px){.disegni{display:grid;grid-template-columns:1fr;gap:2rem}}
.disegno{background:#fff;margin:0}
.disegno img{width:100%;height:auto;background:#fff}
.disegno figcaption{margin:.9rem 0 0;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grigio)}

.contatti{background:var(--nero);color:#fff;padding-block:clamp(2.8rem,8vw,5rem);padding-inline:var(--gutter);
  margin-top:clamp(2.6rem,7vw,4rem)}
.contatti h2{font-weight:500;font-size:clamp(24px,5.6vw,38px);letter-spacing:-.028em;margin:0 0 1.7rem;color:#fff}
.pill{display:block;background:#fff;color:var(--nero);border-radius:100px;text-align:center;
  padding:1.05rem 1rem;font-size:13.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;max-width:420px}
.contatti .righe{margin-top:2rem;font-size:14px;line-height:2;color:#c6c7c1}
footer{padding-inline:var(--gutter);padding-block:1.7rem 3.6rem;font-size:10.5px;letter-spacing:.1em;
  color:var(--grigio);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.wa{position:fixed;right:clamp(.8rem,3vw,1.6rem);bottom:clamp(.9rem,3vw,1.8rem);z-index:70;background:var(--nero);
  color:#fff;border-radius:100px;display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;
  font-size:13.5px;font-weight:500;letter-spacing:.04em;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.wa svg{width:19px;height:19px;fill:#fff}
/* il marchio disegnato prende il posto della scritta */
.marchio{display:block;width:clamp(168px,42vw,272px);line-height:0}
.marchio img{display:block;width:100%;height:auto}
.barra{padding-block:.8rem}


.testa-p{padding-inline:var(--gutter);padding-block:clamp(2.4rem,8vw,5rem) clamp(1rem,3vw,1.6rem)}
.testa-p .occhiello{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--grigio);margin:0 0 1rem}
.testa-p h1{font-weight:500;font-size:clamp(32px,6vw,58px);line-height:1.06;margin:0;letter-spacing:-.03em}

/* ritratto e testo d'apertura, affiancati da tablet in su */
.ritratto{display:grid;gap:clamp(1.6rem,5vw,3rem);padding-inline:var(--gutter);
  padding-block:clamp(1.4rem,4vw,2.4rem)}
@media(min-width:820px){.ritratto{grid-template-columns:minmax(240px,32%) 1fr;align-items:start}}
.ritratto figure{margin:0;background:#EDECE7}
.ritratto img{width:100%;height:auto;display:block}
.ritratto figcaption{margin-top:.7rem;font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grigio)}
.ritratto .lead{font-size:clamp(19px,4.2vw,26px);font-weight:400;line-height:1.34;
  letter-spacing:-.022em;margin:0 0 1.3rem}
.ritratto p{max-width:62ch}

.sezione{padding-inline:var(--gutter);padding-block:clamp(2rem,6vw,3.2rem);
  border-top:1px solid var(--linea)}
.sezione h2{font-weight:500;font-size:clamp(22px,5vw,34px);line-height:1.12;margin:0 0 1.1rem;
  letter-spacing:-.028em}
.sezione p{max-width:66ch}

/* i servizi: una voce per riquadro */
.voci{display:grid;gap:1px;background:var(--linea);border-block:1px solid var(--linea)}
@media(min-width:760px){.voci{grid-template-columns:1fr 1fr}}
.voce{background:var(--bianco);padding:clamp(1.5rem,4vw,2.4rem) var(--gutter)}
.voce .n{display:block;font-size:10.5px;font-weight:500;letter-spacing:.2em;color:var(--grigio);
  margin-bottom:.7rem;font-variant-numeric:tabular-nums}
.voce h3{margin:0 0 .7rem;font-weight:500;font-size:clamp(18px,3.6vw,22px);letter-spacing:-.02em;line-height:1.2}
.voce p{margin:0;font-size:15.5px;line-height:1.66;color:#3D3F3A;max-width:46ch}

/* i numeri dello studio: contano quando entrano in campo */
.numeri{display:grid;grid-template-columns:repeat(1,1fr);gap:1px;background:var(--linea);
  border-block:1px solid var(--linea);margin-block:clamp(1.6rem,5vw,3rem)}
@media(min-width:760px){.numeri{grid-template-columns:repeat(3,1fr)}}
.numeri > div{background:var(--bianco);padding:clamp(1.3rem,4vw,2.2rem) var(--gutter)}
.numeri b{display:block;font-weight:500;font-size:clamp(40px,8vw,72px);line-height:.92;
  letter-spacing:-.045em;color:var(--accento);font-variant-numeric:tabular-nums}
.numeri span{display:block;margin-top:.5rem;font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grigio)}

/* ogni sezione ha il suo numero e un filetto che cresce */
.sezione .n{display:block;font-size:10.5px;font-weight:500;letter-spacing:.2em;color:var(--accento);
  margin-bottom:.9rem;font-variant-numeric:tabular-nums;position:relative;padding-bottom:.7rem}
.sezione .n::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:64px;
  background:var(--accento);transform:scaleX(0);transform-origin:left;
  transition:transform 1s cubic-bezier(.16,.84,.3,1) .1s}
.sezione.on .n::after,.rvl.on .n::after{transform:scaleX(1)}

/* una frase tirata fuori dal testo, per prendere fiato */
.citazione{margin:0;padding-inline:var(--gutter);padding-block:clamp(2.4rem,7vw,4.4rem);
  border-top:1px solid var(--linea)}
.citazione p{margin:0;max-width:20ch;font-weight:500;font-size:clamp(28px,6.4vw,58px);
  line-height:1.06;letter-spacing:-.035em}
.citazione em{font-style:normal;color:var(--accento)}

/* la firma chiude la pagina, e si scrive da sinistra a destra */
.firma-fine{padding-inline:var(--gutter);padding-block:0 clamp(2rem,6vw,3.4rem);
  border-top:0;display:block;max-width:420px}
.firma-fine img{width:100%;height:auto;display:block;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.16,.84,.3,1)}
.firma-fine.on img{clip-path:inset(0 0 0 0)}
.firma-fine figcaption{margin-top:.5rem;font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grigio)}

/* il ritratto entra a sipario, dall'alto */
.ritratto img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.16,.84,.3,1)}
.ritratto.on img{clip-path:inset(0 0 0 0)}

/* i riconoscimenti */
.premi{padding-inline:var(--gutter);padding-block:clamp(2rem,6vw,3.2rem);border-top:1px solid var(--linea)}
.premi .fila{display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2rem);align-items:center;margin-top:1.4rem}
/* i marchi hanno proporzioni diverse: si allineano per altezza, non per larghezza */
.premi img{height:clamp(46px,8vw,68px);width:auto;max-width:150px;object-fit:contain;display:block;
  filter:grayscale(1);opacity:.75;transition:filter .4s,opacity .4s}
.premi img:hover{filter:none;opacity:1}


/* ── galleria orizzontale: immagini piccole, tutte alla stessa altezza ── */
/* la striscia sta dentro i margini della pagina: cio' che eccede resta nascosto
   e scorre dentro la cornice, come una pellicola */
.carosello{position:relative;margin-block:clamp(1.6rem,5vw,3rem);margin-inline:var(--gutter);
  overflow:hidden}
html,body{overflow-x:hidden}
.galleria{display:flex;gap:var(--tes-gap);overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none}
.galleria::-webkit-scrollbar{display:none}
:root{--tes-l:439px;--tes-a:269px;--tes-gap:4px}
@media(max-width:620px){:root{--tes-l:260px;--tes-a:159px}}
:root{--gutter:clamp(1.5rem,6vw,53px)}
.galleria figure{flex:0 0 auto;margin:0;position:relative;scroll-snap-align:start;
  width:var(--tes-l);height:var(--tes-a);background:#FAFAF9;overflow:hidden}
.galleria figure img,.galleria figure video{width:100%;height:100%;object-fit:cover;display:block}
.galleria figure.disegno{background:#fff}
.galleria figure.disegno img{object-fit:contain;padding:.8rem}
.galleria figure.disegno figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.45rem .7rem;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#83857E;background:rgba(255,255,255,.9)}
.freccia{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:46px;height:46px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  border:0;border-radius:50%;background:rgba(250,250,249,.88);color:#16171A;font-size:17px;
  cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.16)}
.freccia.sx{left:.7rem}
.freccia.dx{right:.7rem}

@media(max-width:620px){.freccia{width:36px;height:36px;font-size:15px}}

[data-mod]{outline:1px dashed rgba(22,23,26,.4);outline-offset:3px;
  -webkit-user-select:text;user-select:text;cursor:text}
[data-mod]:focus{outline:2px solid #16171A;background:rgba(255,255,255,.7)}

/* ── testo di progetto e riga dati ── */
.testo{padding-block:clamp(2rem,6vw,3.4rem)}
.testo .lead{font-size:clamp(19px,4.4vw,26px);font-weight:400;line-height:1.34;
  letter-spacing:-.022em;margin-bottom:1.5rem}
.dati-p{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem 1.2rem;
  padding-inline:var(--gutter);margin:0 0 clamp(1.6rem,5vw,2.6rem)}
.dati-p div{border-top:1px solid var(--linea);padding-top:.6rem}
.dati-p dt{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--grigio)}
.dati-p dd{margin:.3rem 0 0;font-size:15px;font-weight:400;line-height:1.4}
.dati-p dd.vuoto{color:#C4C3BC}

/* ── comparsa allo scorrimento ── */
.rvl{opacity:0;transform:translateY(30px);
  transition:opacity 1.05s cubic-bezier(.16,.84,.3,1),transform 1.15s cubic-bezier(.16,.84,.3,1)}
.rvl.on{opacity:1;transform:none}

/* ── parallasse: l'immagine scorre piu lenta della pagina ── */
.par{overflow:hidden;position:relative}
.par img{transform:scale(1.16);will-change:transform;transition:none}

/* ── filo di avanzamento in cima ── */
#avanz{position:fixed;top:0;left:0;height:2px;width:0;z-index:99;
  background:#fff;mix-blend-mode:difference;pointer-events:none}

/* ── anello che insegue il puntatore (solo desktop) ── */
#anello{position:fixed;top:0;left:0;width:26px;height:26px;border:1px solid #fff;border-radius:50%;
  z-index:98;pointer-events:none;mix-blend-mode:difference;opacity:0;
  transform:translate(-50%,-50%);transition:width .45s cubic-bezier(.16,.84,.3,1),
  height .45s cubic-bezier(.16,.84,.3,1),opacity .35s}
#anello.grande{width:84px;height:84px}
@media(hover:none),(pointer:coarse){#anello{display:none}}

/* ── titolo di copertina che si allontana ── */
.hero-txt{will-change:transform,opacity}

/* ── ingresso lento della copertina ── */
@keyframes entra{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero>img,.hero>video{animation:entra 2.6s cubic-bezier(.16,.84,.3,1) both}

/* ── filetto che cresce sotto le etichette ── */
.occhiello{position:relative;padding-bottom:.7rem}
.occhiello::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--linea);transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s cubic-bezier(.16,.84,.3,1) .15s}
.rvl.on.occhiello::after,.on .occhiello::after{transform:scaleX(1)}

/* ── righe dell'indice: freccia che entra ── */
.riga{transition:background .4s,padding-left .4s}
.riga:hover{padding-left:.5rem}

/* ── l'immagine riempie sempre il contenitore: mai fondo scoperto ── */
.med.alta .par{height:100%}
.med.alta .par img{height:100%;object-fit:cover}
.serie .med,.serie figure,.disegno{background:#FAFAF9}
.hero{background:#FAFAF9}

/* ── ogni blocco tocca i bordi, video compreso ── */
.serie .med{max-width:none;margin-inline:0}
.serie .med video{width:100%;height:auto;display:block}

/* ── i disegni stanno su fondo bianco, mai nero ── */
.disegni,.disegno,.disegno img{background:#fff}
.serie .med>img,.serie .med>video,.serie .med .par>img{display:block}

/* ── su telefono nessun ritaglio in altezza: niente fondo nero scoperto ── */
@media(max-width:620px){
  .duo .med.alta{height:auto}
  .duo .med.alta img,.duo .med.alta .par img{height:auto;object-fit:fill}
  .med.alta .par{height:auto}
}

@media(prefers-reduced-motion:reduce){
  .rvl{opacity:1!important;transform:none!important;transition:none!important}
  .par img{transform:none!important}
  .hero>img,.hero>video{animation:none}
  #anello,#avanz{display:none}
  .occhiello::after{transform:scaleX(1)!important}
}

/* ── la veste: accento ottanio, numero di copertina, zoom allo scorrimento ── */
:root{--accento:#B4552F;--accento-chiaro:#E08A5F}

/* l'accento sta sulle etichette, sui filetti e sui numeri. Mai sulle immagini. */
/* .testa-p .occhiello ha due classi e vincerebbe su .occhiello da sola: va nominata */
.occhiello,.testa-p .occhiello{color:var(--accento)}
.occhiello::after{background:var(--accento)}
.riga .n,.anno .num,.voce .n,.dati-p dt{color:var(--accento)}
.disegno figcaption,.galleria figure.disegno figcaption{color:var(--accento)}
.tutti{border-bottom-color:var(--accento);color:var(--accento)}
/* su fondo scuro l'ottanio pieno non si leggerebbe: serve la sua versione chiara */
.hero-txt .occhio,.apertura .occhio,.med .eti .n,.tes .cat{color:var(--accento-chiaro)}
.tes .premio{border-color:var(--accento-chiaro);color:var(--accento-chiaro)}
.menu .lingue b{border-bottom-color:var(--accento-chiaro);color:var(--accento-chiaro)}

/* il numero del progetto, grande, in un angolo della copertina */
.hero{position:relative}
.hero .numerone{position:absolute;right:clamp(.5rem,2.6vw,2.2rem);bottom:.35rem;z-index:1;
  pointer-events:none;font-weight:500;font-size:clamp(88px,19vw,232px);line-height:.78;
  letter-spacing:-.055em;color:#fff;opacity:.2;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 34px rgba(0,0,0,.4)}
@media(max-width:860px){
  .hero .numerone{font-size:clamp(70px,23vw,124px);bottom:.25rem;opacity:.26}
}
/* L'accento regge sul fondo chiaro e sul nero pieno, non sopra una fotografia:
   da tablet in su l'occhiello di copertina sta sull'immagine e torna bianco. */
.hero-txt .occhio,.apertura .occhio{opacity:1}
@media(min-width:860px){
  .hero-txt .occhio,.apertura .occhio{color:#fff;opacity:.92}
}

/* La copertina cresce piano mentre si scorre. Il valore lo muove il copione su una
   cornice attorno all'immagine: l'ingresso resta all'immagine, e le due trasformazioni
   non si pestano i piedi. */
.hero .zoom{display:block;will-change:transform;transform:scale(var(--z,1))}
@media(min-width:860px){.hero .zoom{position:absolute;inset:0}}
.hero img,.hero video{animation:entra 2.6s cubic-bezier(.16,.84,.3,1) both}
/* == fine lo-studio == */
/* == stili caorle == */
:root{--bianco:#FAFAF9;--nero:#0E0E0E;--ink:#16171A;--grigio:#83857E;--linea:#E1E0DB;
  --gutter:clamp(1.5rem,6vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bianco);color:var(--ink);
  font:300 17px/1.72 'Archivo',system-ui,sans-serif;font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.barra{background:var(--nero);color:#fff;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-block:1rem;padding-inline:var(--gutter)}
.marchio{font-size:clamp(17px,3.6vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.marchio small{display:block;font-size:8.5px;font-weight:400;letter-spacing:.2em;opacity:.8;margin-top:.28rem}
.burger{background:none;border:0;padding:.4rem;cursor:pointer;display:grid;gap:5px}
.burger i{display:block;width:30px;height:2px;background:#fff}
.credstrip{display:flex;gap:.45rem;flex-wrap:wrap;padding-block:.9rem;padding-inline:var(--gutter);
  border-bottom:1px solid var(--linea)}
.credstrip span{font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio);border:1px solid var(--linea);padding:.32rem .5rem;line-height:1.3}
.menu{position:fixed;inset:0;z-index:80;background:var(--nero);color:#fff;display:none;flex-direction:column;
  justify-content:center;padding-block:2rem;padding-inline:var(--gutter)}
.menu.on{display:flex}
.menu a{font-size:clamp(24px,5vw,34px);font-weight:500;letter-spacing:-.02em;padding:.3rem 0}
.menu .lingue{margin-top:2.4rem;display:flex;gap:1.2rem;font-size:11px;font-weight:500;letter-spacing:.2em}
.menu .lingue b{border-bottom:1px solid #fff;padding-bottom:2px}
.menu .chiudi{position:absolute;top:1.2rem;right:var(--gutter);background:none;border:0;color:#fff;
  font-size:32px;cursor:pointer;line-height:1}

.hero{position:relative;background:#0E0E0E;overflow:hidden}
.hero-txt{background:#0E0E0E;color:#fff;padding-inline:var(--gutter);padding-block:1.4rem 1.9rem;max-width:32ch}
.hero-txt .occhio{font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 .55rem;opacity:.85}
.hero-txt h1{font-weight:500;font-size:clamp(30px,5.2vw,54px);line-height:1.06;margin:0;letter-spacing:-.03em}
@media(min-width:860px){
  .hero{min-height:78svh;display:flex;align-items:flex-end}
  .hero img{position:absolute;inset:0;height:100%;object-fit:cover}
  .hero-txt{position:relative;background:none;padding-block:0 clamp(1.8rem,6vw,3.2rem);max-width:24ch;
    text-shadow:0 2px 22px rgba(0,0,0,.5)}
}

.nota-lav{padding-inline:var(--gutter);padding-block:clamp(1.4rem,4vw,2.2rem);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#A9AAA3}
.serie{display:grid;gap:4px;margin-block:clamp(1.4rem,4vw,2.4rem)}
.med{position:relative;margin:0;background:#0E0E0E;overflow:hidden}
.med.alta{height:88svh}
.med.alta img{height:100%;object-fit:cover}
.med.tit::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.62) 100%)}
.med .eti{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding-inline:var(--gutter);padding-bottom:clamp(1.3rem,4vw,2.6rem)}
.med .eti .n{display:block;font-size:9.5px;font-weight:500;letter-spacing:.26em;opacity:.65;margin-bottom:.45rem}
.med .eti h2{margin:0;color:#fff;font-weight:500;font-size:clamp(20px,3vw,34px);
  letter-spacing:-.035em;line-height:.98}
.duo{display:grid;grid-template-columns:1.62fr 1fr;gap:4px;align-items:stretch}
/* la seconda immagine riempie l'altezza della prima: niente vuoti sotto */
.duo > figure:last-child{position:relative}
.duo > figure:last-child img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:620px){
  .duo{grid-template-columns:1fr}
  .duo > figure:last-child{position:static}
  .duo > figure:last-child img{position:static;height:auto;object-fit:fill}
}
.duo .med.alta{height:64svh}
@media(max-width:620px){.duo{grid-template-columns:1fr}.duo .med.alta{height:54svh}}

/* i prospetti sono disegni: fondo chiaro e aria attorno, mai a tutto schermo */
.disegni{background:#fff;padding:clamp(1.6rem,5vw,3.2rem) var(--gutter);
  display:flex;align-items:flex-end;gap:clamp(1.4rem,4vw,3.2rem)}
.disegni .disegno{flex-basis:0;min-width:0}
.disegni .d-ovest{flex-grow:2.45}   /* larghezza proporzionale al rapporto: */
.disegni .d-sud{flex-grow:1.48}     /* cosi i due disegni risultano alti uguali */
@media(max-width:680px){.disegni{display:grid;grid-template-columns:1fr;gap:2rem}}
.disegno{background:#fff;margin:0}
.disegno img{width:100%;height:auto;background:#fff}
.disegno figcaption{margin:.9rem 0 0;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grigio)}

.contatti{background:var(--nero);color:#fff;padding-block:clamp(2.8rem,8vw,5rem);padding-inline:var(--gutter);
  margin-top:clamp(2.6rem,7vw,4rem)}
.contatti h2{font-weight:500;font-size:clamp(24px,5.6vw,38px);letter-spacing:-.028em;margin:0 0 1.7rem;color:#fff}
.pill{display:block;background:#fff;color:var(--nero);border-radius:100px;text-align:center;
  padding:1.05rem 1rem;font-size:13.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;max-width:420px}
.contatti .righe{margin-top:2rem;font-size:14px;line-height:2;color:#c6c7c1}
footer{padding-inline:var(--gutter);padding-block:1.7rem 3.6rem;font-size:10.5px;letter-spacing:.1em;
  color:var(--grigio);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.wa{position:fixed;right:clamp(.8rem,3vw,1.6rem);bottom:clamp(.9rem,3vw,1.8rem);z-index:70;background:var(--nero);
  color:#fff;border-radius:100px;display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;
  font-size:13.5px;font-weight:500;letter-spacing:.04em;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.wa svg{width:19px;height:19px;fill:#fff}
/* il marchio disegnato prende il posto della scritta */
.marchio{display:block;width:clamp(168px,42vw,272px);line-height:0}
.marchio img{display:block;width:100%;height:auto}
.barra{padding-block:.8rem}

/* == fine caorle == */



/* == stili news-premio-casa-immersiva == */

/* ── galleria orizzontale: immagini piccole, tutte alla stessa altezza ── */
/* la striscia sta dentro i margini della pagina: cio' che eccede resta nascosto
   e scorre dentro la cornice, come una pellicola */
.carosello{position:relative;margin-block:clamp(1.6rem,5vw,3rem);margin-inline:var(--gutter);
  overflow:hidden}
html,body{overflow-x:hidden}
.galleria{display:flex;gap:var(--tes-gap);overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none}
.galleria::-webkit-scrollbar{display:none}
:root{--tes-l:439px;--tes-a:269px;--tes-gap:4px}
@media(max-width:620px){:root{--tes-l:260px;--tes-a:159px}}
:root{--gutter:clamp(1.5rem,6vw,53px)}
.galleria figure{flex:0 0 auto;margin:0;position:relative;scroll-snap-align:start;
  width:var(--tes-l);height:var(--tes-a);background:#FAFAF9;overflow:hidden}
.galleria figure img,.galleria figure video{width:100%;height:100%;object-fit:cover;display:block}
.galleria figure.disegno{background:#fff}
.galleria figure.disegno img{object-fit:contain;padding:.8rem}
.galleria figure.disegno figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.45rem .7rem;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#83857E;background:rgba(255,255,255,.9)}
.galleria figure .eti{position:absolute;inset:auto 0 0 0;margin:0;padding:.55rem .75rem .6rem;z-index:2;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.66));text-shadow:0 1px 2px rgba(0,0,0,.4);pointer-events:none}
.galleria figure .eti .n{display:block;font-size:9px;font-weight:500;letter-spacing:.26em;opacity:.75;margin:0 0 .15rem}
.galleria figure .eti h2{margin:0;color:#fff;font-weight:500;font-size:15px;line-height:1.25;letter-spacing:0}
.freccia{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:46px;height:46px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  border:0;border-radius:50%;background:rgba(250,250,249,.88);color:#16171A;font-size:17px;
  cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.16)}
.freccia.sx{left:.7rem}
.freccia.dx{right:.7rem}

@media(max-width:620px){.freccia{width:36px;height:36px;font-size:15px}}

[data-mod]{outline:1px dashed rgba(22,23,26,.4);outline-offset:3px;
  -webkit-user-select:text;user-select:text;cursor:text}
[data-mod]:focus{outline:2px solid #16171A;background:rgba(255,255,255,.7)}

/* ── testo di progetto e riga dati ── */
.testo{padding-block:clamp(2rem,6vw,3.4rem)}
.testo .lead{font-size:clamp(19px,4.4vw,26px);font-weight:400;line-height:1.34;
  letter-spacing:-.022em;margin-bottom:1.5rem}
.dati-p{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem 1.2rem;
  padding-inline:var(--gutter);margin:0 0 clamp(1.6rem,5vw,2.6rem)}
.dati-p div{border-top:1px solid var(--linea);padding-top:.6rem}
.dati-p dt{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--grigio)}
.dati-p dd{margin:.3rem 0 0;font-size:15px;font-weight:400;line-height:1.4}
.dati-p dd.vuoto{color:#C4C3BC}

/* ── comparsa allo scorrimento ── */
.rvl{opacity:0;transform:translateY(30px);
  transition:opacity 1.05s cubic-bezier(.16,.84,.3,1),transform 1.15s cubic-bezier(.16,.84,.3,1)}
.rvl.on{opacity:1;transform:none}

/* ── parallasse: l'immagine scorre piu lenta della pagina ── */
.par{overflow:hidden;position:relative}
.par img{transform:scale(1.16);will-change:transform;transition:none}

/* ── filo di avanzamento in cima ── */
#avanz{position:fixed;top:0;left:0;height:2px;width:0;z-index:99;
  background:#fff;mix-blend-mode:difference;pointer-events:none}

/* ── anello che insegue il puntatore (solo desktop) ── */
#anello{position:fixed;top:0;left:0;width:26px;height:26px;border:1px solid #fff;border-radius:50%;
  z-index:98;pointer-events:none;mix-blend-mode:difference;opacity:0;
  transform:translate(-50%,-50%);transition:width .45s cubic-bezier(.16,.84,.3,1),
  height .45s cubic-bezier(.16,.84,.3,1),opacity .35s}
#anello.grande{width:84px;height:84px}
@media(hover:none),(pointer:coarse){#anello{display:none}}

/* ── titolo di copertina che si allontana ── */
.hero-txt{will-change:transform,opacity}

/* ── ingresso lento della copertina ── */
@keyframes entra{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero>img,.hero>video{animation:entra 2.6s cubic-bezier(.16,.84,.3,1) both}

/* ── filetto che cresce sotto le etichette ── */
.occhiello{position:relative;padding-bottom:.7rem}
.occhiello::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--linea);transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s cubic-bezier(.16,.84,.3,1) .15s}
.rvl.on.occhiello::after,.on .occhiello::after{transform:scaleX(1)}

/* ── righe dell'indice: freccia che entra ── */
.riga{transition:background .4s,padding-left .4s}
.riga:hover{padding-left:.5rem}

/* ── l'immagine riempie sempre il contenitore: mai fondo scoperto ── */
.med.alta .par{height:100%}
.med.alta .par img{height:100%;object-fit:cover}
.serie .med,.serie figure,.disegno{background:#FAFAF9}
.hero{background:#FAFAF9}

/* ── ogni blocco tocca i bordi, video compreso ── */
.serie .med{max-width:none;margin-inline:0}
.serie .med video{width:100%;height:auto;display:block}

/* ── i disegni stanno su fondo bianco, mai nero ── */
.disegni,.disegno,.disegno img{background:#fff}
.serie .med>img,.serie .med>video,.serie .med .par>img{display:block}

/* ── su telefono nessun ritaglio in altezza: niente fondo nero scoperto ── */
@media(max-width:620px){
  .duo .med.alta{height:auto}
  .duo .med.alta img,.duo .med.alta .par img{height:auto;object-fit:fill}
  .med.alta .par{height:auto}
}

@media(prefers-reduced-motion:reduce){
  .rvl{opacity:1!important;transform:none!important;transition:none!important}
  .par img{transform:none!important}
  .hero>img,.hero>video{animation:none}
  #anello,#avanz{display:none}
  .occhiello::after{transform:scaleX(1)!important}
}

/* ── la veste: accento ottanio, numero di copertina, zoom allo scorrimento ── */
:root{--accento:#B4552F;--accento-chiaro:#E08A5F}

/* l'accento sta sulle etichette, sui filetti e sui numeri. Mai sulle immagini. */
/* .testa-p .occhiello ha due classi e vincerebbe su .occhiello da sola: va nominata */
.occhiello,.testa-p .occhiello{color:var(--accento)}
.occhiello::after{background:var(--accento)}
.riga .n,.anno .num,.voce .n,.dati-p dt{color:var(--accento)}
.disegno figcaption,.galleria figure.disegno figcaption{color:var(--accento)}
.tutti{border-bottom-color:var(--accento);color:var(--accento)}
/* su fondo scuro l'ottanio pieno non si leggerebbe: serve la sua versione chiara */
.hero-txt .occhio,.apertura .occhio,.med .eti .n,.tes .cat{color:var(--accento-chiaro)}
.tes .premio{border-color:var(--accento-chiaro);color:var(--accento-chiaro)}
.menu .lingue b{border-bottom-color:var(--accento-chiaro);color:var(--accento-chiaro)}

/* il numero del progetto, grande, in un angolo della copertina */
.hero{position:relative}
.hero .numerone{position:absolute;right:clamp(.5rem,2.6vw,2.2rem);bottom:.35rem;z-index:1;
  pointer-events:none;font-weight:500;font-size:clamp(88px,19vw,232px);line-height:.78;
  letter-spacing:-.055em;color:#fff;opacity:.2;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 34px rgba(0,0,0,.4)}
@media(max-width:860px){
  .hero .numerone{font-size:clamp(70px,23vw,124px);bottom:.25rem;opacity:.26}
}
/* L'accento regge sul fondo chiaro e sul nero pieno, non sopra una fotografia:
   da tablet in su l'occhiello di copertina sta sull'immagine e torna bianco. */
.hero-txt .occhio,.apertura .occhio{opacity:1}
@media(min-width:860px){
  .hero-txt .occhio,.apertura .occhio{color:#fff;opacity:.92}
}

/* La copertina cresce piano mentre si scorre. Il valore lo muove il copione su una
   cornice attorno all'immagine: l'ingresso resta all'immagine, e le due trasformazioni
   non si pestano i piedi. */
.hero .zoom{display:block;will-change:transform;transform:scale(var(--z,1))}
@media(min-width:860px){.hero .zoom{position:absolute;inset:0}}
.hero img,.hero video{animation:entra 2.6s cubic-bezier(.16,.84,.3,1) both}

/* La scheda di Mogliano e' l'unica che tiene l'intestazione DENTRO la copertina.
   La regola che stende la fotografia a tutto schermo (.hero img: position absolute,
   inset 0, height 100%, object-fit cover) prendeva anche il marchio, e lo disegnava
   1258 px di larghezza sopra l'immagine. Il marchio non e' la copertina: torna
   statico, nelle sue proporzioni, e piccolo — sta sopra una fotografia, non
   dentro la barra nera. */
.hero header .marchio{width:clamp(120px,14vw,170px);display:block;line-height:0}
.hero header .marchio img{position:static;inset:auto;width:100%;height:auto;
  object-fit:contain;animation:none}

/* La nota sul repertorio, in fondo a Lo studio. Sostituisce la fascia dei contatori:
   i numeri dichiaravano un totale, e un totale basso racconta lo studio meno di quello
   che e'. Detta piano, in coda ai marchi dei premi, suona piu' sicura che dichiarata in
   mezzo alla pagina. Il grigio e' schiarito quanto basta a restare sopra 4,5:1 sul fondo
   chiaro: quello della veste (#83857E) sta a 3,6:1 e a questo corpo non si leggerebbe. */
.nota-repertorio{margin:0;padding-inline:var(--gutter);
  padding-block:0 clamp(2.6rem,7vw,4.2rem);
  font-size:13px;font-weight:300;line-height:1.6;letter-spacing:.005em;
  color:#6E7069;max-width:62ch}

/* La pagina Servizi e' l'unica del sito senza nemmeno una fotografia, e il
   numero di ogni voce stava a 10,5 px: non faceva da ancora, e la griglia
   diventava un muro di testo piccolo. Portato alla scala di un elemento
   tipografico vero, in cotto, da' alla pagina il ritmo e il calore che le
   mancavano. Il filetto che cresce sotto e' lo stesso segno delle sezioni
   numerate della pagina Lo studio: non e' un'invenzione nuova. */
.voci .voce .n{font-size:clamp(32px,5.2vw,52px);font-weight:400;letter-spacing:-.045em;
  line-height:1;color:var(--accento);margin-bottom:1rem;padding-bottom:.9rem;position:relative}
.voci .voce .n::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:52px;
  background:var(--accento);transform:scaleX(0);transform-origin:left;
  transition:transform .95s cubic-bezier(.16,.84,.3,1) .12s}
.voci .voce.on .n::after{transform:scaleX(1)}
/* Chi ha ridotto i movimenti vede il filetto gia' disteso, non un moncone. */
@media(prefers-reduced-motion:reduce){.voci .voce .n::after{transform:none}}

/* La PEC nel pie' di pagina: la regola generale toglie ai link colore e sottolineatura,
   e li' dentro l'indirizzo sembrerebbe testo morto. Un filetto discreto basta a dire
   che si puo' cliccare, senza chiamare l'occhio piu' del dovuto. */
footer a{border-bottom:1px solid currentColor;padding-bottom:1px}

/* Sotto i 1000 px la barra flottante sale a 4,9rem dal fondo e con la sua altezza
   occupa gli ultimi 117 px dello schermo, mentre il pie' di pagina ne riservava 57:
   su telefono copriva tutte le righe, partita IVA compresa. Che e' proprio il dato
   che la legge chiede di tenere leggibile. */
@media(max-width:1000px){footer{padding-bottom:9rem}}
/* == fine news-premio-casa-immersiva == */
/* == stili news == */
:root{--bianco:#FAFAF9;--nero:#0E0E0E;--ink:#16171A;--grigio:#83857E;--linea:#E1E0DB;
  --gutter:clamp(1.5rem,6vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bianco);color:var(--ink);
  font:300 17px/1.72 'Archivo',system-ui,sans-serif;font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.barra{background:var(--nero);color:#fff;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-block:1rem;padding-inline:var(--gutter)}
.marchio{font-size:clamp(17px,3.6vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.marchio small{display:block;font-size:8.5px;font-weight:400;letter-spacing:.2em;opacity:.8;margin-top:.28rem}
.burger{background:none;border:0;padding:.4rem;cursor:pointer;display:grid;gap:5px}
.burger i{display:block;width:30px;height:2px;background:#fff}
.credstrip{display:flex;gap:.45rem;flex-wrap:wrap;padding-block:.9rem;padding-inline:var(--gutter);
  border-bottom:1px solid var(--linea)}
.credstrip span{font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio);border:1px solid var(--linea);padding:.32rem .5rem;line-height:1.3}
.menu{position:fixed;inset:0;z-index:80;background:var(--nero);color:#fff;display:none;flex-direction:column;
  justify-content:center;padding-block:2rem;padding-inline:var(--gutter)}
.menu.on{display:flex}
.menu a{font-size:clamp(24px,5vw,34px);font-weight:500;letter-spacing:-.02em;padding:.3rem 0}
.menu .lingue{margin-top:2.4rem;display:flex;gap:1.2rem;font-size:11px;font-weight:500;letter-spacing:.2em}
.menu .lingue b{border-bottom:1px solid #fff;padding-bottom:2px}
.menu .chiudi{position:absolute;top:1.2rem;right:var(--gutter);background:none;border:0;color:#fff;
  font-size:32px;cursor:pointer;line-height:1}

.hero{position:relative;background:#0E0E0E;overflow:hidden}
.hero-txt{background:#0E0E0E;color:#fff;padding-inline:var(--gutter);padding-block:1.4rem 1.9rem;max-width:32ch}
.hero-txt .occhio{font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 .55rem;opacity:.85}
.hero-txt h1{font-weight:500;font-size:clamp(30px,5.2vw,54px);line-height:1.06;margin:0;letter-spacing:-.03em}
@media(min-width:860px){
  .hero{min-height:78svh;display:flex;align-items:flex-end}
  .hero img{position:absolute;inset:0;height:100%;object-fit:cover}
  .hero-txt{position:relative;background:none;padding-block:0 clamp(1.8rem,6vw,3.2rem);max-width:24ch;
    text-shadow:0 2px 22px rgba(0,0,0,.5)}
}

.colonna{max-width:68ch;margin:0 auto;padding-inline:var(--gutter)}
.occhiello{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--grigio);margin:0 0 .9rem}
p{margin:0 0 1.15rem}
.blocco{padding-block:clamp(2.6rem,7vw,4.6rem)}

.serie{display:grid;gap:4px;margin-block:clamp(1.4rem,4vw,2.4rem)}
.med{position:relative;margin:0;background:#0E0E0E;overflow:hidden}
.med.alta{height:88svh}
.med.alta img{height:100%;object-fit:cover}
.med.tit::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.62) 100%)}
.med .eti{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding-inline:var(--gutter);padding-bottom:clamp(1.3rem,4vw,2.6rem)}
.med .eti .n{display:block;font-size:9.5px;font-weight:500;letter-spacing:.26em;opacity:.65;margin-bottom:.45rem}
.med .eti h2{margin:0;color:#fff;font-weight:500;font-size:clamp(20px,3vw,34px);
  letter-spacing:-.035em;line-height:.98}

.disegni{background:#fff;padding:clamp(1.6rem,5vw,3.2rem) var(--gutter);
  display:flex;align-items:flex-end;gap:clamp(1.4rem,4vw,3.2rem)}
.disegni .disegno{flex-basis:0;min-width:0}
@media(max-width:680px){.disegni{display:grid;grid-template-columns:1fr;gap:2rem}}
.disegno{background:#fff;margin:0}
.disegno img{width:100%;height:auto;background:#fff}
.disegno figcaption{margin:.9rem 0 0;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grigio)}

.contatti{background:var(--nero);color:#fff;padding-block:clamp(2.8rem,8vw,5rem);padding-inline:var(--gutter);
  margin-top:clamp(2.6rem,7vw,4rem)}
.contatti h2{font-weight:500;font-size:clamp(24px,5.6vw,38px);letter-spacing:-.028em;margin:0 0 1.7rem;color:#fff}
.pill{display:block;background:#fff;color:var(--nero);border-radius:100px;text-align:center;
  padding:1.05rem 1rem;font-size:13.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;max-width:420px}
.contatti .righe{margin-top:2rem;font-size:14px;line-height:2;color:#c6c7c1}
footer{padding-inline:var(--gutter);padding-block:1.7rem 3.6rem;font-size:10.5px;letter-spacing:.1em;
  color:var(--grigio);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.wa{position:fixed;right:clamp(.8rem,3vw,1.6rem);bottom:clamp(.9rem,3vw,1.8rem);z-index:70;background:var(--nero);
  color:#fff;border-radius:100px;display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;
  font-size:13.5px;font-weight:500;letter-spacing:.04em;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.wa svg{width:19px;height:19px;fill:#fff}
/* il marchio disegnato prende il posto della scritta */
.marchio{display:block;width:clamp(168px,42vw,272px);line-height:0}
.marchio img{display:block;width:100%;height:auto}
.barra{padding-block:.8rem}


.testa-p{padding-inline:var(--gutter);padding-block:clamp(2.4rem,8vw,5rem) clamp(1rem,3vw,1.6rem)}
.testa-p .occhiello{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--grigio);margin:0 0 1rem}
.testa-p h1{font-weight:500;font-size:clamp(32px,6vw,58px);line-height:1.06;margin:0;letter-spacing:-.03em}
.testa-p .data{margin:1.1rem 0 0;font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grigio)}

/* l'indice delle notizie */
.notizie{padding-inline:var(--gutter);padding-bottom:clamp(2rem,6vw,3.4rem)}
.notizia{display:grid;grid-template-columns:118px 1fr;gap:1.2rem;align-items:start;
  padding-block:1.1rem;border-top:1px solid var(--linea);transition:background .3s}
.notizie > :last-child{border-bottom:1px solid var(--linea)}
a.notizia:hover{background:#F2F1ED}
@media(min-width:760px){.notizia{grid-template-columns:190px 1fr;gap:2rem}}
.notizia .fig{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:#EDECE7}
.notizia .fig img{width:100%;height:100%;object-fit:cover;display:block}
.notizia .data{display:block;font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accento);margin-bottom:.5rem}
.notizia h2{margin:0;font-weight:500;font-size:clamp(17px,3.6vw,22px);line-height:1.22;letter-spacing:-.022em}
.notizia p{margin:.6rem 0 0;font-size:15px;line-height:1.6;color:#4A4C46;max-width:62ch}

/* la singola notizia */
.aperta{margin:0;background:#0E0E0E}
.aperta img{width:100%;height:auto;display:block;max-height:76svh;object-fit:cover}
.articolo{padding-inline:var(--gutter);padding-block:clamp(1.8rem,5vw,3rem)}
.articolo p{max-width:66ch;margin:0 0 1.15rem}
.articolo .crediti{font-size:15px;line-height:2;color:#3D3F3A}
.articolo .crediti b{font-weight:500;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accento)}
.articolo h2{margin:2.2rem 0 .9rem;font-weight:500;font-size:clamp(20px,4.4vw,28px);
  line-height:1.14;letter-spacing:-.026em;max-width:26ch}
.articolo h2:first-child{margin-top:0}
.articolo p:first-of-type{font-size:clamp(18px,4vw,23px);font-weight:400;line-height:1.38;
  letter-spacing:-.02em;margin-bottom:1.5rem}
/* Le immagini in coda all'articolo: una riga sola, piccole e intere.
   Qui convivono disegni e fotografie, con proporzioni da 0,71 a 1,78: la costante e'
   l'altezza, la larghezza la decide ogni immagine. Prima erano ritagliate a 4:3 su due
   colonne larghe, e i disegni ci perdevano la legenda: i disegni non si ritagliano mai.
   Su schermo stretto la riga va a capo: tre disegni affiancati su un telefono
   sarebbero larghi cento pixel, cioe' illeggibili. */
.altre{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-start;
  padding-inline:var(--gutter);padding-bottom:clamp(1.6rem,5vw,2.6rem)}
.altre img{width:auto;height:clamp(150px,24vw,230px);object-fit:contain;display:block;
  background:#EDECE7}
/* i marchi dei premi: piccoli, interi, su fondo bianco. Non sono fotografie. */
.marchi{display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2rem);align-items:center;
  padding-inline:var(--gutter);padding-block:0 clamp(1.6rem,5vw,2.6rem)}
.marchi img{width:auto;height:clamp(84px,14vw,116px);max-width:150px;object-fit:contain;display:block}
.notizia .fig.contiene{background:#fff;display:flex;align-items:center;justify-content:center}
.notizia .fig.contiene img{width:auto;height:auto;max-width:78%;max-height:78%;object-fit:contain}

.fonte{margin:0;padding-inline:var(--gutter);padding-block:0 clamp(1.4rem,4vw,2.2rem);
  max-width:70ch;font-size:13px;line-height:1.6;color:var(--grigio);
  border-top:1px solid var(--linea);padding-top:1.1rem}
.fonte a{border-bottom:1px solid var(--accento);color:var(--accento)}

.indietro{display:inline-block;padding-inline:var(--gutter);margin-bottom:clamp(1.6rem,5vw,2.6rem);
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accento);
  border-bottom:1px solid var(--accento);padding-bottom:3px}
/* == fine news == */








/* == home: progetti in evidenza (parola, frase, colonne in parallasse) == */
.lavoro-d{overflow:hidden;padding-bottom:0}
.lavoro-d .frase{font-size:clamp(19px,2.4vw,28px);line-height:1.3;letter-spacing:-.015em;font-weight:400;margin:1rem 0 0;max-width:30ch}
.lavoro-d .frase i{font-style:normal;color:#C9C8C2;transition:color .25s}
.lavoro-d .frase i.on{color:var(--ink)}
.lavoro-d .mas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,2.4vw,2rem);padding-inline:var(--gutter);margin-top:clamp(2.6rem,7vw,5rem);align-items:start}
.lavoro-d .col{display:grid;gap:clamp(2rem,6vw,4.5rem);will-change:transform}
.lavoro-d .col:nth-child(2){padding-top:clamp(4rem,12vw,9rem)}
.lavoro-d .col:nth-child(3){padding-top:clamp(1.5rem,5vw,3.5rem)}
.lavoro-d .op{display:block}
.lavoro-d .rev{position:relative;overflow:hidden;background:#E9E8E3;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.16,.84,.3,1)}
.lavoro-d .rev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 1.6s cubic-bezier(.16,.84,.3,1)}
.lavoro-d .rev.in{clip-path:inset(0 0 0 0)} .lavoro-d .rev.in img{transform:none}
.lavoro-d .op:hover .rev img{transform:scale(1.05)}
.lavoro-d .did{margin-top:.7rem;font-size:14px;line-height:1.4}
.lavoro-d .did b{display:block;font-weight:500}
.lavoro-d .did span{color:var(--grigio);font-size:12.5px}
/* home: verticali che sfumano (scelta di Giulia, 24 set 2026) */
.lavoro-d .mas.vert-d{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.6rem);padding-inline:var(--gutter);margin-top:clamp(2.6rem,7vw,5rem);align-items:start}
.vert-d .pv{display:block;--a:0;--b:0}
.vert-d .pv-img{aspect-ratio:2/3;max-height:82vh;overflow:hidden;-webkit-mask-image:linear-gradient(to top,#000 calc(var(--a)*140% - 40%),transparent calc(var(--a)*140%)),linear-gradient(to bottom,transparent calc(var(--b)*140% - 40%),#000 calc(var(--b)*140%));-webkit-mask-composite:source-in;mask-composite:intersect;mask-image:linear-gradient(to top,#000 calc(var(--a)*140% - 40%),transparent calc(var(--a)*140%)),linear-gradient(to bottom,transparent calc(var(--b)*140% - 40%),#000 calc(var(--b)*140%))}
.vert-d .pv-img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(calc(1.12 - var(--a)*.12));filter:blur(calc((1 - var(--a))*8px))}
.vert-d .did{margin-top:.8rem;font-size:14px;line-height:1.4;opacity:calc(var(--a) - var(--b)*1.6)}
.vert-d .did b{display:block;font-weight:500} .vert-d .did span{color:var(--grigio);font-size:12.5px}
.vert-d .pv:nth-child(2){margin-top:clamp(2rem,8vw,7rem)} .vert-d .pv:nth-child(3){margin-top:clamp(4rem,16vw,14rem)}
@media(max-width:700px){.lavoro-d .mas.vert-d{grid-template-columns:1fr;gap:3rem}.vert-d .pv:nth-child(n){margin-top:0}.vert-d .pv-img{aspect-ratio:4/5}}
@media(prefers-reduced-motion:reduce){.vert-d .pv{--a:1!important;--b:0!important}}
/* home: fascia Interior, immagine con i margini e testo sotto a destra (sul modello di studioeigen.com, 24 set 2026) */
.scena-int{margin-top:clamp(1.8rem,3.5vw,2.8rem);padding-inline:var(--gutter)}
.scena-int .scena-cornice{position:relative;overflow:hidden;aspect-ratio:2.07/1;max-height:84vh;background:#0E0E0E}
.scena-int .scena-img{position:absolute;inset:0;transform:scale(var(--zs,1.12));will-change:transform}
.scena-int img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.scena-int .scena-testo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:clamp(1.8rem,4.5vw,3.2rem)}
.scena-int .scena-testo > div{grid-column:2;max-width:36rem}
.scena-int .scena-testo p{margin:0 0 1.5rem;font-size:clamp(15px,1.2vw,17px);line-height:1.6;font-weight:400;color:var(--ink)}
.scena-int .pill{display:inline-flex;width:auto;min-width:0;flex:0 0 auto;background:transparent;border:1px solid var(--ink);color:var(--ink);box-shadow:none}
.scena-int .pill:hover{background:var(--ink);color:#fff}
/* le fasce con il testo di fianco all'immagine (7 ottobre 2026): progetti con il testo a destra, Interior a sinistra */
.scena-int.scena-lato{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--gutter);align-items:center}
.scena-lato.scena-sx{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
/* l'immagine parte scoperta per tre quarti, dal lato del testo, e si scopre tutta scorrendo (--rv da 0 a 1, dal copione) */
.scena-lato .scena-cornice{aspect-ratio:1.6/1;max-height:84vh;--rv:1;clip-path:inset(0 calc((1 - var(--rv))*25%) 0 0)}
.scena-lato.scena-sx .scena-cornice{clip-path:inset(0 0 0 calc((1 - var(--rv))*25%))}
@media(prefers-reduced-motion:reduce){.scena-lato .scena-cornice,.scena-lato.scena-sx .scena-cornice{clip-path:none}}
.scena-lato .scena-testo{display:block;margin-top:0;padding-bottom:.4rem}
.scena-lato .scena-testo > div{max-width:30rem}
.scena-lato.scena-sx .scena-cornice{order:2}
.scena-lato.scena-sx .scena-testo{order:1}
@media(max-width:700px){
  .scena-int.scena-lato{grid-template-columns:1fr;gap:1.4rem}
  .scena-lato .scena-cornice,.scena-lato.scena-sx .scena-cornice{aspect-ratio:4/3;order:1;clip-path:none}
  .scena-lato .scena-testo,.scena-lato.scena-sx .scena-testo{order:2}
}
@media(max-width:700px){.scena-int .scena-cornice{aspect-ratio:4/3}.scena-int .scena-testo{grid-template-columns:1fr}.scena-int .scena-testo > div{grid-column:1}}
@media(prefers-reduced-motion:reduce){.scena-int .scena-img{transform:none}}
/* home: servizi a scala, sul modello di studioeigen.com (24 set 2026) */
.servizi-d{margin-top:clamp(3rem,6vw,4.5rem);overflow-x:clip}
.servizi-d .sv-testa{padding-inline:var(--gutter);max-width:48ch}
.servizi-d .sv-testa h2{margin-bottom:0}
.servizi-d .sv-righe{padding-inline:var(--gutter);margin-top:clamp(1.8rem,4vw,2.8rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.5vw,2.2rem) clamp(1rem,2vw,1.8rem)}
.servizi-d .sv-riga{display:grid;grid-template-rows:auto 1fr;gap:1rem;align-items:start}
.servizi-d .sv-img{grid-row:1;display:block}
.servizi-d .sv-testo{grid-row:2;padding-top:0}
@media(max-width:900px){.servizi-d .sv-righe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.servizi-d .sv-righe{grid-template-columns:1fr}}
.servizi-d .sv-num{display:block;font-size:11px;font-weight:500;letter-spacing:.26em;color:#B4552F;margin-bottom:.8rem}
.servizi-d h3{margin:0 0 .7rem;font-size:clamp(19px,1.5vw,22px);line-height:1.2;letter-spacing:-.015em;font-weight:500}
.servizi-d .sv-frase{margin:0 0 1.2rem;font-size:clamp(14px,1.05vw,15.5px);line-height:1.55}
.servizi-d .sv-frase i{font-style:normal;color:#C9C8C2;transition:color .25s}
.servizi-d .sv-frase i.on{color:var(--ink)}
.servizi-d .sv-pill{display:inline-flex;width:auto;background:transparent;border:1px solid var(--ink);color:var(--ink)}
.servizi-d .sv-pill:hover{background:var(--ink);color:#fff}
.servizi-d .rev{position:relative;aspect-ratio:1/1;overflow:hidden;background:#E9E8E3;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.16,.84,.3,1)}
.servizi-d .rev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 1.6s cubic-bezier(.16,.84,.3,1)}
.servizi-d .rev.in{clip-path:inset(0 0 0 0)} .servizi-d .rev.in img{transform:none}
.servizi-d .sv-img:hover img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.servizi-d .rev{clip-path:none}.servizi-d .rev img{transform:none}.servizi-d .sv-frase i{color:var(--ink)}}
/* home: premi e riconoscimenti, fascia nera (28 set 2026) */
.premi-d{margin-top:clamp(3rem,6vw,4.5rem);background:#0E0E0E;color:#F3F2EE;padding:clamp(2.6rem,5vw,3.8rem) var(--gutter) clamp(2.6rem,5vw,3.8rem)}
.premi-d .pr-occ{margin:0 0 1.4rem;font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#E08A5F}
.premi-d h2{margin:0;font-size:clamp(26px,3vw,40px);line-height:1.15;letter-spacing:-.025em;font-weight:500;max-width:22ch;color:#fff}
.premi-d .pr-lead{margin:0 0 .5rem;max-width:36rem;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:#C9C8C2}
/* 8 ottobre 2026, Giulia: il paragrafo accanto al titolo, nello spazio a destra dell'ultima riga, allineato in basso */
.premi-d .pr-testa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34rem);column-gap:clamp(1rem,3vw,2.5rem);align-items:end}
.premi-d .pr-occ{grid-column:1/-1}
/* sotto i 1360 px la colonna del titolo non basta a «pubblicazioni.» e i due testi si sovrappongono (Giulia, 8 ott): si torna in colonna */
@media(max-width:1360px){.premi-d .pr-testa{grid-template-columns:1fr}.premi-d .pr-lead{margin-top:clamp(1.6rem,3.5vw,2.6rem)}}
.premi-d .pr-numeri{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2.5rem);margin-top:clamp(1.8rem,3.5vw,2.8rem);border-top:1px solid rgba(255,255,255,.18);padding-top:clamp(1.2rem,2.5vw,1.8rem)}
.premi-d .pr-numeri b{display:block;font-size:clamp(40px,5.5vw,84px);line-height:.9;font-weight:500;letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums}
.premi-d .pr-numeri span{display:block;margin-top:.9rem;font-size:13px;line-height:1.45;letter-spacing:.04em;color:#A9A8A2}
.premi-d .pr-marchi{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.6rem);margin-top:clamp(1.8rem,3.5vw,2.8rem);align-items:center}
.premi-d .pr-m{margin:0;min-width:0;height:clamp(56px,6.5vw,96px);display:flex;align-items:center;justify-content:center}
.premi-d .pr-m:nth-child(5){grid-column:span 2}
.premi-d .pr-m img{display:block;width:100%;height:100%;object-fit:contain;opacity:.88}
.premi-d .pr-elenco{margin-top:clamp(1.8rem,3.5vw,2.8rem);border-top:1px solid rgba(255,255,255,.18)}
.premi-d .pr-r{display:grid;grid-template-columns:minmax(7rem,1.1fr) 2fr 3fr 2rem;gap:clamp(.8rem,2vw,2rem);align-items:baseline;padding:clamp(.8rem,1.4vw,1.1rem) 0;border-bottom:1px solid rgba(255,255,255,.18);color:inherit;text-decoration:none;transition:background .3s,padding .3s}
.premi-d a.pr-r:hover{background:rgba(255,255,255,.04);padding-left:.8rem}
.premi-d .pr-a{font-size:13px;letter-spacing:.12em;color:#E08A5F}
.premi-d .pr-t{font-size:clamp(22px,2.6vw,38px);line-height:1.05;letter-spacing:-.02em;font-weight:500;color:#fff}
.premi-d .pr-p{font-size:14px;line-height:1.5;color:#A9A8A2}
.premi-d .pr-p i{font-style:italic}
.premi-d .pr-f{font-size:18px;color:#E08A5F;text-align:right}
@media(max-width:900px){.premi-d .pr-numeri{grid-template-columns:1fr 1fr;row-gap:2.2rem}.premi-d .pr-marchi{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:2rem}
  .premi-d .pr-m{height:clamp(44px,12vw,64px)}.premi-d .pr-r{grid-template-columns:5.5rem 1fr 1.4rem}.premi-d .pr-p{grid-column:2/3}}
@media(max-width:1000px){.premi-d{padding-bottom:9rem}}
.lavoro-d .azioni{padding-top:clamp(2.6rem,7vw,5rem)}
.lavoro-d ~ .blocco{padding-block:clamp(2rem,4.5vw,3rem)}
.lavoro-d ~ .contatti{padding-block:clamp(2.2rem,5vw,3.4rem);margin-top:clamp(2rem,4.5vw,3rem)}
/* servizi: una voce dispari in fondo occupa tutta la riga; la fascia agrivoltaico in home */
.voci .voce:last-child:nth-child(odd){grid-column:1/-1}
.voci .voce:last-child:nth-child(odd) p{max-width:72ch}
.scena-fv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.8rem);align-items:center;margin-top:clamp(2rem,4vw,2.8rem)}
.scena-fv .scena-cornice{aspect-ratio:2.1/1;max-height:none}
.scena-fv .scena-cornice img{object-position:50% 55%}
.scena-fv .scena-testo{display:block;margin-top:0}
.scena-fv .scena-testo > div{max-width:30rem}
@media(max-width:700px){.scena-fv{grid-template-columns:1fr;gap:1.4rem}.scena-fv .scena-cornice{aspect-ratio:4/3}}
/* agrivoltaico e masserie affiancate sulla stessa riga: in ogni meta' l'immagine piccola a sinistra e il testo di fianco (Giulia, 16 ott 2026) */
.scena-coppia{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3.5vw,3.2rem);padding-inline:var(--gutter);margin-top:clamp(2rem,4vw,2.8rem)}
.scena-coppia .scena-fv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(.9rem,1.6vw,1.4rem);align-items:center;padding-inline:0;margin-top:0}
.scena-coppia .scena-fv .scena-cornice{aspect-ratio:1.25/1}
.scena-coppia .scena-fv .scena-testo{margin-top:0}
.scena-coppia .scena-fv .scena-testo > div{max-width:none}
.scena-coppia .scena-fv .scena-testo p{font-size:clamp(13.5px,1vw,15px);line-height:1.55;margin-bottom:1rem}
.scena-coppia .scena-fv .pill{font-size:10px;padding:.7em 1.2em}
@media(max-width:1000px){.scena-coppia{grid-template-columns:1fr;gap:2rem}}
@media(max-width:700px){.scena-coppia .scena-fv{grid-template-columns:1fr}.scena-coppia .scena-fv .scena-cornice{aspect-ratio:4/3}}
/* striscia dei riconoscimenti: nera come la barra, pillole tonde bianche (Giulia, 9 ott 2026) */
.credstrip{background:var(--nero);border-bottom:0;padding-block:.2rem 1rem;gap:.5rem}
.credstrip span{color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:100px;padding:.5rem .95rem;font-size:9px;letter-spacing:.16em}
@media(max-width:700px){.lavoro-d .mas{grid-template-columns:1fr 1fr}.lavoro-d .col{transform:none!important}.lavoro-d .col:nth-child(2){padding-top:3rem}.lavoro-d .col:nth-child(3){grid-column:1/3;padding-top:0}.lavoro-d .col:nth-child(3) .rev{aspect-ratio:4/3!important}}
@media(prefers-reduced-motion:reduce){.lavoro-d .rev{clip-path:none}.lavoro-d .rev img{transform:none}.lavoro-d .frase i{color:var(--ink)}}
/* == fine home == */
















/* == stili news-premio-san-marco == */
/* la motivazione di un premio, citata parola per parola (San Marco) */
.articolo blockquote{margin:.4rem 0 1.6rem;padding:.2rem 0 .2rem 1.3rem;border-left:2px solid var(--accento);max-width:66ch}
.articolo blockquote p,.articolo blockquote p:first-of-type{font-size:inherit;font-weight:inherit;
  line-height:inherit;color:inherit;margin:0}
/* notizie a capitoli: l'esito sopra il titolo, le figure nel testo, il rimando alla scheda */
.articolo .esito{margin:2.9rem 0 .55rem;font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accento)}
.articolo .esito + h2{margin-top:0}
.articolo .fig-a{margin:1.5rem 0 2.1rem;max-width:760px}
.articolo .fig-a img{width:100%;height:auto;display:block;background:#EDECE7}
.articolo .fig-a figcaption{margin-top:.6rem;font-size:13px;line-height:1.5;color:var(--grigio);text-align:left}
.articolo .rimando{margin:-.6rem 0 1.4rem}
.articolo .rimando a{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accento);border-bottom:1px solid var(--accento);padding-bottom:3px}
/* un marchio largo (The Plan 2019) a 150 px non si leggeva: l'altezza resta la costante */
.marchi img{max-width:min(320px,100%)}

/* il catalogo si sfoglia come un libro. Su schermo largo ogni foglio porta due pagine, fronte e
   retro, e gira attorno al dorso: chiuso, il libro mostra la copertina al centro; aperto, le doppie
   pagine sono quelle stampate; in fondo resta il retro. Su telefono una pagina per volta.
   I fogli li costruisce il copione (movimento.py); senza copione le pagine restano in fila. */
.sfoglia{margin:0 0 clamp(1.6rem,5vw,2.6rem)}
.sfoglia .vista{position:relative;overflow:hidden;background:#E8E7E2;
  padding:clamp(1.4rem,3.5vw,2.8rem) clamp(3.4rem,6vw,5.5rem)}
.sfoglia .libro{position:relative;margin-inline:auto;width:min(100%,calc((100svh - 11rem) * 2.829));
  aspect-ratio:3200/1131;perspective:3400px;cursor:pointer;outline:none;touch-action:pan-y;
  transition:transform .9s cubic-bezier(.645,.045,.355,1)}
.sfoglia .libro:focus-visible{outline:2px solid var(--accento);outline-offset:8px}
.sfoglia .libro.chiuso-davanti{transform:translateX(-25%)}
.sfoglia .libro.chiuso-dietro{transform:translateX(25%)}
.sfoglia .carta{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:0 50%;
  transform-style:preserve-3d;transition:transform .9s cubic-bezier(.645,.045,.355,1)}
.sfoglia .carta.girata{transform:rotateY(-180deg)}
.sfoglia .faccia{position:absolute;inset:0;overflow:hidden;background:#fff;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 2px 16px rgba(0,0,0,.13)}
.sfoglia .faccia.retro{transform:rotateY(180deg)}
.sfoglia .faccia:empty{background:transparent;box-shadow:none}
.sfoglia .pag,.sfoglia .pag img{display:block;width:100%;height:100%}
.sfoglia .pag img{object-fit:contain}
/* la piega: un'ombra leggera verso il dorso, sulle due pagine */
.sfoglia .faccia::after{content:"";position:absolute;top:0;bottom:0;width:7%;pointer-events:none}
.sfoglia .fronte::after{left:0;background:linear-gradient(to right,rgba(0,0,0,.12),transparent)}
.sfoglia .retro::after{right:0;background:linear-gradient(to left,rgba(0,0,0,.12),transparent)}
.sfoglia .faccia:empty::after{display:none}
/* telefono: una pagina, che gira e sparisce a sinistra */
.sfoglia .libro.singola{width:100%;aspect-ratio:1600/1131;overflow:hidden;perspective:1800px}
.sfoglia .libro.singola .carta{left:0;width:100%}
.sfoglia .libro.singola .faccia::after{display:none}
@media(max-width:759px){.sfoglia .vista{padding-inline:0}}
/* senza copione: le pagine in fila, da scorrere */
.sfoglia .libro:not(.pronto){display:flex;overflow-x:auto;aspect-ratio:auto;perspective:none;cursor:auto}
.sfoglia .libro:not(.pronto) .pag{flex:0 0 50%;height:auto;aspect-ratio:1600/1131}
.sfoglia .freccia:disabled{opacity:.28;cursor:default}
.sfoglia .sotto{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:baseline;justify-content:space-between;
  padding:1rem var(--gutter) 0}
.sfoglia .conta{font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--grigio);
  font-variant-numeric:tabular-nums}
.sfoglia .azioni-s{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem}
.sfoglia .azioni-s a,.sfoglia .azioni-s button{font:inherit;font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accento);background:none;border:0;border-bottom:1px solid var(--accento);
  border-radius:0;padding:0 0 3px;cursor:pointer}
/* a schermo intero il libro sta su fondo scuro, grande quanto lo schermo permette */
.sfoglia:fullscreen{background:#151515;display:flex;flex-direction:column;justify-content:center}
.sfoglia:fullscreen .vista{background:transparent}
.sfoglia:fullscreen .libro:not(.singola){width:min(100%,calc((100vh - 8rem) * 2.829))}
.sfoglia:fullscreen .conta{color:#B9B8B2}
@media(prefers-reduced-motion:reduce){.sfoglia .libro,.sfoglia .carta{transition:none}}
/* == fine news-premio-san-marco == */

/* == stili anni == */
:root{--bianco:#FAFAF9;--nero:#0E0E0E;--ink:#16171A;--grigio:#83857E;--linea:#E1E0DB;
  --gutter:clamp(1.5rem,6vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bianco);color:var(--ink);
  font:300 17px/1.72 'Archivo',system-ui,sans-serif;font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.barra{background:var(--nero);color:#fff;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-block:1rem;padding-inline:var(--gutter)}
.marchio{font-size:clamp(17px,3.6vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.marchio small{display:block;font-size:8.5px;font-weight:400;letter-spacing:.2em;opacity:.8;margin-top:.28rem}
.burger{background:none;border:0;padding:.4rem;cursor:pointer;display:grid;gap:5px}
.burger i{display:block;width:30px;height:2px;background:#fff}
.credstrip{display:flex;gap:.45rem;flex-wrap:wrap;padding-block:.9rem;padding-inline:var(--gutter);
  border-bottom:1px solid var(--linea)}
.credstrip span{font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio);border:1px solid var(--linea);padding:.32rem .5rem;line-height:1.3}
.menu{position:fixed;inset:0;z-index:80;background:var(--nero);color:#fff;display:none;flex-direction:column;
  justify-content:center;padding-block:2rem;padding-inline:var(--gutter)}
.menu.on{display:flex}
.menu a{font-size:clamp(24px,5vw,34px);font-weight:500;letter-spacing:-.02em;padding:.3rem 0}
.menu .lingue{margin-top:2.4rem;display:flex;gap:1.2rem;font-size:11px;font-weight:500;letter-spacing:.2em}
.menu .lingue b{border-bottom:1px solid #fff;padding-bottom:2px}
.menu .chiudi{position:absolute;top:1.2rem;right:var(--gutter);background:none;border:0;color:#fff;
  font-size:32px;cursor:pointer;line-height:1}

.testa-anni{padding-inline:var(--gutter);padding-block:clamp(2.4rem,8vw,5rem) clamp(1.2rem,4vw,2rem)}
.testa-anni h1{font-weight:500;font-size:clamp(34px,6.5vw,64px);line-height:1.04;margin:0;letter-spacing:-.03em}
.testa-anni p{margin:1rem 0 0;color:var(--grigio);font-size:14px;letter-spacing:.02em;max-width:52ch}

/* l'elenco: una riga per progetto, dal piu' recente al primo */
.anni{padding-inline:var(--gutter);padding-bottom:clamp(2rem,6vw,3.5rem)}
.anno{display:grid;grid-template-columns:104px 1fr auto;gap:1rem;align-items:center;
  padding-block:.7rem;border-top:1px solid var(--linea);transition:background .3s}
.anni > :last-child{border-bottom:1px solid var(--linea)}
a.anno:hover{background:#F2F1ED}
.anno .num{font-size:11px;font-weight:500;color:var(--grigio);font-variant-numeric:tabular-nums}
.anno .fig{display:block;width:104px;height:68px;overflow:hidden;background:#EDECE7}
.anno .fig img{width:100%;height:100%;object-fit:cover}
.anno .voce{min-width:0}
.anno .voce b{display:block;font-size:clamp(15px,3.6vw,18px);font-weight:400;letter-spacing:-.014em;line-height:1.3}
.anno .voce i{display:block;font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grigio);margin-top:.25rem}
.anno .quando{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grigio);text-align:right;white-space:nowrap}
/* le schede non ancora fatte restano in elenco, ma spente */
.anno.spenta .voce b{color:#9A9C95}
@media(max-width:720px){
  .anno{grid-template-columns:78px 1fr;row-gap:.25rem}
  .anno .fig{width:78px;height:52px}
  .anno .quando{grid-column:2;text-align:left;margin-top:.1rem}
}

.contatti{background:var(--nero);color:#fff;padding-block:clamp(2.8rem,8vw,5rem);padding-inline:var(--gutter);
  margin-top:clamp(2.6rem,7vw,4rem)}
.contatti h2{font-weight:500;font-size:clamp(24px,5.6vw,38px);letter-spacing:-.028em;margin:0 0 1.7rem;color:#fff}
.pill{display:block;background:#fff;color:var(--nero);border-radius:100px;text-align:center;
  padding:1.05rem 1rem;font-size:13.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;max-width:420px}
.contatti .righe{margin-top:2rem;font-size:14px;line-height:2;color:#c6c7c1}
footer{padding-inline:var(--gutter);padding-block:1.7rem 3.6rem;font-size:10.5px;letter-spacing:.1em;
  color:var(--grigio);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.wa{position:fixed;right:clamp(.8rem,3vw,1.6rem);bottom:clamp(.9rem,3vw,1.8rem);z-index:70;background:var(--nero);
  color:#fff;border-radius:100px;display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;
  font-size:13.5px;font-weight:500;letter-spacing:.04em;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.wa svg{width:19px;height:19px;fill:#fff}
/* il marchio disegnato prende il posto della scritta */
.marchio{display:block;width:clamp(168px,42vw,272px);line-height:0}
.marchio img{display:block;width:100%;height:auto}
.barra{padding-block:.8rem}

/* == fine anni == */
/* == stili progetti == */
:root{--bianco:#FAFAF9;--nero:#0E0E0E;--ink:#16171A;--grigio:#83857E;--linea:#E1E0DB;
  --gutter:clamp(1.5rem,6vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bianco);color:var(--ink);
  font:300 17px/1.72 'Archivo',system-ui,sans-serif;font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.barra{background:var(--nero);color:#fff;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding-block:1rem;padding-inline:var(--gutter)}
.marchio{font-size:clamp(17px,3.6vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.marchio small{display:block;font-size:8.5px;font-weight:400;letter-spacing:.2em;opacity:.8;margin-top:.28rem}
.burger{background:none;border:0;padding:.4rem;cursor:pointer;display:grid;gap:5px}
.burger i{display:block;width:30px;height:2px;background:#fff}
.menu{position:fixed;inset:0;z-index:80;background:var(--nero);color:#fff;display:none;flex-direction:column;
  justify-content:center;padding-block:2rem;padding-inline:var(--gutter)}
.menu.on{display:flex}
.menu a{font-size:clamp(24px,5vw,34px);font-weight:500;letter-spacing:-.02em;padding:.3rem 0}
.menu .lingue{margin-top:2.4rem;display:flex;gap:1.2rem;font-size:11px;font-weight:500;letter-spacing:.2em}
.menu .lingue b{border-bottom:1px solid #fff;padding-bottom:2px}
.menu .chiudi{position:absolute;top:1.2rem;right:var(--gutter);background:none;border:0;color:#fff;
  font-size:32px;cursor:pointer;line-height:1}

.testa{padding-inline:var(--gutter);padding-block:clamp(2.4rem,8vw,5rem) clamp(1.2rem,4vw,2rem)}
.testa h1{font-weight:500;font-size:clamp(34px,6.5vw,64px);line-height:1.04;margin:0;letter-spacing:-.03em}
.testa p{margin:1rem 0 0;color:var(--grigio);font-size:14px;letter-spacing:.02em}

.filtri{display:flex;gap:.4rem;overflow-x:auto;padding-inline:var(--gutter);
  padding-block:.6rem clamp(1.2rem,4vw,2rem);-webkit-overflow-scrolling:touch}
.filtri::-webkit-scrollbar{display:none}
.filtri button{flex:0 0 auto;background:none;border:1px solid var(--linea);color:#4a4c46;
  border-radius:100px;padding:.55rem 1rem;font:500 11px/1 'Archivo',sans-serif;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:all .35s}
.filtri button[aria-pressed="true"]{background:var(--nero);border-color:var(--nero);color:#fff}

.griglia{display:grid;grid-template-columns:1fr;gap:6px;padding-inline:var(--gutter);padding-bottom:4rem}
@media(min-width:680px){.griglia{grid-template-columns:repeat(6,1fr)}}

.tes{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#1A1B1D;
  transition:opacity .5s,transform .5s}
.tes .im{position:absolute;inset:0}
.tes .im img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s cubic-bezier(.16,.84,.3,1)}
.tes::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%);transition:background .55s}
.tes .ov{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.2rem;color:#fff}
.tes .cat{display:block;font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  opacity:.72;margin-bottom:.3rem}
.tes h3{margin:0;font-weight:500;font-size:clamp(17px,3.2vw,21px);line-height:1.14;letter-spacing:-.022em}
.tes .premio{display:inline-block;border:1px solid rgba(255,255,255,.5);padding:.24rem .5rem;
  font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.6rem}
.tes.vuota{background:#16171A}
.tes.vuota::after{background:linear-gradient(150deg,#26282B,#131416)}

@media(hover:hover) and (pointer:fine){
  .tes:not(.vuota)::after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%)}
  .tes:not(.vuota) .ov{opacity:0;transform:translateY(16px);
    transition:opacity .5s,transform .75s cubic-bezier(.16,.84,.3,1)}
  .tes:not(.vuota):hover::after{background:rgba(12,12,13,.66)}
  .tes:not(.vuota):hover .ov{opacity:1;transform:none}
  .tes:not(.vuota):hover .im img{transform:scale(1.07)}
  .tes.vuota:hover .ov{transform:translateY(-4px);transition:transform .6s cubic-bezier(.16,.84,.3,1)}
}
.tes.via{opacity:0;transform:scale(.97);pointer-events:none;position:absolute;visibility:hidden}

footer{padding-inline:var(--gutter);padding-block:1.7rem 3.6rem;font-size:10.5px;letter-spacing:.1em;
  color:var(--grigio);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  border-top:1px solid var(--linea)}

/* righe alternate di due e tre tessere (8 ottobre 2026): griglia a sei colonne, «meta» ne prende tre e sta in 3:2,
   «terzo» ne prende due e resta in 4:3. In un blocco a parte perche' innesta.py porti nel file unico solo queste regole. */
@media(min-width:680px){.tes.meta{grid-column:span 3;aspect-ratio:3/2}.tes.meta .im img{object-position:center 45%}.tes.terzo{grid-column:span 2}}
/* == fine progetti == */













[data-mod]{outline:1px dashed rgba(22,23,26,.35);outline-offset:3px}

/* ogni scheda ha regole proprie: qui le riapplico legate alla sua pagina,
   altrimenti l'ultima assemblata vincerebbe su tutte */
#bassano .duo{display:grid;grid-template-columns:1.62fr 1fr;gap:4px;align-items:stretch}
#bassano .duo > figure:last-child{position:relative}
#bassano .duo > figure:last-child img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:620px){
  #bassano .duo{grid-template-columns:1fr}
  #bassano .duo > figure:last-child{position:static}
  #bassano .duo > figure:last-child img{position:static;height:auto;object-fit:fill}
}
#villa-mogliano .duo,#via-alfieri .duo,#zelarino .duo{grid-template-columns:1fr 1fr}



#vai{position:fixed;left:0;right:0;bottom:1.1rem;z-index:95;
  margin-inline:auto;width:max-content;max-width:calc(100% - 2rem);
  background:rgba(14,14,14,.92);color:#fff;border-radius:100px;display:flex;gap:.2rem;
  padding:.3rem;box-shadow:0 6px 24px rgba(0,0,0,.28);overflow-x:auto}
/* da desktop in su la barra si centra nello spazio che resta a sinistra del
   bottone WhatsApp; sotto, dove non c'e' spazio, gli passa sopra */
@media(min-width:1001px){#vai{right:9.5rem;max-width:calc(100% - 11rem)}}
@media(max-width:1000px){#vai{bottom:4.9rem}}
#vai::-webkit-scrollbar{display:none}
#vai a{flex:0 0 auto;color:#c9c9c4;text-decoration:none;font:500 10px/1 'Archivo',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;padding:.6rem .8rem;border-radius:100px}
#vai a.qui{background:#fff;color:#0E0E0E}

/* la testata scura a tutto schermo e' solo di Mogliano, ma la sua regola e' scritta
   sul tag: senza vincolo investe i titoli di Progetti e di Progetti negli anni,
   che sono <header> con una classe */
header[class]{position:static;display:block;background:none;color:inherit;z-index:auto}
header[class]::before{content:none}
@media(min-width:860px){header[class]{position:static;display:block;background:none}}

/* il marchio disegnato prende il posto della scritta */
.marchio{display:block;width:clamp(168px,42vw,272px);line-height:0}
.marchio img{display:block;width:100%;height:auto}
.barra{padding-block:.8rem}

/* ── la veste: accento ottanio, numero di copertina, zoom allo scorrimento ── */
:root{--accento:#B4552F;--accento-chiaro:#E08A5F}

/* l'accento sta sulle etichette, sui filetti e sui numeri. Mai sulle immagini. */
/* .testa-p .occhiello ha due classi e vincerebbe su .occhiello da sola: va nominata */
.occhiello,.testa-p .occhiello{color:var(--accento)}
.occhiello::after{background:var(--accento)}
.riga .n,.anno .num,.voce .n,.dati-p dt{color:var(--accento)}
.disegno figcaption,.galleria figure.disegno figcaption{color:var(--accento)}
.tutti{border-bottom-color:var(--accento);color:var(--accento)}
/* su fondo scuro l'ottanio pieno non si leggerebbe: serve la sua versione chiara */
.hero-txt .occhio,.apertura .occhio,.med .eti .n,.tes .cat{color:var(--accento-chiaro)}
.tes .premio{border-color:var(--accento-chiaro);color:var(--accento-chiaro)}
.menu .lingue b{border-bottom-color:var(--accento-chiaro);color:var(--accento-chiaro)}

/* il numero del progetto, grande, in un angolo della copertina */
.hero{position:relative}
.hero .numerone{position:absolute;right:clamp(.5rem,2.6vw,2.2rem);bottom:.35rem;z-index:1;
  pointer-events:none;font-weight:500;font-size:clamp(88px,19vw,232px);line-height:.78;
  letter-spacing:-.055em;color:#fff;opacity:.2;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 34px rgba(0,0,0,.4)}
@media(max-width:860px){
  .hero .numerone{font-size:clamp(70px,23vw,124px);bottom:.25rem;opacity:.26}
}
/* L'accento regge sul fondo chiaro e sul nero pieno, non sopra una fotografia:
   da tablet in su l'occhiello di copertina sta sull'immagine e torna bianco. */
.hero-txt .occhio,.apertura .occhio{opacity:1}
@media(min-width:860px){
  .hero-txt .occhio,.apertura .occhio{color:#fff;opacity:.92}
}

/* La copertina cresce piano mentre si scorre. Il valore lo muove il copione su una
   cornice attorno all'immagine: l'ingresso resta all'immagine, e le due trasformazioni
   non si pestano i piedi. */
.hero .zoom{display:block;will-change:transform;transform:scale(var(--z,1))}
@media(min-width:860px){.hero .zoom{position:absolute;inset:0}}
.hero img,.hero video{animation:entra 2.6s cubic-bezier(.16,.84,.3,1) both}

/* nel blocco scuro dei contatti i recapiti sono cliccabili */
.contatti .righe a{border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:1px}
.contatti .righe a:hover{border-bottom-color:#fff}

/* La PEC nel pie' di pagina: la regola generale toglie ai link colore e sottolineatura,
   e li' dentro l'indirizzo sembrerebbe testo morto. Un filetto discreto basta a dire
   che si puo' cliccare, senza chiamare l'occhio piu' del dovuto. */
footer a{border-bottom:1px solid currentColor;padding-bottom:1px}

/* Sotto i 1000 px la barra flottante sale a 4,9rem dal fondo e con la sua altezza
   occupa gli ultimi 117 px dello schermo, mentre il pie' di pagina ne riservava 57:
   su telefono copriva tutte le righe, partita IVA compresa. Che e' proprio il dato
   che la legge chiede di tenere leggibile. */
@media(max-width:1000px){footer{padding-bottom:9rem}}

/* La pagina Servizi e' l'unica del sito senza nemmeno una fotografia, e il
   numero di ogni voce stava a 10,5 px: non faceva da ancora, e la griglia
   diventava un muro di testo piccolo. Portato alla scala di un elemento
   tipografico vero, in cotto, da' alla pagina il ritmo e il calore che le
   mancavano. Il filetto che cresce sotto e' lo stesso segno delle sezioni
   numerate della pagina Lo studio: non e' un'invenzione nuova. */
.voci .voce .n{font-size:clamp(32px,5.2vw,52px);font-weight:400;letter-spacing:-.045em;
  line-height:1;color:var(--accento);margin-bottom:1rem;padding-bottom:.9rem;position:relative}
.voci .voce .n::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:52px;
  background:var(--accento);transform:scaleX(0);transform-origin:left;
  transition:transform .95s cubic-bezier(.16,.84,.3,1) .12s}
.voci .voce.on .n::after{transform:scaleX(1)}
/* Chi ha ridotto i movimenti vede il filetto gia' disteso, non un moncone. */
@media(prefers-reduced-motion:reduce){.voci .voce .n::after{transform:none}}

/* La nota sul repertorio, in fondo a Lo studio. Sostituisce la fascia dei contatori:
   i numeri dichiaravano un totale, e un totale basso racconta lo studio meno di quello
   che e'. Detta piano, in coda ai marchi dei premi, suona piu' sicura che dichiarata in
   mezzo alla pagina. Il grigio e' schiarito quanto basta a restare sopra 4,5:1 sul fondo
   chiaro: quello della veste (#83857E) sta a 3,6:1 e a questo corpo non si leggerebbe. */
.nota-repertorio{margin:0;padding-inline:var(--gutter);
  padding-block:0 clamp(2.6rem,7vw,4.2rem);
  font-size:13px;font-weight:300;line-height:1.6;letter-spacing:.005em;
  color:#6E7069;max-width:62ch}

/* La scheda di Mogliano e' l'unica che tiene l'intestazione DENTRO la copertina.
   La regola che stende la fotografia a tutto schermo (.hero img: position absolute,
   inset 0, height 100%, object-fit cover) prendeva anche il marchio, e lo disegnava
   1258 px di larghezza sopra l'immagine. Il marchio non e' la copertina: torna
   statico, nelle sue proporzioni, e piccolo &mdash; sta sopra una fotografia, non
   dentro la barra nera. */
.hero header .marchio{width:clamp(120px,14vw,170px);display:block;line-height:0}
.hero header .marchio img{position:static;inset:auto;width:100%;height:auto;
  object-fit:contain;animation:none}

.menu .lingue{align-items:baseline}
.menu .lingue a{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;padding:0 0 2px;color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.menu .lingue a:hover{border-color:#fff}