/*
 * Slogan Website - layout e movimento delle pagine principali.
 *
 * Stesso vocabolario dei case study: nero pieno, bianco, titoli grandi con
 * tracking stretto, etichette maiuscole spaziate, bordi da 1px e angoli vivi.
 *
 * Quasi tutte le animazioni sono CSS. Il JavaScript mette una classe quando
 * un blocco entra nello schermo, fa salire i contatori e disegna il canvas
 * Three.js della hero: se non parte, la pagina resta leggibile. E' il motivo per
 * cui gli stati di partenza vivono dentro '.slgn-reveal' e non su tutto.
 *
 *   1  Token e base
 *   2  Impaginazione
 *   3  Tipografia
 *   4  Movimento
 *   5  Apertura
 *   6  Intestazioni di sezione
 *   7  Servizi
 *   8  Nastro scorrevole
 *   9  Numeri
 *   10 Metodo
 *   11 Schede
 *   12 Contatti
 *   13 Chiusura
 *   14 Telefono
 */

/* ------------------------------------------------------------------ *
 * 1. Token e base
 * ------------------------------------------------------------------ */

.slgn-site {
  --ws-ink: #080808;
  --ws-ink-soft: #101010;
  --ws-ink-lift: #161616;
  --ws-paper: #ece9e1;
  --ws-white: #ffffff;
  --ws-silver: #c9c9c7;
  --ws-mute: #6c6d70;

  --ws-line: rgba(255, 255, 255, .16);
  --ws-line-soft: rgba(255, 255, 255, .08);

  --ws-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ws-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ws-serif: Georgia, "Times New Roman", serif;

  --ws-pad: clamp(1.25rem, 4vw, 4.75rem);
  --ws-gap: clamp(3.5rem, 9vw, 9rem);
  --ws-ease: cubic-bezier(.22, .72, .2, 1);

  /* Le due durate del passaggio del mouse. Non sono inventate: sono le due
     gia' piu' usate in questo foglio, promosse a misura unica perche' fra
     .3 e .5 secondi la differenza si sente e un sito in cui ogni elemento
     risponde con un tempo suo sembra fatto da persone diverse.
     Il colore e' rapido, il movimento ha bisogno di piu' strada. */
  --ws-hover: .3s var(--ws-ease);
  --ws-move: .45s var(--ws-ease);

  background: var(--ws-ink);
  color: var(--ws-paper);
}

/* Il tema stacca il contenuto dall'header con 130px di padding: qui la
   prima sezione comincia dove finisce l'header, come nei case study. */
.slgn-site #pxl-main,
.slgn-site #pxl-wapper #pxl-main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.slgn-site #pxl-page-title-default,
.slgn-site #pxl-page-title-elementor {
  display: none !important;
}

body.slgn-site .pxl-loader,
body.slgn-site .pxl-loader-curve,
body.slgn-site .pxl-loading,
body.slgn-site #pxl-preloader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.slgn-ws * { box-sizing: border-box; }

.slgn-ws {
  /* 'clip' e non 'hidden': hidden su un asse fa diventare l'altro asse
     scorrevole, e un contenitore scorrevole annulla 'position: sticky' per
     tutto quello che sta dentro. L'indice del metodo restava fermo in cima
     e usciva dallo schermo. 'clip' taglia allo stesso modo senza creare
     nessun contenitore di scorrimento. */
  overflow-x: clip;
  font-family: var(--ws-sans);
  font-size: 17px;
  line-height: 1.62;
}

.slgn-ws img { display: block; max-width: 100%; }

/* ------------------------------------------------------------------ *
 * 2. Impaginazione
 * ------------------------------------------------------------------ */

.slgn-sec {
  position: relative;
  padding: var(--ws-gap) var(--ws-pad);
  border-top: 1px solid var(--ws-line-soft);
}

.slgn-sec--flush { border-top: 0; }
.slgn-sec--tight { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.slgn-sec--lift { background: var(--ws-ink-soft); }

.slgn-sec--contrast {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.56)),
    var(--slgn-section-bg, none) center / cover no-repeat,
    var(--ws-ink);
}

.slgn-wrap {
  width: min(84rem, 100%);
  margin-inline: auto;
}

.slgn-wrap--narrow { width: min(56rem, 100%); }

.slgn-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 760px) {
  .slgn-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slgn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slgn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .slgn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ *
 * 3. Tipografia
 * ------------------------------------------------------------------ */

/* Tutti i titoli in maiuscolo, peso 500.
 *
 * Il tracking negativo di prima (-.045em) era tarato su un display face in
 * minuscolo: li' stringere compatta le parole, perche' le aste che salgono e
 * scendono tengono le lettere distinte. In maiuscolo non ci sono aste, tutte
 * le lettere sono rettangoli della stessa altezza, e stringerle le fa
 * toccare. Da qui in giu' il segno e' invertito. */
.slgn-ws h1,
.slgn-ws h2,
.slgn-ws h3,
.slgn-ws h4 {
  margin: 0;
  color: var(--ws-paper);
  font-family: var(--ws-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* Sulla home lo slogan dell'apertura esce come <p> e l'h1 passa alla prima
 * riga sotto (block-apertura.php, testa()). Il titolo deve restare come
 * prima, quindi riprende qui quello che gli dava la regola sopra - piu' il
 * clear del tema sugli h1. Il :where() tiene il peso uguale a ".slgn-ws h1",
 * cosi' le regole che lo battevano prima lo battono ancora. */
.slgn-ws p:where(.slgn-hero__title) {
  clear: both;
  margin: 0;
  color: var(--ws-paper);
  font-family: var(--ws-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* L'h1 dentro la riga di apertura: in linea e uguale al testo intorno. */
.slgn-ws .slgn-lead__titolo {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.slgn-display {
  font-size: clamp(2.6rem, 9.4vw, 7.4rem);
  line-height: .92;
  letter-spacing: -0.022em;
  text-transform: uppercase;
}

.slgn-h2 { font-size: clamp(1.95rem, 4.9vw, 3.9rem); line-height: .98; letter-spacing: -0.014em; }
.slgn-h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.06; letter-spacing: -0.004em; }

/* ------------------------------------------------------------------ *
 * L'accento
 *
 * Era un corsivo serif: in un impianto a due toni faceva le veci del colore
 * che non c'e'. Con i titoli tutti in Inter Tight maiuscolo quel corsivo
 * diventava un intruso - un secondo carattere, in minuscolo, in mezzo a una
 * riga di maiuscole.
 *
 * L'accento adesso e' la stessa parola, stesso carattere, stesso corpo, ma
 * vuota: solo il contorno. Nessun carattere in piu' da scaricare, e il
 * contrasto e' piu' netto di quanto fosse il corsivo, perche' cambia la
 * consistenza della parola invece della sua forma.
 * ------------------------------------------------------------------ */
.slgn-em,
.slgn-word--em {
  font-family: inherit;
  font-style: normal;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* L'accento e' un cambio di peso, non di forma.
 *
 * Prima era il contorno: la parola vuota, disegnata a filo. Su un titolo
 * gigante funzionava; su un titolo di sezione, dove il filo resta di un
 * pixel mentre le lettere crescono, diventava una parola che si intuisce e
 * non si legge - e vicino al pieno sembrava un errore di stampa.
 *
 * Inter Tight e' un carattere variabile: fra il 500 dei titoli e il 300
 * dell'accento c'e' tutto lo stacco che serve, e la parola resta piena.
 * Nessun carattere in piu' da scaricare, e nessuna misura in cui smette di
 * funzionare. */
.slgn-em,
.slgn-word--em {
  color: var(--ws-white);
  font-weight: 300;
}

/* Il testo da leggere, un filo sotto il peso normale.
 *
 * Su fondo nero il chiaro dilata: le stesse lettere che su carta bianca sono
 * un 400 pulito, in negativo sembrano un 500. Non e' un'impressione, e' come
 * lo schermo accende i pixel intorno al segno - e a corpo grande, dove le
 * aste sono gia' spesse, si vede tutto.
 *
 * Inter e' variabile fra 100 e 900, quindi 340 e 380 sono pesi veri e non
 * un finto assottigliamento del browser. Il paragrafo di apertura, che sta
 * sui venti pixel, regge il 340; il testo corrente sta a diciassette e resta
 * piu' alto, perche' sotto una certa misura il chiaro su nero non diventa
 * elegante, diventa sfocato. */
.slgn-lead {
  max-width: 44rem;
  margin: 0;
  color: var(--ws-silver);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  font-weight: 340;
  line-height: 1.6;
  letter-spacing: .002em;
}

.slgn-body {
  margin: 0 0 1.1rem;
  color: var(--ws-silver);
  font-weight: 380;
}

.slgn-body:last-child { margin-bottom: 0; }

.slgn-label {
  display: inline-block;
  margin: 0 0 1.4rem;
  color: var(--ws-mute);
  font-family: var(--ws-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.slgn-num {
  color: var(--ws-mute);
  font-family: var(--ws-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

/* -- pulsanti -- */

.slgn-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1.05rem 2.1rem;
  border: 1px solid var(--ws-paper);
  background: var(--ws-paper);
  color: var(--ws-ink);
  font-family: var(--ws-display);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .35s var(--ws-ease), color .35s var(--ws-ease),
              transform .35s var(--ws-ease), border-color .35s var(--ws-ease);
}

.slgn-btn:hover,
.slgn-btn:focus-visible {
  background: var(--ws-white);
  border-color: var(--ws-white);
  color: var(--ws-ink);
  transform: translateY(-2px);
}

.slgn-btn--ghost {
  background: transparent;
  border-color: var(--ws-line);
  color: var(--ws-paper);
}

.slgn-btn--ghost:hover,
.slgn-btn--ghost:focus-visible {
  background: transparent;
  border-color: var(--ws-white);
  color: var(--ws-white);
}

.slgn-btn i {
  font-style: normal;
  transition: transform .35s var(--ws-ease);
}

.slgn-btn:hover i { transform: translateX(4px); }

.slgn-ws :focus-visible {
  outline: 2px solid var(--ws-white);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * 4. Movimento
 *
 * Ogni selettore qui sotto parte da '.slgn-ws'. La classe '.slgn-reveal' la
 * usa anche il plugin dei case study, con una sua classe di arrivo
 * ('slgn-is-visible' invece di 'is-in'): senza il vincolo al contenitore, la
 * regola 'opacity: 0' di questo foglio arrivava anche li' e, avendo la
 * stessa specificita' ma venendo caricata dopo, teneva invisibile tutta la
 * pagina del case study.
 *
 * Un solo meccanismo per tutto: '.slgn-reveal' parte spostato e trasparente,
 * il JS aggiunge '.is-in' quando il blocco entra nello schermo. Il ritardo
 * lo porta ogni elemento in '--i', cosi' una fila di schede entra a cascata
 * senza una riga di JavaScript in piu'.
 * ------------------------------------------------------------------ */

/* Il ritardo e' tagliato da 'min()': la cascata serve a far entrare una fila
   di schede una dopo l'altra, non a far aspettare l'ultima. Senza il tetto,
   un elemento con '--i:7' partiva mezzo secondo dopo essere gia' comparso
   sullo schermo, e si vedeva il buco. */
.slgn-js .slgn-ws .slgn-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ws-ease), transform .6s var(--ws-ease);
  transition-delay: min(calc(var(--i, 0) * 55ms), 260ms);
}

.slgn-js .slgn-ws .slgn-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Chi compare e poi risponde al mouse.
 *
 * La regola qui sopra non aggiunge una transizione: la sostituisce. Un
 * elemento che ha 'slgn-reveal' e che al passaggio del mouse cambia
 * qualcosa - le righe dei lavori, la scheda del progetto grande - si
 * ritrovava quel cambiamento senza transizione, perche' le uniche due
 * proprieta' dichiarate transitorie erano opacita' e spostamento.
 *
 * Qui, una volta comparso ('is-in'), la transizione torna a essere quella
 * che serve a lui. E il ritardo si azzera: quello scaglionava l'ingresso -
 * fino a un quarto di secondo - e sul passaggio del mouse sarebbe una
 * risposta in ritardo, cioe' la cosa che fa sembrare un sito lento. */
.slgn-js .slgn-ws .slgn-workrow.is-in,
.slgn-js .slgn-ws .slgn-feature.is-in {
  transition: padding-left var(--ws-move), color var(--ws-hover);
  transition-delay: 0s;
}

/* Quello che c'e' per chi ascolta la pagina e non per chi la guarda.
 *
 * Questa regola stava solo dentro chrome.css, e li' era scritta come
 * '.slgn-hdr .slgn-sr-only, .slgn-ftr .slgn-sr-only': valeva nella testata e
 * nel piede, e in nessun altro punto della pagina.
 *
 * Il conto e' arrivato sulla pagina S-Logan. Quando una pagina non ha un
 * blocco di apertura, il renderer stampa lui il titolo in un H1 marcato
 * 'slgn-sr-only' - c'e' per un motore di ricerca e per chi ascolta, e non
 * deve vedersi. Non essendo ne' in testata ne' nel piede, quella classe non
 * aveva nessuna regola addosso: "S-LOGAN" compariva alto quaranta pixel in
 * cima alla pagina, mezzo sotto alla testata, e spingeva giu' il racconto.
 *
 * Una classe che significa "invisibile" non puo' dipendere da dove si trova
 * chi la porta. Qui vale ovunque, e chrome.css puo' tenersi la sua: due
 * regole identiche non fanno danno, una regola che manca si'. */
.slgn-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le parole di un titolo salgono da sotto una riga invisibile: e' il
   movimento che da' il tono "motion graphic" senza nessuna libreria. */
.slgn-words {
  display: inline;
}

.slgn-word {
  display: inline-block;
  transform: translateY(0);
}

.slgn-js .slgn-ws .slgn-reveal .slgn-word {
  opacity: 0;
  transform: translateY(.5em) rotate(1.2deg);
  transition: opacity .5s var(--ws-ease), transform .5s var(--ws-ease);
  /* Stesso tetto delle sezioni: un titolo di dodici parole finisce di
     comporsi in un terzo di secondo invece che in due terzi. */
  transition-delay: min(calc(var(--i, 0) * 34ms), 300ms);
}

.slgn-js .slgn-ws .slgn-reveal.is-in .slgn-word {
  opacity: 1;
  transform: none;
}

/* Una riga che si disegna da sinistra */
.slgn-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--ws-line);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ws-ease);
}

.slgn-ws .slgn-reveal.is-in .slgn-rule,
.slgn-ws .slgn-rule.is-in { transform: scaleX(1); }

/* Chi ha chiesto meno animazioni le ottiene: tutto compare fermo. */
@media (prefers-reduced-motion: reduce) {
  .slgn-ws .slgn-reveal,
  .slgn-ws .slgn-reveal .slgn-word,
  .slgn-ws .slgn-rule {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .slgn-marquee__track { animation: none !important; }
}

/* ------------------------------------------------------------------ *
 * 5. Apertura
 * ------------------------------------------------------------------ */

.slgn-hero {
  position: relative;
  display: grid;
  min-height: min(66vh, 40rem);
  padding: calc(var(--ws-pad) + 2.7rem) var(--ws-pad) calc(var(--ws-pad) + 2rem);
  align-content: center;
  overflow: hidden;
}

.slgn-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #030303;
}

.slgn-hero__media iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.78vh);
  height: max(56.25vw, 100vh);
  border: 0;
  transform: translate(-50%, -50%);
}

.slgn-hero__media video,
.slgn-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slgn-hero__media iframe,
.slgn-hero__media video,
.slgn-hero__media img {
  opacity: .26;
  filter: grayscale(1) contrast(1.25) brightness(.62);
}

.slgn-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 76% 30%, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.42) 52%, rgba(0,0,0,.9));
  pointer-events: none;
}

.slgn-three {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: .74;
  mix-blend-mode: screen;
}

.slgn-hero__scan {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: .11;
  background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(255,255,255,.13) 10px);
  mix-blend-mode: screen;
  animation: slgn-scan 9s linear infinite;
}

.slgn-kinetic {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .36;
}

.slgn-kinetic span {
  position: absolute;
  width: 1px;
  height: 42vh;
  background: linear-gradient(transparent, rgba(255,255,255,.78), transparent);
  transform: rotate(24deg);
  animation: slgn-lineFall 8s linear infinite;
}

.slgn-kinetic span:nth-child(1) { left: 18%; top: -18%; animation-delay: 0s; }
.slgn-kinetic span:nth-child(2) { left: 46%; top: -30%; animation-delay: 1.7s; }
.slgn-kinetic span:nth-child(3) { left: 72%; top: -24%; animation-delay: 3.2s; }
.slgn-kinetic span:nth-child(4) { left: 88%; top: -36%; animation-delay: 5s; }

@keyframes slgn-scan {
  from { transform: translateY(-2rem); }
  to { transform: translateY(2rem); }
}

@keyframes slgn-lineFall {
  from { transform: translate3d(-18vw, -40vh, 0) rotate(24deg); opacity: 0; }
  18% { opacity: 1; }
  70% { opacity: .7; }
  to { transform: translate3d(20vw, 120vh, 0) rotate(24deg); opacity: 0; }
}

/* Il fondo: due aloni che respirano lentamente. Sostituiscono l'immagine
   di scena della demo, pesano zero e non si scaricano. */
.slgn-hero::before,
.slgn-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.slgn-hero::before {
  width: 46vw;
  height: 46vw;
  top: -14vw;
  right: -10vw;
  background: rgba(255, 255, 255, .07);
  animation: slgn-drift 22s var(--ws-ease) infinite alternate;
}

.slgn-hero::after {
  width: 34vw;
  height: 34vw;
  bottom: -12vw;
  left: -8vw;
  background: rgba(255, 255, 255, .045);
  animation: slgn-drift 28s var(--ws-ease) infinite alternate-reverse;
}

