/* ==========================================================================
   Sections — page-level composition
   ========================================================================== */

/* The source drifts both Lottie layers with a slow 20s shake. */
@keyframes hubble-shake {
  0%   { transform: translate(1px, 1px); }
  20%  { transform: translate(-5px, -1px); }
  40%  { transform: translate(2px, 0); }
  60%  { transform: translate(-3px, 1px); }
  80%  { transform: translate(-6px, -2px); }
  100% { transform: translate(1px, 1px); }
}

@media (prefers-reduced-motion: reduce) {
  .offerta__lottie,
  .percorso__lottie { animation: none; }
}

/* --------------------------------------------------------------------------
   Site header — absolute logo over the hero
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 30;
}
.site-header__logo {
  display: inline-block;
  width: 240px;
  padding: 32px 0 16px;
}
@media (max-width: 1024px) { .site-header { display: none; } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 900px;
  overflow: hidden;
  background: #EDF0F7;
  border-bottom: 1px solid var(--rule);
}

/* Layer 1 — the glass-telescope loop, scaled to cover the hero. The clip is
   square (1200x1200), so covering a wide hero crops it top and bottom and the
   telescope reads large across the right-hand side. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* Layer 2 — the lavender plate, multiplied into the video beneath it. The clip
   is the glass telescope on pure white, so multiply leaves the white ground
   tinted lavender and the blue telescope essentially untouched. Anchored to the
   bottom, like the source. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("../assets/img/hero-bg.webp");
  background-position: 50% 100%;
  background-size: cover;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Layer 3 — the copy. */
.hero__container {
  position: relative;
  z-index: 3;
  display: flex;
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__copy {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding: 10px;
}
.hero__mark { display: none; width: 84px; }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-lh);
  font-weight: 900;
  color: var(--color-text);
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: var(--type-display-m-size);
  line-height: 5.25rem;
  color: var(--color-black);
  font-weight: 400;
}
.hero__partners {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: -19px;
}
.hero__partners img { width: 202px; }

/* Tablet and below: single column, the video parked along the bottom edge. */
@media (max-width: 1024px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    align-items: flex-start;
  }
  .hero__copy {
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 32px 0 0;
  }
  .hero__mark { display: block; }
  .hero__tagline {
    font-size: var(--type-body-xl-size);
    line-height: 2.25rem;
  }
  /* Three 106px marks plus their gutters need 342px, so below roughly 360px
     they no longer fit a phone and the third one would be cut off — the source
     has the same overflow. Letting the row wrap keeps all three readable
     instead of clipping one, and min-width lets the column stop being forced
     wider than the screen by its own content. */
  .hero__copy { min-width: 0; }
  .hero__partners { margin-left: -11px; gap: 12px; flex-wrap: wrap; }
  .hero__partners img { width: 106px; }
  /* The clip sits on white, so its top edge would cut a hard line across
     whatever copy reaches it. Fading that edge out lets the two read as one
     continuous ground.

     The layer is sized to the clip, not to a share of the hero: the source is
     square and shown whole, so at this width it is exactly 100vw tall. Sizing
     the layer to match puts the clip's top edge at the layer's top edge, which
     is where the fade begins — otherwise the fade finishes above the clip and
     the edge shows anyway. */
  .hero__media {
    top: auto;
    bottom: 0;
    height: 100vw;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  }
  .hero__video {
    top: auto;
    bottom: 0;
    height: 100%;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: bottom;
  }
}

/* --------------------------------------------------------------------------
   "Il Programma" — 1/2 + 1/2 with a hairline rule and the YouTube embed
   -------------------------------------------------------------------------- */
/* Container edges plus the rule at 67%, drawn as a 1px gradient in a band
   covering the right third and repeated down the block. */
.programma__grid {
  display: flex;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  background-image: var(--rule-third);
  background-size: 33% 100%;
  background-position: 100% 0;
  background-repeat: repeat-y;
}
.programma__copy {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-14) 32px;
}
.programma__title {
  font-family: var(--font-display);
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-lh);
  font-weight: 400;
}
.programma__media {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-14) 32px var(--space-14) 0;
}
.programma__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-black);
  box-shadow: var(--shadow-video);
}
.programma__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Click-to-load poster keeps YouTube's cookies out until the user opts in. */
.programma__video-poster {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  background: var(--color-black);
  cursor: pointer;
}
.programma__video-poster img { width: 100%; height: 100%; object-fit: cover; }
.programma__video-play {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  color: var(--color-white);
  background: var(--color-cta);
  border-radius: 50%;
  box-shadow: var(--shadow-cta);
  transition: transform 0.25s var(--ease-out);
}
.programma__video-poster:hover .programma__video-play { transform: scale(1.08); }
.programma__video-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }

@media (max-width: 1024px) {
  .programma__grid { flex-direction: column; background-image: none; }
  .programma__copy { padding: 80px 0 40px; }
  .programma__media { padding: 0 0 80px; }
}

/* --------------------------------------------------------------------------
   "Key Benefit" — purple intro, gradient card grid, photo carousel
   -------------------------------------------------------------------------- */
/* Left unclipped on desktop: the asteroid is meant to spill up out of this
   band and over the section above, as it does on the source. Its offsets keep
   it inside the viewport at every desktop width, so nothing widens the page. */
.offerta {
  background: var(--color-primary);
  border-bottom: 1px solid var(--rule-on-purple);
  /* Il lottie degli asteroidi e' posizionato di proposito fuori schermo a
     destra (`right: -908.9px`, e -837.6 / -703.2 nelle fasce piu' strette):
     e' una decorazione che entra dal bordo. Sotto i 1366 pero' sporge **oltre
     la finestra** - misurato a 1280, arriva a x1335 su 1280 di viewport - e il
     documento finisce per dichiararsi 54px piu' largo dello schermo.
     Non si vedeva, perche' `body` ha `overflow-x: hidden` e quei 54px restano
     ritagliati e irraggiungibili. Ma farlo contenere **dalla sua sezione** e'
     piu' pulito che affidarlo alla rete di sicurezza del `body`.

     `clip` e non `hidden`: il lottie **esce anche dall'alto** della sezione, di
     287px a 1280 e 350 a 1440, e fa parte del disegno. `overflow: hidden` lo
     taglierebbe anche li', perche' nascondere un asse costringe l'altro a
     `auto`; `overflow-x: clip` invece ritaglia il solo orizzontale e lascia il
     verticale `visible`. E' l'unico valore che permette di mischiare i due. */
  overflow-x: clip;
}
.offerta__grid { display: flex; }
.offerta__title-col {
  position: relative;
  flex: 0 0 var(--col-narrow);
  border-left: 1px solid var(--rule-on-purple);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-14) 0 var(--space-14) 32px;
}
.offerta__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-lh);
  color: var(--color-white);
  font-weight: 400;
}
/* Glassy asteroid: parked outside the title column so it floats over the
   right-hand copy, exactly as on the source (right/bottom offsets per
   breakpoint, plus a 20s shake). */
.offerta__lottie {
  position: absolute;
  right: -908.9px;
  bottom: 353px;
  z-index: 1;
  width: 569px;
  aspect-ratio: 1 / 1;
  animation: hubble-shake 20s linear infinite;
  pointer-events: none;
}
@media (max-width: 1366px) { .offerta__lottie { right: -837.6px; } }
@media (max-width: 1200px) { .offerta__lottie { right: -703.2px; } }
.offerta__copy {
  position: relative;
  z-index: 1;
  flex: 1 1 var(--col-wide);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-14) 32px var(--space-14) 0;
  color: var(--color-white);
}

.benefit-band { background: var(--color-primary); }

/* Centred: the source insets the strip 32px on the left and lets it bleed off
   the right edge, which reads as shifted. Equal insets both sides instead —
   deliberate divergence from the source. */
.carousel-band {
  padding: var(--space-14) 32px 0;
  background-image: var(--gradient-carousel-band);
  border-top: 1px solid var(--rule-on-purple-soft);
}

@media (max-width: 1024px) {
  /* Narrow layouts reposition the asteroid, and there it would widen the
     document — clipped on the x axis only, so the vertical spill survives. */
  .offerta { overflow-x: clip; }
  .offerta__grid { flex-direction: column; }
  .offerta__title-col { flex: none; padding: 80px 0 24px; }
  .offerta__copy { padding: 0 0 80px; }

  /* Il titolo era lontano dal testo per un difetto, non per una scelta.
     `--col-wide` e' un token di LARGHEZZA, e la base flex si applica all'asse
     principale: qui sopra la griglia passa a colonna, quindi quegli 884px
     diventano un'ALTEZZA. La colonna veniva 884px contro 410px di testo, e
     `justify-content: center` parcheggiava i paragrafi in mezzo - misurati
     221px fra titolo e primo paragrafo a 373 e **269px a 834**. Corretto per
     tutto l'intervallo impilato, non solo per il telefono, perche' la causa e'
     l'impilamento. */
  .offerta__copy {
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .offerta__lottie {
    right: -38.3px;
    bottom: auto;
    top: -40px;
    width: 380px;
  }
  .percorso__lottie { display: none; }
}

/* --------------------------------------------------------------------------
   "Il percorso di accelerazione" — sticky title beside the step list
   -------------------------------------------------------------------------- */
.percorso { margin-top: -37px; }
.percorso__title-col {
  position: relative;
  display: flex;
  border-right: 1px solid var(--rule);
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-14) 32px 0;
}
/* Glass blob in the timeline rail, level with the second step. */
.percorso__lottie {
  position: absolute;
  top: 420px;
  left: -4.5px;
  z-index: 0;
  width: 483px;
  aspect-ratio: 1 / 1;
  animation: hubble-shake 20s linear infinite;
  pointer-events: none;
}
/* Sits where it is and scrolls away with the page — the source does not pin
   it. Relative only so it paints above the glass blob behind it. */
/* **Lo stesso corpo degli altri nove titoli di sezione, a ogni larghezza.**
   Nella fonte questo e' l'unico titolo fuori scala - 56px dappertutto, contro i
   72 degli altri - e per un po' la replica lo ha copiato. Francesca ha deciso
   il contrario tre volte: sul telefono (*"ogni titolo deve essere della stessa
   grandezza"*, differenza n. 14), poi sul tablet, e infine in generale
   (*"che i titoli abbiano ognuno le proprie grandezze"*). Quindi usa
   `--type-display-l` come tutti, e le due regole che prima lo correggevano a
   mano su telefono e tablet sono sparite: era lo stesso valore scritto tre
   volte. */
