.hero{padding-top:calc(var(--head-h) + var(--s-9));padding-bottom:calc(var(--s-8) + var(--s-4))}
.hero .hero-t{flex:1 1 auto;font-size:var(--t-h1);line-height:1;letter-spacing:-.022em}
.hero .hero-t .mk{display:inline-block}
.hero .hero-t .r1,.hero .hero-t .r2{display:block}

.works{--bar-top:var(--head-h-c);--coperto:calc(var(--bar-top) + var(--sp-h))}
.bar{
  position:sticky;top:var(--bar-top);z-index:32;
  transition:box-shadow var(--t-band) var(--e-out);
  margin-top:clamp(var(--s-4),3.9vw,var(--s-6));
}
.bar.is-stuck{box-shadow:0 1px 0 rgba(3,3,3,.14),0 14px 34px -20px rgba(0,0,0,.45)}
.bar__pop{position:relative;display:flex}
@media (pointer:coarse){
  .bar.sp-filtro{height:auto;padding-block:var(--sp-aria);align-items:flex-start}
  .bar .sp-filtro__eti{padding-top:calc((var(--dito) - 1em) / 2)}
  .bar .sp-filtro__viste{flex-wrap:nowrap;row-gap:0;gap:0}
  .bar .sp-filtro__viste button{
    display:inline-flex;align-items:center;
    min-height:var(--dito);
  }
  .bar .sp-filtro__t{min-height:var(--dito)}
}

.yr{
  display:inline-flex;align-items:center;gap:var(--s-1);
  font-family:var(--f-sans);font-variation-settings:"wdth" var(--ui-wdth);font-stretch:125%;
  font-size:var(--t-ui);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  min-height:44px;padding:0 4px;cursor:pointer;
}
.yr__menu{
  position:absolute;right:0;top:calc(100% + var(--s-1));z-index:30;min-width:100%;
  background:var(--ink);color:var(--paper);padding:var(--sp-gap);border-radius:0;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
  opacity:.01;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--t-quick) var(--e-out),transform var(--t-quick) var(--e-out);
}
.yr__menu.is-open{opacity:1;transform:none;pointer-events:auto}
.yr__menu li{
  padding:var(--s-1) var(--sp-pad);border-radius:0;cursor:pointer;
  font-size:var(--sp-t);font-weight:var(--sp-peso);font-stretch:var(--sp-wdth);
  font-variation-settings:"wdth" 125;letter-spacing:var(--tr-menu);text-transform:uppercase;
  transition:background var(--t-quick) var(--e-band),color var(--t-quick) var(--e-band);
}
.yr__menu li:hover,.yr__menu li[aria-selected="true"]{background:var(--paper);color:var(--ink)}

.works{padding-top:var(--s-8)}
.grid{
  margin-top:clamp(var(--s-1),1.05vw,var(--s-2));
  --vuoto:1.125vw;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--vuoto);row-gap:var(--s-8);
}
.grid[data-view="list"]{grid-template-columns:1fr;row-gap:0}
.grid[data-view="single"]{grid-template-columns:1fr;row-gap:var(--s-8)}
.works:has(.grid[data-view="single"]) .gridl__g{opacity:0 !important}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}

.w{display:block;position:relative;--box:1.65}
.w.is-hid{display:none}
.w.is-hid-cat{display:none}
.w__shot{position:relative;display:block;overflow:hidden;background:var(--mailbox);aspect-ratio:var(--box)}
.w__shot picture,.w__shot img{position:absolute;inset:0;width:100%;height:100%}
.w__shot img{object-fit:cover;object-position:center;transition:opacity var(--t-band) var(--e-band)}
.w__mount{position:absolute;inset:0;opacity:0;transition:opacity 420ms var(--e-band);overflow:hidden}
.w__mount iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100%, calc(100% * var(--ar) / var(--box)));
  height:max(100%, calc(100% * var(--box) / var(--ar)));
  border:0;
}
.w.is-live .w__mount{opacity:1}
.w.is-live .w__shot img{opacity:0}
.w__mount{pointer-events:none}
/* Tolto .tessera__go (posizione, e la deroga che lo nascondeva su mouse fine):
   la classe non esiste in nessuno strato. Cercata su 296 file di src, public,
   scripts, package.json e next.config.ts: compariva solo in questo foglio, mai
   nei file -main.html di src/proto, mai nei .js che costruiscono markup, e nemmeno a pezzi
   (cercato anche il solo prefisso "tessera"). Controllo positivo sulla stessa
   ricerca: .w__shot esce 15 volte da our-work-main.html.
   ATTENZIONE, e' una decisione di contenuto rimasta aperta: la regola diceva che
   sul tocco la tessera doveva avere un distintivo di apertura. Oggi non ce l'ha
   e non ce l'aveva nemmeno prima, perche' l'elemento non e' mai stato scritto.
   Se il distintivo serve, va aggiunto in src/proto/our-work-main.html. */