@keyframes slgn-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3vw, 4vw, 0) scale(1.14); }
}

.slgn-hero__inner {
  position: relative;
  z-index: 2;
  width: min(88rem, 100%);
  margin-inline: auto;
}

/* ================================================================== *
 * IL FILMATO DI FONDO DELL'APERTURA, E IL VELO CHE CI VA SOPRA
 *
 * Il contenitore del video se lo posiziona da se': '.slgn-vd--fondo' di
 * slogan-video e' gia' inset:0 e z-index:0, cioe' esattamente il piano dei
 * due aloni qui sopra. Percio' qui non c'e' una regola di posizione per il
 * filmato: c'e' quella che TOGLIE gli aloni quando il filmato c'e'.
 *
 * Il motivo e' l'ordine di disegno, non il gusto. A parita' di z-index dipinge
 * prima lo '::before', poi i figli veri, poi lo '::after': l'alone in basso a
 * sinistra finirebbe SOPRA al video: una macchia bianca sfocata da 34vw in
 * mezzo alle riprese. Gli aloni erano nati per sostituire un'immagine di
 * scena che non c'era; quando l'immagine di scena c'e' - e si muove - non
 * servono piu'.
 *
 * ':has()' e non una classe scritta dal PHP perche' la condizione e' proprio
 * "questa apertura ha un filmato dentro", e il selettore la sa leggere da
 * solo: una classe in piu' sarebbe una seconda verita' da tenere allineata a
 * quella vera. Lo stesso costrutto e' gia' usato altrove nel sito.
 * ================================================================== */

.slgn-hero:has(.slgn-hero__film)::before,
.slgn-hero:has(.slgn-hero__film)::after { content: none; }

/* IL VELO.
 *
 * Sta fra il filmato (z-index 0) e le parole (z-index 2), e ha uno z-index
 * suo perche' e' l'unico modo di essere sicuri che stia in mezzo e non sopra
 * al titolo.
 *
 * Le due manopole arrivano dal builder come variabili: la forza e' l'opacita'
 * al punto piu' coperto, la tinta e' scritta come tre numeri - "5, 5, 5" - e
 * non come '#050505' perche' qui dentro finisce in quattro rgba() diverse con
 * opacita' diverse lungo la sfumatura, e un esadecimale andrebbe spezzato.
 *
 * Il velo non e' una cortesia: un titolo bianco su un filmato e' leggibile
 * finche' il filmato resta scuro, e nessuno sa che colore avra' il
 * fotogramma che capita sotto la parola. Per questo il taglio di fabbrica e'
 * "piu' scuro in basso": copre dove stanno le parole e lascia respirare
 * l'inquadratura in alto. */
.slgn-hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.slgn-hero__velo--uniforme {
  background: rgba(var(--velo-tinta), var(--velo-forza));
}

.slgn-hero__velo--basso {
  background: linear-gradient(
    to top,
    rgba(var(--velo-tinta), var(--velo-forza)) 0%,
    rgba(var(--velo-tinta), calc(var(--velo-forza) * .74)) 32%,
    rgba(var(--velo-tinta), calc(var(--velo-forza) * .28)) 64%,
    rgba(var(--velo-tinta), 0) 92%
  );
}

.slgn-hero__velo--alto {
  background: linear-gradient(
    to bottom,
    rgba(var(--velo-tinta), var(--velo-forza)) 0%,
    rgba(var(--velo-tinta), calc(var(--velo-forza) * .74)) 32%,
    rgba(var(--velo-tinta), calc(var(--velo-forza) * .28)) 64%,
    rgba(var(--velo-tinta), 0) 92%
  );
}

/* Ai bordi: il centro resta libero e il filmato si spegne verso la cornice.
   Serve alle inquadrature con il soggetto in mezzo, dove scurire in basso
   coprirebbe proprio la cosa che si voleva far vedere. */
.slgn-hero__velo--bordi {
  background: radial-gradient(
    118% 88% at 50% 46%,
    rgba(var(--velo-tinta), 0) 34%,
    rgba(var(--velo-tinta), calc(var(--velo-forza) * .5)) 72%,
    rgba(var(--velo-tinta), var(--velo-forza)) 100%
  );
}

.slgn-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 19.5rem);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: end;
}

.slgn-hero__copy {
  max-width: 62rem;
}

.slgn-hero__title {
  /* In maiuscolo un carattere e' circa un quarto piu' largo dello zero
     su cui e' tarata l'unita' 'ch': questa misura, scritta quando i
     titoli erano in minuscolo, oggi ne conterrebbe otto e mezzo. */
  max-width: 14ch;
  margin: 0 0 .85rem;
  font-size: clamp(2.35rem, 4.55vw, 4.35rem);
  line-height: .9;
  letter-spacing: -0.0117em;
}

.slgn-hero__title .slgn-word {
  margin-right: .08em;
}

.slgn-hero__lead {
  max-width: 42rem;
  font-size: clamp(.98rem, 1.28vw, 1.16rem);
}

.slgn-hero__showcase {
  align-self: end;
  display: grid;
  gap: .65rem;
}

.slgn-hero__caption {
  color: var(--ws-silver);
  font-size: .92rem;
  line-height: 1.55;
}

.slgn-hero-story {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 14;
  min-height: 18.8rem;
  border: 1px solid var(--ws-line);
  background: rgba(0, 0, 0, .52);
  box-shadow: 0 2.5rem 5rem rgba(0,0,0,.38);
}

.slgn-hero-story__top {
  position: relative;
  z-index: 3;
  height: 2.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .8rem;
  border-bottom: 1px solid var(--ws-line-soft);
  background: rgba(0, 0, 0, .62);
  color: var(--ws-silver);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.slgn-hero-story__top i {
  width: .2rem;
  height: .2rem;
  border-radius: 50%;
  background: var(--ws-paper);
  box-shadow: .38rem 0 0 rgba(255,255,255,.5), .76rem 0 0 rgba(255,255,255,.25);
}

.slgn-hero-story__media {
  position: absolute;
  inset: 2.45rem 0 0;
}

.slgn-hero-story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  filter: saturate(1.12) contrast(1.05) brightness(.92);
  transition: opacity .8s ease, transform 4.6s linear;
}

.slgn-hero-story__media img.slgn-is-active {
  opacity: 1;
  transform: scale(1);
}

.slgn-hero-story__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), transparent 42%, rgba(0,0,0,.66)),
    linear-gradient(90deg, rgba(0,0,0,.22), transparent);
}

.slgn-hero-story__progress {
  position: absolute;
  z-index: 3;
  top: 3rem;
  left: .75rem;
  right: .75rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .25rem;
}

.slgn-hero-story__progress span {
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.32);
}

.slgn-hero-story__progress span::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ws-paper);
  transform: scaleX(0);
  transform-origin: left;
}

.slgn-hero-story__progress span.slgn-is-active::before {
  animation: slgn-storyProgress 4.2s linear forwards;
}

@keyframes slgn-storyProgress { to { transform: scaleX(1); } }

.slgn-hero-story__copy {
  position: absolute;
  z-index: 3;
  left: 1rem;
  right: 1rem;
  bottom: 1.1rem;
}

.slgn-hero-story__copy p {
  margin: 0 0 .55rem;
  color: var(--ws-silver);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.slgn-hero-story__copy h2 {
  margin: 0;
  font-size: clamp(1.35rem, 1.8vw, 2.1rem);
  line-height: .92;
  letter-spacing: -0.0117em;
  text-transform: uppercase;
}

.slgn-hero-story__copy span {
  display: block;
  margin-top: .85rem;
  color: var(--ws-silver);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.slgn-hero-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ws-line);
  background: rgba(0, 0, 0, .44);
  backdrop-filter: blur(14px);
}

.slgn-hero-signals span {
  min-height: 2.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .35rem;
  border-right: 1px solid var(--ws-line-soft);
  color: var(--ws-silver);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

.slgn-hero-signals span:last-child { border-right: 0; }

.slgn-hero__foot {
  display: none;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: clamp(1.2rem, 3vw, 2.3rem);
}

.slgn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: clamp(1rem, 2vw, 1.55rem);
}

.slgn-hero__caption {
  max-width: 28rem;
  margin: 0;
}

.slgn-clients {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--ws-line-soft);
  border-bottom: 1px solid var(--ws-line-soft);
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.slgn-clients__inner {
  display: flex;
  width: max-content;
  animation: slgn-clientRun 28s linear infinite;
}

.slgn-clients__track {
  display: flex;
  align-items: center;
}

.slgn-clients span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding-inline: clamp(.9rem, 2.4vw, 1.8rem);
  color: var(--ws-paper);
  font-family: var(--ws-display);
  font-size: clamp(.88rem, 1.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: uppercase;
}

.slgn-clients b {
  display: grid;
  place-items: center;
  width: clamp(2.9rem, 5vw, 4.3rem);
  aspect-ratio: 2.4 / 1;
  border: 1px solid var(--ws-line);
  font: inherit;
}

.slgn-clients span::after {
  content: "";
  width: .35rem;
  height: .35rem;
  margin-left: clamp(1.4rem, 4vw, 3.5rem);
  border-radius: 50%;
  background: var(--ws-mute);
}

@keyframes slgn-clientRun {
  to { transform: translateX(-50%); }
}

/* Il segnale "scorri": una linea che scende in continuo */
.slgn-scroll {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--ws-mute);
  font-family: var(--ws-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.slgn-scroll::after {
  content: "";
  width: 1px;
  height: 3.2rem;
  background: linear-gradient(var(--ws-paper), transparent);
  animation: slgn-drop 2.4s var(--ws-ease) infinite;
  transform-origin: 0 0;
}

@keyframes slgn-drop {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(3.2rem); opacity: 0; }
}

/* ------------------------------------------------------------------ *
 * 5b. Media editoriali
 * ------------------------------------------------------------------ */

.slgn-sec--visual {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.58)),
    var(--slgn-section-bg, none) center / cover no-repeat,
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 34%),
    var(--ws-ink);
}

.slgn-visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .7fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
}

.slgn-visual-copy {
  display: grid;
  align-content: end;
  min-height: 18rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--ws-line-soft);
  background: rgba(255, 255, 255, .035);
}

.slgn-visual-copy .slgn-h3,
.slgn-card__title,
.slgn-step__title {
  line-height: 1.04;
  letter-spacing: -0.0083em;
  word-spacing: .08em;
}

.slgn-shot {
  position: relative;
  min-height: clamp(18rem, 44vw, 38rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ws-line-soft);
  background: var(--ws-ink-lift);
}

.slgn-shot--wide { grid-row: span 2; }
.slgn-shot--tall { min-height: 22rem; }

.slgn-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.08) brightness(.82);
  transform: scale(1.045);
  transition: transform 1.6s var(--ws-ease), filter .7s ease;
}

.slgn-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 58%, rgba(0,0,0,.78)),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.05) 39px);
  mix-blend-mode: screen;
  opacity: .42;
  pointer-events: none;
}

.slgn-shot:hover img {
  transform: scale(1);
  filter: saturate(1.12) contrast(1.12) brightness(.9);
}

.slgn-shot figcaption {
  position: absolute;
  z-index: 2;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  color: var(--ws-paper);
  font-family: var(--ws-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.slgn-editorial {
  display: grid;
  grid-template-columns: minmax(18rem, .85fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: center;
}

.slgn-editorial__body {
  max-width: 48rem;
}

.slgn-editorial__body .slgn-lead {
  margin-top: 1.4rem;
}

.slgn-sec--lab {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.08), transparent 30%),
    var(--ws-ink);
}

.slgn-lab {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.slgn-lab__copy .slgn-lead { margin-top: 1.4rem; }

.slgn-lab__stage {
  position: relative;
  min-height: clamp(30rem, 52vw, 44rem);
  border: 1px solid var(--ws-line-soft);
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    rgba(255,255,255,.025);
  background-size: 4rem 4rem;
  overflow: hidden;
}

.slgn-lab__stage::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 180deg, transparent, rgba(255,255,255,.2), transparent 34%);
  animation: slgn-orbit 16s linear infinite;
  opacity: .22;
}

.slgn-floating-card {
  position: absolute;
  z-index: 2;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ws-line);
  background: var(--ws-ink-lift);
  box-shadow: 0 2rem 5rem rgba(0,0,0,.38);
  animation: slgn-float 7s var(--ws-ease) infinite alternate;
}

.slgn-floating-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.08) brightness(.84);
}

.slgn-floating-card--a {
  width: min(62%, 30rem);
  aspect-ratio: 16 / 10;
  left: 8%;
  top: 12%;
}

.slgn-floating-card--b {
  width: min(42%, 18rem);
  aspect-ratio: 4 / 5;
  right: 8%;
  top: 28%;
  animation-delay: -2s;
}

.slgn-floating-card--c {
  width: min(48%, 22rem);
  aspect-ratio: 5 / 3.4;
  left: 22%;
  bottom: 10%;
  animation-delay: -4s;
}

.slgn-lab__panel {
  position: absolute;
  z-index: 3;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--ws-line-soft);
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(12px);
}

.slgn-lab__panel span {
  padding: .8rem;
  border-right: 1px solid var(--ws-line-soft);
  color: var(--ws-silver);
  font-family: var(--ws-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.slgn-lab__panel span:last-child { border-right: 0; }

@keyframes slgn-float {
  from { transform: translate3d(0, 0, 0) rotate(-1deg); }
  to { transform: translate3d(1.2rem, -1rem, 0) rotate(1deg); }
}

@keyframes slgn-orbit {
  to { transform: rotate(360deg); }
}

.slgn-deliverables {
  display: grid;
  border-top: 1px solid var(--ws-line-soft);
}

.slgn-deliverable {
  display: grid;
  grid-template-columns: 5rem minmax(10rem, .7fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding: clamp(1.4rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--ws-line-soft);
}

.slgn-deliverable span {
  color: var(--ws-mute);
  font-family: var(--ws-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
}

.slgn-deliverable h3 {
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
}

.slgn-deliverable p {
  margin: 0;
  color: var(--ws-silver);
}

.slgn-sec--guide {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.44)),
    var(--slgn-section-bg, none) center / cover no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.035)),
    var(--ws-ink);
}

.slgn-guide {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.slgn-guide__media {
  position: relative;
  min-height: clamp(28rem, 54vw, 42rem);
}

.slgn-device {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--ws-line);
  background: var(--ws-ink-lift);
  box-shadow: 0 2.5rem 5rem rgba(0,0,0,.42);
}

.slgn-device img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.08) brightness(.86);
}

.slgn-device--desktop {
  left: 0;
  top: 6%;
  width: 82%;
  aspect-ratio: 16 / 10;
  animation: slgn-devicePan 10s var(--ws-ease) infinite alternate;
}

.slgn-device--phone {
  right: 0;
  bottom: 4%;
  width: 34%;
  aspect-ratio: 9 / 16;
  animation: slgn-devicePan 8s var(--ws-ease) infinite alternate-reverse;
}

.slgn-guide__ruler {
  position: absolute;
  inset: 12% auto auto 8%;
  width: 72%;
  height: 72%;
  border: 1px solid rgba(255,255,255,.16);
  transform: rotate(-7deg);
  pointer-events: none;
}

.slgn-guide__ruler::before,
.slgn-guide__ruler::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.28);
}

.slgn-guide__ruler::before { left: 50%; top: -20%; width: 1px; height: 140%; }
.slgn-guide__ruler::after { left: -12%; top: 50%; width: 124%; height: 1px; }

@keyframes slgn-devicePan {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(.8rem, -1rem, 0); }
}

.slgn-guide__copy .slgn-lead { margin-top: 1.4rem; }

.slgn-checks {
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ws-line-soft);
}

.slgn-checks li {
  position: relative;
  padding: 1rem 0 1rem 2rem;
  border-bottom: 1px solid var(--ws-line-soft);
  color: var(--ws-silver);
}

.slgn-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: .55rem;
  height: .55rem;
  background: var(--ws-paper);
}

/* ------------------------------------------------------------------ *
 * 6. Intestazioni di sezione
 * ------------------------------------------------------------------ */

.slgn-head {
  display: grid;
  gap: 1.6rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .slgn-head {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end;
    gap: 3rem;
  }
}

.slgn-head__title { margin: 0; }

/* ------------------------------------------------------------------ *
 * 7. Servizi
 *
 * Righe alte con numero, titolo e dettaglio. Al passaggio del mouse la riga
 * si schiarisce e il titolo scivola: e' il gesto che rende "vivo" un elenco
 * che altrimenti sarebbe una tabella.
 * ------------------------------------------------------------------ */

.slgn-rows {
  border-top: 1px solid var(--ws-line-soft);
}

.slgn-row {
  position: relative;
  display: grid;
  gap: .6rem 2rem;
  padding: clamp(1.8rem, 3.6vw, 3rem) 0;
  border-bottom: 1px solid var(--ws-line-soft);
  transition: padding-left .45s var(--ws-ease);
}

@media (min-width: 900px) {
  .slgn-row {
    grid-template-columns: 5rem minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
    align-items: baseline;
  }
}

/* Il velo che si accende sotto la riga */
.slgn-row::before {
  content: "";
  position: absolute;
  inset: 0 -1.5rem;
  z-index: -1;
  background: var(--ws-ink-lift);
  opacity: 0;
  transition: opacity .45s var(--ws-ease);
}

.slgn-row:hover::before { opacity: 1; }
.slgn-row:hover { padding-left: 1.5rem; }

.slgn-row__title {
  font-family: var(--ws-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.0133em;
}

.slgn-row__desc { color: var(--ws-silver); margin: 0; }

.slgn-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}