.percorso__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-lh);
  font-weight: 400;
  /* A bandiera a sinistra a ogni larghezza, su richiesta di Francesca
     (*"fa a bandiera a sx questo titolo"*). La fonte lo centra sopra i 1024 e
     lo manda a sinistra sotto - era la decisione 10. Ora e' a sinistra e basta,
     come tutti gli altri nove titoli di sezione: una regola sola. */
  text-align: left;
}
/* **La colonna del titolo cresce da 436 a 500.** Da 1025 in su il percorso e'
   a due colonne e il titolo sta in quella stretta. A 72px la parola
   "accelerazione" e' larga **435px**, e nei 371px di scatola che la colonna da
   436 lasciava non ci stava: usciva di 64 e superava il filetto verticale di
   31, entrando nella lista dei passi. Non si puo' mandare a capo, e' una parola
   sola.

   Con la colonna a **500** la scatola e' 435 - esattamente la parola - e fra la
   fine della parola e il filetto restano i 32 di imbottitura piu' il filetto
   stesso: 33px di franco. Il token `--col-narrow` non si tocca, lo usano anche
   le statistiche della selezione e il distanziatore dei promotori: si nomina
   solo questa colonna.

   Quello che si sposta: il filetto verticale va da 496 a 560, e la colonna dei
   passi si stringe da 884 a 820 - il testo dei passi da 820 a 756, che va nella
   direzione della misura di lettura scelta per il tablet.

   Sotto i 1025 la colonna si impila e prende tutta la larghezza: la' il
   problema non esiste. */
@media (min-width: 1025px) {
  .percorso__title-col {
    flex: 0 0 500px;
    max-width: 500px;
  }
}
.percorso__steps { position: relative; }
.percorso__title-col { overflow: visible; }
.percorso__band {
  min-height: 60vh;
  border-bottom: 1px solid var(--rule);
  background-color: var(--color-primary);
  background-image: url("../assets/img/parallax-bg.webp");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

@media (max-width: 1024px) {
  .percorso { margin-top: 0; }
  .percorso__title-col { padding: 80px 0 0; }
  .percorso__band { min-height: 40vh; background-attachment: scroll; }

}

/* --------------------------------------------------------------------------
   "Il processo di selezione" — copy plus two stat blocks
   -------------------------------------------------------------------------- */
/* La fascia della selezione è chiusa sopra e sotto. */
.selezione {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.selezione__copy {
  flex: 1 1 var(--col-wide);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-14) 32px;
}
.selezione__title {
  font-family: var(--font-display);
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-lh);
  font-weight: 400;
}
.selezione__stats {
  flex: 0 0 var(--col-narrow);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-11);
  padding: var(--space-14) 0;
}
@media (max-width: 1024px) {
  .selezione__copy { padding: 80px 0 40px; }
  .selezione__stats { padding: 0 0 80px; gap: 48px; }
}

/* --------------------------------------------------------------------------
   "I promotori" — light grey band
   -------------------------------------------------------------------------- */
/* The four grey bands close on a darker hairline than the rest of the grid —
   that is how the source renders them. */
.promotori {
  background: var(--color-grey-100);
  border-bottom: 1px solid var(--rule-strong);
}
.promotori .split__spacer { border-right: 1px solid var(--rule); }
.promotori__intro {
  flex: 1 1 var(--col-wide);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12) 32px;
}
.promotori__title {
  font-family: var(--font-display);
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-lh);
  font-weight: 400;
}
@media (max-width: 1024px) {
  .promotori__intro { padding: 80px 0 40px; }
}

/* --------------------------------------------------------------------------
   "Il Portfolio"
   -------------------------------------------------------------------------- */
.portfolio__intro {
  flex: 1 1 var(--col-wide);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-14) 32px var(--space-13);
}
.portfolio__title {
  font-family: var(--font-display);
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-lh);
  font-weight: 400;
}
.portfolio__grid-wrap { padding-bottom: var(--space-14); }
@media (max-width: 1024px) {
  .portfolio__intro { padding: 80px 0 40px; }
  .portfolio__grid-wrap { padding-bottom: 80px; }
}

/* --------------------------------------------------------------------------
   "Operation Team" — purple band
   -------------------------------------------------------------------------- */
.team { background: var(--color-primary); }
.team--intro { border-bottom: 1px solid var(--rule); }
.team__intro {
  display: flex;
  padding: var(--space-14) 0;
}
.team__copy {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  color: var(--color-white);
}
.team__title {
  font-family: var(--font-display);
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-lh);
  font-weight: 400;
}
@media (max-width: 1024px) {
  .team__intro { padding: 80px 0 40px; }
  .team__copy { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   "I nostri Partners"
   -------------------------------------------------------------------------- */
.partners--intro { border-bottom: 1px solid var(--rule); }
.partners__intro {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-14) 32px var(--space-13);
}
.partners__title {
  font-family: var(--font-display);
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-lh);
  font-weight: 400;
}
@media (max-width: 1024px) {
  .partners__intro { padding: 80px 0 40px; }
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.cta {
  background-color: var(--color-primary);
  background-image: url("../assets/img/img-sfondo.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 1px solid var(--rule);
}
.cta__grid {
  display: flex;
  gap: var(--space-7);
  padding: var(--space-14) 0;
}
.cta__visual {
  flex: 0 0 38%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-7);
  background-image: url("../assets/logos/hubble-mark-cta.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cta__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-9);
  color: var(--color-white);
}
.cta__title {
  font-family: var(--font-display);
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-lh);
  font-weight: 400;
}
@media (max-width: 1024px) {
  .cta__grid { flex-direction: column-reverse; padding: 80px 0; gap: var(--space-6); }
  .cta__visual {
    flex: none;
    min-height: 164px;
    margin: 0;
    background-position: top left;
    background-size: 290px auto;
  }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-14) 0;
}
.faq__title {
  font-family: var(--font-display);
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-lh);
  font-weight: 400;
}
.faq__list { margin-top: var(--space-5); }
@media (max-width: 1024px) { .faq__inner { padding: 80px 0; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer__main {
  background: var(--color-primary);
  border-bottom: 1px solid var(--rule);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  padding: var(--space-14) 0 var(--space-8);
}
.site-footer__top { display: flex; }
/* The marks in the footer are the same dark files used elsewhere; the source
   pushes them through this filter chain to get white silhouettes on the purple.
   The flat grey block it leaves on the logo's satellite badge is part of the
   result, not an artefact. */
.site-footer__brand,
.site-footer__logos {
  filter: grayscale(1) saturate(10) contrast(10) invert(1);
}
.site-footer__brand { flex: 0 0 30%; padding: 10px; }
.site-footer__brand img { width: 100%; max-width: 376px; }
.site-footer__promoters {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-left: 81px;
}
.site-footer__promoters-title {
  font-family: var(--font-body);
  font-size: var(--type-body-l-size);
  line-height: var(--type-body-l-lh);
  font-weight: 800;
  color: var(--color-white);
}
.site-footer__logos { display: flex; align-items: center; gap: 0; }
.site-footer__logos img { width: 281px; max-width: 33.333%; }
.site-footer__legal {
  max-width: 1228px;
  margin-inline: auto;
  font-family: var(--font-body);
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-lh);
  text-align: center;
  color: var(--color-white);
}
.site-footer__bar {
  background: var(--color-footer-bar);
  border-bottom: 1px solid var(--rule);
}
/* Links left, copyright hard right on a 93px column — narrow enough that it
   wraps onto two lines, as it does on the source. */
.site-footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-6) 0;
}
.site-footer__links {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 36px;
  padding-left: 43px;
}
.btn-footer {
  display: inline-block;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: var(--type-body-s-size);
  line-height: 18px;
  font-weight: 600;
  text-align: center;
  color: var(--color-white);
  background: var(--color-footer-bar);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-sm);
  transition: color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.btn-footer:hover { color: var(--color-footer-bar); background: var(--color-white); }
.site-footer__copyright {
  flex: 0 0 93px;
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  text-align: center;
  color: var(--color-white);
}

/* No clearance under the footer: the document ends where the bar ends, as on
   the source. The floating nav needs none — it is 566px wide and centred, so
   it hovers over the empty middle of the bar, between the links on the left
   and the copyright on the right. */

@media (max-width: 1024px) {
  .site-footer__inner { padding: 80px 0 32px; gap: var(--space-7); }
  .site-footer__top { flex-direction: column; gap: var(--space-7); }
  .site-footer__brand { flex: none; padding: 0; }
  .site-footer__promoters { padding-left: 0; }
  .site-footer__logos { flex-wrap: wrap; gap: var(--space-3); }
  .site-footer__logos img { max-width: 45%; }
  .site-footer__bar-inner { justify-content: center; }
  .site-footer__links { flex: 1 1 auto; justify-content: center; padding-left: 0; }
  .site-footer__copyright { flex: 0 0 auto; }
}

/* ==========================================================================
   Tablet and below — grid alignment
   The source drops the container's side gutter from 1024px down, so the
   vertical rules sit on the screen edge and the text inset comes from each
   column's own padding instead. It also retires the rules that would other-
   wise box in a stacked column. Kept last in the file so it wins over the
   per-section tablet blocks above.
   ========================================================================== */