.w__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-2)}
.w__client{
  font-size:var(--t-h3);line-height:1.05;font-weight:800;text-transform:uppercase;
  padding:4px 6px;margin-left:0;text-indent:-.5px;
}
.w__meta{display:flex;align-items:baseline;gap:var(--s-1);font-size:var(--t-para-md);color:var(--figure);white-space:nowrap}
.w__meta .yr{min-height:0;padding:0;font-size:inherit;letter-spacing:inherit;cursor:inherit}
.w__meta .cat{display:none}
.w:hover .w__meta .yr,.w:focus-within .w__meta .yr{display:none}
.w:hover .w__meta .cat,.w:focus-within .w__meta .cat{display:inline}
@media (hover:none){
  .w__meta .yr{display:none}
  .w__meta .cat{display:inline}
}
.w__meta .cat,.w__spec{
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:var(--t-para-md);
}
.w__spec{
  position:absolute;right:8px;bottom:8px;z-index:2;
  color:var(--paper);
  background:color-mix(in srgb,var(--ink) 62%,transparent);
  border:0;padding:3px 7px;line-height:1;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  pointer-events:none;
}
.w__shot{position:relative}
.w__spec::before{content:none}
.w__shot .sp-voce{
  left:calc(var(--s-3) - 8px);right:auto;bottom:calc(var(--s-3) - 8px);
  padding:8px;pointer-events:auto;cursor:pointer;
}
.w__t{
  display:block;margin-top:6px;font-size:var(--t-para-md);color:var(--quiet);
  padding-left:6px;text-indent:-.5px;
}

