/* ========================================================================
   HOME.CSS
   Stili esclusivi della Home (index.html)
======================================================================= */

/* -----------------------------
   Hero home
----------------------------- */
#hero {
  min-height: 100vh;
  /* Sul telefono la barra degli indirizzi si mangia una fetta di schermo:
     "svh" misura lo schermo quando la barra c'e, cosi la prima schermata
     non resta tagliata in fondo. */
  min-height: 100svh;
  padding-top: var(--nav-h);
  background: var(--navy);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-vline {
  position: absolute;
  left: calc((100% - var(--max)) / 2 + var(--pad-x));
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 169, 110, 0.2) 20%,
    rgba(201, 169, 110, 0.2) 80%,
    transparent 100%
  );
}

.hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px var(--pad-x) 150px;
}

/* Il ritratto non sta in una cornice e non galleggia in mezzo al blu: sale
   dal bordo destro dello schermo, viene tagliato dal fondo e si dissolve
   verso l'alto e verso il testo. Una foto squadrata, centrata e bordata su
   fondo scuro e' esattamente l'immagine che si vuole evitare. */
.hero-foto {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  top: 0;
  /* Piu larga di prima: cosi la persona sta piu verso il centro e a destra
     non resta la striscia di fondo blu. */
  width: clamp(340px, 42vw, 620px);
  pointer-events: none;
}

.hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Il taglio scorre verso destra: la persona si sposta a sinistra e il
     lato destro resta pieno di foto, senza fondo blu che spunta. */
  object-position: 66% 6%;
  /* Colore quasi naturale: prima era smorzata e scura, e il fondo dello
     studio virava al blu. */
  filter: saturate(1.04) contrast(1.03);
  /* Una velatura sola, verso il testo: il bordo alto e quello destro
     restano pieni, il fondo lo taglia lo schermo. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
  mask-image: linear-gradient(to right, transparent 0%, #000 40%);
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
}

.hero-eyebrow-line {
  width: 32px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.hero-eyebrow span {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-title {
  margin-bottom: 28px;
  font-size: clamp(2.8rem, 4.6vw, 4.8rem);
  line-height: 1.08;
  color: var(--white);
  letter-spacing: -0.01em;
}

.hero-title em {
  color: var(--gold-light);
}

/* Il testo si ferma prima della foto: sotto i 960 pixel la foto passa in
   fondo e questo limite non serve piu. */
.hero-text {
  max-width: min(620px, 58%);
}

/* I due nomi che contano nella presentazione: chi c'e dietro. Su fondo blu
   il grassetto normale sparisce, serve anche il bianco pieno. */
.hero-subtitle strong {
  color: #fff;
  font-weight: 600;
}

.hero-subtitle {
  max-width: 480px;
  margin-bottom: 52px;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.74);
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* La riga sotto il pulsante: dice cosa succede se si clicca. Chi arriva su
   un sito di consulenza si chiede prima di tutto "a cosa mi impegno". */
.hero-rassicura {
  margin-top: 14px;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

/* "Scopri il metodo" respira: si allarga e si stringe appena, come un
   lampeggio lento. */
#hero .btn-ghost {
  border-color: rgba(255, 255, 255, 0.38);
  color: rgba(255, 255, 255, 0.88);
  animation: respiro 3.2s ease-in-out 2.2s infinite;
}

@keyframes respiro {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

/* Riquadri un po' piu piccoli, solo nella prima schermata. */
#hero .btn-primary,
#hero .btn-ghost {
  min-height: 44px;
  padding: 11px 28px;
  font-size: 0.82rem;
}

.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}

.hero-scroll span {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  transition: color var(--transition-fast);
}

.hero-scroll:hover span,
.hero-scroll:focus-visible span {
  color: var(--gold-light);
}

/* -----------------------------
   Sezioni home generiche
----------------------------- */
#problema,
#servizi,
#metodo {
  padding: var(--section-pad) 0;
}

#problema,
#metodo {
  background: var(--white);
}

#servizi {
  background: var(--off-white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

#problema .section-eyebrow span,
#servizi .section-eyebrow span,
#metodo .section-eyebrow span {
  color: var(--gold-deep);
}