@media (max-width: 1024px) {
  .container { padding-inline: 0; }

  /* Text and media keep a 32px inset of their own. */
  .programma__copy,
  .programma__media,
  .offerta__title-col,
  .offerta__copy,
  .percorso__title-col,
  .selezione__copy,
  .selezione__stats,
  .promotori__intro,
  .portfolio__intro,
  .portfolio__grid-wrap,
  .team__intro,
  .partners__intro,
  .cta__grid,
  .faq__inner,
  .site-footer__inner,
  .site-footer__bar-inner { padding-inline: 32px; }

  .hero__container { padding-inline: 0; }

  /* The team and partner grids stay edge to edge, so their cell rules read as
     one continuous grid. */
  .team-grid,
  .partner-grid { margin-inline: 0; }

  .carousel-band { padding: var(--space-12) 32px; }

  /* Rules the source retires at this width: with the columns stacked they
     would outline blocks rather than divide them. */
  .offerta__title-col { border-left: 0; }
  .offerta__copy { border-right: 0; }
  .percorso__title-col { border-right: 0; }
  /* Anche i promotori: impilati, quei due filetti finivano incollati ai bordi
     dello schermo, e quello di sinistra si interrompeva a metà blocco perché
     `.promoter__person` non lo porta. Nella fonte a 373 questa sezione non ha
     **nessun** bordo verticale: solo quattro filetti orizzontali a piena
     larghezza, che la replica già disegna col `border-bottom` delle sezioni. */
  .promotori__intro { border-left: 0; border-right: 0; }
  .promotori .split__spacer { border-right: 0; }

  /* Lo stesso difetto della decisione 19, in altri quattro blocchi: `--col-wide`
     (884px) e `--col-narrow` (436px) sono token di LARGHEZZA usati come base
     flex, e da 1024 in giu' lo `.split` passa a colonna - quindi diventano
     ALTEZZE fisse. Con `justify-content: center` il contenuto si parcheggiava
     in mezzo. Vuoti misurati a 373, sopra + sotto:

       .selezione__copy    884px di scatola -> 114 + 114
       .selezione__stats   436px            ->  26 +  26
       .promotori__intro   884px            -> 198 + 198
       .portfolio__intro   884px            -> 212 + 212

     In tutto 1100px di pagina vuota su un telefono. Corretto per tutto
     l'intervallo impilato, perche' la causa e' l'impilamento e non la
     larghezza dello schermo.

     Il blocco sta QUI e non accanto alle regole della selezione: una media
     query non aggiunge specificita', quindi se sta sopra alle dichiarazioni
     base di `.promotori__intro` e `.portfolio__intro` sono quelle a vincere.
     Prima versione scritta alla riga 447: correggeva solo la selezione. */
  .selezione__copy,
  .selezione__stats,
  .promotori__intro,
  .portfolio__intro {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  /* Vertical rhythm at tablet is 96px, not 80px.

     "Il Programma" is scoped to tablet only, unlike the others: the source
     gives that section 80px above its eyebrow on a phone, and the 96 written
     here for tablet was reaching phones too - both rules live in a
     max-width: 1024px block and this one comes later, so it won. Measured on
     the source at 373: the section's own container carries padding-top: 80px.
     The source's phone rhythm is not uniform either - 96, 80, 64 and 32 in
     different sections - so this is a per-section value, not a global one. */
  @media (min-width: 768px) {
    .programma__copy { padding-block: var(--space-12) var(--space-7); }
  }
  .selezione__copy,
  .promotori__intro,
  .portfolio__intro,
  .team__intro,
  .partners__intro { padding-block: var(--space-12) var(--space-7); }
}

/* ==========================================================================
   Hero at tablet (768-1024)
   The source treats this range on its own, not as a wide phone: the mark is
   140px, the copy sits on roughly half the width and is centred vertically,
   and the square clip is anchored low and cropped rather than fitted whole.
   ========================================================================== */

/* ===========================================================================
   HERO A TABLET (768-1024) - APPROVATO DA FRANCESCA L'11 SETTEMBRE 2026
   "va bene questa sezione, salvala cosi' e non toccarla piu'"
   Stato congelato: tag git `tablet-hero-ok`, misure in HUBBLE.md.
   Non ritoccare questi valori senza una sua richiesta esplicita: ogni numero
   qui dentro e' il risultato di una serie di correzioni a vista, e sono legati
   fra loro da --titolo (vedi sotto). Cambiarne uno da solo rompe i rapporti.
   =========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* L'hero non arriva alla piega: si ferma 248px prima, cosi' la sezione
     successiva si affaccia e invita a scorrere.

     Il valore non e' a occhio ma preso sulle righe di quella sezione, misurate
     dal suo bordo: occhiello a **96..132**, titolo a **192..304** in due righe
     da 56 - la prima 192..248, la seconda 248..304. Tagliare a 248 mostra
     l'occhiello e la **prima riga intera**, esattamente sul confine: ne' una
     riga mozzata a meta' altezza, ne' il vuoto che restava a 180. E vale a
     tutte le larghezze di tablet, perche' quelle misure dipendono
     dall'imbottitura della sezione e dall'interlinea, non dalla larghezza.

     Prima era 180: si vedeva l'occhiello e basta. */
  .hero {
    align-items: center;
    min-height: calc(100vh - 248px);
    min-height: calc(100svh - 248px);

    /* Le tre misure del testo sono **la terna del desktop in scala**, perche'
       Francesca vuole le stesse proporzioni: titolo 96, sottotitolo 56, logo
       202, passo fra i loghi 20. Basta quindi un numero, il corpo del titolo:
       tutto il resto si ricava da lui con i rapporti del desktop.

       Il vincolo non e' il titolo ma **la fila dei loghi**, che a quella
       proporzione e' piu' larga: con `k` la scala,

         riga piu' lunga del titolo = 6,117 x 96k          = 587k
         fila dei loghi             = 3 x 202k + 2 x 20k   = 646k
         ...che parte pero' rientrata di 0,105 x 202k, quindi occupa da
         48 - 21,2k a 48 + 624,8k

       Mettendo il telescopio al 60% della larghezza e lasciando 24px di franco:
       48 + 624,8k + 24 = 60vw, da cui k = (60vw - 72) / 624,8 e il corpo del
       titolo = 96k = (60vw - 72) x 0,15365.

       Da quando il telescopio si mostra per meta', ogni pixel che prende il
       testo ne costa **due** alla clip e uno alla porzione visibile.

       Quel numero e' il confine fra testo e telescopio, e ha fatto avanti e
       indietro: 53 -> 58 -> 64 mentre Francesca chiedeva un testo piu' grande,
       poi di nuovo **58** quando ha detto che il telescopio era troppo piccolo.
       I due si contendono gli stessi pixel e non c'e' altra sorgente: i
       rapporti fra i tre elementi sono fissi (quelli del desktop) e la fila dei
       loghi e' l'elemento piu' largo.

       Il tetto a 84px: sopra i ~1030px di larghezza il testo smette di crescere
       e lo spazio guadagnato va al telescopio. */
    --titolo: min(84px, calc((60vw - 72px) * 0.15365));
    --tagline: calc(var(--titolo) / 1.714);
    --logo: calc(var(--titolo) * 2.1042);
    --logo-passo: calc(var(--titolo) * 0.2083);

    /* Dove comincia il telescopio: subito dopo la fila dei loghi. 6,5083 =
       624,8 / 96, cioe' la larghezza della fila per ogni pixel di corpo del
       titolo; 64 = 48 di gronda + **16 di franco**.

       Il franco e' 16 e non i 24 che stanno nella formula del titolo: quei 24
       decidono quanto puo' crescere il testo, questi 16 dove comincia il
       telescopio.

       **La clip sta tutta dentro la fascia, non solo il soggetto.** Il
       telescopio si muove nel loop e in certi istanti tocca i bordi del
       fotogramma - misurato sull'asset con ffmpeg, un campione al secondo:

         t=0      x 0,113..0,900      la sagoma "a riposo"
         t=1,2    x 0,07 ..1,000      tocca il bordo destro
         t=6,7,8  x 0,000..0,92       tocca il bordo sinistro
         inviluppo su tutto il giro:  x 0,000..1,000

       Dimensionare la clip sulla sagoma a riposo - come si faceva prima -
       significava lasciarla sbordare di 39px a destra e 44 a sinistra sotto il
       testo: invisibili a t=0, ma a t=1-2 il telescopio veniva **tagliato** a
       destra e a t=6-8 finiva **sul testo**. E' la ragione per cui Francesca
       continuava a vederlo tagliato. Ora la clip occupa esattamente la fascia,
       quindi non e' mai tagliato e non tocca mai il testo - al prezzo di
       sembrare piu' piccolo nei momenti in cui il telescopio sta raccolto.

       **Ma Francesca lo vuole grande e mostrato per meta'**, quindi la clip e'
       larga il **doppio** della fascia: meta' dentro lo schermo, meta' fuori a
       destra. Il telescopio raddoppia di dimensione a parita' di porzione
       visibile - un oggetto grande tagliato dal bordo invece di uno piccolo
       intero. E' una scelta diversa da "intero", e le due si escludono:
       tornarci indietro vuol dire togliere il `* 2`.

       Il taglio a destra ora e' voluto, ma a **sinistra** no: la clip comincia
       comunque dopo i loghi, quindi anche nei fotogrammi in cui il telescopio
       si distende fino al bordo sinistro della clip (t=6,7,8) non arriva mai
       sul testo. */
    --telescopio-da: calc(64px + var(--titolo) * 6.5083);
    --clip: calc((100vw - var(--telescopio-da)) * 2);
  }

  /* Impianto a due colonne, come sul desktop: testo a sinistra, telescopio
     nella meta' destra. Prima il telescopio stava **sotto** la copia e prendeva
     la fascia che restava; da qui in poi sta **accanto** a titolo e sottotitolo,
     su richiesta di Francesca. */
  .hero__copy {
    flex: 0 0 50%;
    min-width: 0;
    align-self: center;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0 20px 48px;
  }
  /* Il marchio torna **nel flusso**, in cima alla colonna di testo, e scende
     con lei quando si centra: e' il modo di farlo stare piu' in basso senza
     rischiare che finisca sul titolo.

     Prima era assoluto, ancorato a 72px dal bordo alto, perche' Francesca lo
     voleva "in alto a sx"; poi lo ha voluto piu' giu'. Con un `top` fisso non
     si poteva: lo spazio sopra la copia dipende dall'altezza dello schermo, e
     il franco fra marchio e titolo andava da **9px a 768x1024** a **125 a
     1024x1366**. A 768 il marchio era gia' appoggiato al titolo: qualunque
     valore piu' grande di 72 ce lo faceva finire sopra.

     Nel flusso il problema non esiste: il marchio spinge il testo, lo stacco
     dal titolo e' sempre il `gap` della colonna (20px) e l'incolonnamento a
     sinistra e' esatto per costruzione, non piu' affidato a un `left` copiato
     a mano. E' anche come si comporta gia' sul telefono.

     Cadono con lui due puntelli che servivano solo a un marchio fuori dal
     flusso: lo `stretch` del contenitore e la guardia per gli hero bassi. */
  .hero__mark { width: 140px; }

  /* Le misure della copia scendono perche' ora deve stare in mezzo schermo:
     a 834 la meta' e' 417 e, tolti i 48 di gronda, restano **369px utili**.

       titolo   72px -> la riga piu' lunga ("Acceleration") viene 441: non ci
                sta. A **60** viene 367, dentro per 2px.
       loghi    202px -> la fila viene 646. Tornano a **114**, la misura che la
                fonte usa proprio qui: la fila viene 382 e finisce a 411.
       tagline  scende con il titolo per tenere il rapporto 1,71 che Francesca
                aveva chiesto: 60 / **35**, interlinee 60 e 52,5.

     Il rapporto e' quello del desktop (96/56); cambia la scala, non
     l'equilibrio. */
  .hero__title {
    font-size: var(--titolo);
    line-height: var(--titolo);
  }
  .hero__tagline {
    font-size: var(--tagline);
    line-height: calc(var(--tagline) * 1.5);
    white-space: nowrap;
  }
  /* Il sottotitolo torna allo stacco base della colonna, 20px invece di 40.
     I 40 erano stati chiesti quando il titolo era 96px: adesso che sta sui 60
     quello stacco pesava il doppio in proporzione. Lo stacco dai loghi resta 40. */
  /* Il rientro negativo allinea **l'inchiostro** dei loghi con quello del testo:
     dentro i file il disegno comincia al 10,5% della tela (x42 su 400, misurato
     sui pixel), quindi l'immagine va spostata a sinistra di quella frazione
     perche' il logo cada sui 48px di gronda come titolo e sottotitolo. Prima
     c'erano -19px fissi, copiati dal desktop dove il logo e' 202: a tablet, con
     il logo a 114, lasciavano la fila a 29 invece che a 48 - i tre loghi
     sporgevano a sinistra rispetto al testo. */
  .hero__partners {
    gap: var(--logo-passo);
    margin-left: calc(var(--logo) * -0.105);
    margin-top: var(--space-4);
    flex-wrap: nowrap;
  }
  .hero__partners img { width: var(--logo); }

  /* Niente maschera: `multiply` come sul telefono. Il fondo della clip e'
     bianco, e bianco per moltiplicazione e' l'identita' - sparisce su qualunque
     cosa ci sia sotto. Serve perche' ora la clip ha bordi liberi su tutti e
     quattro i lati, non piu' due fuori schermo e uno tagliato dall'hero. */
  .hero__media {
    top: 0;
    bottom: auto;
    height: 100%;
    -webkit-mask-image: none;
    mask-image: none;
    mix-blend-mode: multiply;
  }
  /* Il telescopio occupa la meta' destra dello schermo, intero. Si dimensiona
     il **soggetto**, non la clip: il telescopio sta fra lo 0,113 e lo 0,900
     della clip in orizzontale, quindi la clip e' 1,27 volte lui e i margini che
     avanzano sono fondo bianco, che `multiply` rende invisibile.

     Francesca lo vuole **intero**: niente piu' quarto che sborda a destra. Il
     soggetto sta quindi tutto dentro lo schermo, fra il bordo del testo e
     quello destro.

     Il **53%** non e' scelto: e' dove finisce il testo. Il titolo parte da 48 e
     la sua riga piu' lunga e' `6,117 x corpo`, col corpo a `(53vw - 72) /
     6,117` - quindi il suo bordo destro cade a `53vw - 24`, e i 24 sono il
     franco. Il telescopio comincia dove il testo ha finito.

       soggetto        = dal 53% al 98% della larghezza  -> 45%
       lato della clip = 45 / 0,787                      -> 57,18%
       sinistra clip   = 53 - 0,113 x 57,18              -> 46,54%

     La clip sborda a sinistra fin sotto il testo e a destra di un paio di
     punti: in entrambi i casi e' solo fondo, che `multiply` rende invisibile.

     `contain` e non `cover`: cover taglierebbe i lati del telescopio e ne
     mostrerebbe solo la fascia centrale.

     `max-height: 100%` serve al tablet in orizzontale, dove l'hero e' basso:
     senza, la clip alta 79,7% della **larghezza** sborderebbe sopra e sotto e
     il telescopio verrebbe tagliato in cima e in fondo invece che a destra. */
  .hero__video {
    top: 50%;
    left: var(--telescopio-da);
    transform: translateY(-50%);
    width: var(--clip);
    height: auto;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
}

@media (max-width: 767px) {
  /* The phone layout sits 16px in, not 32px. */
  .programma__copy,
  .programma__media,
  .offerta__title-col,
  .offerta__copy,
  .percorso__title-col,
  .selezione__copy,
  .selezione__stats,
  .promotori__intro,
  .portfolio__intro,
  .portfolio__grid-wrap,
  .team__intro,
  .partners__intro,
  .cta__grid,
  .faq__inner,
  .site-footer__inner,
  .site-footer__bar-inner { padding-inline: 16px; }

  .hero__copy { padding: 32px 16px 0; }

  /* Footer allineato alla gronda, come la fonte. Tre difetti, tutti miei:

     - i tre loghi dei promotori: la regola base e' `gap: 0` con
       `max-width: 33.333%`, cioe' tre in fila - esattamente cio' che fa la
       fonte a 373 (114x40 ciascuno, a 16..130, 130..243, 243..357, senza
       spazi). Un mio override in `max-width: 1024px` li mandava a capo
       (`flex-wrap: wrap`, `gap: 16px`, `max-width: 45%`): due sopra e uno
       solo sotto, con la riga di sopra che finiva a 339 invece di 357.
     - i tre link della barra bassa erano centrati (42..166, 202..331,
       55..318); la fonte li tiene **a bandiera a 16** (16..140, 164..293,
       16..279).
     - il copyright era centrato a 136..237; la fonte lo tiene a **16..116**.

     Il paragrafo legale resta centrato: la fonte lo centra anche lei
     (misurato, box 16..357 e `text-align: center`). */
  /* I tre file sono tutti 400x140, la stessa tela - ma il disegno dentro
     ciascuno ha dimensione e margini propri, misurati sui pixel:

       fcrf.webp              inchiostro 316x100 a x42  (pad 42 / 42)
       nana-bianca-nero.webp  inchiostro 290x84  a x55  (pad 55 / 55)
       fri.webp               inchiostro 333x89  a x32  (pad 32 / 35)

     Con riquadri uguali (114x40) le altezze *visibili* venivano quindi
     28,4 / 23,9 / 25,3 e i vuoti 11,9 / 27,9 / 24,1 / 10,3: loghi di tre
     misure diverse, spaziati a caso. Su richiesta di Francesca l'altezza
     dell'inchiostro viene pareggiata a `--ink` e l'imbottitura di ciascun file
     annullata con un margine negativo, cosi' i due loghi esterni cadono sulla
     gronda (16 e 357) e i due vuoti restano uguali.

     I numeri nei `calc()` sono le misure qui sopra: 140 e' l'altezza della
     tela, il denominatore l'altezza dell'inchiostro, il numeratore del margine
     la sua imbottitura laterale. Cambiare `--ink` riscala tutti e tre insieme.

     Ritagliare i file sarebbe piu' pulito, ma gli stessi tre servono anche ai
     loghi dell'hero (202x71): la correzione resta qui, nel footer e solo sul
     telefono. Sopra i 767 e nella fonte lo scarto c'e' ancora. */
  .site-footer__logos {
    /* L'altezza dell'inchiostro non e' fissa ma una frazione del contenitore,
       cosi' la fila resta piena a ogni larghezza. La somma dei rapporti
       larghezza/altezza dei tre inchiostri e' 316/100 + 290/84 + 333/89 =
       10,354; lasciando il 15% del contenitore ai due vuoti,
       inchiostro = 0,85 / 10,354 = 0,0821 della larghezza utile.
       A 373 fa esattamente 28px - l'altezza che il logo piu' grande, la
       Fondazione CR Firenze, aveva gia': gli altri due salgono al suo livello,
       nessuno rimpicciolisce. Con un tetto fisso a 28px, invece, a 767 i loghi
       restavano piccoli con 222px di vuoto fra l'uno e l'altro. */
    --ink: calc((100vw - 32px) * 0.0821);
    flex-wrap: nowrap;
    gap: 0;
    justify-content: space-between;
    align-items: center;
  }
  .site-footer__logos img { width: auto; max-width: none; }
  .site-footer__logos img:nth-child(1) {
    height: calc(var(--ink) * 140 / 100);
    margin-inline: calc(var(--ink) * -42 / 100);
  }
  /* Nana Bianca scende del 10% rispetto agli altri due, su richiesta di
     Francesca: a pari altezza d'inchiostro il suo marchio pesa di piu'. Lo
     sconto entra come `--ink-2` e vale sia per l'altezza sia per il margine,
     cosi' il negativo continua ad annullare esattamente l'imbottitura del
     file - se lo si applicasse solo all'altezza, il logo si scentrerebbe. */
  .site-footer__logos img:nth-child(2) {
    --ink-2: calc(var(--ink) * 0.9);
    height: calc(var(--ink-2) * 140 / 84);
    margin-inline: calc(var(--ink-2) * -55 / 84);
  }
  .site-footer__logos img:nth-child(3) {
    height: calc(var(--ink) * 140 / 89);
    margin-inline: calc(var(--ink) * -33.5 / 89);
  }
  .site-footer__bar-inner { justify-content: flex-start; }
  .site-footer__links { justify-content: flex-start; }

  /* I tre bottoni erano staccati di 36px su entrambi gli assi (un solo `gap`
     nella regola base, pensato per la fila unica del desktop). Sul telefono
     vanno a capo, quindi quei 36 diventavano anche lo stacco fra le righe.
     La fonte a 373 li tiene a **24px in orizzontale e 18 in verticale**
     (misurato: bottoni a 16..140 e 164..293, righe a y 25378 e 25434). */
  .site-footer__links { gap: 18px 24px; }

  /* Aria sotto la barra perche' la pillola flottante non copra il terzo
     bottone e il copyright. La nav e' `fixed` e occupa gli ultimi **88px** del
     viewport (misurati a 373: 577..665 su 665); con i 33px che c'erano, la
     pillola stava sopra l'"Informativa" e nascondeva il copyright per intero.
     104 = 88 della nav + 16 di margine.
     **La fonte ha lo stesso difetto** - 80px di barra sotto il copyright, e la
     sua pillola arriva comunque a coprirlo - quindi qui si va oltre la fonte,
     su richiesta di Francesca: i bottoni devono restare leggibili e
     cliccabili. Vedi anche la decisione 15, che vale solo per il desktop: la'
     la pillola e' larga 566px e centrata, e sorvola il vuoto in mezzo alla
     barra. */
  .site-footer__bar-inner { padding-block: var(--space-6) 104px; }

  /* Differenza voluta: la fonte da' 96px sopra l'occhiello anche qui (misurato
     a 373: 108px fra il fondo della fascia col razzo e la label, cioe' 96 di
     sezione + 12 dell'occhiello). Su richiesta di Francesca la label sale al
     passo che aveva scelto per "Il Programma", 64px -> 76px totali. */
  .selezione__copy { padding-block: var(--space-10) var(--space-7); }

  /* Differenza voluta: la fonte tiene tutta la fascia del carosello su viola,
     e la replica lo faceva con un gradiente viola all'80% e bianco al 20%, che
     lasciava la foto a cavallo dei due fondi. Su richiesta di Francesca il
     viola sparisce: la fascia prende il bianco della pagina e il passaggio
     viola/bianco diventa un taglio netto alla fine della fascia sopra. */
  .carousel-band {
    padding: var(--space-11) 16px 0;
    background-image: none;
  }
}

/* ==========================================================================
   Hero video on phones
   Desktop treats the clip as a background: full bleed, under the tinted plate,
   with the copy floating over it. The source abandons that on phones and parks
   the clip as a square object below the text, with its white box showing.

   Carried over instead: the clip sits *beside* the title, on the right, and is
   cut by the edge of the screen. The layer is 100vw square, so the clip is
   drawn at its own ratio with no crop and no zoom, and starts at 38vw - so 62%
   of it lands on screen rather than half.

   That 38% is bought by shrinking the title. The binding constraint is not the
   clip's edge but the telescope's *body*, which begins at 23% of the frame's
   width: the title has to end before it. "Acceleration" is 6.1px wide per point
   of type size, so at the previous 48px it needed 294px and crossed the body -
   measured at 3% dark pixels behind its last letters. Sized fluidly it clears
   the body at every width, and the clip gains a quarter of its visible area.

   No fade. The clip is glass on pure white, so the layer is multiplied into
   the hero's ground instead: white x #EDF0F7 is #EDF0F7 exactly, which means
   the layer has no edge to hide rather than an edge softened by a mask. The
   plate above it still multiplies on top, as everywhere else.
   ========================================================================== */

@media (max-width: 767px) {
  .hero { flex-direction: column; }

  /* Back out of the flow: it is a layer beside the title again, not a band. */
  .hero__media {
    position: absolute;
    /* In the free corner: right of the copy and below the title's longest
       line, clear of every text box. Anchored from the bottom, the offset
       counting what sits there - 48px of copy padding, one 37px row of marks,
       9px of clearance - minus the clip's own empty bottom margin, 8% of its
       height across the loop.

       Size and position come from a screenshot Francesca marked up: subject
       from y 205 to 390 and from x 240 rightwards, cut by the screen's edge.
       Read back as CSS that is a 60vw square, 20vw past the right edge, with
       its subject's bottom 29px clear of the marks.

       The clip's box overlaps the title's rows here, but its pixels do not:
       the telescope is diagonal, so the corner of its box that reaches
       "Acceleration" is empty. Checked per pixel rather than per rectangle -
       counting non-white clip pixels inside each text's box - which is the
       only test that can tell those apart. */
    top: auto;
    /* Era `calc(91px - 4.8vw)`: 91px, scesi dai 115 che lo schermo annotato
       implicava, abbassati due volte su richiesta - 17px e poi 7 - e ogni volta
       passati al test dei pixel col valore precedente come controllo. Allora
       **86px era il pavimento**, perche' sotto quel valore il soggetto arrivava
       a 6px dai marchi partner.

       **Il pavimento si e' abbassato di 24px** quando i marchi sono scesi
       (decisione 41): la clip e' ancorata al fondo come loro, quindi spostando
       giu' i marchi il franco fra il soggetto e i marchi e' cresciuto da 6 a
       30px a 390.

       Poi e' sceso in due tempi, su richiesta: prima del 30% dell'offset
       (72 -> 51 a 390), poi di altri **40px** quando Francesca ha chiesto di
       scendere ancora. A 390 l'offset e' ora **11px**.

       **Il limite l'ha deciso il test dei pixel, non una stima.** La clip viene
       disegnata su un canvas alla sua misura a schermo, un fotogramma per
       secondo su tutto il giro, e si contano i pixel non bianchi dentro il
       rettangolo di ogni testo. A 373 - la larghezza piu' stretta, dove l'hero
       e' basso e tutto si comprime - a 50px di discesa i testi sono ancora
       puliti, a **52 i marchi partner prendono i primi 120 pixel**. Quaranta
       lascia quindi 10px di margine sul punto di rottura, e a 320, 390 e 767 e'
       pulito con margine maggiore.

       `max(8px, ...)`: il termine in `vw` cresce con la larghezza, e oltre i
       ~430px l'offset diventerebbe negativo - la clip uscirebbe sotto l'hero,
       che la taglierebbe (`overflow: hidden`). Il pavimento a 8px fa scendere
       la clip di meno sui telefoni larghi, 30px a 767 invece di 40, invece di
       tagliarla.

       **Poi e' risalita del 10%**, su richiesta di Francesca, nello stesso
       passaggio in cui e' cresciuta del 15%. Il 10% e' della clip, non
       dell'offset: l'offset qui vale 11px a 390, e il suo 10% sarebbe un
       pixel - gia' una volta una percentuale dell'offset ha prodotto un
       cambiamento che Francesca non riusciva a vedere. Il termine aggiunto
       e' quindi il 10% della stessa espressione che da' il lato della clip,
       tetto compreso, cosi' la risalita resta un decimo dell'oggetto anche
       dove il tetto in `svh` governa. */
    --risalita-clip: min(6.9vw, 6.2svh);
    bottom: calc(max(8px, 24px - 3.4vw) + var(--risalita-clip));
    /* Past the right edge of the screen. The render's own slice sits exactly
       on the frame's right border, so with the border inside the page it read
       as a flat cut through the telescope with lavender beyond - measured 22
       rows of subject cut at the border. Flush (right: 0) hid it exactly; 3vw
       past keeps 12px of margin at 390 and 10px at 320, which is enough for
       subpixel rounding, while leaving the clip as far left - and so as visible
       - as that margin allows. */
    left: auto;
    /* -17vw is the limit, not a preference: swept in 1vw steps against the
       pixel test over five frames, -16vw already puts 5 pixels of antenna
       inside the box of "Acceleration" and -14vw puts 261. */
    right: -17vw;
    /* Capped by height as well as width, for the one case where 60vw is taller
       than the room the anchor leaves: on a phone held sideways, 700x400, 60vw
       is 420 against a 429 hero, so the layer overhung the hero's top by 73px
       and the subject was cut 44px into it. 62vh only ever bites there - at
       390x844 it is 523 against 234, at 320x700 434 against 192. */
    /* **+15% su richiesta di Francesca**: 60vw -> 69vw. Cresce il termine in
       `vw`, che e' la misura di disegno su ogni telefono in verticale. Il
       tetto in `svh` resta **62**, perche' non e' una misura scelta ma una
       valvola per gli schermi bassi: morde solo quando `62svh < 69vw`, cioe'
       su uno schermo piu' basso di 1,11 volte la sua larghezza - il telefono
       in orizzontale, mai uno in verticale (390x844, 373x663, 320x700 sono
       tutti abbondantemente piu' alti). Alzarlo del 15% insieme alla
       larghezza farebbe sforare la clip fuori dall'hero proprio nel caso per
       cui il tetto esiste. */
    width: min(69vw, 62vh);
    height: min(69vw, 62vh);
    width: min(69vw, 62svh);
    height: min(69vw, 62svh);
    align-self: auto;
    -webkit-mask-image: none;
    mask-image: none;
    mix-blend-mode: multiply;
  }
  .hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    /* The box is the clip's own square, so cover neither crops nor scales. */
    object-fit: cover;
    object-position: center;
  }

  /* The hero stops at its content: with the clip out of the flow there is
     nothing left to stretch to 100svh but empty lavender. The floor keeps the
     square from overhanging the section below it, and follows the lift - the
     clip's bottom edge is at 95vw now, not 100vw, so a 100vw floor left 31px
     of dead lavender under the partner marks. */
  .hero {
    /* Tall enough that the next section only peeks over the fold and invites
       the scroll, instead of taking half the screen: left at its content the
       hero was 400 on an 844 screen and the section below showed 444px of
       itself. Brought down from 86svh to 76svh, which shortens the empty
       stretch under the copy without turning the peek back into an entrance.
       The floor is the clip's own height, for wide short screens - a phone held
       sideways - where 76svh would crop the telescope. */
    min-height: max(60vw, 76vh);
    min-height: max(60vw, 76svh);
  }
  /* Grows with the hero so the copy has the full height to distribute in. */
  .hero__container {
    order: 2;
    flex: 1 1 auto;
  }
  /* I tre loghi partner scendono, su richiesta di Francesca ("sposta verso il
     basso i 3 loghi"). Non hanno una posizione propria: stanno in fondo alla
     colonna, spinti giu' dal `margin-top: auto`, quindi **l'unica cosa che li
     tiene lontani dal bordo e' l'imbottitura sotto la copia**. Da 48 a 24: i
     loghi scendono di 24px e sotto di loro restano 25px invece di 49.
     Niente rischio col telescopio: la clip finisce *sopra* la fascia dove
     arrivano adesso, quindi scendendo se ne allontanano. */
  .hero__copy { padding: 32px 16px 24px; }

  /* Titolo e tagline risalgono del 15%, su richiesta di Francesca ("sposta
     verso l'alto del 15% Titolo e sottotitolo"). Il 15% e' del blocco che si
     muove - titolo + tagline, alto 180px a 390 - quindi **27px**.

     **Non si puo' farlo togliendo spazio al margine sopra il titolo**, perche'
     quel margine non e' un valore ma una quota: la copia e' una colonna flex e
     lo spazio che avanza nell'hero viene diviso in tre margini `auto` uguali -
     sopra il titolo, sotto la tagline, sopra i marchi. Quella quota cambia
     moltissimo da telefono a telefono:

       320x568  hero 432   spazio sopra il titolo   **2,9px**
       375x568  hero 432                             13px
       766x666  hero 502                             34,7px
       375x667  hero 507                             38,1px
       360x740  hero 562                             41,9px
       390x844  hero 641                             81,3px
       430x932  hero 708                            103,6px

     Ventisette px fissi, su un iPhone 5, metterebbero il titolo **sopra il
     marchio**. Quindi la risalita e' un `clamp`: 27px dove c'e' spazio, meno
     dove non ce n'e', zero dove lo spazio e' finito.

     **Come si ricostruisce lo spazio disponibile in CSS.** Vale
     `(altezza hero - altezza del contenuto) / 3`. L'altezza dell'hero e' nota
     (`max(60vw, 76svh)`); quella del contenuto, misurata, e' praticamente
     **costante** - 392,6 a 375x667, 397,4 a 390, 397,5 a 430 e a 766 - perche'
     il titolo smette di crescere oltre i ~390 e tutto il resto e' fisso. Si usa
     **400**, un filo piu' del massimo misurato, cosi' la stima resta prudente:
     sbaglia per difetto, e sbagliare per difetto qui vuol dire alzare di meno,
     mai scavalcare il marchio. Gli 8px tolti sono il franco minimo fra marchio
     e titolo.

     `position: relative` e non un margine: cosi' il blocco scorre su se stesso
     senza toccare la distribuzione dello spazio, e marchi, clip e altezza
     dell'hero restano dove sono. Il `top` e' lo stesso per i due elementi,
     quindi la loro distanza non cambia. Non va in conflitto con `.reveal`, che
     anima `transform`. */
  .hero__copy {
    --spazio-sopra: calc((max(60vw, 76vh) - 400px) / 3);
    --spazio-sopra: calc((max(60vw, 76svh) - 400px) / 3);
    --risalita-copia: clamp(0px, calc(var(--spazio-sopra) - 8px), 27px);
  }
  .hero__title,
  .hero__tagline {
    position: relative;
    top: calc(-1 * var(--risalita-copia));
  }

  /* Differenza voluta: la fonte da' 80px sopra l'occhiello di questa sezione su
     telefono, e la regola a monte li applica. Scesi di un passo della scala, a
     64px, su richiesta di Francesca dopo averne già tolti 16 correggendo lo
     scoping. Il tablet resta a 96 e il desktop a 160. */
  .programma__copy { padding-block: var(--space-10) var(--space-7); }

  /* Stesso passo per tutti i titoli: 20px. Sei sezioni su nove lo usavano gia'
     (programma, selezione, promotori, portfolio, team, faq); queste due erano
     fuori scala - Key Benefit per il difetto sopra, la CTA per il proprio
     `gap` da 56px. Il percorso resta a 40px: quello non e' uno spazio
     titolo/testo ma il `padding-top` di ogni `timeline-step`, cioe' il ritmo
     che separa gli step fra loro. */
  .offerta__title-col { padding-bottom: var(--space-4); }
  .cta__copy { gap: var(--space-4); }

  /* Divergenza voluta, su richiesta di Francesca: marchio e bottone centrati.
     Il blocco `max-width: 1024px` mette il marchio a `top left` con
     `background-size: 290px auto`, quindi il disegno stava a 16..306 in una
     scatola 16..357 - a bandiera, con 51px di vuoto a destra. Il bottone era
     a 16..173, con 200px di vuoto a destra: **anche la fonte lo tiene a
     bandiera a 16** (misurato a 373: 16..269), quindi questa non e' una
     correzione di fedelta'. Il marchio della fonte non e' stato misurato: il
     suo sfondo e' lazy e non si carica nel pannello di verifica. */
  .cta__visual { background-position: center top; }
  /* Il pulsante e' il terzo figlio della colonna: con il gap a 20px perderebbe
     aria, quindi se la riprende da solo. */
  .cta__copy > div:last-child { margin-top: var(--space-6); text-align: center; }
  /* The slack is split rather than dumped at the end: two auto margins share
     it equally, one above the title and one above the partner marks. The mark
     keeps the top, the headline lands in the middle - beside the centred clip -
     and the marks take the bottom edge. Pinned to the top instead, with only
     the marks pushed down, the same hero left 261px of empty gradient in one
     block between the tagline and the marks. */
  .hero__title { margin-top: auto; }
  /* A third auto margin, in the same gap as the one above the marks: free
     space is shared equally between auto margins, so the lower gap takes two
     thirds and the one above the title only one. That lifts the title and the
     tagline without a fixed value, which would overflow the hero at 375x568
     where the copy already fills it and the auto margins collapse to zero. */
  .hero__tagline { margin-bottom: auto; }
  .hero__partners { margin-top: auto; }

  /* La tagline sale verso il titolo, su richiesta di Francesca ("avvicina la
     scritta al titolo"). Lo stacco strutturale va da 20 a **12px**: il `gap`
     della colonna resta 20 - lo usa anche la coppia marchio/titolo, che non
     c'entra - e qui lo si accorcia con un margine negativo mirato.
     **La fonte sta a 20**, misurata a 390: scatola 20, riga 10. Quindi questo
     e' un allontanamento voluto, non un avvicinamento alla fonte.
     Perche' -8 e non di piu': il titolo ha interlinea uguale al corpo (44/44),
     quindi la sua riga e' gia' stretta sull'occhio del carattere e sotto non
     c'e' margine da recuperare. Con -8 le due righe restano staccate di 3px di
     scatola, che a schermo sono i soli discendenti di "Program". */
  .hero__tagline { margin-top: -8px; }

  /* Down from the 48px of --type-display-xl, but only part of the way: 44px on
     a 390 phone, 36px on a 320 one. It was 34/28 while the layer sat at
     left: 20% and every extra pixel of line width ate into the telescope;
     with the layer flush right there is room to put some of it back. */
  .hero__title {
    font-size: clamp(1.875rem, 11.3vw, 2.75rem);
    line-height: 1;
  }
  /* The clip is a rotating object, so no static position can keep the text off
     its dark parts: the harmful glass - under 0.25 luminance, where contrast
     with #140261 falls below 4.5:1 - starts as early as 11% of the frame's
     width on the worst of four sampled frames, and the headline is far wider
     than that. Measured at this position: 1.4:1 on one frame, unreadable.

     Sizing the type to clear it by construction would mean a 17-22px headline,
     smaller than the body copy of the next section. So the text is made robust
     instead, with a halo in the colour the ground actually is behind the copy:
     rgb(177,193,226), the plate multiplied over the hero's #EDF0F7 - not
     #EDF0F7 itself, which would glow. Invisible on flat ground, a soft light
     edge only where a strut passes behind a letter.

     Three layers, not one: at left: 20% the glass under the headline measures
     1.0:1 on its own, so the halo carries it entirely. A solid 1px ring cuts
     the glyph out, the 4px near-solid layer separates it, and the 10px is the
     soft falloff. All three are the ground colour, so none of them shows on
     flat lavender. */
  /* The partner marks are images, so the text halo cannot reach them - and
     with the clip lower and larger they can end up over the tube: measured
     0.8:1 on three frames out of six at 320, with "FONDAZIONE CR FIRENZE"
     swallowed. drop-shadow follows their alpha (the files are transparent), so
     it rings the marks themselves, in the same ground colour as the text halo
     and therefore invisible on flat lavender. */
  .hero__partners img {
    filter:
      drop-shadow(0 0 2px rgba(177, 193, 226, 1))
      drop-shadow(0 0 5px rgba(177, 193, 226, .9));
  }

  .hero__title,
  .hero__tagline {
    text-shadow:
      0 0 1px rgba(177, 193, 226, 1),
      0 0 4px rgba(177, 193, 226, .98),
      0 0 10px rgba(177, 193, 226, .85);
  }

  /* **"Elevating tech talents" torna ai 24px della fonte**, su richiesta di
     Francesca ("ingrandisci") - cioe' si toglie l'override che lo portava a 18.

     Quei 18px erano nati quando il telescopio stava **dietro il testo**: la
     sagoma si allarga verso il basso a sinistra, e la tagline incontrava le
     parti scure molto piu' a sinistra del titolo. A 24px finiva su un montante
     con un contrasto di 1,2:1, illeggibile; a 18 lo stesso punto leggeva 7,2:1.

     Quella ragione non esiste piu': il telescopio e' stato spostato
     nell'angolo in basso a destra (differenza n. 4) e non sta piu' sotto il
     testo. Misurato sui fotogrammi, nella fascia verticale della tagline -
     0,124..0,231 dell'altezza della clip - il soggetto **non va mai piu' a
     sinistra di 0,269 della clip** su tutto il giro da 10 secondi: a 390px
     vuol dire che il suo inchiostro comincia a **x285**, mentre la tagline a
     24px finisce a **x244**. Restano 41px di franco, e la fonte usa esattamente
     24/36 qui. */
}