.slgn-row__tags li {
  padding: .3rem .7rem;
  border: 1px solid var(--ws-line-soft);
  color: var(--ws-mute);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * 8. Nastro scorrevole
 *
 * Due copie identiche della lista scorrono affiancate: quando la prima
 * finisce la seconda e' esattamente al suo posto, quindi il giro non ha
 * cuciture. L'animazione e' infinita e non tocca il layout.
 * ------------------------------------------------------------------ */

.slgn-marquee {
  overflow: hidden;
  padding: clamp(.85rem, 1.5vw, 1.25rem) 0;
  border-block: 1px solid var(--ws-line-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.slgn-marquee__track {
  display: flex;
  width: max-content;
  animation: slgn-slide 34s linear infinite;
}

.slgn-marquee:hover .slgn-marquee__track { animation-play-state: paused; }

.slgn-marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  padding-right: clamp(1.6rem, 4vw, 3.4rem);
}

.slgn-marquee__group span {
  font-family: var(--ws-display);
  font-size: clamp(.98rem, 1.65vw, 1.55rem);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.slgn-marquee__group i {
  flex: none;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--ws-mute);
}

@keyframes slgn-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ------------------------------------------------------------------ *
 * 9. Numeri
 * ------------------------------------------------------------------ */

.slgn-stat { border-top: 1px solid var(--ws-line-soft); padding-top: 1.4rem; }

.slgn-stat__value {
  display: block;
  font-family: var(--ws-display);
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.0167em;
  font-variant-numeric: tabular-nums;
}

.slgn-stat__label {
  display: block;
  margin-top: .7rem;
  color: var(--ws-mute);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * 10. Metodo
 *
 * I passaggi restano incollati sotto l'header mentre si scorre: si vede una
 * fase alla volta senza doverla cercare. Sotto i 900px torna un elenco
 * normale, perche' su un telefono lo sticky ruba tutto lo schermo.
 * ------------------------------------------------------------------ */

.slgn-steps { display: grid; gap: 1px; background: var(--ws-line-soft); }

.slgn-step {
  display: grid;
  gap: .8rem 2.5rem;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--ws-ink);
}

@media (min-width: 900px) {
  .slgn-step {
    grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.5fr);
    align-items: start;
    position: sticky;
    top: 5.5rem;
  }
}

.slgn-step__title {
  font-family: var(--ws-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.0117em;
}

.slgn-step p { margin: 0; color: var(--ws-silver); }

/* ------------------------------------------------------------------ *
 * 11. Schede
 * ------------------------------------------------------------------ */

.slgn-card {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  border: 1px solid var(--ws-line-soft);
  background: var(--ws-ink);
  transition: border-color .45s var(--ws-ease), transform .45s var(--ws-ease),
              background .45s var(--ws-ease);
}

.slgn-card:hover {
  border-color: var(--ws-line);
  background: var(--ws-ink-lift);
  transform: translateY(-4px);
}

.slgn-card__title {
  font-family: var(--ws-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.slgn-card p { margin: 0; color: var(--ws-silver); font-size: .96rem; }

/* La scheda-citazione */
/* ------------------------------------------------------------------ *
 * La citazione: un pensiero, non un riquadro
 *
 * Era una scatola bordata con dentro un testo da due rem: duecentocinquanta
 * pixel per dire una frase, e da fuori si leggeva come un'altra sezione da
 * attraversare invece che come una cosa che qualcuno ha detto.
 *
 * Adesso e' larga quanto la pagina, alta la meta', e ha due virgolette in
 * diagonale: quella che apre in alto a destra, quella che chiude in basso a
 * sinistra. Non e' la posizione classica ed e' voluto - messe ai due angoli
 * opposti tengono il testo come due morsetti, e la diagonale che disegnano e'
 * la stessa che fa il resto della pagina fra un titolo e la sua colonna.
 *
 * Sono a contorno, non piene: e' lo stesso trattamento del marchio gigante
 * nel piede e delle parole accentate nei titoli. Cosi' non sono un ornamento
 * preso in prestito da un altro sito, sono un segno di questo.
 *
 * Il corsivo serif del testo e' gia' la voce dei pensieri qui dentro - e' con
 * quello che sono scritte le righe sotto ai titoli dei servizi.
 *
 * Sui selettori: il tema mette su ogni 'blockquote' un'imbottitura da 150
 * pixel e una virgoletta sua, con una regola che vale (0,2,1). Un
 * '.slgn-quote' secco vale (0,1,0) e perde: per questo qui si scrive
 * '.slgn-ws blockquote.slgn-quote', che vale (0,2,1) e arriva dopo.
 * ------------------------------------------------------------------ */

.slgn-ws blockquote.slgn-quote {
  position: relative;
  display: grid;
  gap: .55rem 0;
  max-width: none;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  padding: clamp(2.2rem, 3.6vw, 3rem) 0 clamp(1.5rem, 2.6vw, 2.1rem);
  border: 0;
  border-top: 1px solid var(--ws-line-soft);
  background: none;
}

/* Le due virgolette. Sono un segno, non una parola: chi ascolta la pagina
   non le sente, e chi la guarda le legge come un'apertura e una chiusura.
   Il 'left: auto' e il 'right: auto' non sono di troppo: il tema posiziona
   la sua virgoletta con un 'left', e con tutti e due i lati impostati la
   scatola si stira da una parte all'altra - le due virgolette finivano
   appaiate a sinistra invece che agli angoli opposti. */
.slgn-ws blockquote.slgn-quote::before,
.slgn-ws blockquote.slgn-quote::after {
  position: absolute;
  color: transparent;
  /* La faccia serif e non quella dei titoli: la virgoletta di Inter Tight,
     svuotata, si legge come due barrette inclinate. Quella di Georgia si
     legge come una virgoletta anche a contorno, che e' tutto quello che le
     si chiede. */
  font-family: var(--ws-serif);
  font-size: clamp(3.2rem, 6vw, 5.4rem);
  font-weight: 400;
  line-height: .72;
  -webkit-text-stroke: 1px var(--ws-line);
  pointer-events: none;
  user-select: none;
}

.slgn-ws blockquote.slgn-quote::before {
  content: "\201C";
  top: clamp(.4rem, 1vw, .8rem);
  right: 0;
  left: auto;
}

.slgn-ws blockquote.slgn-quote::after {
  content: "\201D";
  left: 0;
  right: auto;
  bottom: 0;
}

.slgn-ws blockquote.slgn-quote p {
  margin: 0;
  padding-right: clamp(3rem, 6vw, 5.5rem);
  font-family: var(--ws-serif);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-style: italic;
  line-height: 1.36;
  color: var(--ws-paper);
}

.slgn-ws blockquote.slgn-quote footer {
  margin: 0;
  padding-left: clamp(2.6rem, 5vw, 4rem);
  color: var(--ws-mute);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.slgn-ws blockquote.slgn-quote footer::before { content: "\2014\00a0"; }

/* ------------------------------------------------------------------ *
 * 12. Contatti
 * ------------------------------------------------------------------ */

.slgn-contact {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 900px) {
  .slgn-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

.slgn-detail {
  display: block;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--ws-line-soft);
  color: var(--ws-paper);
  text-decoration: none;
  transition: color .3s var(--ws-ease), padding-left .3s var(--ws-ease);
}

a.slgn-detail:hover { color: var(--ws-white); padding-left: .5rem; }

.slgn-detail__label {
  display: block;
  margin-bottom: .25rem;
  color: var(--ws-mute);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.slgn-detail__value {
  font-family: var(--ws-display);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Il modulo: solo righe, niente scatole */
.slgn-form { display: grid; gap: 1.6rem; }

.slgn-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.slgn-field { display: grid; gap: .4rem; }

.slgn-field--wide,
.slgn-form__submit {
  grid-column: 1 / -1;
}

.slgn-field > span,
.slgn-field label {
  color: var(--ws-mute);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.slgn-form__submit {
  margin: 0;
}

.slgn-ws .slgn-field input,
.slgn-ws .slgn-field select,
.slgn-ws .slgn-field textarea {
  width: 100%;
  padding: .85rem 0;
  border: 0;
  border-bottom: 1px solid var(--ws-line);
  border-radius: 0;
  background: transparent;
  color: var(--ws-paper);
  font-family: var(--ws-sans);
  font-size: 1rem;
  transition: border-color .3s var(--ws-ease);
}

.slgn-ws .slgn-field input:focus,
.slgn-ws .slgn-field select:focus,
.slgn-ws .slgn-field textarea:focus {
  border-bottom-color: var(--ws-white);
  outline: none;
}

/* Le voci di una select prendono i colori del sistema, non i nostri: senza
   questa riga su Windows restano testo chiaro su fondo bianco. */
.slgn-ws .slgn-field select option { color: #111; background: #fff; }

.slgn-ws .slgn-field textarea { min-height: 8rem; resize: vertical; }

.slgn-ws .wpcf7-form {
  display: grid;
  gap: 1.1rem;
}

.slgn-ws .wpcf7-form .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.slgn-ws .wpcf7-form .col-xl-12,
.slgn-ws .wpcf7-form .col-lg-12,
.slgn-ws .wpcf7-form .col-md-12 {
  grid-column: 1 / -1;
}

.slgn-ws .wpcf7-form p {
  margin: 0;
}

.slgn-ws .wpcf7-form br {
  display: none;
}

.slgn-ws .wpcf7-form-control-wrap {
  display: block;
}

.slgn-ws .wpcf7 input:not([type="submit"]),
.slgn-ws .wpcf7 select,
.slgn-ws .wpcf7 textarea {
  width: 100%;
  min-height: 3.4rem;
  padding: .9rem 0;
  border: 0;
  border-bottom: 1px solid var(--ws-line);
  border-radius: 0;
  background: transparent;
  color: var(--ws-paper);
  font-family: var(--ws-sans);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: none;
}

.slgn-ws .wpcf7 textarea {
  min-height: 9rem;
  resize: vertical;
}

.slgn-ws .wpcf7 input::placeholder,
.slgn-ws .wpcf7 textarea::placeholder {
  color: var(--ws-mute);
  opacity: 1;
}

.slgn-ws .wpcf7 select {
  padding-inline: 1rem;
  background-color: var(--ws-ink-lift) !important;
  color: var(--ws-silver) !important;
}

.slgn-ws .wpcf7 select option {
  color: #111;
  background: #fff;
}

.slgn-ws .wpcf7 input:focus,
.slgn-ws .wpcf7 select:focus,
.slgn-ws .wpcf7 textarea:focus {
  border-bottom-color: var(--ws-white);
  outline: none;
}

.slgn-ws .wpcf7 button[type="submit"],
.slgn-ws .wpcf7 input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 3.4rem;
  padding: 1rem 1.6rem;
  border: 1px solid var(--ws-paper);
  border-radius: 0;
  background: var(--ws-paper);
  color: var(--ws-ink);
  font-family: var(--ws-display);
  font-size: .9rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .02em;
  cursor: pointer;
}

.slgn-ws .wpcf7 button[type="submit"] svg path {
  stroke: currentColor;
}

.slgn-ws .wpcf7-not-valid-tip,
.slgn-ws .wpcf7-response-output {
  color: var(--ws-paper);
  font-size: .85rem;
}

.slgn-ws .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: .9rem 1rem;
  border-color: var(--ws-line) !important;
}

/* ------------------------------------------------------------------ *
 * 13. Chiusura
 * ------------------------------------------------------------------ */

.slgn-cta {
  padding: clamp(4rem, 10vw, 9rem) var(--ws-pad);
  border-top: 1px solid var(--ws-line-soft);
  text-align: center;
}

/* Due classi e non una: il reset dei titoli in cima al foglio azzera il
   margine di h1-h4 e vale quanto due classi, quindi una sola qui perdeva e
   l'"auto" spariva. Il titolo restava incollato a sinistra dentro la sua
   colonna da 22ch mentre il pulsante, che non e' un titolo, restava al
   centro della sezione: da fuori sembra un titolo storto. */
.slgn-ws .slgn-cta__title {
  margin: 0 auto 2.2rem;
  max-width: 27ch;
}

/* ------------------------------------------------------------------ *
 * 14. Telefono
 * ------------------------------------------------------------------ */

@media (max-width: 899px) {
  .slgn-row { grid-template-columns: minmax(0, 1fr); }
  .slgn-row:hover { padding-left: .8rem; }
  .slgn-hero { min-height: auto; padding-top: calc(var(--ws-pad) + 2.65rem); padding-bottom: calc(var(--ws-pad) + 2.1rem); }
  .slgn-hero__layout { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .slgn-hero__title { max-width: 13ch; font-size: clamp(2.15rem, 8.3vw, 3.15rem); }
  .slgn-hero__showcase { width: min(100%, 22rem); }
  .slgn-hero-story { width: min(100%, 22rem); min-height: 15.5rem; aspect-ratio: 16 / 10; }
  .slgn-hero__foot { flex-direction: column; align-items: flex-start; }
  .slgn-visual-grid,
  .slgn-editorial,
  .slgn-lab,
  .slgn-guide { grid-template-columns: minmax(0, 1fr); }
  .slgn-shot,
  .slgn-shot--tall { min-height: 20rem; }
  .slgn-lab__stage,
  .slgn-guide__media { min-height: 28rem; }
  .slgn-deliverable { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
}

@media (max-width: 599px) {
  .slgn-ws { font-size: 16px; }
  .slgn-btn { width: 100%; justify-content: center; }
  .slgn-hero__actions { width: 100%; }
  .slgn-hero-story { min-height: 13.5rem; }
  .slgn-hero-story__copy { bottom: .8rem; }
  .slgn-hero-story__copy h2 { font-size: 1.25rem; }
  .slgn-hero-story__copy span { display: none; }
  .slgn-hero-signals span { min-height: 2.25rem; font-size: .52rem; letter-spacing: .08em; }
  .slgn-three { opacity: .52; }
  .slgn-clients span { min-height: 2.9rem; }
  .slgn-clients b { width: 3.25rem; }
  .slgn-lab__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slgn-lab__panel span:nth-child(2) { border-right: 0; }
  .slgn-lab__panel span:nth-child(-n+2) { border-bottom: 1px solid var(--ws-line-soft); }
  .slgn-floating-card--a { width: 78%; left: 5%; }
  .slgn-floating-card--b { width: 48%; right: 5%; }
  .slgn-floating-card--c { width: 62%; left: 12%; }
  .slgn-device--desktop { width: 88%; }
  .slgn-device--phone { width: 42%; }
  .slgn-form__grid { grid-template-columns: minmax(0, 1fr); }
  .slgn-ws .wpcf7-form .row { grid-template-columns: minmax(0, 1fr); }
  .slgn-ws .wpcf7 button[type="submit"],
  .slgn-ws .wpcf7 input[type="submit"] { width: 100%; }
}

/* ================================================================== *
 * RISCRITTURA HOME
 *
 * Arriva in fondo al foglio di proposito: a parita' di peso vince
 * l'ultima regola, quindi qui si correggono le versioni precedenti
 * senza doverle cercare e cancellare.
 *
 * Cosa cambia e perche':
 *
 * - l'apertura era alta 728px con un vuoto grande al centro. Ora e' alta
 *   quanto lo schermo, il titolo occupa la colonna di sinistra e la
 *   composizione animata riempie la destra;
 * - le due sezioni di fotografie d'archivio sono sparite dal template,
 *   quindi qui non c'e' piu' niente che le impagini;
 * - i servizi non sono piu' righe di tabella ma quattro schermate
 *   alternate, ognuna con la propria animazione.
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * Apertura
 * ------------------------------------------------------------------ */

.slgn-hero--home {
  display: grid;
  /* 'svh' invece di 'vh': sui telefoni la barra degli indirizzi che si
     ritrae non fa piu' saltare l'altezza a meta' scorrimento.
     Meno l'altezza dell'header, che qui non si sovrappone al contenuto:
     senza la sottrazione l'apertura sforava e la fascia dei tre punti
     finiva sotto il bordo dello schermo. */
  min-height: calc(100svh - 7.5rem);
  grid-template-rows: 1fr auto;
  align-content: stretch;
  padding: 0;
}

.slgn-hero--home .slgn-hero__inner {
  display: grid;
  align-content: center;
  width: min(84rem, 100%);
  margin-inline: auto;
  padding: clamp(2rem, 5vh, 3.5rem) var(--ws-pad) var(--ws-pad);
  padding-left: 0;
  padding-right: 0;
}

/* Il testo sta su poco piu' della meta': l'altra meta' la riempie la
   composizione, che vive nel fondo in posizione assoluta. */
.slgn-hero__copy {
  position: relative;
  z-index: 3;
  max-width: min(34rem, 100%);
}

.slgn-hero--home .slgn-hero__title {
  margin: .2rem 0 1.6rem;
  font-size: clamp(2.8rem, 6.2vw, 5.4rem);
  line-height: .92;
  letter-spacing: -0.0167em;
}

.slgn-hero--home .slgn-lead { max-width: 34rem; }

.slgn-hero--home .slgn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.2rem;
}

/* -- La composizione dell'apertura --
   La pila di schede si sposta a destra e resta dietro al testo. */
.slgn-mg--home .slgn-mg__stack {
  right: max(var(--ws-pad), calc(50% - 40rem));
  width: min(22rem, 34vw);
}

.slgn-mg--home .slgn-mg__orbit {
  /* Spostato verso destra e in alto: centrato darebbe un bersaglio
     esattamente dietro al titolo, e il titolo diventerebbe illeggibile. */
  top: 42%;
  left: 62%;
  width: min(64vh, 40rem);
}

.slgn-mg--home .slgn-mg__mesh { opacity: .3; }

/* Una velatura da sinistra: separa il testo dal fondo animato senza
   spegnerlo del tutto. */
.slgn-hero--home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--ws-ink, #080808) 8%, rgba(8,8,8,.72) 42%, transparent 78%);
  pointer-events: none;
}

/* -- La fascia in basso -- */
.slgn-hero__strip {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 1px;
  width: 100%;
  background: var(--ws-line-soft, rgba(255,255,255,.08));
  border-top: 1px solid var(--ws-line-soft, rgba(255,255,255,.08));
}

@media (min-width: 760px) {
  .slgn-hero__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.slgn-signal {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.5rem var(--ws-pad);
  background: var(--ws-ink, #080808);
}

.slgn-signal__n {
  color: var(--ws-mute, #6c6d70);
  font-family: var(--ws-display, sans-serif);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  padding-top: .2rem;
}

.slgn-signal strong {
  display: block;
  color: var(--ws-paper, #ece9e1);
  font-family: var(--ws-display, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.slgn-signal span {
  display: block;
  margin-top: .2rem;
  color: var(--ws-mute, #6c6d70);
  font-size: .88rem;
  line-height: 1.45;
}

/* ------------------------------------------------------------------ *
 * Le quattro aree
 * ------------------------------------------------------------------ */

.slgn-area {
  display: grid;
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
  width: min(84rem, 100%);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 6rem) var(--ws-pad);
  border-top: 1px solid var(--ws-line-soft, rgba(255,255,255,.08));
}

@media (min-width: 900px) {
  .slgn-area { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* A righe alterne si scambiano le colonne. L'ordine nel markup resta
     visuale-poi-testo, cosi' chi legge con la tastiera o con un lettore
     di schermo incontra sempre la stessa sequenza. */
  .slgn-area--flip .slgn-area__visual { order: 2; }
}

.slgn-area__body { max-width: 34rem; }

.slgn-area__title {
  margin: .5rem 0 .3rem;
  font-family: var(--ws-display, sans-serif);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
}

.slgn-area__claim {
  margin: 0 0 1rem;
  color: var(--ws-white, #fff);
  font-family: var(--ws-serif, Georgia, serif);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-style: italic;
  line-height: 1.3;
}

.slgn-area__list {
  display: grid;
  gap: 0;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ws-line-soft, rgba(255,255,255,.08));
}

@media (min-width: 560px) {
  .slgn-area__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.slgn-area__list li {
  padding: .7rem 0;
  border-bottom: 1px solid var(--ws-line-soft, rgba(255,255,255,.08));
  color: var(--ws-silver, #c9c9c7);
  font-size: .92rem;
}

@media (min-width: 560px) {
  .slgn-area__list li:nth-child(odd) { padding-right: 1rem; }
}

/* ------------------------------------------------------------------ *
 * Telefono
 * ------------------------------------------------------------------ */

@media (max-width: 899px) {

  .slgn-hero--home { min-height: auto; }

  .slgn-hero--home .slgn-hero__inner {
    padding-top: calc(var(--ws-pad) + 5rem);
    padding-bottom: 3rem;
  }

  /* La pila di schede su schermo stretto finirebbe sotto il testo:
     meglio nasconderla e lasciare solo griglia e anelli. */
  .slgn-mg--home .slgn-mg__stack { display: none; }

  .slgn-mg--home .slgn-mg__orbit { top: 34%; left: 72%; width: 30rem; }

  .slgn-hero--home::before {
    background: linear-gradient(180deg, rgba(8,8,8,.55) 0%, var(--ws-ink, #080808) 62%);
  }
}

/* ------------------------------------------------------------------ *
 * Apertura a due colonne, con lo scroller di storie
 *
 * Lo scroller c'era, poi era sparito con la riscrittura: qui torna. Le sue
 * regole di stile non sono mai state tolte, quindi si riusano tutte; queste
 * righe aggiungono solo la colonna che lo ospita e adattano le diapositive,
 * che prima erano fotografie e ora sono i pannelli animati.
 * ------------------------------------------------------------------ */

@media (min-width: 1000px) {
  .slgn-hero--home .slgn-hero__inner {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
  }
}

.slgn-hero--home .slgn-hero__showcase {
  position: relative;
  z-index: 3;
  align-self: center;
}

/* Sotto i 1000px la colonna sparisce e lo scroller va sotto il testo. */
@media (max-width: 999px) {
  .slgn-hero--home .slgn-hero__showcase {
    width: min(100%, 22rem);
    margin-top: 2.5rem;
  }
}

/* Le diapositive prendono il posto che avevano le <img>: stessa
   sovrapposizione, stessa dissolvenza. */
.slgn-hero-story__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .8s ease, transform 4.6s linear;
}

.slgn-hero-story__slide.slgn-is-active {
  opacity: 1;
  transform: scale(1);
}

/* Dentro lo scroller il pannello riempie tutto e perde bordo e proporzione:
   la cornice ce l'ha gia' la scheda che lo contiene. */
.slgn-hero-story__slide .slgn-mg {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  min-height: 0;
  border: 0;
  background: linear-gradient(165deg, #121212, #080808 70%);
}

/* La didascalia sta dentro la diapositiva, cosi' cambia insieme al pannello
   invece di restare ferma e smentirlo. */
.slgn-hero-story__slide .slgn-hero-story__copy {
  position: absolute;
  z-index: 4;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
}

/* Una velatura sotto la didascalia: i pannelli hanno barre chiare in basso
   e il testo ci finirebbe sopra. */
.slgn-hero-story__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, transparent 38%, rgba(8,8,8,.92) 88%);
  pointer-events: none;
}

/* Le pillole del pannello finirebbero sotto la didascalia: qui non servono,
   il loro lavoro lo fanno i tre riquadri 01/02/03 sotto la scheda. */
.slgn-hero-story__slide .slgn-mg__pills { display: none; }

/* Nello scroller il pannello ha meno altezza utile, perche' la parte bassa
   se la prende la didascalia: il contenuto si accosta in alto invece di
   distribuirsi, altrimenti resta un vuoto in mezzo. */
.slgn-hero-story__slide .slgn-mg__body {
  align-content: start;
  gap: .55rem;
}

/* ================================================================== *
 * SERVIZI COMPATTI E FASCE CON IMMAGINE
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * I quattro servizi in griglia
 *
 * Prima erano quattro schermate intere, una per servizio, ognuna con la
 * sua animazione. Erano duemila pixel di pagina e quattro animazioni di
 * fila: si leggeva una cosa alla volta e non si capiva mai quante fossero.
 * In griglia si vedono tutte insieme, che e' l'informazione utile.
 * ------------------------------------------------------------------ */

.slgn-svc {
  display: grid;
  gap: 1px;
  background: var(--ws-line-soft);
  border: 1px solid var(--ws-line-soft);
}

@media (min-width: 800px) {
  .slgn-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.slgn-svc__item {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: var(--ws-ink);
  transition: background .4s var(--ws-ease);
}

.slgn-svc__item:hover { background: var(--ws-ink-lift); }

.slgn-svc__title {
  margin: .2rem 0 0;
  font-family: var(--ws-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.0133em;
}

.slgn-svc__claim {
  margin: 0;
  color: var(--ws-white);
  font-family: var(--ws-serif);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.3;
}

.slgn-svc__desc {
  margin: .3rem 0 0;
  color: var(--ws-silver);
  font-size: .95rem;
}

.slgn-svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
}

.slgn-svc__tags li {
  padding: .25rem .6rem;
  border: 1px solid var(--ws-line-soft);
  color: var(--ws-mute);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Fasce a tutta larghezza
 *
 * L'immagine e' un <img> e non un background: cosi' il browser puo'
 * caricarla pigra, sceglierne la risoluzione e non bloccare il primo
 * disegno della pagina. La velatura sta sopra con un pseudo-elemento,
 * perche' un testo bianco su una foto senza velo non si legge mai.
 * ------------------------------------------------------------------ */

.slgn-band {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(24rem, 62vh, 40rem);
  overflow: hidden;
  border-block: 1px solid var(--ws-line-soft);
}

.slgn-band--short { min-height: clamp(16rem, 40vh, 26rem); }

.slgn-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desaturata ma non in bianco e nero pieno: un po' di tono resta, senza
     portare in pagina colori che litigano con la palette. */
  filter: grayscale(.55) contrast(1.12) brightness(.72);
}

.slgn-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,8,8,.94) 6%, rgba(8,8,8,.62) 48%, rgba(8,8,8,.28));
  pointer-events: none;
}

.slgn-band__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(2.5rem, 6vw, 5rem) var(--ws-pad);
}

.slgn-band__title { max-width: 25ch; margin: .4rem 0 1.2rem; }
.slgn-band--short .slgn-band__title { margin-bottom: 0; }
.slgn-band .slgn-lead { max-width: 38rem; }

/* Il pulsante nella fascia.
 *
 * Sta sotto al testo e non accanto al titolo: una fascia si guarda dall'alto
 * in basso - occhiello, frase, riga di spiegazione - e il pulsante e' l'ultima
 * cosa, quella che si tocca dopo aver letto. Messo in alto sarebbe una
 * richiesta fatta prima di aver detto perche'. */
.slgn-band__cta { margin: clamp(1.3rem, 2.6vw, 2rem) 0 0; }

/* Nella fascia corta il pulsante segue subito il titolo, che li' e' l'unica
   cosa che c'e'. */
.slgn-band--short .slgn-band__cta { margin-top: clamp(1rem, 2vw, 1.5rem); }

@media (max-width: 760px) {
  .slgn-band::after {
    background: linear-gradient(180deg, rgba(8,8,8,.6), rgba(8,8,8,.92));
  }
}

/* ------------------------------------------------------------------ *
 * Le immagini dentro lo scroller di storie
 * ------------------------------------------------------------------ */

/* L'opacita' e' dichiarata perche' una regola piu' vecchia dello scroller
   dice '.slgn-hero-story__media img { opacity: 0 }': serviva quando le
   diapositive erano le immagini stesse e la classe attiva stava su di loro.
   Ora la classe sta sul contenitore, quindi senza questa riga le foto
   resterebbero invisibili.

   La luminosita' e' sopra 1 e non sotto: le foto scelte sono gia' scure di
   loro, e il velo per il testo lo mette il gradiente qui sotto. */
/* Il selettore ripete il contenitore di proposito: la regola vecchia e'
   '.slgn-hero-story__media img', che vale una classe piu' un elemento.
   Con la sola classe questa perdeva e le foto restavano invisibili. */
.slgn-hero-story__media img.slgn-hero-story__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: none;
  filter: grayscale(.45) contrast(1.08) brightness(1.12);
}

/* Il filmato di una storia occupa lo stesso piano della fotografia: la foto
   impostata nel builder resta il poster, quindi l'avvio non lampeggia. */
.slgn-hero-story__slide .slgn-hero-story__video {
  position: absolute;
  z-index: 1;
  inset: 0;
}
.slgn-hero-story__slide .slgn-hero-story__video .slgn-vd__el { width: 100%; height: 100%; }

/* Il pannello animato resta, ma sopra la foto e in piccolo: fa da
   sovrimpressione tecnica, come il riquadro di controllo di una regia.
   Da solo era un disegno; sopra una foto vera diventa un attrezzo. */
.slgn-hero-story__slide .slgn-mg {
  position: absolute;
  inset: auto .7rem auto .7rem;
  top: .7rem;
  height: 42%;
  min-height: 0;
  aspect-ratio: auto;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8, 8, 8, .62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ================================================================== *
 * STRISCE ANIMATE SUI SERVIZI E VETRINA LAVORI
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * L'animazione sopra ogni servizio
 *
 * Si vede per intera, come e' stata disegnata: prima era schiacciata in una
 * fascia bassa e mostrava mezzo pannello, il che sembrava un errore di
 * impaginazione piu' che una scelta.
 *
 * La discrezione non la fa piu' il ritaglio ma la luce: a riposo sta al 45
 * per cento, al passaggio del mouse sale a piena. Cosi' resta di contorno
 * mentre si legge, e si fa guardare quando la si cerca.
 * ------------------------------------------------------------------ */

.slgn-mg--strip {
  height: auto;
  margin-bottom: 1.2rem;
  border: 1px solid var(--ws-line-soft);
  background: linear-gradient(158deg, #121212, #0a0a0a 70%);
  /* Piena luce, ferma.
   *
   * Prima stava al 74 per cento e saliva a piena al passaggio del mouse: la
   * discrezione era voluta, l'animazione doveva restare di contorno mentre
   * si legge. Ma queste quattro composizioni sono il pezzo che spiega il
   * mestiere meglio del testo che hanno sotto, e tenerle in penombra
   * finche' non ci passi sopra vuol dire non farle vedere - su un portatile
   * col trackpad, sopra ce ne passa una alla volta e per un attimo.
   *
   * Il premio al passaggio del mouse resta, ma lo da' il fondo della
   * scheda, che si schiarisce: e' un segnale che non toglie niente a chi
   * sta solo guardando. */
  opacity: 1;
}

/* Sul telefono restano.
 *
 * Prima sparivano sotto i mille pixel, e la ragione scritta qui era il peso
 * da scaricare: non stava in piedi, non c'e' niente da scaricare - sono
 * quattro riquadri disegnati dal foglio di stile che e' gia' arrivato. Il
 * costo vero e' solo di disegno, e vale il prezzo: sono le quattro
 * composizioni che spiegano il mestiere meglio del testo che hanno sotto.
 *
 * Il 'min-height' del pannello fa il resto: dove il 16:7 diventerebbe una
 * fessura la forma si alza da sola, e il contenuto dentro si dirada. */

/* ------------------------------------------------------------------ *
 * Vetrina lavori
 * ------------------------------------------------------------------ */

.slgn-feature {
  position: relative;
  display: grid;
  gap: 0;
  border: 1px solid var(--ws-line-soft);
  background: var(--ws-ink-soft);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .45s var(--ws-ease), background .45s var(--ws-ease);
}

@media (min-width: 900px) {
  .slgn-feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.slgn-feature:hover {
  border-color: var(--ws-line);
  background: var(--ws-ink-lift);
}

/* Il rapporto e' dichiarato perche' senza vincolo l'altezza la detta
   l'immagine: una copertina verticale rendeva la vetrina alta il doppio
   del necessario e spingeva il testo fuori schermo. */
.slgn-feature__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  min-height: clamp(13rem, 26vw, 20rem);
  background: #0b0b0b;
}

@media (min-width: 900px) {
  .slgn-feature__media { aspect-ratio: 16 / 11; }
}

.slgn-feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.35) contrast(1.06);
  transform: scale(1.01);
  transition: transform 1.1s var(--ws-ease), filter .6s var(--ws-ease);
}

.slgn-feature:hover .slgn-feature__img {
  transform: scale(1.05);
  filter: grayscale(0) contrast(1.1);
}

.slgn-feature__badge {
  position: absolute;
  z-index: 2;
  left: 1rem;
  top: 1rem;
  padding: .3rem .7rem;
  background: var(--ws-paper);
  color: var(--ws-ink);
  font-family: var(--ws-display);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.slgn-feature__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1.6rem, 3.4vw, 3rem);
  justify-content: center;
}

.slgn-feature__title {
  margin: 0;
  font-family: var(--ws-display);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -0.015em;
}

.slgn-feature__claim {
  margin: .3rem 0 0;
  color: var(--ws-white);
  font-family: var(--ws-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-style: italic;
  line-height: 1.34;
}

.slgn-feature__go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.2rem;
  color: var(--ws-silver);
  font-family: var(--ws-display);
  font-size: .9rem;
  font-weight: 600;
}

.slgn-feature__go i { font-style: normal; transition: transform .4s var(--ws-ease); }
.slgn-feature:hover .slgn-feature__go { color: var(--ws-white); }
.slgn-feature:hover .slgn-feature__go i { transform: translateX(5px); }

/* -- Gli altri progetti, in riga -- */
.slgn-worklist {
  margin-top: 1px;
  border-top: 1px solid var(--ws-line-soft);
}

.slgn-workrow {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto 2rem;
  align-items: baseline;
  gap: 1rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--ws-line-soft);
  color: inherit;
  text-decoration: none;
  transition: padding-left var(--ws-move), color var(--ws-hover);
}

/* Il velo che si accende sotto la riga.
 *
 * Le transizioni c'erano gia' - rientro e freccia - ma da fuori il
 * passaggio del mouse sembrava non produrre niente: un rientro di sedici
 * pixel su una riga larga milleduecento non si vede, e senza un fondo che
 * cambia non c'e' niente da cui capire che la riga risponde.
 *
 * E' lo stesso velo delle righe dei servizi, con gli stessi tempi: due
 * elenchi che si comportano allo stesso modo si leggono come una cosa
 * sola. Esce di un centimetro e mezzo dai due lati, cosi' si accende la
 * riga e non un rettangolo incollato al testo. */
.slgn-workrow::before {
  content: "";
  position: absolute;
  inset: 0 -1.5rem;
  z-index: -1;
  background: var(--ws-ink-lift);
  opacity: 0;
  transition: opacity var(--ws-move);
}

.slgn-workrow:hover::before,
.slgn-workrow:focus-visible::before { opacity: 1; }

.slgn-workrow:hover,
.slgn-workrow:focus-visible { padding-left: 1.5rem; color: var(--ws-white); }

/* Il numero e la categoria salgono di un tono insieme al titolo: se si
   accende solo il nome, gli altri due sembrano spenti apposta. */
.slgn-workrow .slgn-num,
.slgn-workrow__scope { transition: color var(--ws-hover); }

.slgn-workrow:hover .slgn-num,
.slgn-workrow:hover .slgn-workrow__scope { color: var(--ws-silver); }

/* In stampatello come ogni altro titolo del sito.
 *
 * Erano gli unici in tondo alto e basso: i titoli qui dentro sono maiuscoli
 * per regola, e questi ne restavano fuori solo perche' sono dentro a uno
 * 'span' invece che a un titolo vero - una differenza di marcatura che non
 * ha nessuna ragione di vedersi.
 *
 * La spaziatura si allarga rispetto a prima: in maiuscolo non ci sono aste
 * che salgono e scendono a tenere distinte le lettere, sono tutti
 * rettangoli della stessa altezza, e stringerli li fa toccare. */
.slgn-workrow__title {
  font-family: var(--ws-display);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.002em;
  text-transform: uppercase;
}

.slgn-workrow__scope {
  color: var(--ws-mute);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.slgn-workrow__go { justify-self: end; transition: transform var(--ws-move); }
.slgn-workrow:hover .slgn-workrow__go { transform: translateX(6px); }

@media (max-width: 700px) {
  .slgn-workrow { grid-template-columns: 2.4rem minmax(0, 1fr) 1.5rem; }
  .slgn-workrow__scope { display: none; }
}


/* ================================================================== *
 * METODO A PASSI E PROVA SOCIALE
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * Prova sociale
 * ------------------------------------------------------------------ */

.slgn-proof__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

@media (min-width: 800px) {
  .slgn-proof__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

/* Erano dieci riquadri bordati che andavano a capo dove capitava.
 *
 * E' la forma piu' debole che un elenco di nomi possa prendere: si legge
 * come una nuvola di etichette, e una nuvola di etichette non dice "questi
 * sono i nostri clienti", dice "ecco delle parole". In piu' l'incolonnamento
 * cambiava a ogni larghezza di finestra - cinque nomi, poi tre, poi sei -
 * quindi la sezione non aveva mai la stessa faccia due volte.
 *
 * Adesso sono righe, con la stessa grammatica dell'elenco dei servizi: un
 * filo sopra, un filo per riga, il nome in tondo grande, e al passaggio del
 * mouse la riga rientra e si accende. Un elenco incolonnato si conta a
 * colpo d'occhio, tiene la larghezza che ha e riempie l'altezza che prima
 * restava vuota sotto le etichette. */

.slgn-proof__list {
  margin: clamp(.9rem, 1.6vw, 1.3rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ws-line-soft);
}

.slgn-proof__list li {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(.72rem, 1.25vw, 1.05rem) 0;
  border-bottom: 1px solid var(--ws-line-soft);
  color: var(--ws-paper);
  font-family: var(--ws-display);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: padding-left .45s var(--ws-ease), color .45s var(--ws-ease);
}

/* Il velo sotto la riga, come nelle righe dei servizi: esce di poco a
   destra e a sinistra, cosi' si accende la riga e non un rettangolo. */
.slgn-proof__list li::before {
  content: "";
  position: absolute;
  inset: 0 -1.2rem;
  z-index: -1;
  background: var(--ws-ink-lift);
  opacity: 0;
  transition: opacity .45s var(--ws-ease);
}

.slgn-proof__list li:hover::before { opacity: 1; }
.slgn-proof__list li:hover { padding-left: 1.2rem; }

/* La seconda colonna non sono clienti, sono citazioni: stessa impaginazione
   in tono minore, perche' messe allo stesso corpo si leggerebbero come
   altri sei clienti. */
.slgn-proof__list--alt li {
  color: var(--ws-silver);
  font-family: var(--ws-sans);
  font-size: clamp(.72rem, 1vw, .82rem);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ================================================================== *
 * IL CAROSELLO 3D DEL METODO
 *
 * Quattro schede su una giostra in prospettiva. Quella in primo piano sta
 * dritta davanti; le altre ruotano di lato, arretrano lungo l'asse Z e
 * perdono luce, cosi' si legge subito quante sono e a che punto si e'.
 *
 * Come funziona il calcolo: lo script scrive su ogni scheda due numeri,
 * '--d' (di quanti posti e' distante da quella in primo piano, col segno)
 * e '--a' (lo stesso senza segno). Tutte le trasformazioni derivano da
 * quei due numeri, quindi il movimento e' descritto una volta sola e vale
 * per qualunque numero di schede.
 *
 * Il 3D e' vero: 'perspective' sul palco e 'transform-style: preserve-3d'
 * sulla pista. Ruotando, una scheda passa davvero davanti alle altre.
 * ================================================================== */

.slgn-carousel {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  /* Il palco esce dai margini del testo: la giostra ha bisogno di aria ai
     lati per far vedere le schede di fianco. */
  padding-inline: var(--ws-pad);
}

/* -- Il palco: e' qui che vive la prospettiva -- */
.slgn-carousel__stage {
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 42%;
}

.slgn-carousel__track {
  position: relative;
  /* Quanto basta alla scheda piu' alta, non di piu': le schede sono
     centrate, e ogni pixel di pista in piu' diventa vuoto sopra e sotto.
     La misura buona la scrive lo script, che le schede le puo' misurare;
     il clamp e' quello che si vede prima che lo script arrivi, e quello
     che resta se non arriva mai. */
  height: var(--slgn-pista, clamp(30rem, 50vw, 39rem));
  transform-style: preserve-3d;
}

/* Senza JavaScript le schede restano in colonna: leggibili, senza giostra.
   Il 3D si accende solo quando lo script mette 'is-ready'. */
.slgn-carousel:not(.is-ready) .slgn-carousel__track {
  height: auto;
  display: grid;
  gap: 1.5rem;
}

.slgn-carousel:not(.is-ready) .slgn-carousel__bar { display: none; }

/* -- Le schede -- */
.slgn-carousel.is-ready .slgn-card3d {
  position: absolute;
  inset: 0;
  margin: auto;
  /* La scheda prende quasi tutto il palco.
   *
   * Prima era 44rem su un palco da 1194: seicento pixel di ivory vuoto ai
   * lati, e la giostra si leggeva come una colonna stretta in mezzo a una
   * sezione larga. Larga cosi', con le vicine spinte piu' in fuori, la
   * composizione arriva ai bordi dello schermo - e quello che esce lo
   * taglia l'involucro della pagina, che gia' ritaglia l'orizzontale. */
  width: min(50rem, 80%);
  height: fit-content;

  /* L'ordine conta: prima si scosta di lato, poi arretra, poi ruota su se
     stessa. Invertendo rotazione e arretramento le schede laterali
     scivolerebbero fuori dal palco invece di girarsi sul posto. */
  transform:
    translateX(calc(var(--d, 0) * 46%))
    translateZ(calc(var(--a, 0) * -22rem))
    rotateY(calc(var(--d, 0) * -34deg))
    scale(calc(1 - var(--a, 0) * 0.04));

  opacity: calc(1 - var(--a, 0) * 0.42);
  transition:
    transform .95s var(--ws-ease),
    opacity .95s var(--ws-ease);
  backface-visibility: hidden;
  will-change: transform;
}

/* Oltre la seconda posizione la scheda sparisce: tenerne otto sovrapposte
   in fondo fa solo confusione e costa disegno. */
.slgn-carousel.is-ready .slgn-card3d[data-slgn-far] {
  opacity: 0;
  pointer-events: none;
}

.slgn-card3d__inner {
  display: grid;
  /* La colonna non puo' crescere oltre la scheda.
   *
   * Con 'auto' una colonna di griglia si allarga fino alla misura minima
   * del contenuto, e la misura minima di un riquadro con rapporto d'aspetto
   * e altezza minima non e' zero: e' quell'altezza moltiplicata per il
   * rapporto. Sul telefono faceva 288 pixel dentro una scheda da 259, e il
   * pannello animato usciva dai due lati. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  border: 1px solid var(--ws-line-soft);
  background: linear-gradient(158deg, #141414, #0a0a0a 68%);
  /* Due ombre: una riga chiara dentro il bordo, che stacca la scheda dal
     fondo, e una larga e bassa che fa da appoggio. Su nero e' quello che
     da' il senso della distanza. */
  box-shadow:
    0 .1rem 0 rgba(255, 255, 255, .05) inset,
    0 2.4rem 5rem rgba(0, 0, 0, .72);
}

/* La scheda in primo piano si distingue senza gridare */
.slgn-carousel.is-ready .slgn-card3d.is-active .slgn-card3d__inner {
  border-color: rgba(255, 255, 255, .22);
  box-shadow:
    0 .1rem 0 rgba(255, 255, 255, .08) inset,
    0 3rem 6rem rgba(0, 0, 0, .8),
    0 0 6rem rgba(255, 255, 255, .05);
}

.slgn-carousel.is-ready .slgn-card3d:not(.is-active) { cursor: pointer; }

.slgn-card3d__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--ws-line-soft);
}

.slgn-card3d__title {
  margin: 0;
  font-family: var(--ws-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.0133em;
}

/* La composizione dentro la scheda sta piu' bassa delle altre.
 *
 * Una scheda del metodo e' prima di tutto un testo: se la figura si prende
 * trecentoventi pixel su cinquecento, quello che resta al racconto sono due
 * righe, e due righe in mezzo a una scheda grande sembrano un appunto. Con
 * 21:6 la figura resta larga - che e' la sua forma - ma si abbassa di un
 * terzo, e sotto ci sta un paragrafo vero.
 *
 * L'altezza non e' scritta a mano: e' sempre una proporzione, quindi si
 * adegua da sola alla larghezza che la scheda ha in quel momento. */
.slgn-card3d__scene .slgn-mg { height: auto; }

@media (min-width: 761px) {
  .slgn-card3d__scene .slgn-mg { aspect-ratio: 21 / 6; }
}

@media (max-width: 760px) {
  .slgn-card3d__scene .slgn-mg { aspect-ratio: 16 / 9; }
}

.slgn-card3d__text { margin: 0; color: var(--ws-silver); }

.slgn-card3d__out {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
  margin: 0;
  padding-top: .8rem;
  border-top: 1px solid var(--ws-line-soft);
}

.slgn-card3d__out span {
  color: var(--ws-mute);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.slgn-card3d__out strong {
  color: var(--ws-paper);
  font-family: var(--ws-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ *
 * I comandi
 * ------------------------------------------------------------------ */

.slgn-carousel__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  width: min(84rem, 100%);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
}

.slgn-carousel__arrow {
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--ws-line);
  background: transparent;
  color: var(--ws-paper);
  font-size: 1rem;
  cursor: pointer;
  transition: background .3s var(--ws-ease), color .3s var(--ws-ease),
              border-color .3s var(--ws-ease);
}

.slgn-carousel__arrow:hover {
  background: var(--ws-paper);
  border-color: var(--ws-paper);
  color: var(--ws-ink);
}

.slgn-carousel__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slgn-carousel__dots button {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .6rem 1rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ws-mute);
  cursor: pointer;
  transition: color .3s var(--ws-ease), border-color .3s var(--ws-ease);
}

.slgn-carousel__dots button:hover { color: var(--ws-silver); }

.slgn-carousel__dots li.is-current button {
  border-color: var(--ws-line);
  color: var(--ws-white);
}

.slgn-carousel__n {
  font-family: var(--ws-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
}

.slgn-carousel__name {
  font-family: var(--ws-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ *
 * Il carosello sul telefono
 *
 * Il 3D e' pensato per uno schermo largo: le schede di fianco si vedono
 * per meta', girate, e si capisce al volo che sono una fila. Su tre dita di
 * larghezza non succede niente di tutto questo - di fianco non si vede
 * quasi niente, e in cambio la scheda davanti perdeva un terzo della
 * larghezza per far posto a quel niente: 259 pixel su 375, con il testo
 * spezzato in righe da quattro parole.
 *
 * Quindi qui la giostra diventa una pila. La scheda davanti prende quasi
 * tutta la larghezza, le altre restano dietro - appena scostate, piu'
 * piccole, piu' scure - e si leggono per quello che sono: le prossime. Si
 * comanda come prima, col dito, con le frecce o con i numeri.
 *
 * Sparisce anche la rotazione: un foglio girato di trentaquattro gradi
 * largo tre dita non si legge come un foglio girato, si legge come un
 * foglio storto.
 * ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .slgn-carousel__name { display: none; }

  /* L'aria ai lati serviva a far vedere le schede di fianco: a questa
     misura non fa vedere niente, toglie solo larghezza a quella davanti. */
  .slgn-carousel { padding-inline: 0; }

  .slgn-carousel.is-ready .slgn-card3d {
    width: 90%;
    transform:
      translateX(calc(var(--d, 0) * 9%))
      translateZ(calc(var(--a, 0) * -7rem))
      scale(calc(1 - var(--a, 0) * 0.05));
    opacity: calc(1 - var(--a, 0) * 0.62);
  }

  .slgn-carousel__stage { perspective: 1100px; }
  /* La pista deve contenere la scheda piu' alta, non quella media: le
     schede sono centrate dentro la pista, quindi una piu' alta sborda
     sopra e sotto e va a finire addosso ai numeri. */
  .slgn-carousel__track { height: var(--slgn-pista, clamp(30rem, 148vw, 42rem)); }
}

/* ------------------------------------------------------------------ *
 * Movimento ridotto
 *
 * Niente giostra: le schede tornano in colonna, tutte leggibili insieme.
 * Una rotazione in prospettiva e' esattamente il tipo di movimento che da'
 * fastidio a chi ha chiesto di ridurlo.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .slgn-carousel.is-ready .slgn-carousel__track {
    height: auto;
    display: grid;
    gap: 1.5rem;
    transform-style: flat;
  }

  .slgn-carousel.is-ready .slgn-card3d {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
    opacity: 1;
    transition: none;
  }

  .slgn-carousel.is-ready .slgn-card3d[data-slgn-far] { opacity: 1; }
  .slgn-carousel__bar { display: none; }
}

/* ================================================================== *
 * LEGGIBILITA' DELLA DIDASCALIA NELLO SCROLLER
 *
 * Il titolo della diapositiva non aveva un colore suo: se lo prendeva dal
 * tema, che sulle pagine del sito lascia un grigio scuro. Su una fotografia
 * gia' scura, sotto una velatura nera, il risultato era testo scuro su fondo
 * scuro - si vedeva l'ombra e non le parole.
 *
 * Qui il colore e' dichiarato, e la velatura smette di essere un lenzuolo
 * steso su tutta la diapositiva: diventa un'ombra corta ancorata alla
 * didascalia, che scurisce solo la fascia dove sta il testo e lascia
 * respirare la fotografia sopra.
 * ================================================================== */

/* L'ombra lunga su tutta la diapositiva sale meno e resta piu' gentile: il
   suo lavoro lo fa adesso la fascia sotto la didascalia. */
.slgn-hero-story__slide::after {
  background: linear-gradient(180deg, transparent 52%, rgba(6, 6, 6, .78) 92%);
}

/* La fascia sotto il testo: parte trasparente e si chiude in nero pieno
   nell'ultimo quarto. Sta dentro la didascalia, quindi segue il testo se un
   giorno cambia altezza, e non va tarata a mano. */
.slgn-hero-story__slide .slgn-hero-story__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -1.4rem;
  right: -1.4rem;
  top: -2.6rem;
  bottom: -1.6rem;
  background: linear-gradient(180deg, rgba(6, 6, 6, 0), rgba(6, 6, 6, .82) 46%, rgba(6, 6, 6, .94));
  pointer-events: none;
}

/* Il titolo: bianco pieno, carattere dei titoli, e un'ombra stretta che lo
   stacca anche quando sotto capita una zona chiara della fotografia. */
.slgn-hero-story__slide .slgn-hero-story__copy h2,
.slgn-hero-story__copy h2 {
  color: var(--ws-white);
  font-family: var(--ws-display);
  font-weight: 600;
  text-shadow: 0 .08em .5em rgba(0, 0, 0, .55);
}

/* Occhiello e riga in fondo salgono dal grigio medio alla carta: erano il
   colore giusto su un fondo pieno, non sopra una fotografia. */
.slgn-hero-story__slide .slgn-hero-story__copy p,
.slgn-hero-story__slide .slgn-hero-story__copy span {
  color: var(--ws-paper);
  text-shadow: 0 .1em .45em rgba(0, 0, 0, .6);
}

/* La riga in fondo aveva 800 di peso e un grigio spento: leggibile su nero,
   illeggibile su una foto. Con la carta e meno peso si legge e non gareggia
   con il titolo. */
.slgn-hero-story__slide .slgn-hero-story__copy span {
  opacity: .88;
  font-weight: 700;
}

/* ================================================================== *
 * PROFONDITA' DELLE SEZIONI
 *
 * Le sezioni erano rettangoli neri con dentro del testo. Corretto come
 * impianto, piatto da guardare: scorrendo, l'unica cosa che cambiava era il
 * contenuto, e il fondo restava lo stesso muro per novemila pixel.
 *
 * Qui ogni sezione prende tre strati, tutti sotto al testo e tutti
 * decorativi:
 *
 *   1  un reticolo finissimo che scorre in diagonale, della stessa famiglia
 *      dell'onda dell'apertura: e' quello che lega il fondo della pagina a
 *      quello della prima schermata;
 *   2  un alone morbido che si sposta lentamente da un angolo all'altro, e
 *      da' alla sezione un verso della luce invece di una luminosita' piatta;
 *   3  sulle sezioni in rilievo, un filo di luce che percorre il bordo
 *      superiore, cosi' la riga di separazione fra due sezioni non e' un
 *      tratto morto.
 *
 * Niente di tutto questo si vede se lo si cerca: si vede se non c'e'.
 *
 * Costo: due pseudo-elementi per sezione, animati su proprieta' di sfondo con
 * cicli lunghi. Nessun nodo in piu' nel documento, nessun JavaScript.
 * ================================================================== */

/* Il testo sta sopra i tre strati. 'isolation' chiude il contesto di
   impilamento sulla sezione, cosi' gli z-index qui dentro non vanno a
   litigare con l'header fisso del tema. */
.slgn-ws .slgn-sec,
.slgn-ws .slgn-cta {
  isolation: isolate;
}

.slgn-ws .slgn-sec > *,
.slgn-ws .slgn-cta > * {
  position: relative;
  z-index: 1;
}

/* -- 1. Il reticolo -- */
.slgn-ws .slgn-sec:not(.slgn-sec--contrast)::before,
.slgn-ws .slgn-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg,  rgba(255, 255, 255, .06) 0 1px, transparent 1px 88px);
  /* Sfuma prima di toccare i bordi: un reticolo che finisce di netto contro
     il margine sembra un errore di ritaglio, non una trama. */
  -webkit-mask-image: radial-gradient(115% 88% at 50% 42%, #000 12%, transparent 76%);
          mask-image: radial-gradient(115% 88% at 50% 42%, #000 12%, transparent 76%);
  opacity: .55;
  animation: slgn-secGrid 42s linear infinite;
}

@keyframes slgn-secGrid {
  to { background-position: 88px 88px, 88px 88px; }
}

/* -- 2. L'alone -- */
.slgn-ws .slgn-sec:not(.slgn-sec--contrast)::after,
.slgn-ws .slgn-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent 72%);
  background-repeat: no-repeat;
  background-size: 150% 150%;
  animation: slgn-secAura 26s var(--ws-ease) infinite alternate;
}

@keyframes slgn-secAura {
  from { background-position: -18% -30%; opacity: .7; }
  to   { background-position: 118% 128%; opacity: 1; }
}

/* Una sezione su due manda l'alone nel verso opposto: due sezioni di fila
   con la luce che va dalla stessa parte si leggono come una sola. */
.slgn-ws .slgn-sec:nth-of-type(even)::after {
  animation-direction: alternate-reverse;
  animation-duration: 31s;
}

/* Sulle sezioni in rilievo l'alone e' piu' presente: il fondo e' gia' un
   nero piu' chiaro, e un alone appena accennato ci sparirebbe dentro. */
.slgn-ws .slgn-sec--lift::after {
  background-image: radial-gradient(closest-side, rgba(255, 255, 255, .095), transparent 70%);
}

/* -- 3. Il filo di luce sul bordo delle sezioni in rilievo -- */
.slgn-ws .slgn-sec--lift {
  /* Il colore va rimesso come 'background-color': qui sopra si occupa il
     'background-image', e la scorciatoia 'background' del blocco originale
     cancellerebbe l'uno o l'altro. */
  background-color: var(--ws-ink-soft);
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  background-repeat: no-repeat;
  background-size: 32% 1px;
  animation: slgn-secEdge 13s var(--ws-ease) infinite;
}

@keyframes slgn-secEdge {
  0%   { background-position: -40% 0; }
  60%  { background-position: 140% 0; }
  100% { background-position: 140% 0; }
}

/* -- La chiusura: una forma che ruota piano dietro al titolo -- *
 *
 * E' un anello sottile, largo quanto mezza schermata, inclinato e in
 * rotazione lentissima. Su una sezione che ha solo un titolo e un pulsante
 * serve qualcosa che occupi lo spazio senza chiedere attenzione.
 */
.slgn-ws .slgn-cta {
  position: relative;
  overflow: hidden;
}

/* L'anello e' disegnato dentro il reticolo della chiusura, come strato in
   piu' dello stesso pseudo-elemento: due cerchi concentrici fatti con un
   gradiente radiale a fasce nette. */
.slgn-ws .slgn-cta::before {
  background-image:
    radial-gradient(circle at 50% 50%,
      transparent 0 31%,
      rgba(255, 255, 255, .12) 31% calc(31% + 1px),
      transparent calc(31% + 1px) 44%,
      rgba(255, 255, 255, .07) 44% calc(44% + 1px),
      transparent calc(44% + 1px)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg,  rgba(255, 255, 255, .05) 0 1px, transparent 1px 88px);
  background-size: 130% 320%, 88px 88px, 88px 88px;
  background-position: 50% 50%, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
  animation: slgn-ctaRing 60s linear infinite;
}

@keyframes slgn-ctaRing {
  to { background-position: 50% 50%, 88px 88px, 88px 88px; }
}

/* -- Le fasce fotografiche: un velo che respira -- *
 *
 * Sulla fotografia non serve un reticolo, servirebbe solo a sporcarla. Qui
 * il movimento e' un lentissimo avvicinamento dell'immagine, che toglie
 * alla fascia l'aria di cartolina incollata.
 */
.slgn-band__img {
  animation: slgn-bandDrift 34s var(--ws-ease) infinite alternate;
}

@keyframes slgn-bandDrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.4%, -1.8%, 0); }
}

/* -- Movimento ridotto: resta tutto, fermo -- */
@media (prefers-reduced-motion: reduce) {
  .slgn-ws .slgn-sec::before,
  .slgn-ws .slgn-sec::after,
  .slgn-ws .slgn-sec--lift,
  .slgn-ws .slgn-cta::before,
  .slgn-ws .slgn-cta::after,
  .slgn-band__img {
    animation: none !important;
  }
}


/* ================================================================== *
 * LO SCROLLER DI STORIE, RIPULITO
 *
 * Nella diapositiva erano finiti tre veli neri sovrapposti - uno sul
 * contenitore, uno sulla diapositiva, uno agganciato alla didascalia - messi
 * in momenti diversi per risolvere lo stesso problema. Insieme facevano
 * proprio il danno che dovevano evitare: la parte bassa diventava una fascia
 * nera piatta, e il testo ci finiva dentro invece che sopra.
 *
 * Qui il velo e' uno solo, in fondo alla diapositiva, e la didascalia sta
 * dichiaratamente sopra di lui.
 * ================================================================== */

/* Il velo storico sul contenitore: adesso e' di troppo, lo fa la
   diapositiva. Lasciarlo vorrebbe dire scurire due volte. */
.slgn-hero-story__media::after {
  display: none;
}

/* Il velo unico. Parte a meta' altezza e si chiude quasi pieno in fondo:
   sopra resta la fotografia com'e', sotto c'e' il nero che serve al testo. */
.slgn-hero-story__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Due veli in uno. Sopra, una fascia corta che serve alle barre di
     avanzamento: sono righe di un pixel e su una fotografia chiara
     sparivano. Sotto, quello lungo che regge la didascalia. In mezzo la
     fotografia resta com'e'. */
  background:
    linear-gradient(180deg, rgba(6, 6, 6, .68), rgba(6, 6, 6, .26) 9%, transparent 19%),
    linear-gradient(
      180deg,
      transparent 38%,
      rgba(6, 6, 6, .62) 62%,
      rgba(6, 6, 6, .9) 82%,
      rgba(6, 6, 6, .96)
    );
  pointer-events: none;
}

/* La didascalia sopra il velo, dichiarato. Prima si affidava a un numero piu'
   alto di quello del velo: giusto, ma bastava che qualcuno aggiungesse un
   altro strato per rimetterla sotto. */
.slgn-hero-story__slide .slgn-hero-story__copy {
  position: absolute;
  z-index: 6;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
}

/* Il velo locale agganciato alla didascalia non serve piu': era il terzo
   strato, e con un velo solo ben tarato diventa una macchia in piu'. */
.slgn-hero-story__slide .slgn-hero-story__copy::before {
  display: none;
}

/* Senza didascalia resta solo il velo superiore per le barre delle storie. */
.slgn-hero-story__slide.slgn-hero-story__slide--senza-testo::after {
  background: linear-gradient(180deg, rgba(6, 6, 6, .68), rgba(6, 6, 6, .26) 9%, transparent 19%);
}

/* Il testo resta bianco pieno con un'ombra stretta: sul velo si legge da
   solo, l'ombra serve nei fotogrammi in cui sotto capita una zona chiara. */
.slgn-hero-story__slide .slgn-hero-story__copy h2 {
  color: var(--ws-white);
  font-family: var(--ws-display);
  font-weight: 500;
  text-transform: uppercase;
  text-shadow: 0 .08em .45em rgba(0, 0, 0, .5);
}

.slgn-hero-story__slide .slgn-hero-story__copy p,
.slgn-hero-story__slide .slgn-hero-story__copy span {
  color: var(--ws-paper);
  text-shadow: 0 .1em .4em rgba(0, 0, 0, .55);
}

/* Le barre restano sopra al velo: hanno un livello loro, dichiarato, cosi'
   non dipendono dall'ordine in cui capitano nel documento. */
.slgn-hero-story__progress {
  z-index: 7;
}

/* Un filo di ombra sotto le barre spente: su un fotogramma chiaro il grigio
   al 32% non bastava a distinguerle dal fondo. */
.slgn-hero-story__progress span {
  background: rgba(255, 255, 255, .38);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}


/* ================================================================== *
 * CHI SIAMO — IL PANNELLO A CONTRASTO INVERTITO
 *
 * L'unica sezione chiara di una pagina lunga ottomila pixel tutta nera. Il
 * contrasto fa da stacco da solo: non serve una riga di separazione, non
 * serve un colore in piu' - in una palette di due toni, invertirli e' l'unica
 * variazione disponibile, ed e' anche la piu' forte.
 *
 * L'inversione non e' riscritta proprieta' per proprieta'. Il pannello
 * ridefinisce sei variabili - carta, inchiostro, bianco, argento, spento,
 * linee - e tutto quello che sta dentro si adegua da solo: titoli, testo,
 * etichette e pulsanti, che quelle variabili le usano gia'. Se un domani la
 * palette del sito cambia, cambia anche qui senza toccare una riga.
 * ================================================================== */

.slgn-about {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--ws-line-soft);
}

/* L'inversione non vive piu' qui: e' diventata '.slgn-sec--carta', una
   proprieta' che qualunque sezione puo' avere, in fondo a questo foglio. Il
   pannello Chi siamo la indossa come tutti gli altri. */

/* -- Il lettering di sfondo -- *
 *
 * Due parole incolonnate, grandi quanto basta per leggersi da lontano, che
 * escono dal bordo basso della sezione. Il taglio e' la parte importante:
 * una parola intera al centro di un pannello diventa il soggetto, una parola
 * tagliata resta quello che deve essere - una texture che si riconosce.
 *
 * Sta davanti al contenuto, non dietro. A filo e con questa trasparenza il
 * testo sotto si legge lo stesso, e in cambio il lettering smette di essere
 * una macchia relegata in un angolo: attraversa la colonna dei dati e tiene
 * insieme le due meta' del pannello, che altrimenti si guardano da lontano
 * con un vuoto in mezzo.
 */
.slgn-ws .slgn-about .slgn-about__mark {
  position: absolute;
  right: -.04em;
  /* Un terzo di riga sotto il bordo: la seconda parola si taglia, la prima
     resta intera. Sopra al pannello si libera l'aria che prima era vuota. */
  bottom: -.3em;
  /* Davanti al contenuto (che sta a 1), non dietro. */
  z-index: 2;
  display: grid;
  /* Le due parole si incolonnano a destra: allineate a sinistra, la
     differenza di lunghezza fra le due lascerebbe un gradino verso il bordo
     della sezione, che e' il lato dove il lettering e' tagliato. */
  justify-items: end;
  color: rgba(13, 13, 13, .07);
  font-family: var(--ws-display);
  font-size: clamp(6rem, 18vw, 16rem);
  font-weight: 600;
  line-height: .82;
  letter-spacing: -.03em;
  text-transform: uppercase;
  /* Passa sopra al testo, quindi non deve mai intercettare un clic ne'
     entrare in una selezione. */
  pointer-events: none;
  user-select: none;
}

.slgn-about__markline {
  display: block;
}

.slgn-ws .slgn-about--scura .slgn-about__mark {
  color: rgba(255, 255, 255, .045);
}

/* -- L'impaginato: il racconto a sinistra, i dati a destra -- */
.slgn-about__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

@media (min-width: 1000px) {
  .slgn-about__grid {
    /* La colonna dei dati non cresce con lo schermo: e' una colonna di
       etichette, e allargarla la farebbe sembrare una tabella. */
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

.slgn-about__copy > .slgn-h2 {
  max-width: 22ch;
  margin-bottom: 1.8rem;
}

.slgn-about__text {
  max-width: 46rem;
}

.slgn-about__text .slgn-body {
  color: var(--ws-silver);
}

.slgn-about__cta {
  margin: 2.2rem 0 0;
}

/* -- I dati in colonna -- */
.slgn-about__facts {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ws-line);
}

.slgn-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--ws-line-soft);
}

.slgn-fact__v {
  font-family: var(--ws-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.slgn-fact__l {
  flex: 0 1 auto;
  color: var(--ws-mute);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-align: right;
  text-transform: uppercase;
}

/* -- Il pulsante nel pannello chiaro -- *
 *
 * Eredita gia' l'inversione dalle variabili: fondo nero e testo carta. Qui si
 * corregge solo il passaggio del mouse, che nel tema scuro schiarisce - e su
 * carta schiarire vuol dire sparire. */
.slgn-about--chiara .slgn-btn:hover,
.slgn-about--chiara .slgn-btn:focus-visible {
  background: #2a2a2a;
  border-color: #2a2a2a;
  color: #ece9e1;
}

/* -- Telefono -- */
@media (max-width: 999px) {
  .slgn-ws .slgn-about .slgn-about__mark {
    font-size: clamp(4rem, 26vw, 8rem);
    bottom: -.26em;
  }

  .slgn-about__copy > .slgn-h2 {
    max-width: none;
  }
}


/* ================================================================== *
 * IL CONTORNO, DOVE REGGE
 *
 * La parola disegnata a filo invece che piena e' il dettaglio piu' bello del
 * sistema, ed era stata tolta per il motivo giusto: il filo resta di poco piu'
 * di un pixel qualunque sia il corpo, quindi su un titolo di sezione da
 * trenta pixel la parola si intuisce e non si legge.
 *
 * Torna, ma solo dove le lettere sono abbastanza grandi da reggerlo: sotto i
 * quaranta pixel circa il rapporto fra filo e altezza scende troppo. Da qui
 * la regola pratica di questo blocco - il contorno vive nell'apertura, nella
 * chiusura, nel nastro e nel lettering di sfondo; nei titoli di sezione
 * l'accento resta il peso leggero, che a qualunque misura si legge.
 *
 * '-webkit-text-stroke' e' senza prefisso standard ma lo capiscono tutti i
 * browser in circolazione; il '@supports' tiene fuori quello che non lo fa, e
 * li' la parola resta piena.
 * ================================================================== */

@supports (-webkit-text-stroke: 1px currentColor) {

  /* -- L'apertura e la chiusura: i due titoli piu' grandi della pagina -- */
  @media (min-width: 760px) {
    .slgn-ws .slgn-display .slgn-word--em {
      color: transparent;
      -webkit-text-stroke: 1.4px var(--ws-paper);
      /* Torna al peso dei titoli: il contorno e' gia' tutto l'accento che
         serve, e un filo su lettere leggere diventa fragile. */
      font-weight: 500;
      text-shadow: 0 0 3rem rgba(255, 255, 255, .13);
    }
  }

  @media (min-width: 1000px) {
    .slgn-ws .slgn-cta__title .slgn-word--em {
      color: transparent;
      -webkit-text-stroke: 1.3px var(--ws-paper);
      font-weight: 500;
      text-shadow: 0 0 3rem rgba(255, 255, 255, .13);
    }
  }

  /* -- Il nastro: una parola piena, una a filo -- *
   *
   * L'alternanza da' al nastro un ritmo che prima non aveva: scorrendo si
   * vede una pulsazione invece di una fila uniforme di parole. E' anche il
   * punto in cui il contorno si nota di piu' senza dover leggere niente,
   * perche' il nastro e' decorativo e sta fuori dalla lettura.
   */
  .slgn-marquee__group span:nth-of-type(even) {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ws-paper);
  }

  /* -- Il lettering di sfondo del pannello Chi siamo -- *
   *
   * A ventidue rem di corpo il filo e' sottilissimo rispetto alle lettere:
   * e' esattamente la misura in cui il contorno da' il meglio. Sul fondo
   * carta il filo e' nero, sul fondo nero e' carta. */
  .slgn-ws .slgn-about .slgn-about__mark {
    color: transparent;
    -webkit-text-stroke: 1.6px rgba(13, 13, 13, .18);
  }

  .slgn-ws .slgn-about--scura .slgn-about__mark {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .1);
  }
}

/* Chi ha chiesto meno animazioni non c'entra col contorno, ma chi legge con
   un contrasto alzato dal sistema si': li' la parola torna piena, perche' un
   filo e' proprio quello che quella impostazione serve a evitare. */
@media (prefers-contrast: more) {
  .slgn-ws .slgn-word--em,
  .slgn-marquee__group span:nth-of-type(even) {
    color: var(--ws-white) !important;
    -webkit-text-stroke: 0 !important;
  }
}


/* ================================================================== *
 * IL FONDO AVORIO
 *
 * Una pagina di ottomila pixel tutti neri non e' scura: e' piatta. Il nero
 * si legge come nero finche' c'e' qualcosa accanto che nero non e', e dopo
 * tre sezioni di fila l'occhio smette di vederlo. Serve un fondo che ogni
 * tanto si ribalti - e in una palette di due toni l'unico ribaltamento
 * possibile e' invertirli.
 *
 * Non e' un blocco nuovo: e' una scelta del campo "Fondo della sezione" che
 * ogni blocco ha gia'. Chi impagina puo' spostare l'avorio da una sezione
 * all'altra dal builder, senza che nessuno tocchi il CSS - ed e' il punto,
 * perche' dove mettere il respiro e' una decisione che si prende guardando
 * la pagina finita, non scrivendola.
 *
 * L'inversione e' scritta una volta sola, come otto variabili. Tutto quello
 * che sta dentro la sezione - titoli, testo, occhielli, pulsanti, righe di
 * separazione - quelle variabili le usa gia', quindi si ribalta da solo. Le
 * uniche regole che seguono sono per le cose disegnate a mano in bianco,
 * che su carta sparirebbero: le decorazioni di fondo e i pochi componenti
 * che hanno velature proprie.
 * ================================================================== */

/* L'avorio, schiarito.
 *
 * Era #ece9e1: una carta calda, giusta da sola ma difficile da accompagnare.
 * Qualunque grigio le si appoggiasse sopra diventava fango - due mezzi toni
 * vicini non fanno contrasto, fanno una zona indecisa - e per evitarlo si
 * finiva a scaldare anche i grigi, che e' il modo in cui in una tavolozza in
 * bianco e nero compare l'oro senza che nessuno lo abbia scelto.
 *
 * Adesso e' quasi bianco. Un fondo chiaro cosi' non chiede compagnia: ci si
 * appoggia sopra il nero e basta, che e' esattamente quello che l'identita'
 * ha da offrire. La carta calda resta come secondo gradino, per i riquadri
 * che devono staccarsi appena. */
.slgn-ws .slgn-sec--carta {
  --ws-ink: #f4f2ec;
  --ws-ink-soft: #ebe8e0;
  /* Sul nero i tre inchiostri salgono di luce; su carta devono scendere,
     altrimenti un riquadro "sollevato" sparisce nel fondo invece di
     staccarsene. Senza questa riga il menu a tendina dei moduli restava
     scuro con il testo scuro sopra. */
  --ws-ink-lift: #e2ded4;
  --ws-paper: #0d0d0d;
  --ws-white: #000000;
  --ws-silver: #3c3c3e;
  --ws-mute: #74747a;
  --ws-line: rgba(0, 0, 0, .2);
  --ws-line-soft: rgba(0, 0, 0, .1);

  position: relative;
  overflow: hidden;
  /* 'background-color' e non la scorciatoia: le sezioni in rilievo mettono
     un gradiente su 'background-image', e la scorciatoia lo cancellerebbe. */
  background-color: #f4f2ec;
  color: #0d0d0d;
  /* Il passaggio nero-carta e' gia' un confine: la riga serve solo a
     impedire che i due fondi si tocchino di netto. */
  border-block: 1px solid rgba(0, 0, 0, .12);
}

/* -- Le decorazioni di fondo -- *
 *
 * Reticolo e alone sono disegnati con velature bianche: su avorio non
 * sparirebbero soltanto, sbiancherebbero il fondo. Qui passano al nero con
 * la stessa discrezione che hanno sul nero.
 *
 * La specificita' e' quella che e' perche' le regole originali usano
 * ':not(.slgn-sec--contrast)', e un ':not' vale quanto la classe che nega:
 * tre classi da battere, tre classi in campo, e l'ordine nel foglio decide.
 */
.slgn-ws .slgn-sec.slgn-sec--carta::before,
.slgn-ws .slgn-cta.slgn-sec--carta::before {
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .055) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg,  rgba(0, 0, 0, .055) 0 1px, transparent 1px 88px);
  opacity: .7;
}

.slgn-ws .slgn-sec.slgn-sec--carta::after,
.slgn-ws .slgn-cta.slgn-sec--carta::after {
  background-image: radial-gradient(closest-side, rgba(0, 0, 0, .05), transparent 72%);
}

/* Il rilievo su avorio e' un avorio piu' scuro, e il filo di luce sul bordo
   diventa un filo d'ombra: su carta la luce non si vede. */
.slgn-ws .slgn-sec.slgn-sec--carta.slgn-sec--lift {
  background-color: #e2ded4;
  background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .22), transparent);
}

.slgn-ws .slgn-sec.slgn-sec--carta.slgn-sec--lift::after {
  background-image: radial-gradient(closest-side, rgba(0, 0, 0, .07), transparent 70%);
}

/* -- Il peso del testo torna pieno -- *
 *
 * Fuori di qui il paragrafo sta sotto il peso normale, perche' il chiaro su
 * nero dilata. Su avorio succede l'opposto: il nero su chiaro si assottiglia,
 * e un 340 diventa un testo smunto. Stessa ragione, segno rovesciato. */
.slgn-ws .slgn-sec--carta .slgn-lead,
.slgn-ws .slgn-about--chiara .slgn-lead {
  font-weight: 400;
  letter-spacing: 0;
}

.slgn-ws .slgn-sec--carta .slgn-body,
.slgn-ws .slgn-about--chiara .slgn-body {
  font-weight: 400;
}

/* -- I pulsanti -- *
 *
 * Il fondo e il testo si ribaltano da soli con le variabili. Va corretto
 * solo il passaggio del mouse, che sul tema scuro schiarisce: su carta
 * schiarire vuol dire sparire. */
.slgn-ws .slgn-sec--carta .slgn-btn:hover,
.slgn-ws .slgn-sec--carta .slgn-btn:focus-visible {
  background: #2a2a2a;
  border-color: #2a2a2a;
  color: #ece9e1;
}

/* -- I componenti che hanno velature proprie -- *
 *
 * Quasi tutto il sito si ribalta da solo perche' passa dalle variabili. Qui
 * sotto ci sono le eccezioni: i pochi punti in cui un fondo o un'ombra sono
 * scritti a mano, e che su avorio resterebbero neri o sparirebbero.
 */

/* Le schede del carosello del metodo: un fondo scuro con una riga di luce
   dentro il bordo. Su avorio diventa un fondo chiaro con una riga d'ombra,
   e l'ombra d'appoggio si alleggerisce - su carta un'ombra pesante sporca. */
.slgn-ws .slgn-sec--carta .slgn-card3d__inner {
  background: linear-gradient(158deg, #fbfaf6, #eeeae1 68%);
  box-shadow:
    0 .1rem 0 rgba(0, 0, 0, .05) inset,
    0 1.6rem 3.4rem rgba(0, 0, 0, .14);
}

.slgn-ws .slgn-sec--carta .slgn-carousel.is-ready .slgn-card3d.is-active .slgn-card3d__inner {
  border-color: rgba(0, 0, 0, .24);
  box-shadow:
    0 .1rem 0 rgba(0, 0, 0, .07) inset,
    0 2rem 4.4rem rgba(0, 0, 0, .2);
}

/* Le animazioni delle fasi: tre variabili e il loro fondo. Tutto il resto
   dentro i pannelli passa gia' da --ws-white e --ws-paper, che a questo
   punto sono a loro volta invertite. */
/* Il pannello animato resta nero anche sulle sezioni chiare.
 *
 * Prima si rovesciava insieme al resto: fondo grigio, tratti neri. Ma un
 * grigio medio su una carta calda non e' un contrasto, e' una zona sporca -
 * e schiarirlo o scaldarlo non risolve, sposta soltanto il problema da una
 * parte all'altra della stessa indecisione.
 *
 * La composizione e' fatta di tratti sottili di luce: e' nata per il nero, e
 * sul nero si legge. Quindi il pannello se lo porta dietro. Su un foglio
 * chiaro diventa uno schermo acceso appoggiato sopra - che e' letteralmente
 * quello che raffigura - e il contrasto torna quello dell'identita': bianco e
 * nero, senza toni in mezzo a fare da mediatori.
 *
 * Le variabili si rimettono a posto qui dentro. La sezione le ha rovesciate
 * per il testo che le sta intorno; dentro al pannello quel rovesciamento non
 * vale piu', e rimesse a mano tutto quello che il pannello contiene torna a
 * disegnarsi come sul nero - campioni della tavolozza compresi, che infatti
 * non hanno piu' bisogno della loro eccezione. */
.slgn-ws .slgn-sec--carta .slgn-mg {
  --ws-paper: #ece9e1;
  --ws-white: #ffffff;
  --ws-silver: #c9c9c7;
  --ws-mute: #6c6d70;

  --mg-line: rgba(255, 255, 255, .12);
  --mg-line-strong: rgba(255, 255, 255, .26);
  --mg-fill: rgba(255, 255, 255, .07);

  border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(155deg, #121212, #080808 62%);
  color: var(--ws-paper);

  /* Appoggiato, non incollato: su un fondo chiaro un rettangolo nero senza
     ombra sembra un buco nella pagina. */
  box-shadow: 0 1.4rem 3rem -1.6rem rgba(0, 0, 0, .55);
}

/* Il nastro scorrevole e i loghi: sono grigi chiari su nero, quindi su
   avorio vanno riportati allo scuro. */
.slgn-ws .slgn-sec--carta .slgn-proof__logo,
.slgn-ws .slgn-sec--carta .slgn-marquee__group span {
  color: var(--ws-silver);
}

/* -- La virgoletta gigante del tema -- *
 *
 * Il tema mette su ogni 'blockquote' una virgoletta decorativa di duecento
 * pixel, e il suo foglio e' servito senza dichiarazione di codifica: i tre
 * byte della virgoletta curva vengono letti a uno a uno e al posto del
 * segno esce "“". Il difetto c'e' da sempre, ma il glifo e' quasi nero e
 * finora stava su fondo nero: invisibile per combinazione, non per scelta.
 * Sul pannello avorio si e' acceso.
 *
 * Qui la si toglie e basta: rimetterla giusta vorrebbe dire correggere il
 * foglio del tema padre, che il primo aggiornamento si riprenderebbe.
 *
 * L'esclusione riguarda ogni citazione tranne la nostra: quella le sue
 * virgolette ce le ha, disegnate qui sopra, e sono l'unica cosa che le da'
 * la forma di una citazione.
 *
 * Due classi contro una: la regola del tema vale (0,1,2) per via del ':not',
 * questa vale (0,2,1) e vince a prescindere dall'ordine di caricamento.
 */
.slgn-ws blockquote:not(.slgn-quote)::before,
.slgn-ws blockquote:not(.slgn-quote)::after {
  content: none;
}


/* ================================================================== *
 * L'INDICE DELLA PAGINA
 *
 * Righe numerate che portano piu' in basso nella stessa pagina. La freccia
 * punta in giu' e non a destra: dice dove si va, e dove si va e' sotto.
 * ================================================================== */

.slgn-index__list {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ws-line);
}

.slgn-index__item {
  border-bottom: 1px solid var(--ws-line-soft);
}

.slgn-index__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.1rem, 2.4vw, 1.7rem) 0;
  color: inherit;
  text-decoration: none;
  /* Il padding si sposta col passaggio del mouse: e' la stessa mossa delle
     righe altrove nel sito, e vale piu' di un cambio di colore perche' si
     vede anche con la coda dell'occhio. */
  transition: padding-left .45s var(--ws-ease), color .3s var(--ws-ease);
}

.slgn-index__link:hover,
.slgn-index__link:focus-visible {
  padding-left: clamp(.5rem, 1.4vw, 1.1rem);
  color: var(--ws-paper);
}

.slgn-index__n {
  color: var(--ws-mute);
  font-family: var(--ws-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
}

.slgn-index__nome {
  display: block;
  font-family: var(--ws-display);
  font-size: clamp(1.35rem, 3.1vw, 2.15rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.slgn-index__nota {
  display: block;
  margin-top: .5rem;
  max-width: 52ch;
  color: var(--ws-silver);
  font-size: .95rem;
  line-height: 1.5;
}

.slgn-index__freccia {
  color: var(--ws-mute);
  font-size: 1.1rem;
  transition: transform .45s var(--ws-ease), color .3s var(--ws-ease);
}

.slgn-index__link:hover .slgn-index__freccia,
.slgn-index__link:focus-visible .slgn-index__freccia {
  transform: translateY(.28rem);
  color: var(--ws-paper);
}

@media (max-width: 599px) {
  .slgn-index__list:not(.slgn-index__list--griglia) .slgn-index__link {
    grid-template-columns: auto minmax(0, 1fr);
  }

  /* La freccia sta sotto al numero invece che in fondo alla riga: su una
     colonna stretta in fondo alla riga finirebbe da sola su un rigo suo.
     Nelle schede no: li' sta in fondo, dove la mette il loro impaginato. */
  .slgn-index__list:not(.slgn-index__list--griglia) .slgn-index__freccia {
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
  }
}


/* -- Arrivarci -- *
 *
 * Due cose servono a un collegamento interno per non essere sgradevole.
 *
 * Lo scorrimento morbido, perche' un salto secco a meta' pagina fa perdere
 * il segno: si arriva senza sapere se si e' andati su o giu'. Vale solo
 * dove c'e' una pagina costruita col builder, e solo per chi non ha chiesto
 * meno animazioni - a chi l'ha chiesto il salto secco va benissimo, ed e'
 * anzi quello che si aspetta.
 *
 * E lo scarto in cima, perche' il tema tiene un'intestazione fissa: senza,
 * la sezione si allinea al bordo dello schermo e il suo titolo finisce
 * dietro alla barra. Si arriverebbe nel posto giusto vedendo la cosa
 * sbagliata.
 */
@media (prefers-reduced-motion: no-preference) {
  html:has(.slgn-ws) {
    scroll-behavior: smooth;
  }
}

.slgn-ws .slgn-sec,
.slgn-ws .slgn-cta,
.slgn-ws .slgn-band,
.slgn-ws .slgn-hero {
  scroll-margin-top: clamp(5rem, 9vw, 8.5rem);
}

/* -- L'indice disposto a griglia -- *
 *
 * Le stesse voci, ma affiancate. Non basta cambiare la direzione: una riga
 * d'elenco e una scheda sono due oggetti diversi. La riga vive del filo che
 * la separa da quella sotto, la scheda ha bisogno di un contorno chiuso e
 * di un dentro, altrimenti in griglia le voci sembrano appoggiate sul
 * fondo invece che dentro qualcosa.
 *
 * Sotto i 760 pixel torna una colonna sola: due schede affiancate su un
 * telefono sono due schede troppo strette per il titolo che portano.
 */
.slgn-index__list--griglia {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  border-top: 0;
}

@media (min-width: 760px) {
  .slgn-index__list--griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.slgn-index__list--griglia .slgn-index__item {
  border: 1px solid var(--ws-line);
  border-bottom: 1px solid var(--ws-line);
}

/* Dentro la scheda il numero non sta piu' accanto al nome ma sopra, e la
   freccia scende in fondo: e' l'impaginato di una scheda, non di una riga.
   'auto 1fr auto' sulle righe tiene le frecce allineate fra schede di
   altezza diversa, invece di farle galleggiare sotto testi di lunghezza
   diversa. */
.slgn-index__list--griglia .slgn-index__link {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: clamp(.8rem, 1.8vw, 1.2rem);
  height: 100%;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  /* In griglia il rientro non si vede: la scheda ha gia' un bordo, e
     spostare il testo dentro un contorno fermo sembra un errore. Qui si
     muove il fondo, che e' il modo in cui una scheda risponde. */
  transition: background-color .35s var(--ws-ease), color .3s var(--ws-ease);
}

.slgn-index__list--griglia .slgn-index__link:hover,
.slgn-index__list--griglia .slgn-index__link:focus-visible {
  padding-left: clamp(1.4rem, 3vw, 2.2rem);
  background-color: var(--ws-line-soft);
}

.slgn-index__list--griglia .slgn-index__nota {
  margin-top: 0;
}

.slgn-index__list--griglia .slgn-index__freccia {
  justify-self: end;
}


/* ================================================================== *
 * NIENTE CAMBIA DI COLPO
 *
 * Un elemento che al passaggio del mouse cambia colore di scatto sembra
 * rotto anche quando fa esattamente il suo mestiere: il salto istantaneo e'
 * il modo in cui si presentano gli errori, non le risposte. Qui sotto ogni
 * cosa toccabile ha un tempo di risposta, e sempre lo stesso.
 *
 * Il ':where()' e' la parte importante. Azzera la specificita' del
 * selettore, quindi questa regola vale (0,0,0) e perde contro chiunque:
 * tutte le transizioni gia' scritte nel foglio - e sono quasi quaranta,
 * tarate una per una - restano esattamente come sono. Questa copre solo
 * quello che non aveva niente. Senza ':where()' un selettore come
 * '.slgn-ws a' varrebbe piu' di '.slgn-btn' e si sarebbe portato via
 * silenziosamente meta' delle scelte fatte altrove.
 *
 * Le proprieta' sono elencate una per una e non con 'all': 'all' mette in
 * transizione anche cose che non ci si aspetta - altezze che si assestano,
 * larghezze calcolate al caricamento - e produce scivolamenti che nessuno
 * ha chiesto.
 */
:where(
  .slgn-ws a,
  .slgn-ws button,
  .slgn-ws summary,
  .slgn-ws input,
  .slgn-ws select,
  .slgn-ws textarea,
  .slgn-ws .slgn-card,
  .slgn-ws .slgn-feature,
  .slgn-ws .slgn-feature__go,
  .slgn-ws .slgn-fact,
  .slgn-ws .slgn-shot,
  .slgn-ws .slgn-quote,
  .slgn-ws .slgn-index__item,
  .slgn-ws .slgn-proof__logo,
  .slgn-ws [data-slgn-slide],
  .slgn-ws [data-slgn-go]
) {
  transition:
    color var(--ws-hover),
    background-color var(--ws-hover),
    border-color var(--ws-hover),
    box-shadow var(--ws-hover),
    opacity var(--ws-hover),
    transform var(--ws-move),
    padding var(--ws-move);
}

/* -- I due punti che cambiavano di scatto -- */

/* La freccia della scheda cambia colore col passaggio sulla scheda intera:
   la transizione stava sulla freccetta dentro, non sul contenitore che il
   colore ce l'ha. */
.slgn-feature__go {
  transition: color var(--ws-hover), transform var(--ws-move);
}

/* La riga di dettaglio si sposta e cambia colore: senza tempo, lo scarto
   del rientro e' uno scatto secco di mezzo centimetro. */
a.slgn-detail {
  transition: color var(--ws-hover), padding-left var(--ws-move);
}

/* Due cose restano istantanee, e non per dimenticanza.
 *
 * Il contorno di messa a fuoco deve comparire nel momento in cui si arriva
 * sull'elemento: e' l'unico segno che ha chi naviga da tastiera, e farlo
 * sfumare vuol dire mostrarlo in ritardo proprio a chi ne dipende.
 *
 * La pausa del nastro scorrevole e' un fermo, non un cambio di stato: una
 * transizione su 'animation-play-state' non esiste, e se esistesse
 * sarebbe un nastro che frena invece di fermarsi. */

/* Quello che sta dentro a un elemento toccabile.
 *
 * Un'icona o una parola dentro un link di solito prende il colore dal
 * genitore, e allora si muove col genitore. Ma basta una regola che scriva
 * il colore direttamente sul figlio - e ce ne sono, per le frecce e per i
 * numeri - perche' quel pezzo salti mentre tutto il resto scivola. Costa
 * poco coprirli tutti.
 *
 * 'fill' e 'stroke' ci sono per le icone disegnate: sono le loro proprieta'
 * di colore, e 'color' su un SVG non le tocca a meno che non usi
 * 'currentColor'. */
:where(.slgn-ws a *, .slgn-ws button *, .slgn-ws summary *) {
  transition:
    color var(--ws-hover),
    fill var(--ws-hover),
    stroke var(--ws-hover),
    opacity var(--ws-hover),
    transform var(--ws-move);
}


/* ================================================================== *
 * L'ARCHIVIO DEI PROGETTI
 *
 * Le schede le disegna Slogan Portfolio, che le usa in tre posti: qui, nei
 * widget Elementor e negli archivi di categoria. Il suo foglio si veste da
 * solo - nero, carta, Arial Black - perche' deve reggere anche dove non c'e'
 * nessuno dei nostri fogli.
 *
 * Dentro una pagina del builder quel vestito e' un intruso: Arial Black
 * accanto a Inter Tight non e' una variazione, e' un secondo sito. Qui sotto
 * si riaggancia alle nostre variabili, e nient'altro. Non si tocca il foglio
 * dell'altro plugin: fuori da '.slgn-ws' resta identico a com'era, case
 * study compresi.
 *
 * Il ribaltamento su avorio arriva gratis: tutte le variabili usate qui sono
 * quelle che '.slgn-sec--carta' gia' rovescia. Per questo si passa dai
 * colori del testo e non da quelli del fondo - 'paper' e 'ink' si scambiano
 * di posto, e agganciarsi a 'ink' vorrebbe dire scrivere avorio su avorio.
 * ================================================================== */

.slgn-ws .slgn-pf {
  --slgn-pf-fg: var(--ws-paper);
  --slgn-pf-muted: var(--ws-mute);
  --slgn-pf-accent: var(--ws-silver);
  --slgn-pf-line: var(--ws-line);
  --slgn-pf-gap: clamp(1.4rem, 2.6vw, 2.2rem);
  --slgn-pf-ease: var(--ws-ease);

  font-family: var(--ws-sans);
}

/* Il titolo della scheda e l'iniziale gigante di chi non ha copertina:
   erano gli unici due punti in Arial Black. */
.slgn-ws .slgn-pf__title,
.slgn-ws .slgn-pf__placeholder {
  font-family: var(--ws-display);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.slgn-ws .slgn-pf__excerpt { font-weight: 380; }

/* I filtri sono pulsanti veri: prendono i tempi comuni come tutto il resto. */
.slgn-ws .slgn-pf__filter {
  font-family: var(--ws-display);
  transition: color var(--ws-hover), background-color var(--ws-hover),
              border-color var(--ws-hover), opacity var(--ws-hover);
}

/* Su avorio il testo del paragrafo torna pieno, come nel resto della pagina. */
.slgn-ws .slgn-sec--carta .slgn-pf__excerpt { font-weight: 400; }


/* ================================================================== *
 * LA FOTOGRAFIA DENTRO IL SERVIZIO
 *
 * Quattro sezioni servizio di fila sono quattro volte la stessa cosa:
 * intestazione, elenco, riquadro. Ben impaginate, ma tutte uguali - e dopo
 * la seconda l'occhio smette di distinguerle.
 *
 * La fotografia sta fra l'intestazione e le due colonne, a piena larghezza
 * del contenuto: e' una riga orizzontale in mezzo a una pagina fatta di
 * colonne, ed e' proprio quel cambio di direzione a rimettere un appiglio.
 * Non e' una fascia: la fascia esce dai margini e si prende mezza schermata,
 * qui invece la foto resta dentro la sezione, perche' appartiene a quel
 * servizio e non alla pagina.
 *
 * Sopra non ci va nessun testo, percio' il trattamento e' piu' leggero di
 * quello della fascia: si desatura per non portare in pagina colori che non
 * sono della palette, ma non si scurisce - non c'e' niente da far leggere.
 * ================================================================== */

.slgn-svc-shot {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  border: 1px solid var(--ws-line-soft);
  background: var(--ws-ink-soft);
}

.slgn-svc-shot img {
  width: 100%;
  height: 100%;
  /* Sul telefono una striscia da 16:5 e' una fessura: la foto torna quasi
     quadrata e il soggetto si vede. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(.5) contrast(1.08);
  transform: scale(1.001);
  transition: transform 1.2s var(--ws-ease), filter var(--ws-move);
}

@media (min-width: 760px) {
  .slgn-svc-shot img { aspect-ratio: 16 / 5; }
}

/* Il colore torna dove si sta guardando. E' l'unico punto del sito in cui
   il colore vero compare, ed e' voluto: dura quanto il passaggio del mouse. */
.slgn-svc-shot:hover img {
  filter: grayscale(.12) contrast(1.04);
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .slgn-svc-shot img,
  .slgn-svc-shot:hover img { transform: none; transition: filter var(--ws-move); }
}

/* Su avorio il fondo di attesa e il filo seguono il ribaltamento. */
.slgn-ws .slgn-sec--carta .slgn-svc-shot {
  border-color: var(--ws-line-soft);
  background: rgba(0, 0, 0, .05);
}


/* ================================================================== *
 * IL REEL ACCANTO ALL'APERTURA
 *
 * Lo scroller e' una lastra sola: bella, ma appoggiata sul fondo come un
 * adesivo. Accanto ci sta un reel verticale che suona, largo la meta',
 * allineato in basso.
 *
 * Quattro posizioni provate prima di questa, e tre scartate per un motivo
 * diverso ognuna. Davanti allo scroller: i due riquadri si contendevano lo
 * stesso angolo di schermo e non si capiva quale guardare. Sotto, in fila:
 * la colonna cresceva di duecento pixel e l'apertura non ci stava piu' in
 * una schermata. Dietro, orizzontale: una banda che non diceva niente.
 *
 * Di fianco funziona perche' i due riquadri non si contendono niente - uno
 * e' verticale stretto, l'altro verticale largo, e stanno su due colonne
 * diverse. Sta in posizione assoluta, quindi non allunga la colonna di un
 * pixel: l'apertura e' alta esattamente quanto era prima che esistesse.
 *
 * Solo da 1360px in su. Sotto, la colonna del testo si stringe al punto che
 * la riga di apertura arriva al suo bordo, e li' accanto non c'e' piu' lo
 * spazio per un secondo riquadro: l'apertura resta quella di prima.
 * ================================================================== */

.slgn-hero-reel { display: none; }

@media (min-width: 1360px) {

  .slgn-hero--home .slgn-hero__showcase {
    /* La prospettiva serve alla rotazione minima del reel quando si muove
       il puntatore. Lo scroller non ruota e non si sposta: e' l'ancora, e
       dentro alla sua cornice c'e' del testo che muovendosi si taglierebbe
       ai bordi. */
    perspective: 1400px;
    perspective-origin: 30% 70%;
  }

  .slgn-hero--home .slgn-hero-story,
  .slgn-hero--home .slgn-hero-signals {
    position: relative;
    z-index: 2;
  }

  .slgn-hero-reel {
    position: absolute;
    z-index: 1;
    /* Larghezza propria piu' un dito di aria: si appoggia al fianco dello
       scroller senza toccarlo. Se la finestra si stringe fin quasi ai
       1360px i due si sfiorano, e va bene cosi' - il reel sta un piano
       dietro proprio per quello. */
    left: -12rem;
    bottom: 0;
    display: block;
    width: 11rem;
    transform:
      rotateY(calc(var(--px, 0) * 3deg))
      translate3d(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 6px), 0);
    transition: transform .6s var(--ws-ease);
  }

  /* Il reel e' un oggetto a parte: entra dopo il loader insieme al resto
     della hero, senza aspettare che il mouse lo muova per la prima volta. */
  .slgn-js .slgn-hero-reel {
    opacity: 0;
    transform:
      translate3d(-1.4rem, 2rem, 0)
      rotateY(calc(var(--px, 0) * 3deg))
      translate3d(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 6px), 0);
    transition: opacity .55s var(--ws-ease), transform .8s var(--ws-ease);
  }

  .slgn-js .slgn-hero-reel.is-in {
    opacity: 1;
    transform:
      rotateY(calc(var(--px, 0) * 3deg))
      translate3d(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 6px), 0);
  }
}

@media (min-width: 1500px) {
  .slgn-hero-reel {
    left: -14rem;
    width: 12.5rem;
  }
}

/* -- Lo schermo: verticale come un telefono -- */
.slgn-hero-reel__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--ws-line);
  background: #0b0b0b;
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .55);
}

.slgn-hero-reel__shot,
.slgn-hero-reel__screen .slgn-hero-reel__locale,
.slgn-hero-reel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slgn-hero-reel__shot {
  filter: grayscale(.3) contrast(1.06) brightness(.9);
}

/* Senza filmato sopra, la fotografia deriva piano e torna al punto di
   partenza: un loop e' esattamente questo, e non costa un byte in piu'. */
.slgn-hero-reel:not(.slgn-hero-reel--vivo) .slgn-hero-reel__shot {
  animation: slgn-reel-drift 18s var(--ws-ease) infinite alternate;
}

/* Il filmato dentro alla cornice.
 *
 * Verticale come lei, riempie e basta. Orizzontale - ed e' il caso normale,
 * perche' quasi tutto si gira in orizzontale - va allargato fino a coprirla,
 * e quello che avanza ai lati lo taglia la cornice. E' quello che fa
 * qualunque riquadro 'cover', ed e' meglio di due bande nere.
 *
 * Il rapporto del filmato ('--vid') non lo si indovina: lo dice Vimeo, e
 * arriva scritto sull'elemento. Il numero fisso qui sotto e' il rapporto
 * della cornice, 9/16 = 0.5625. */
.slgn-hero-reel__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.slgn-hero-reel--largo .slgn-hero-reel__frame {
  width: calc(100% * var(--vid, 1.7778) / 0.5625);
  /* I due pixel in piu' non sono superstizione: fra la percentuale e il
     pixel intero l'arrotondamento lascia un filo scoperto in fondo alla
     cornice, e su fondo nero un filo chiaro si vede benissimo. */
  height: calc(100% + 2px);
}

/* -- Il vetro in fondo: senza, il nome sparisce su una foto chiara -- */
.slgn-hero-reel__glass {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78));
  pointer-events: none;
}