.problema-inner,
.chisono-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.servizi-inner,
.metodo-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* -----------------------------
   Problema
----------------------------- */
.problema-list {
  list-style: none;
  margin-top: 40px;
}

.problema-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}

.problema-num {
  min-width: 30px;
  padding-top: 4px;
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--gold-deep);
  line-height: 1;
}

/* Il caso e il suo esito stanno incolonnati accanto al numero: prima qui
   c'era solo il testo del caso. */
.problema-corpo {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Com'e andata a finire. La freccia dorata stacca l'esito dal problema
   senza bisogno di un'etichetta che ruberebbe una riga. */
.problema-esito {
  position: relative;
  padding-left: 24px;
  font-family: var(--font-ui);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--gold-deep);
}

.problema-esito::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
}

.problema-text,
.chisono-rifiuti-lista li {
  font-family: var(--font-ui);
  font-size: 1.02rem;
  color: var(--text-mid);
  line-height: 1.70;
}

.problema-text strong {
  color: var(--text);
  font-weight: 400;
}

/* La frase sta per lungo sotto le due colonne, centrata e senza riquadro:
   e la chiusura della sezione, non un ritaglio dentro il testo. */
.problema-quote {
  grid-column: 1 / -1;
  text-align: center;
}

/* Le due colonne — a sinistra il titolo, a destra i tre casi — valgono da
   700 pixel in su: ci stanno il computer, l'iPad e il telefono girato di
   lato. Sotto quella misura non c'e larghezza per due colonne e la sezione
   si incolonna (piu sotto, nel blocco dei telefoni).
   Serve la larghezza minima proprio qui: senza, questa riga vincerebbe
   anche sul telefono e i due blocchi resterebbero affiancati e strizzati. */
/* Le due colonne devono poter stringersi quanto serve. Senza questa riga
   la colonna prende la larghezza del contenuto piu largo che ha dentro e
   sfonda lo schermo del telefono: e il bianco che spuntava sul fianco
   destro della pagina. */
.problema-left,
.problema-right {
  min-width: 0;
}

@media (min-width: 701px) {
  /* Un po' piu vicina a quello che c'e sopra, ma non appiccicata. */
  #problema .problema-inner {
    row-gap: 70px;
    /* I tre casi sono molto piu alti del titolo: dando loro qualche pixel in
       piu si accorciano di una riga e il dislivello fra le due colonne cala. */
    grid-template-columns: 0.88fr 1.12fr;
  }
}

/* Fra i 700 e i 960 pixel — iPad in verticale, telefono girato di lato — le
   due colonne restano, ma si avvicinano: con 48 pixel in mezzo il titolo
   andava a capo troppe volte. */
@media (min-width: 701px) and (max-width: 960px) {
  #problema .problema-inner {
    column-gap: 40px;
    row-gap: 48px;
  }
}

/* Il titolo si mette all'altezza di meta elenco invece di restare appeso
   in cima: cosi lo spazio vuoto non si accumula tutto in fondo a sinistra,
   ma diventa aria intorno al testo. */
.problema-left {
  align-self: center;
}

/* Il secondo paragrafo si stacca dal primo: senza questo respiro i due
   sembravano un blocco solo andato a capo. */
.problema-left .section-lead + .section-lead {
  margin-top: 20px;
}

.problema-quote p,
.chisono-quote p {
  max-width: 940px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: 1.68rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.45;
  font-style: italic;
}

/* -----------------------------
   Chi sono
----------------------------- */
#chi-sono {
  padding: var(--section-pad) 0;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.chisono-deco {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(to right, transparent 0%, rgba(201, 169, 110, 0.05) 100%);
}

.chisono-inner {
  align-items: center;
  position: relative;
  z-index: 2;
}

.chisono-bio {
  margin-bottom: 22px;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.8;
}

/* Il percorso di studi sta subito dopo la riga in cui Edoardo dice di aver
   studiato. In fondo alla pagina c'erano solo tre sigle — OCF, EFPA, IVASS —
   che non dicono niente a chi legge: qui sono scritte per esteso. */