/* ==========================================================================
   Misura di lettura a tablet: le ultime sei sezioni
   ========================================================================== */
/* Francesca aveva gia' chiesto cinque volte *"non mandare il testo a full
   schermo"* - selezione, promotori, portfolio, team, CTA - e quelle cinque
   stanno a `min(600px, 80%)`. Le altre sei erano rimaste a colonna piena, e a
   1024 arrivavano a **960px: circa 115 caratteri per riga**, il doppio di una
   misura comoda. Misurato:

     "La rampa di lancio"        702 a 768   768 a 834   **958** a 1024
     "Key Benefit" (2 paragrafi) 704         770         **960**
     "Il percorso" (4 passi)     664         730         **920**
     risposte a soffietto (11)   635         701         **891**
     occhiello delle FAQ         704         770         **960**
     nota legale del footer      704         770         **960**

   Stessa misura delle altre cinque, su sua richiesta: *"ok porta a 600px"*.

   **Il bersaglio e' il testo, non la scatola.** In "Key Benefit" la classe
   `prose` sta sull'elemento che porta anche i 32px di rientro, quindi un
   `max-width` su di lui avrebbe ristretto la **scatola** - il testo sarebbe
   finito a 536 invece che a 600, e il rientro di sinistra si sarebbe mangiato
   la misura. Si limitano quindi i suoi paragrafi.
   Le risposte a soffietto stanno dentro un pannello gia' rientrato, quindi
   l'80% morde prima: a 768 vanno a 508 invece di 563. Resta la scelta giusta -
   e' la stessa regola, applicata al contenitore che hanno. */