/* -- La riga in cima: il comando dell'applicazione -- *
 *
 * Sta sopra al velo scuro superiore, altrimenti su un fotogramma chiaro
 * sparirebbe. La scheda attiva e' piena, l'altra e' sbiadita: e' l'unico
 * modo per far capire su quale delle due si e' senza scriverlo. */
.slgn-hero-reel__top {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .55rem .6rem 1.6rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, .62), transparent);
  color: var(--ws-paper);
  font-family: var(--ws-display);
  font-size: .54rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}

.slgn-hero-reel__top b { font-weight: 500; }
.slgn-hero-reel__top span:last-child { opacity: .5; }

/* Il piu': due tratti incrociati, nessuna immagine e nessun carattere - un
   segno disegnato resta identico su qualunque macchina. */
.slgn-hero-reel__plus {
  position: relative;
  flex: none;
  width: .6rem;
  height: .6rem;
  margin-right: .1rem;
}

.slgn-hero-reel__plus::before,
.slgn-hero-reel__plus::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--ws-paper);
}

.slgn-hero-reel__plus::after { transform: rotate(90deg); }

/* -- I gesti, sul fianco destro -- *
 *
 * Solo la forma, nessun numero: un conteggio inventato e' un dato falso
 * anche quando e' decorazione. */