.chisono-titoli {
  list-style: none;
  margin-bottom: 22px;
  padding-left: 20px;
  border-left: 1px solid rgba(201, 169, 110, 0.35);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.chisono-titoli li {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* Il nome in oro, senza grassetto: distingue senza gridare. */
.chisono-titoli span {
  color: var(--gold);
}

/* I tre "no" stanno nella meta destra, rimasta vuota da quando e stata
   tolta la foto: e la parte che il lettore ricorda, e merita spazio suo. */
.chisono-rifiuti {
  align-self: center;
  padding-left: 40px;
  border-left: 1px solid rgba(201, 169, 110, 0.35);
}

.chisono-rifiuti-titolo {
  margin-bottom: 24px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.chisono-rifiuti-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.chisono-rifiuti-lista li {
  /* Su fondo blu il grigio dei punti numerati non si legge: stessa idea di
     colore, tono chiaro. */
  color: rgba(255, 255, 255, 0.80);
}

/* I tre dati sono scesi qui dalla prima schermata: sotto i "no" fanno da
   contorno alla persona, invece di contendere lo sguardo alla foto. Piu
   piccoli di prima e in fila stretta: sono una didascalia, non un vanto. */
.chisono-numeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 18px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(201, 169, 110, 0.20);
}

.chisono-numero {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chisono-numero-num {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
}

.chisono-numero-label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.66);
}

/* L'invito adesso arriva dopo i tre dati: basta il respiro, la riga d'oro
   la fanno gia i numeri sopra. */
/* Sotto i tre "no", l'invito a parlarne: e il punto in cui chi legge si
   riconosce nel modo di lavorare, e finora non aveva niente da cliccare
   prima del fondo pagina. Sta nella meta destra, che era piu corta della
   sinistra: la schermata non si allunga di un pixel. */
.chisono-invito {
  margin-top: 28px;
}

.chisono-invito p {
  margin-bottom: 16px;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.6;
}

/* La chiusura sta per lungo sotto le due colonne, centrata e piu grande:
   e la frase che deve restare, non un paragrafo fra gli altri. */
.chisono-quote {
  grid-column: 1 / -1;
  text-align: center;
}

.chisono-quote p {
  color: rgba(255, 255, 255, 0.92);
}

.chisono-bio strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}

.chisono-photo-wrap {
  position: relative;
  min-height: 420px;
}

.chisono-photo-frame {
  position: absolute;
  bottom: -16px;
  left: -16px;
  right: 16px;
  top: 16px;
  border: 1px solid rgba(201, 169, 110, 0.20);
  pointer-events: none;
  z-index: 0;
}

.chisono-photo-frame-inner {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 60%;
  height: 40%;
  border-bottom: 1px solid rgba(201, 169, 110, 0.12);
  border-right: 1px solid rgba(201, 169, 110, 0.12);
  pointer-events: none;
  z-index: 0;
}

.chisono-photo-wrap img {
  width: 100%;
  max-width: 520px;
  min-height: 420px;
  max-height: 560px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 12%;
  position: relative;
  z-index: 1;
  -webkit-mask-image:
    linear-gradient(to top, transparent 0%, black 14%, black 100%),
    linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 5%, black 100%);
  -webkit-mask-composite: destination-in;
  mask-image:
    linear-gradient(to top, transparent 0%, black 14%, black 100%),
    linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 5%, black 100%);
  mask-composite: intersect;
  filter: contrast(1.04) brightness(0.97) saturate(0.92);
  transition: transform 0.55s ease;
}

.chisono-photo-wrap:hover img {
  transform: scale(1.012);
}

/* -----------------------------
   Servizi
----------------------------- */
.servizi-header,
.metodo-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 72px;
}

/* Il paragrafo a destra parte all'altezza della prima riga del titolo,
   non in fondo: lo spazio in alto salta l'occhiello. */
#servizi .servizi-header {
  align-items: start;
  /* I quattro servizi salgono verso il titolo: il blocco sta piu al centro
     della schermata invece di scivolare in basso. */
  margin-bottom: 44px;
}

#servizi .servizi-lead-right {
  padding-top: 82px;
}

.servizi-lead-right {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: var(--text-mid);
  line-height: 1.85;
}