.grid[data-view="list"] .w{
  display:grid;
  grid-template-columns:132px calc(30% - 132px) 20% 20% 30%;
  align-items:center;column-gap:0;
  padding:var(--s-2) 0;border-top:1px solid var(--line-faint);
  transition:background var(--t-band) var(--e-band),color var(--t-band) var(--e-band);
}
.grid[data-view="list"] .w:last-child{border-bottom:1px solid var(--line-faint)}
.grid[data-view="list"] .w__row{display:contents}
.grid[data-view="list"] .w .w__meta{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-2);min-width:0;
  grid-column:4 / 6;grid-row:1;
  padding-left:var(--filo);padding-right:var(--filo);
}
.grid[data-view="list"] .w__shot{width:132px;grid-column:1;grid-row:1;align-self:center}
.grid[data-view="list"] .w__client{
  grid-column:2;grid-row:1;font-size:var(--t-h3);
  padding-left:var(--filo);margin-left:0;align-self:center;
}
.grid[data-view="list"] .w__t{
  grid-column:3;grid-row:1;margin:0;padding-left:var(--filo);align-self:center;
}
.grid[data-view="list"] .w .w__meta .cat{
  display:block;padding-left:0;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.grid[data-view="list"] .w .w__meta .yr{
  display:flex;order:3;flex:none;padding-right:0;justify-content:flex-end;
}
.grid[data-view="list"] .w .w__meta .w__spec{
  flex:none;padding-right:0;white-space:nowrap;
}
@media (hover:hover){
  .grid[data-view="list"] .w:hover{background:var(--paper);color:var(--ink)}
  .grid[data-view="list"] .w:hover .w__client,
  .grid[data-view="list"] .w:hover .w__t,
  .grid[data-view="list"] .w:hover .w__spec,
  .grid[data-view="list"] .w:hover .w__meta .cat,
  .grid[data-view="list"] .w:hover .w__meta .yr{color:var(--ink)}
  .grid[data-view="list"] .w:hover .w__client::after{transform:scaleX(0)}
}
@media (hover:hover) and (pointer:fine){
  .grid[data-view="list"]:not(:hover) .w.is-on{background:var(--paper);color:var(--ink)}
  .grid[data-view="list"]:not(:hover) .w.is-on .w__client,
  .grid[data-view="list"]:not(:hover) .w.is-on .w__t,
  .grid[data-view="list"]:not(:hover) .w.is-on .w__spec,
  .grid[data-view="list"]:not(:hover) .w.is-on .w__meta .cat,
  .grid[data-view="list"]:not(:hover) .w.is-on .w__meta .yr{color:var(--ink)}
  .grid[data-view="list"]:not(:hover) .w.is-on .w__client::after{transform:scaleX(0)}
}
.grid[data-view="list"] .w:focus-visible{background:var(--paper);color:var(--ink)}
.grid[data-view="list"] .w:focus-visible .w__client,
.grid[data-view="list"] .w:focus-visible .w__t,
.grid[data-view="list"] .w:focus-visible .w__spec,
.grid[data-view="list"] .w:focus-visible .w__meta .cat,
.grid[data-view="list"] .w:focus-visible .w__meta .yr{color:var(--ink)}
@media (max-width:900px){
  .grid[data-view="list"] .w{grid-template-columns:132px minmax(0,1fr);padding:var(--s-3);column-gap:var(--s-3)}
  .grid[data-view="list"] .w__shot{grid-column:1;grid-row:1/5;align-self:stretch;aspect-ratio:auto;min-height:0}
  .grid[data-view="list"] .w__client{grid-column:2;grid-row:1;align-self:end}
  .grid[data-view="list"] .w__t{grid-column:2;grid-row:2;align-self:start}
  .grid[data-view="list"] .w .w__meta{
    grid-column:2;grid-row:3/5;
    flex-wrap:nowrap;justify-content:flex-start;align-items:baseline;
    margin-top:var(--s-2);
    padding-left:0;padding-right:0;
  }
  .grid[data-view="list"] .w .w__meta .cat{white-space:nowrap;overflow:hidden}
  .grid[data-view="list"] .w .w__meta .yr{
    order:3;flex:none;justify-content:flex-start;padding-left:0;
  }
}
.grid[data-view="single"] .w__client{font-size:var(--t-h2)}

.grid[data-view="single"] .w{
  --dett:calc(var(--s-2) + var(--t-h2) * 1.05 + 8px + 6px + var(--t-para-md) * var(--lh-para-md) + 2px);
  --largo:min(100%, calc((100vh - var(--coperto) - var(--dett)) * var(--box)));
  --largo:min(100%, calc((100svh - var(--coperto) - var(--dett)) * var(--box)));
}
.grid[data-view="single"] .w__shot,
.grid[data-view="single"] .w__row,
.grid[data-view="single"] .w__t{width:var(--largo);margin-inline:auto}

.dim{
  position:fixed;inset:0;z-index:30;background:var(--ink);opacity:0;pointer-events:none;
  transition:opacity 1000ms var(--e-out);
}
html.is-dim .dim{opacity:.30;transition:opacity 3000ms linear}
.w.is-lit{z-index:31}

.cn{
  padding:clamp(var(--s-7),9.7vw,var(--s-9)) 0 clamp(62px,5.4vw,77px);
  background:var(--ink);overflow-x:clip;
}
.cn__h{
  text-align:center;font-size:var(--t-h2);line-height:1.12;font-weight:400;
  letter-spacing:var(--tr-h2);
}
.cn__h .mk{display:block}
.cn__stage{
  position:relative;isolation:isolate;height:500px;
  margin-top:clamp(var(--s-6),4.1vw,var(--s-8));
  display:grid;place-items:center;perspective:1500px;perspective-origin:50% 46%;
}
@property --alone{syntax:"<color>";inherits:false;initial-value:transparent}
.cn__alone{
  position:absolute;z-index:-1;left:50%;top:50%;width:60%;height:104%;
  transform:translate(-50%,-50%);pointer-events:none;
  --alone:color-mix(in srgb,var(--accent) 55%,transparent);
  background:radial-gradient(closest-side,var(--alone),transparent 76%);
  filter:blur(40px);
  transition:--alone 900ms linear;
}
.cn__ring{
  position:relative;width:clamp(204px,56vw,279px);aspect-ratio:328/423;
  transform-style:preserve-3d;touch-action:pan-y;cursor:grab;
  user-select:none;-webkit-user-select:none;
}
.cn__ring.is-trascina{cursor:grabbing}
.cn__pane{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  border:1px solid var(--line-mid);background:var(--ink);
  padding:var(--s-4) var(--s-3);text-align:center;
  transition:filter .5s var(--e-out),opacity .5s var(--e-out);
}
.cn__logo{width:auto;max-width:74%;max-height:44px;object-fit:contain;margin-top:var(--s-4)}
.cn__logo--testo{
  display:grid;place-items:center;min-height:44px;
  font-size:var(--t-h3);font-weight:600;letter-spacing:.02em;
}
.cn__nome{
  margin-top:auto;font-size:var(--t-h3);font-weight:600;letter-spacing:var(--tr-h3);
  line-height:var(--lh-h3);
  text-transform:uppercase;font-variation-settings:"wdth" var(--ui-wdth);font-stretch:125%;
}
.cn__p{margin-top:var(--s-2);font-size:var(--t-para);line-height:var(--lh-para-md);color:var(--ink-soft)}
@media (min-width:768px) and (max-width:1279px){.cn__p{font-size:18px}}
.cn__ring.is-flat{
  position:static;width:100%;height:auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-2);
}
.cn__ring.is-flat .cn__pane{position:static;transform:none !important;filter:none !important;opacity:1 !important;min-height:380px}
@media (prefers-reduced-motion:reduce){
  .cn__pane{transition:none !important}
}