.slgn-hero-reel__acts {
  position: absolute;
  z-index: 3;
  right: .45rem;
  bottom: 2.9rem;
  display: grid;
  justify-items: center;
  gap: .62rem;
  color: var(--ws-paper);
  /* L'ombra e' l'unica cosa che li tiene leggibili su un fotogramma chiaro:
     un filo bianco su bianco non si vede, un filo bianco con un alone
     scuro si' - e non serve un secondo velo che copra il filmato. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}

.slgn-hero-reel__acts svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

/* -- Chi pubblica, in fondo -- */
.slgn-hero-reel__who {
  position: absolute;
  z-index: 3;
  left: .55rem;
  right: 2.3rem;
  bottom: .8rem;
  display: flex;
  align-items: center;
  gap: .38rem;
  margin: 0;
  color: var(--ws-paper);
  font-family: var(--ws-display);
  font-size: .5rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Il marchio vero, ritagliato in tondo. Il quadrato vuoto resta come
   ripiego se il file non c'e': un buco al posto del logo si nota meno di
   un'immagine rotta. */
.slgn-hero-reel__logo,
.slgn-hero-reel__who i {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  background: #000;
  object-fit: cover;
}

.slgn-hero-reel__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Il tasto Segui: contorno, come i pulsanti secondari del sito. */
.slgn-hero-reel__segui {
  flex: none;
  padding: .16rem .36rem;
  border: 1px solid rgba(255, 255, 255, .7);
  font-size: .46rem;
  letter-spacing: .1em;
}

/* -- La riga di avanzamento -- *
 *
 * E' il segno che dice "sta suonando", e per un filmato in loop dice il
 * vero. Con un video locale il JavaScript le passa la durata giusta, cosi'
 * il giro finisce quando finisce il filmato. */
.slgn-hero-reel__line {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: rgba(255, 255, 255, .18);
}

.slgn-hero-reel__line i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 100%;
  background: var(--ws-paper);
  transform-origin: left center;
  animation: slgn-reel-run var(--dur, 9s) linear infinite;
}

@keyframes slgn-reel-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.6%, -1.2%, 0); }
}