/* I quattro servizi alla persona stanno in fila, senza riquadri ne griglia:
   un filo d'oro sopra ogni titolo al posto dei bordi della tabella. */
.servizi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}

.servizio-card {
  padding-top: 18px;
  border-top: 1px solid rgba(201, 169, 110, 0.55);
}

.servizio-title {
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}

.servizio-desc {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: var(--text-mid);
  line-height: 1.70;
}

/* Il richiamo all'impresa: una riga sola sotto i quattro servizi, senza
   testo di spiegazione. La domanda a sinistra, il collegamento a destra. */
.servizi-impresa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  color: inherit;
}

.servizi-impresa-domanda {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.3;
  transition: color var(--transition-fast);
}

.servizi-impresa-cta {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.servizi-impresa:hover .servizi-impresa-domanda,
.servizi-impresa:focus-visible .servizi-impresa-domanda {
  color: var(--gold-deep);
}

/* -----------------------------
   La regia
   Chi c'e intorno, e da che parte passano le informazioni. Si legge da
   sinistra a destra: Tu, io, e il gruppo dei professionisti che chiamo.
   Le figurine sono disegnate a filo di penna nel blu del sito: bastano a
   dire "una persona", "un atto", "i conti", senza fare le icone da app.
----------------------------- */
#regia {
  padding: var(--section-pad) 0;
  background: var(--white);
}

#regia .section-eyebrow span {
  color: var(--gold-deep);
}

.regia-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Titolo a sinistra e spiegazione a destra, come nelle aree di consulenza:
   il blocco resta basso e la meta destra non resta vuota. */
.regia-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 44px;
}

.regia-lead {
  padding-top: 74px;
}

/* Il flusso occupa tutta la larghezza: i due riquadri a sinistra restano
   stretti, il gruppo dei professionisti si prende lo spazio che avanza. */
.regia-flusso {
  display: grid;
  grid-template-columns: minmax(150px, 212px) auto minmax(150px, 212px) auto minmax(0, 2.2fr);
  align-items: center;
  gap: 14px;
}

.regia-anello {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  border: 1px solid var(--border);
  background: var(--off-white);
}

/* L'anello "Io" e' quello che regge tutto: bordo dorato e fondo pieno. */
.regia-anello--io {
  border-color: rgba(201, 169, 110, 0.6);
  background: rgba(201, 169, 110, 0.13);
}

.regia-anello-icona {
  display: block;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  color: var(--navy);
}

.regia-anello-icona svg {
  width: 100%;
  height: 100%;
  display: block;
}

.regia-anello-ruolo {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.2;
}

.regia-anello-nota {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.96rem;
  color: var(--text-mid);
  line-height: 1.55;
}

/* Le frecce fra un passaggio e l'altro. */
.regia-freccia {
  display: block;
  width: 34px;
  color: var(--gold-deep);
}

.regia-freccia svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Le tre porte a cui busso, una sotto l'altra dentro la parentesi dorata:
   sono un gruppo solo, non tre passaggi in fila. */
.regia-figure {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 30px;
  border-left: 1px solid rgba(201, 169, 110, 0.55);
}

.regia-figura {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.regia-figura-icona {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  color: var(--navy);
}

.regia-figura-icona svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Da dove arriva: la riga che dice se e' un servizio della banca o no. */
.regia-figura-fonte {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.regia-figura-titolo {
  margin-bottom: 6px;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}

.regia-figura p {
  font-family: var(--font-ui);
  font-size: 0.99rem;
  color: var(--text-mid);
  line-height: 1.6;
}

/* -----------------------------
   Ultimi articoli (fondo home)
----------------------------- */
#ultimi-articoli {
  padding: var(--section-pad) 0;
  background: var(--white);
}

#ultimi-articoli .section-eyebrow span {
  color: var(--gold-deep);
}

.articolo-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.articolo-card .servizio-title {
  margin-bottom: 20px;
}

.ultimi-articoli-cta {
  margin-top: 48px;
  text-align: center;
}

/* -----------------------------
   Metodo
----------------------------- */
/* I quattro passaggi stanno in fila, uno accanto all'altro: cosi la sezione
   entra in una schermata sola e la sequenza si legge da sinistra a destra.
   Sotto, la fascia blu dei principi chiude lo schermo. */