@media (min-width: 768px) and (max-width: 1024px) {
  .programma__copy .prose,
  .offerta__copy > p,
  .timeline-step__body,
  .faq__inner > p.prose,
  .accordion__panel p,
  .site-footer__legal {
    max-width: min(600px, 80%);
  }

  /* "Il Programma" sulla stessa gronda di tutti gli altri.

     Il suo testo stava a **33** invece che a 32: la sezione e' disegnata
     dentro una cornice a filetto (`border-left` e `border-right` da 1px su
     `.programma__grid`), e il rientro di 32px parte da dentro il filetto.

     A tablet la cornice non ha piu' senso: il filetto interno che divideva le
     due meta' e' gia' tolto a <=1024 (`background-image: none`, la griglia
     diventa una colonna), e i due filetti laterali restano appiccicati ai
     bordi dello schermo, dove non si vedono e non dividono niente. Tolti:
     il testo cade a 32 come ovunque.

     Stessa cosa per "Il processo di selezione": anche `.selezione__copy` ha i
     due filetti laterali, ed era l'altro titolo che stava a 33. Misurati i
     dieci titoli di sezione, dopo: **tutti a 32**.

     Il telefono non si tocca - li' e' gia' coerente, tutti i titoli a 17. */
  .programma__grid,
  .selezione__copy {
    border-left: 0;
    border-right: 0;
  }
}