@keyframes slgn-reel-run {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Chi ha chiesto meno animazioni tiene i due riquadri, affiancati e fermi:
   la composizione e' nella posa, il movimento era solo l'accento. */
@media (prefers-reduced-motion: reduce) {
  .slgn-hero-reel {
    transform: none !important;
    transition: none !important;
  }

  .slgn-hero-reel__shot,
  .slgn-hero-reel__line i {
    animation: none !important;
  }

  /* Il filmato non si ferma da qui: un elemento video non e' un'animazione
     CSS. Lo toglie il JavaScript, che quella preferenza la legge comunque
     per tutto il resto. */
}


/* ================================================================== *
 * LA COLONNA A DESTRA DEL SERVIZIO
 *
 * "Quando ha senso" sono due righe di testo dentro un riquadro, e stanno
 * accanto a un elenco che di righe ne ha sei: sotto al riquadro restava
 * mezza colonna vuota. Una volta sola non si nota; quattro volte di fila,
 * nella stessa posizione, diventa il buco della pagina.
 *
 * Lo riempie una composizione animata - la stessa famiglia di pannelli che
 * gia' vive nelle altre sezioni - che prende esattamente l'altezza che
 * avanza. Non e' riempitivo: mostra l'attrezzo di cui parla il servizio
 * accanto, e cambia da un servizio all'altro.
 *
 * La riga in altezza e' 'minmax(11rem, 1fr)' e non '1fr': i pannelli si
 * misurano in unita' di contenitore, e un contenitore alto zero li
 * disegnerebbe vuoti. Il minimo garantisce che un'altezza ci sia sempre.
 * ================================================================== */

.slgn-svc-aside {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.5rem);
  align-content: start;
}