.metodo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.metodo-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* I quattro passaggi sono alti uguale e la parola in oro (Comprendere,
   Misurare, Costruire, Seguire) e spinta in fondo: cosi le quattro parole
   restano sulla stessa riga anche se le descrizioni sono lunghe diverse. */
.metodo-step {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 0 0;
  border-top: 1px solid rgba(201, 169, 110, 0.55);
}

.metodo-step > div:last-child {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
}

.metodo-step-left {
  display: block;
  margin-bottom: 8px;
  padding-top: 0;
}

.metodo-step-num {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--gold-deep);
  line-height: 1;
}

/* Il filo verticale fra un passaggio e l'altro non serve piu: adesso la
   sequenza la danno i numeri e la posizione in riga. */
.metodo-step-connector {
  display: none;
}

.metodo-step-title {
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}

.metodo-step-desc {
  font-family: var(--font-ui);
  font-size: 0.98rem;
  font-style: italic;
  color: var(--text-mid);
  line-height: 1.62;
}

.metodo-step-tag {
  display: inline-block;
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* La fascia blu: etichetta a sinistra, i quattro principi al centro su due
   colonne, il pulsante a destra. */
.metodo-promise {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px 32px;
  padding: 26px 36px;
  background: var(--navy);
}

.metodo-promise-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Le due colonne restano larghe uguali (minmax evita che un principio lungo
   si prenda lo spazio dell'altro) e il testo e un filo piu piccolo: cosi
   nessuno dei quattro principi supera le due righe. */
.metodo-promise-points {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 28px;
}

.metodo-promise-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
}

.metodo-promise-points li::before {
  content: "\2014";
  color: var(--gold);
  flex-shrink: 0;
}

/* ========================================================================
   RESPONSIVE HOME
======================================================================= */

/* Sotto i 1200 l'etichetta a sinistra e il pulsante a destra rubano troppo
   spazio ai quattro principi, che finiscono su tre righe: da qui in giu
   vanno sopra e sotto, cosi i principi hanno tutta la larghezza. */
@media (max-width: 1200px) {
  .metodo-promise {
    grid-template-columns: 1fr;
  }
}

/* Su schermo largo il pulsante non si stira per tutta la fascia. */
@media (min-width: 961px) and (max-width: 1200px) {
  .metodo-promise .btn-ghost-gold {
    justify-self: start;
  }
}

/* Il filo verticale corre sul bordo sinistro del testo: sotto i 1200 pixel
   quel bordo cade fuori schermo e la riga resta invisibile comunque. */
@media (max-width: 1200px) {
  .hero-vline {
    display: none;
  }
}

@media (max-width: 960px) {
  .problema-inner,
  .chisono-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Sotto c'e la fascia della foto: il testo le lascia il posto. */
  .hero-container {
    padding: 44px var(--pad-x) calc(min(100vw, 520px, 62svh) + 24px);
  }

  /* Su schermo stretto il testo prende tutta la larghezza: la foto non gli
     sta piu accanto. */
  .hero-text {
    max-width: 100%;
  }

  /* La foto diventa una fascia appoggiata al fondo della schermata, larga
     quanto lo schermo e sfumata in alto: nessun bordo, nessun riquadro. */
  /* Perche il ritratto arrivi al petto e non al mento, la fascia deve
     essere alta quanto e larga: e la proporzione della foto. Larghezza e
     altezza sono percio la stessa misura. Sul telefono coincide con la
     larghezza dello schermo; sul tablet si ferma prima e la fascia si
     centra, altrimenti su un iPad diventerebbe alta 768 pixel. */
  .hero-foto {
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100vw, 520px, 62svh);
    height: min(100vw, 520px, 62svh);
  }

  .hero-foto img {
    object-position: 50% 0%;
    /* Sfumata in alto — appena sopra la testa, non a meta fronte — e sui
       due fianchi, cosi quando la fascia e piu stretta dello schermo non
       resta un bordo netto contro il blu. */
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 24%),
      linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 24%),
      linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .hero-vline {
    display: none;
  }

  .hero-scroll {
    display: none;
  }

  .servizi-header,
  .metodo-header {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }

  /* Su una colonna sola il paragrafo va sotto il titolo: lo stacco che
     serviva ad allinearlo alla prima riga diventa un buco vuoto. */
  #servizi .servizi-header {
    margin-bottom: 40px;
  }

  #servizi .servizi-lead-right {
    padding-top: 0;
  }

  /* L'elenco sta gia sotto al testo per conto suo: qui lo stacco raddoppia. */
  .problema-list {
    margin-top: 0;
  }

  /* Su schermo stretto il rientro dei tre "no" mangia larghezza al testo. */
  .chisono-rifiuti {
    padding-left: 24px;
  }

  .servizi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .regia-header {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Incolonnati, il filo d'oro e la spiegazione sono uno sotto l'altra:
     lo stacco lo fa gia' il salto fra le due, non serve doppio. */
  .regia-header .gold-rule {
    margin-bottom: 0;
  }

  .regia-lead {
    padding-top: 0;
  }

  /* Sotto i 960 il flusso si incolonna e le frecce puntano in giu'. */
  .regia-flusso {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 14px;
  }

  .regia-freccia {
    transform: rotate(90deg);
    justify-self: center;
  }

  .regia-figure {
    padding-left: 0;
    padding-top: 26px;
    border-left: 0;
    border-top: 1px solid rgba(201, 169, 110, 0.55);
    margin-top: 8px;
  }

  /* Sotto i 960 i quattro passaggi tornano incolonnati e la fascia blu
     mette etichetta, principi e pulsante uno sotto l'altro. */
  .metodo-steps {
    grid-template-columns: 1fr 1fr;
  }

  .metodo-promise {
    grid-template-columns: 1fr;
  }

}