/* ==========================================================================
   Hero clip su schermi bassi
   La clip cresciuta del 15% e risalita del 10% non entra piu' nella fascia
   libera fra il titolo e i marchi quando l'hero e' corto. L'hero e' `76svh`,
   quindi dipende dall'altezza dello schermo: la copia invece e' sempre alta
   uguale, percio' piu' lo schermo e' basso, piu' stretta e' la fascia che
   resta alla clip.

   Misurato col test dei pixel, a `right: -17vw`, con la clip cresciuta del
   15% e la risalita piena:

     375x667  hero 507   sporca        375x720  hero 547   0
     373x663  hero 504   sporca        375x740  hero 562   0
     390x700  hero 532   sporca        390x844  hero 641   0
     375x700  hero 532   sporca        430x932  hero 708   0

   Il confine e' fra **700 e 720** di schermo. La soglia e' a **740**: prende
   tutti quelli che sporcano con un margine, e lascia fuori 375x812 e 390x844,
   cioe' i telefoni veri di oggi, dove non serve. Sopra la soglia non ci sono
   sorprese perche' il verso e' monotono - schermo piu' alto, hero piu' alto,
   clip piu' bassa rispetto alla copia, che parte dall'alto. (Non vale sotto i
   363px: la' i marchi vanno su due righe e il comportamento si rovescia, vedi
   il blocco dopo.)

   **Perche' una soglia e non un valore unico.** A -24vw sullo schermo si vede
   il 69% del soggetto invece dell'80%: sui telefoni che hanno gia' spazio
   taglierebbe il telescopio senza motivo, proprio mentre Francesca chiede di
   farlo piu' grande.

   `portrait`: in orizzontale la clip e' gia' limitata da `62svh` e -24vw ne
   lascerebbe fuori schermo i due terzi. La' resta -17vw, misurato pulito a
   700x400.

   **Nota sul metodo: i numeri di questo blocco sono stati rifatti.** I primi
   li avevo presi con un test che credevo campionasse tutto il giro da dieci
   secondi e che invece leggeva **sempre il primo fotogramma**: il server di
   sviluppo non rispondeva alle richieste `Range`, quindi il video non era
   navigabile e ogni `currentTime = t` tornava a zero. Dal vivo non si vede -
   il video parte e gira. Sistemato il server (`tools/dev-server.py`) e rifatte
   le misure sul giro intero, **stringendo i rettangoli sull'inchiostro vero**
   dei testi invece che sulle scatole di riga - che contengono l'interlinea - e
   sull'inchiostro vero dei loghi invece che sui loro riquadri, che hanno
   margine trasparente dentro il file.
   ========================================================================== */