/* Il pannello non si stira piu' per riempire la colonna.
 *
 * Prima prendeva l'altezza che avanzava accanto all'elenco, e quella
 * altezza non era mai la stessa: su un servizio con sei voci restavano
 * cinquanta pixel, e dentro cinquanta pixel una composizione disegnata per
 * duecento non ci sta - veniva tagliata. Adesso ha la sua forma, 16:7 come
 * ovunque, e quello che avanza nella colonna resta aria. Aria sotto un
 * riquadro si legge come impaginazione; mezza animazione si legge come un
 * errore. */
.slgn-mg--svc { padding: clamp(.75rem, 1.7vw, 1.1rem); }

/* Independent hero media controls; visible blocks stack when both are enabled. */
@media (max-width: 900px) {
  .slgn-hero__showcase .slgn-hero-media--no-mobile { display: none !important; }
  .slgn-hero__showcase .slgn-hero-reel--mobile {
    display: block;
    position: relative;
    left: auto;
    bottom: auto;
    width: min(100%, 360px);
    margin: 0 auto;
    opacity: 1;
    transform: none;
  }
  .slgn-hero-story:not(.slgn-hero-media--no-mobile) + .slgn-hero-reel--mobile { margin-top: 24px; }
}

.slgn-hero-reel__who .slgn-hero-reel__social { pointer-events: auto; position: relative; z-index: 3; color: inherit; text-decoration: none; min-height: 0; height: auto; line-height: 1.2; align-self: center; display: inline-flex; align-items: center; justify-content: center; }
/* The configured social link covers the entire reel without changing its layout. */
.slgn-hero-reel > .slgn-hero-reel__link { position: absolute; inset: 0; z-index: 10; display: block; pointer-events: auto; border-radius: inherit; cursor: pointer; }
.slgn-hero-reel__link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.slgn-hero-reel:has(> .slgn-hero-reel__link:hover) .slgn-hero-reel__social { background: #fff; color: #111; }