/* Sull'iPad in verticale i quattro servizi restano affiancati a due a due:
   incolonnarli tutti e quattro allungava la schermata per niente. Vanno in
   colonna solo sul telefono. */
@media (max-width: 620px) {
  .servizi-grid,
  .regia-figure {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .metodo-promise {
    padding: 40px 32px;
  }

}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(2.2rem, 8vw, 3rem);
  }

  /* Sotto i 16 pixel il telefono ingrandisce da solo e il testo si legge
     male: da qui in giu nessun testo di lettura scende sotto quella misura. */
  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 36px;
  }

  .hero-actions {
    flex-direction: column;
    gap: 10px;
  }

  .problema-quote {
    padding: 22px 0;
  }

  .problema-quote p,
.chisono-quote p {
    font-size: 1.20rem;
  }

  .chisono-bio {
    font-size: 1rem;
  }

  .chisono-photo-wrap img {
    min-height: 0;
    max-height: 340px;
  }

  .chisono-photo-wrap {
    min-height: 0;
  }

  .metodo-steps {
    grid-template-columns: 1fr;
  }

  .metodo-promise-points {
    grid-template-columns: 1fr;
  }

  .metodo-promise {
    padding: 28px 20px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .scroll-line,
  .chisono-photo-wrap img {
    animation: none;
    transition: none;
  }
}

/* "Tutti gli articoli" sta su fondo bianco: l'oro chiaro non si legge,
   serve il tono scuro già usato per le altre scritte sul chiaro. */
#ultimi-articoli .btn-ghost-gold {
  color: var(--gold-deep);
  border-color: rgba(134, 104, 50, 0.45);
}

#ultimi-articoli .btn-ghost-gold:hover {
  border-color: var(--gold-deep);
  background: rgba(134, 104, 50, 0.06);
}


/* ========================================================================
   FOGLI SOVRAPPOSTI
   Ogni schermata resta ferma mentre la successiva le scivola sopra, come i
   fogli di un calendario da scrivania. Lo scorrimento resta quello normale
   del browser: nessuna animazione toglie la rotellina di mano a chi legge.

   Solo da 961px in su e su finestre alte almeno 730px. Sul telefono, sul
   tablet in verticale e sulle finestre basse le sezioni si susseguono come
   una pagina normale: sovrapporle in poco spazio taglierebbe il testo, e
   sotto quell'altezza il Metodo non entra in una schermata.
======================================================================= */

