.abo .hero-t .mk{display:inline-block}

.abf{background:var(--ink);padding-bottom:var(--s-9)}
.abf__head{padding-top:var(--s-9);padding-bottom:var(--s-4);text-align:center}
.abf__t{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);font-weight:400}
.abf__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.abf__card{position:relative;display:flex;flex-direction:column;text-align:center}
.abf__card::before,.abf__card::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;z-index:1;
  background:var(--linea);pointer-events:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s var(--e-out);
}
.abf__card::before{left:0}
.abf__card::after{right:0}
.abf__card:first-child::before,.abf__card:last-child::after{content:none}
.abf__card:focus-within::before,.abf__card:focus-within::after{clip-path:inset(0)}
@media(hover:hover){
  .abf__card:hover::before,.abf__card:hover::after{clip-path:inset(0)}
}
.abf__shot{width:100%;aspect-ratio:16/9;overflow:hidden}
.abf__shot img{width:100%;height:100%;object-fit:cover;object-position:50% var(--oy);display:block}
.abf__card:nth-child(1) .abf__shot img{--oy:100%}
.abf__card:nth-child(2) .abf__shot img{--oy:14%}
.abf__card:nth-child(3) .abf__shot img{--oy:3%}
.abf__card:nth-child(4) .abf__shot img{--oy:29%}
.abf__name{
  display:block;margin-top:var(--s-3);
  font-family:var(--f-sans);font-variation-settings:"wdth" var(--ui-wdth);font-stretch:125%;
  font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);
  font-weight:600;text-transform:uppercase;
}
.abf__more{
  display:flex;flex-direction:column;align-items:center;flex:1 1 auto;
}
.abf__card{transition:filter var(--t-band) var(--e-band)}
@media(hover:hover){
  .abf__grid:hover .abf__card{filter:brightness(.55)}
  .abf__grid .abf__card:hover,
  .abf__grid .abf__card:focus-within{filter:none}
}
.abf__role{margin-top:var(--s-2);font-size:var(--t-para-md);line-height:var(--lh-para-md)}
/* la bio e' una nota sotto nome e ruolo: piu' piccola e attenuata */
.abf__bio{
  margin-top:var(--s-5);margin-bottom:var(--s-8);
  font-size:max(13px,calc(var(--t-para-md) * .85));line-height:var(--lh-para-md);max-width:36ch;
  color:color-mix(in srgb,var(--paper) 64%,transparent);
}
/* su tablet e telefono le colonne sono larghe: la bio torna al corpo del testo, resta attenuata */
@media (max-width:1080px){
  .abf__bio{font-size:var(--t-para-md);max-width:40ch}
  /* niente altezza minima centrata per "Why Anima Studios?": su tablet lasciava un buco sopra il titolo */
  .abw.schermo-80{min-height:auto;align-content:start}
  .abf{padding-bottom:var(--s-5)}
}
.abf__li{
  align-self:flex-end;margin-right:var(--filo);
  display:inline-block;min-height:var(--dito);
  margin-top:auto;padding-bottom:var(--s-4);
  font-family:var(--f-display);font-weight:400;font-synthesis:none;
  font-size:var(--t-h3);line-height:var(--lh-h3);
}

.abw{background:var(--ink)}
.abw{padding:clamp(var(--s-7),10vw,var(--s-9)) 0 clamp(var(--s-8),11vw,var(--s-10))}
#why > .rule + .wrap{margin-top:var(--s-8)}
.abw__head{text-align:center;max-width:62ch;margin-inline:auto}
.abw__t{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);font-weight:400}
.abw__sub{margin-top:var(--s-2);font-size:var(--t-para-md);line-height:var(--lh-para-md)}
.acc__in p.is-seg{
  font-variation-settings:"wdth" 100;letter-spacing:.06em;text-transform:uppercase;
  text-decoration-line:underline;text-decoration-style:dashed;
  text-decoration-color:currentColor;text-underline-offset:.32em;
}

@media (max-width:900px){
  .abf__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-8);padding-inline:var(--clear)}
}
@media (max-width:520px){
  .abf__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .abf__card::before,.abf__card::after{transition:none}
  .abf__card{transition:none}
}

.abw__azioni{
  display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;
  gap:var(--s-4);
  margin-top:var(--s-6);
}

.abw__more{display:grid;place-items:center;width:auto;margin:0}

.abw__vai{margin:0}

/* MK-840, 8 settembre 2026, chiesto dal cliente: sul desktop il vuoto fra i
   fondatori e Why Anima Studios si dimezza, e sotto Why ne compare uno uguale,
   che prima non c'era per niente.

   MISURATO PRIMA a 1440x900: la sezione dei fondatori era alta 990 px per 508
   di contenuto, quindi 275 di vuoto sopra e 207 sotto; Why era alta 720 per 465
   di contenuto, 164 sopra e 91 sotto. Fra i due contenuti passavano 371 px, e
   fra la fine di Why e il piede ZERO.

   Primo tentativo a 96 e 96: il vuoto e' sceso da 371 a 266, non a 186. La
   causa e' che Why ha 73 px di spaziatura sua sopra il contenuto, che al primo
   giro non avevo contato. Con 56 sotto i fondatori e 56 sopra Why il conto
   torna: 56 + 56 + 73 = 185, cioe' la meta' misurata. Sotto Why 184, che e' lo
   stesso vuoto, perche' li' non c'e' una sezione dopo a metterci il suo. */
@media (min-width:1024px){
  .abf.schermo-110{min-height:auto;padding-top:96px;padding-bottom:56px}
  .abw.schermo-80{min-height:auto;padding-top:56px;padding-bottom:184px}
}