.ai{background:var(--ink);padding:clamp(var(--s-7),10vw,var(--s-9)) 0 clamp(var(--s-8),11vw,var(--s-10))}
.ai__head{text-align:center;max-width:62ch;margin-inline:auto}
.ai__h{font-size:calc(var(--t-h2) + 3px);line-height:1.12;font-weight:400;letter-spacing:var(--tr-h2)}
.ai__sub{margin-top:var(--s-2);font-size:var(--t-para-md);color:var(--ink-mute)}
.ai__more{display:grid;place-items:center;margin-top:var(--s-6);justify-self:center;width:100%}

@media (max-width:900px){
  .hero__in{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
}
@media (max-width:767px){
  .bar{gap:var(--sp-gap) var(--sp-pad)}
  .bar .sp-filtro__tendine{
    flex:1 1 100%;gap:var(--sp-gap);
    border-top:1px solid color-mix(in srgb,var(--ink) var(--linea-op-chiaro),transparent);
    padding-top:var(--sp-gap);
  }
  .bar .bar__pop{flex:1 1 0;min-width:0}
  .bar .bar__pop > .sp-filtro__t{width:100%;min-width:0}
  /* sul telefono la barra e' alta il doppio del desktop: righe da 36px e meno aria */
  .bar.sp-filtro{padding-block:8px;gap:6px var(--sp-pad)}
  .bar.sp-filtro .sp-filtro__eti{padding-top:calc((36px - 1em) / 2)}
  .bar.sp-filtro .sp-filtro__viste{margin-left:auto}
  .bar.sp-filtro .sp-filtro__viste button,
  .bar.sp-filtro .sp-filtro__t{min-height:36px;padding-block:0}
  .hero{padding-bottom:var(--s-8)}
  .hero .hero-t{font-size:var(--t-display)}
}
@media (prefers-reduced-motion: reduce){
  html.is-dim .dim{transition:none}
}

#ai-content{padding-top:var(--s-8)}

#ai-content .ai__head{margin-top:var(--s-8)}

#ai-content > .rule:last-child{margin-top:var(--s-8)}

@media (max-width:767px){
  .works{padding-top:var(--s-4)}

  .grid[data-view="list"] .w{
    --pollice:min(132px, 30%);
    display:grid;
    grid-template-columns:var(--pollice) minmax(0,1fr);
    align-items:center;column-gap:var(--s-3);
    padding:var(--s-3);
    border-top:1px solid var(--line-faint);
  }
  .grid[data-view="list"] .w.is-hid,
  .grid[data-view="list"] .w.is-hid-cat{display:none}
  .grid[data-view="list"] .w:last-child{border-bottom:1px solid var(--line-faint)}
  .grid[data-view="list"] .w__row{display:contents}
  .grid[data-view="list"] .w__shot{width:100%;grid-column:1;grid-row:1/5;align-self:stretch;aspect-ratio:auto;min-height:0}
  .grid[data-view="list"] .w__client{
    grid-column:2;grid-row:1;align-self:end;
    font-size:var(--t-h3);padding-left:var(--filo);margin-left:0;
  }
  .grid[data-view="list"] .w__t{
    grid-column:2;grid-row:2;align-self:start;margin:0;padding-left:var(--filo);
  }
  .grid[data-view="list"] .w .w__meta{
    display:flex;align-items:baseline;flex-wrap:nowrap;justify-content:flex-start;
    gap:var(--s-2);min-width:0;
    grid-column:2;grid-row:3/5;
    margin-top:var(--s-2);
    padding-left:var(--filo);padding-right:0;
  }
  .grid[data-view="list"] .w .w__meta .cat{
    display:block;padding-left:0;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .grid[data-view="list"] .w .w__meta .yr{
    display:flex;order:3;flex:none;justify-content:flex-start;padding-left:0;
  }
  .grid[data-view="list"] .w .w__meta .w__spec{flex:none;padding-right:0;white-space:nowrap}

  .cn{padding-top:var(--s-8);padding-bottom:var(--s-8)}
  .cn__stage{
    margin-top:var(--s-8);
    height:calc(clamp(240px,66vw,328px) * 423 / 328 * 1.273);
    perspective-origin:50% 50%;
  }
  .cn__ring{width:clamp(240px,66vw,328px)}
  .cn__p{width:100%}
}

@media (max-width:767px){
  .grid[data-view="list"] .w .w__meta{gap:var(--s-1)}
  .grid[data-view="list"] .w .w__meta .yr,
  .grid[data-view="list"] .w .w__meta .cat{
    font-size:var(--t-ui);font-weight:500;letter-spacing:.06em;color:var(--quiet);
  }
  .grid[data-view="list"] .w .w__meta .w__spec{font-size:calc(var(--t-ui) - 1px)}
}