@media (min-width: 961px) and (min-height: 730px) {

  /* Le schermate che restano ferme sotto quella dopo */
  #hero,
  #problema,
  #chi-sono,
  #servizi,
  #regia,
  #metodo {
    position: sticky;
    top: 0;
    box-sizing: border-box;
    min-height: 100svh;
  }

  /* Il contenuto sta in mezzo al foglio: il riempimento fisso non serve piu */
  /* Riempimento uguale sopra e sotto: cosi il contenuto sta in mezzo alla
     schermata intera e non allo spazio sotto la barra. Con lo stacco solo in
     alto sembrava schiacciato in fondo. Gli 8 pixel in piu tengono la prima
     riga staccata dalla barra. */
  #problema,
  #chi-sono,
  #servizi,
  #regia,
  #metodo {
    display: grid;
    align-content: center;
    padding: var(--nav-h) 0 var(--schermata-sotto);
  }

  /* Qualche pixel tolto agli stacchi interni: non si vede, e insieme agli
     altri ritocchi basta a far restare ferme le schermate. */
  #problema .problema-list {
    margin-top: 26px;
  }

  #problema .problema-item {
    padding: 16px 0;
  }

  #servizi .servizi-header,
  #regia .regia-header {
    margin-bottom: 32px;
  }

  /* "Chi sono" e la piu fitta delle quattro: qualche pixel fra un paragrafo
     e l'altro le serve per stare dentro lo schermo anche sui portatili bassi. */
  #chi-sono .chisono-bio {
    margin-bottom: 10px;
  }

  /* Il filo d'oro sotto il titolo prende meno spazio: serve a separare,
     non a fare una pausa. Stretto ancora un po' da quando la bio ha una
     riga in piu. */
  #chi-sono .gold-rule {
    margin: 14px 0;
  }

  /* Il testo prende piu larghezza: meno righe, e lo spazio della schermata
     viene usato tutto invece di restare vuoto a destra. */
  #chi-sono .chisono-inner {
    grid-template-columns: 1.35fr 1fr;
    gap: 64px;
  }

  #chi-sono .chisono-bio:last-of-type {
    margin-bottom: 0;
  }

  #chi-sono .chisono-titoli {
    margin-bottom: 12px;
    gap: 5px;
  }

  /* L'intestazione sta piu vicina ai passaggi: e lo spazio che serve
     alla fascia blu per stare nella stessa schermata. */
  #metodo .metodo-header {
    margin-bottom: 40px;
  }

  /* "Il punto di partenza" e cresciuta: i tre casi veri sono piu lunghi
     delle tre diagnosi che c'erano prima, e sopra c'e un paragrafo in piu.
     Lo spazio si recupera dove non si legge — fra un caso e l'altro, e
     prima della citazione — non accorciando i casi. */
  #problema .problema-list {
    margin-top: 24px;
  }

  #problema .problema-item {
    padding: 15px 0;
  }

  #problema .problema-inner {
    row-gap: 44px;
  }

  /* La prima schermata deve stare tutta dentro un solo schermo, freccia
     "Scorri" compresa: il riempimento generoso qui non ci sta. */
  #hero {
    padding-top: 0;
  }

  /* Il fondo lascia posto alla freccia "Scorri": senza questo spazio i tre
     numeri le finiscono addosso, e "Scorri" sembra l'etichetta di "imprese
     analizzate". La freccia e alta una settantina di pixel piu i 28 dal
     bordo: 120 sono il minimo perche non si tocchino. */
  .hero-container {
    padding: calc(var(--nav-h) + 8px) var(--pad-x) 120px;
    gap: 28px;
  }

  /* Respiro piu stretto fra eyebrow, titolo, sottotitolo e pulsanti:
     serve a far entrare tutta la prima schermata anche sui portatili bassi. */
  #hero .hero-eyebrow {
    margin-bottom: 18px;
  }

  #hero .hero-title {
    margin-bottom: 18px;
  }

  #hero .hero-subtitle {
    margin-bottom: 28px;
  }

  #hero .hero-scroll {
    bottom: 20px;
  }


  /* Il modulo dei contatti ha piu contenuto di una schermata: scorre in modo
     normale, ma deve comunque coprire il foglio sotto. */
  #contatti {
    position: relative;
  }

  /* Sugli schermi bassi — portatili da 13" e iPad in orizzontale — il
     Metodo non entrava nella schermata: la fascia blu con il pulsante
     restava tagliata sotto il bordo. Si toglie fiato in fondo, dove non
     serve a nessuno, e si stringono gli stacchi interni del Metodo. */
  @media (max-height: 840px) {
    #problema,
    #chi-sono,
    #servizi,
    #metodo {
      padding: var(--nav-h) 0 32px;
    }

    #metodo .metodo-header {
      margin-bottom: 26px;
    }

    #metodo .metodo-layout {
      gap: 16px;
    }

    #metodo .metodo-promise {
      padding: 20px 36px;
    }

    /* Sulle finestre piu basse le due citazioni si stringono: restano la
       chiusura delle loro schermate, ma smettono di rubare tre righe. */
    #problema .problema-quote p,
    #chi-sono .chisono-quote p {
      font-size: 1.42rem;
    }

    #problema .problema-inner {
      row-gap: 32px;
    }

    #chi-sono .chisono-inner {
      row-gap: 32px;
    }
  }

  /* Il bordo del foglio che arriva, perche si veda che copre il precedente */
  #problema,
  #chi-sono,
  #servizi,
  #regia,
  #metodo,
  #contatti {
    box-shadow: 0 -22px 44px rgba(11, 22, 40, 0.16);
  }

  /* La valvola di sfogo. Una sezione piu alta dello schermo, se restasse
     ferma, si farebbe coprire il fondo dalla sezione successiva: quel testo
     non lo leggerebbe piu nessuno. Quando succede, "schermate.js" le mette
     questa classe e la sezione torna a scorrere come una qualunque.
     Costa l'effetto su quella sezione, e non costa mai una riga di testo:
     e per questo che i testi si possono allungare senza rompere niente. */
  #problema.sezione-libera,
  #chi-sono.sezione-libera,
  #servizi.sezione-libera,
  #regia.sezione-libera {
    /* "relative" e non "static": la sezione deve restare disegnata SOPRA
       quella ferma che la precede, altrimenti le scivola dietro e sparisce
       dalla vista. E lo stesso motivo per cui la sezione contatti, che non
       e mai stata ferma, e sempre stata "relative". */
    position: relative;
    display: block;
    min-height: 0;
    padding: calc(var(--nav-h) + 40px) 0 72px;
  }
}