@media (max-width: 767px) and (max-height: 740px) and (orientation: portrait) {
  /* Due cose insieme, perche' qui la fascia libera fra tagline e marchi e'
     stretta e la clip cresciuta del 15% la riempie quasi tutta:

     - **la risalita scende dal 10% al 4%**. Col 10% pieno il soggetto entra
       nella tagline (50 pixel di inchiostro vero a 373, 26 a 375x667) e per
       liberarlo servirebbe `-28vw`, che e' sul filo: a `-26` tornano 20
       pixel. Abbassando la clip di una quindicina di pixel, invece, la
       finestra pulita diventa larga - misurata zero da `-20vw` a `-28vw` -
       cioe' regge anche se il testo si compone un po' diverso.
     - **lo spostamento a destra resta -24vw**, che con la risalita ridotta
       lascia margine da entrambi i lati: a scendere ancora si tocca i
       marchi partner (8 pixel a -20px, 359 a -30px). */
  .hero__media {
    --risalita-clip: min(2.8vw, 6.2svh);
    right: -24vw;
  }
}

/* ==========================================================================
   Hero clip on the narrowest phones
   Three 106px partner marks plus their gutters need 342px, and the copy's
   padding leaves viewport - 21, so below 363px they wrap to two rows and climb
   from the hero's bottom edge to a quarter of its height: at 320 they sit at
   397-483 of a 532 hero. The clip is anchored above them, so its offset simply
   has to count two rows rather than one. No query is needed for short screens
   any more: anchoring from the marks follows the hero's height on its own.
   ========================================================================== */

@media (max-width: 362px) {
  /* Same arithmetic, two rows of marks instead of one: +49px.

     Qui i marchi vanno a capo su due righe e risalgono dal fondo dell'hero,
     quindi il soffitto per la clip e' piu' basso e l'offset piu' alto. Scende
     degli stessi **40px** della fascia sopra - 116 -> 76.

     Questa regola **riscrive** `bottom` per intero, quindi la risalita del 10%
     va ripetuta qui: senza, i telefoni sotto i 363px sarebbero gli unici a non
     seguire la richiesta di Francesca. */
  .hero__media { bottom: calc(76px - 4vw + var(--risalita-clip)); }

  /* Qui i marchi stanno su due righe, quindi il contenuto della copia e' piu'
     alto e lo spazio che avanza e' minore: la stima va rifatta. Misurato, il
     contenuto vale 423 a 320x568 e 436,7 a 360x740; si usa **446**, di nuovo
     un filo sopra il massimo, per restare prudenti. A 320x568 la formula da'
     un numero negativo e il `clamp` lo porta a zero: giusto, perche' li' lo
     spazio sopra il titolo e' 2,9px e il titolo e' gia' in alto quanto puo'. */
  .hero__copy {
    --spazio-sopra: calc((max(60vw, 76vh) - 446px) / 3);
    --spazio-sopra: calc((max(60vw, 76svh) - 446px) / 3);
  }

  /* **Qui la soglia sull'altezza non serve: serve il contrario.** Con i marchi
     su due righe la clip sta 49px piu' in alto che altrove, e la risalita del
     10% ne aggiunge altri 22: cosi' il suo bordo alto finisce nella fascia
     della tagline, e - misurato - a 320px peggiora man mano che lo schermo si
     allunga invece di migliorare, perche' e' una parte diversa del telescopio
     ad attraversare quella riga.

       a 320, `right: -17vw`    700 -> 2 180   750 -> 3 140   800 -> 5 160
       a 320, `right: -24vw`    700 ->     0   750 ->   160   800 ->   520
       a 320, `right: -28vw`    700 ->     0   750 ->     0   800 ->     0
                                850 ->     0   950 ->     0

     Niente soglia, quindi: **-28vw a ogni altezza**. Costa qualcosa - a 360 si
     vede il 61% del soggetto invece del 69% - ma e' l'unico valore che tiene
     insieme le due richieste di Francesca (piu' grande e piu' in alto) senza
     che il telescopio tocchi la tagline su nessuno schermo stretto. Rimisurato
     sul giro intero: 320x700, 320x800, 360x640, 360x740 e 360x812 a **zero**. Viene dopo la regola degli schermi bassi apposta:
     sotto i 363px vince questa. */
  .hero__media { right: -28vw; }
}

/* ==========================================================================
   Hero clip on short portrait screens
   At 375x568 the copy fills the hero (431 of 432), so the band between the
   title and the marks is only 81px against a 194px subject: the clip has to
   reach above the title's rows, and there its antenna caught the box of
   "Acceleration" - 39 pixels over three frames, found by counting clip pixels
   inside each text box rather than by intersecting rectangles. Pushed further
   right it clears by 17px instead. Portrait only: in landscape the same offset
   would put the whole subject off the screen.
   ========================================================================== */

@media (max-width: 767px) and (max-height: 640px) and (orientation: portrait) {
  /* Da -34 a **-46vw**. I -34 erano misurati su un fotogramma solo (vedi la
     nota sul server senza `Range`): sul giro intero la clip tocca la tagline
     a 320x568 e a 360x640, e il titolo a 375x568. Misurato sull'inchiostro
     vero, lungo tutto il giro:

       320x568   -34 -> 756   -42 -> 98   **-46 -> 0**
       360x640   -34 -> 210   -40 ->  0   -46 -> 0
       375x568   -34 ->  29   -38 ->  0   -46 -> 0

     Il caso stretto comanda: -46 e' il primo valore che li tiene tutti e tre.
     Qui il telescopio si vede per il 31% - ma su questi schermi era gia' un
     frammento al bordo destro, e con l'ingrandimento del 15% l'area che resta
     a schermo e' comunque maggiore di prima. */
  .hero__media { right: -46vw; }
}


/* ==========================================================================
   "Il processo di selezione" a tablet (768-1024)
   ========================================================================== */
/* Due divergenze volute dalla fonte, chieste da Francesca guardando la pagina:
   *"'processo di selezione' mettilo su due righe e il testo non mandarlo a
   full pagina"*. La fonte fa l'opposto - misurata a 834, ha il titolo su
   **una** riga (33..762, cioe' 729px in una colonna da 768: ci sta per 39px) e
   il paragrafo a tutta colonna, 33..801. La replica faceva esattamente lo
   stesso, quindi qui non si corregge un difetto: si sceglie diversamente.

   **Il titolo.** Il `max-width` non serve a dare una misura al titolo - e'
   allineato a sinistra, quindi la scatola non si vede - ma solo a **far cadere
   la riga**. Misurate le tre soglie: sopra i 729 resta su una riga; fra 430 e
   720 va a due, "Il processo di" (412) e "selezione" (300); sotto i ~400 il
   taglio si sposta a "Il processo" / "di selezione", e sotto i 350 diventano
   tre righe. I 560px stanno in mezzo alla fascia buona, 130 sopra il limite
   inferiore e 160 sotto quello superiore: il taglio regge anche se i font del
   kit non caricano e le parole cambiano larghezza.

   **Il testo.** `min(600px, 80%)` e' una misura di lettura, non una
   proporzione: 600px a 24px di corpo fanno circa 25em, cioe' 55-60 battute per
   riga, che e' la misura tipografica comoda. L'80% entra in gioco solo a 768,
   dove la colonna e' 704 e un tetto fisso da 600 lascerebbe un margine troppo
   timido per vedersi. Risultato: 563 a 768, 600 a 834 e a 1024. */
@media (min-width: 768px) and (max-width: 1024px) {
  .selezione__title { max-width: 560px; }
  .selezione__copy .prose { max-width: min(600px, 80%); }
}

/* ==========================================================================
   "Un network di innovazione" a tablet (768-1024) - il testo d'apertura
   ========================================================================== */
/* Stessa misura di lettura dei tre blocchi dei promotori, che stanno in
   `components.css` insieme al resto del componente: se l'apertura restasse a
   tutta colonna sarebbe l'unico testo della sezione a farlo. */
@media (min-width: 768px) and (max-width: 1024px) {
  .promotori__intro .prose { max-width: min(600px, 80%); }
}

/* ==========================================================================
   "Le stelle del digitale" a tablet (768-1024)
   ========================================================================== */
/* Stesso trattamento della sezione "Il processo di selezione" (differenza
   n. 25), sulla stessa richiesta: titolo su due righe e testo non a tutto
   schermo. Anche qui la fonte fa l'opposto - misurata a 834, titolo su una riga
   (621px, x32..653) e paragrafo a tutta colonna - quindi e' una scelta, non una
   correzione.

   **Il titolo.** Il `max-width` serve solo a far cadere la riga: sopra i 621
   resta su una riga; fra **380 e 620** va a due, "Le stelle del" (375) e
   "digitale" (229); a 350 il taglio si sposta a "Le stelle" / "del digitale" e
   sotto i 300 diventano tre righe. I 500px stanno in mezzo alla fascia buona,
   120 sopra il limite inferiore e 120 sotto quello superiore.
   E' un numero diverso dai 560 della Selezione perche' le parole sono diverse e
   ogni titolo ha la sua fascia: la soglia non e' una misura di disegno - il
   testo e' a bandiera, la scatola non si vede - quindi non c'e' motivo di
   costringerle allo stesso valore.

   **Il testo.** La stessa misura di lettura delle altre due sezioni,
   `min(600px, 80%)`: 563 a 768, 600 a 834 e a 1024. Il paragrafo passa da 4
   righe a 5. */
@media (min-width: 768px) and (max-width: 1024px) {
  .portfolio__title { max-width: 500px; }
  .portfolio__intro .prose { max-width: min(600px, 80%); }
}

/* ==========================================================================
   "Operation Team" a tablet (768-1024)
   ========================================================================== */
/* Solo il testo, che era l'unica cosa chiesta: il titolo sta gia' su una riga
   (514px a 834) e non aveva bisogno di essere spezzato.
   Stessa misura di lettura delle altre sezioni, `min(600px, 80%)`: 563 a 768,
   600 a 834 e a 1024. Il paragrafo passa da 3 righe a 4. La fonte lo tiene a
   tutta colonna, come gli altri - anche questa e' una scelta, non una
   correzione (differenza n. 25). Le schede delle persone qui sotto stanno gia'
   su due colonne, quindi i loro testi non erano a tutta larghezza. */
@media (min-width: 768px) and (max-width: 1024px) {
  .team__copy .prose { max-width: min(600px, 80%); }
}

/* ==========================================================================
   CTA finale a tablet (768-1024) - marchio e bottone al centro
   ========================================================================== */
/* Stessa richiesta gia' fatta per il telefono (differenza n. 18), ora per il
   tablet: *"metti il bottone e il logo al centro"*.

   **Il marchio.** Il blocco `max-width: 1024px` lo mette a `top left` con
   `background-size: 290px auto`: misurato a 834 il disegno stava a **32..322**
   in una scatola larga 770, cioe' a bandiera con **448px di vuoto a destra**.
   Con `center top` il disegno si centra e resta appeso in alto, dove la fonte
   lo tiene.

   **Il bottone** era a 32..315 con 487px di vuoto a destra. Si centra dal
   contenitore, non da se stesso: e' un `inline-block` dentro un `div` di
   blocco, quindi basta `text-align: center` su quel `div`. Non serve il
   `margin-top` che il telefono aggiunge: li' il `gap` della colonna scende a
   20px e il bottone doveva riprendersi l'aria, qui resta a 56.

   La misura del bottone sta in `components.css`, accanto alla regola base.
   Anche qui e' una divergenza voluta: la fonte tiene entrambi a bandiera. */