/* ==========================================================================
   LE SCHEDE, SUL TELEFONO
   I tre casi e le quattro aree di consulenza sono la parte migliore della
   home. Prima si sfogliavano col pollice, una per volta: chi scorreva in giu
   — cioe quasi tutti — ne leggeva una e si perdeva le altre. Ora stanno
   incolonnate: la pagina si allunga, il contenuto si legge.
   Sul computer questo blocco non esiste: le schede restano affiancate.
========================================================================== */

@media (max-width: 700px) {
  /* Una sotto l'altra, con lo stesso stacco fra tutte. */
  .sfoglia-pista {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 14px;
  }

  /* Rete di sicurezza: qualunque cosa dentro le schede sia piu larga del
     dovuto viene tagliata qui, e non fa scorrere di lato tutta la pagina.
     Si usa "clip" e non "hidden" perche "hidden" spegnerebbe l'effetto
     delle schermate sovrapposte sul computer. */
  .sfoglia {
    overflow-x: clip;
  }

  /* -- i tre casi, da righe di elenco a schede -- */
  .problema-list.sfoglia-pista {
    list-style: none;
    margin-top: 4px;
  }

  .problema-list.sfoglia-pista .problema-item {
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 22px;
    border-bottom: 0;
    border-top: 1px solid var(--gold-deep);
    background: var(--off-white);
  }

  /* -- le quattro aree -- */
  .servizi-grid.sfoglia-pista {
    display: flex;
  }

  .servizi-grid.sfoglia-pista .servizio-card {
    padding: 18px 18px 22px;
    background: var(--white);
    border-top: 1px solid var(--gold-deep);
  }
}