@media (min-width: 768px) and (max-width: 1024px) {
  .cta__visual { background-position: center top; }
  .cta__copy > div:last-child { text-align: center; }
  /* Aria fra bottone e marchio, su richiesta: *"distanzia un po' il bottone dal
     logo"*. Il bottone e' l'ultimo figlio della colonna di testo e la colonna
     non ha imbottitura sotto, quindi quello spazio **e' il `gap` della griglia**
     - unica cosa da toccare, e tocca solo quella coppia, perche' a tablet la
     griglia ha due soli figli (`column-reverse`: prima il testo, poi il
     marchio).
     Da 32 a **56px**, che e' il passo gia' usato dentro questa stessa sezione
     (`.cta__copy`) e non un valore nuovo. Contando l'imbottitura dentro il file
     - l'inchiostro comincia all'1% della tela, cioe' 1,6px a 290 di larghezza -
     lo stacco che si vede passa da **33,6 a 57,6px**.
     Serviva perche' il bottone e' cresciuto del 25% (differenza n. 18): la
     stessa aria di prima, sotto un bottone piu' grande, si leggeva come meno. */
  .cta__grid { gap: var(--space-9); }
}

/* Il testo del CTA alla stessa misura di lettura delle altre sezioni
   (differenza n. 25), chiesto subito dopo il centraggio: `min(600px, 80%)`.
   Qui il `.prose` e' il paragrafo stesso, non un contenitore. Resta a bandiera
   a 32 come il titolo: al centro stanno solo marchio e bottone. */
@media (min-width: 768px) and (max-width: 1024px) {
  .cta .prose { max-width: min(600px, 80%); }
}

/* ==========================================================================
   Footer a tablet (768-1024) - torna a due colonne, come la fonte
   ========================================================================== */
/* Il blocco `max-width: 1024px` del footer era scritto per il **telefono** e si
   prendeva anche il tablet: impilava le due colonne, allargava il marchio,
   portava i loghi al 45% e centrava i link della barra. Sul telefono viene
   riscritto dal blocco `max-width: 767px`, quindi quelle regole in pratica
   governavano solo il tablet - e li' sono sbagliate.

   **Misurata la fonte a 834**, il footer resta a **due colonne**: marchio a
   sinistra 211x38 da x42, "I promotori del progetto" e i tre loghi a destra da
   **x344**, i loghi **153x53 in fila unica** che chiudono a 802. I link della
   barra partono da **x32**, non centrati, con 36px fra l'uno e l'altro.

   La cosa notevole e' che **le regole base producono gia' esattamente quei
   numeri**: marchio `flex: 0 0 30%` con `padding: 10px` -> colonna 231, immagine
   211; promotori con `padding-left: 81px` -> partono a 32+231+81 = **344**;
   loghi a `max-width: 33.333%` di 458 -> **152,7**. Non c'e' niente da
   inventare: basta smettere di sovrascriverle. Questo blocco quindi **disfa**,
   una per una, le regole del telefono.

   Restano fuori due cose. Il `padding-left: 0` dei link resta quello del
   telefono, perche' i 43px della regola base porterebbero il primo bottone a 75
   e la fonte lo tiene a 32. E l'aria sotto la barra e' una divergenza voluta,
   la stessa gia' fatta sul telefono: vedi sotto.

   **Il quadrato nero sul marchio non e' un difetto nostro.** Il footer passa i
   file scuri per `grayscale(1) saturate(10) contrast(10) invert(1)` per averli
   bianchi sul viola, e quel filtro lascia un blocco pieno sul distintivo del
   satellite: **la fonte usa la stessa catena di filtri e ha lo stesso blocco**
   (verificato sul sito vero, e' su un antenato dell'immagine). Con il marchio
   riportato a 211px il blocco torna piccolo come li'. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Anche il `gap`, non solo la direzione: il blocco del telefono ne mette 40
     per separare le due colonne impilate, e in riga quei 40 si sommavano alla
     colonna del marchio - i promotori partivano da **384** invece che da 344,
     e i loghi scendevano da 153 a 139. La regola base non ha `gap`. */
  .site-footer__top { flex-direction: row; gap: 0; }
  .site-footer__brand { flex: 0 0 30%; padding: 10px; }
  .site-footer__promoters { padding-left: 81px; }
  /* I tre loghi erano **larghi uguali** - 153px per uno, il 33,333% della
     colonna, come la fonte - ma larghi uguali non vuol dire **grandi uguali**:
     dentro i file il disegno ha misure e gronde diverse. Misurato sui pixel,
     su una tela da 400x140:

       fcrf   inchiostro 316x100, gronde 42 / 42, alto 20 / 20
       nana   inchiostro 290x84,  gronde 55 / 55, alto 28 / 28
       fri    inchiostro 333x89,  gronde 32 / 35, alto 28 / 23

     A 153px di scatola l'inchiostro veniva quindi alto **38,3 / 32,1 / 34,0** e
     partiva da x360 / x518 / x661 - tre altezze e tre passi diversi. E' la
     stessa cosa gia' corretta sul telefono (decisione 27), che qui non era
     arrivata perche' quella regola sta nel blocco `max-width: 767px`.

     La correzione e' la stessa: si fissa **l'altezza dell'inchiostro**, non
     quella della scatola, e si annulla con un margine negativo la gronda che
     ogni file si porta dentro - cosi' i tre disegni hanno lo stesso peso e la
     fila, con `space-between`, va da un bordo all'altro della colonna con due
     vuoti uguali.

     `--ink` e' l'altezza dell'inchiostro e viene dalla larghezza della colonna,
     non da un valore fisso, cosi' la fila resta piena a ogni larghezza di
     tablet: la colonna e' `(100vw - 64) * 0,7 - 81` (tolte le due gronde da 32,
     il 30% del marchio e gli 81 di rientro dei promotori - verificato: 458 a
     834, 412 a 768, 591 a 1024). La somma dei rapporti larghezza/altezza dei
     tre inchiostri e' 3,16 + 3,452 + 3,742 = **10,354**; lasciando il 15% della
     colonna ai due vuoti, inchiostro = 0,85 / 10,354 = **0,0821** della
     colonna, cioe' 37,6px a 834.

     Nana Bianca resta al **90%** degli altri due, come sul telefono e per la
     stessa ragione: a pari altezza d'inchiostro il suo marchio pesa di piu'.
     Lo sconto entra come `--ink-2` e vale sia per l'altezza sia per il margine,
     altrimenti il negativo non annullerebbe piu' esattamente la gronda del file
     e il logo si scentrerebbe. */
  .site-footer__logos {
    --ink: calc(((100vw - 64px) * 0.7 - 81px) * 0.0821);
    flex-wrap: nowrap;
    gap: 0;
    justify-content: space-between;
    align-items: center;
  }
  .site-footer__logos img { width: auto; max-width: none; }
  .site-footer__logos img:nth-child(1) {
    height: calc(var(--ink) * 140 / 100);
    margin-inline: calc(var(--ink) * -42 / 100);
  }
  .site-footer__logos img:nth-child(2) {
    --ink-2: calc(var(--ink) * 0.9);
    height: calc(var(--ink-2) * 140 / 84);
    margin-inline: calc(var(--ink-2) * -55 / 84);
  }
  .site-footer__logos img:nth-child(3) {
    height: calc(var(--ink) * 140 / 89);
    margin-inline: calc(var(--ink) * -33.5 / 89);
  }
  .site-footer__bar-inner { justify-content: space-between; }
  .site-footer__links { justify-content: flex-start; }

  /* Aria sotto la barra perche' la pillola flottante non copra i bottoni.
     La nav e' `fixed` e occupa gli ultimi **88px** del viewport; con i 32 che
     c'erano, la pillola - centrata, da 325 a 514 a 834 - stava sopra "Cookies
     Policy" e "Informativa Acceleratore Certificato".
     Il numero **non e' scritto a mano**: `--nav-ingombro` e' dichiarato dove la
     barra flottante e' disegnata (`components.css`) e vale quanto la barra
     occupa davvero, pillola e stacchi compresi; qui si aggiunge il margine.
     Scritto a mano si era gia' sfasato una volta - la pillola e' cresciuta e i
     104 fissi, buoni per una barra da 88, lasciavano 6px di franco invece di 16.

     **Il margine e' 64 e non 16**, su richiesta di Francesca *"allunga il
     background viola per mostrare i bottoni"*. Misurato qui, con 16 i bottoni
     erano gia' liberi - finivano **27px sopra** il bordo alto della pillola -
     ma quel conto vale solo in un browser da scrivania, dove il viewport
     arriva davvero fino al fondo dello schermo. **Su un tablet vero no**: la
     barra degli indirizzi mangia il fondo, un elemento `fixed` si appoggia al
     viewport *visuale* e quindi sale, e con 27px di franco finisce sopra i
     bottoni. I 64 portano il franco a **75px**, che copre l'ingombro tipico di
     quella barra. Costa solo fascia viola in piu', che e' esattamente quello
     che lei ha chiesto.
     **La fonte ha lo stesso difetto**, quindi anche qui si va oltre la fonte su
     richiesta di Francesca: i bottoni devono restare leggibili e cliccabili. */
  .site-footer__bar-inner {
    padding-block: var(--space-6) calc(var(--nav-ingombro, 88px) + 64px);
  }
}


/* ==========================================================================
   Barra bassa del footer sul desktop (da 1025)
   ========================================================================== */
/* La pillola flottante copriva per intero il terzo bottone, "Informativa
   Acceleratore Certificato". Misurato a 1440 con la pagina scorsa in fondo:
   pillola a **439..1001** e fra **32 e 118px** dal fondo del documento, bottone
   a **428..691** e fra **37 e 75**. Si sovrappongono su tutti e due gli assi.
   I primi due bottoni, che finiscono a 392, restano fuori.

   Non era una conseguenza dell'aver alzato la pillola: con i 10px di prima
   stava fra 10 e 86 e copriva quel bottone allo stesso modo. Era li' da sempre,
   e una nota della decisione 15 diceva il contrario - che la pillola sorvola il
   vuoto in mezzo alla barra. Quella nota e' stata corretta.

   La cura e' la stessa di telefono e tablet: la barra prende sotto l'ingombro
   della pillola (`--nav-ingombro`, dichiarata dove la pillola e' disegnata) piu'
   un margine. **16 e non 64 come a tablet**: li' il margine largo serve perche'
   la barra degli indirizzi di un browser da telefono mangia il fondo del
   viewport e fa salire gli elementi `fixed`; su un browser da scrivania il
   viewport finisce dove finisce lo schermo, e 16px bastano.
   Risultato a 1440: barra alta **215** invece di 113, bottoni liberi con 16px
   di franco. Anche questa, come sul telefono e sul tablet, e' una divergenza
   voluta: la fonte ha lo stesso difetto. */
@media (min-width: 1025px) {
  .site-footer__bar-inner {
    padding-block: var(--space-6) calc(var(--nav-ingombro, 88px) + 16px);
  }
}