/* ===========================================================
   Pagine interne: Direzione tecnologica, Progettazione e
   realizzazione, Chi siamo. Stesso contenitore e stesso bordo
   sinistro della home (.container, base.css).
   =========================================================== */

section{ text-align:left; }

/* ===== Testata: titolo, sottotitolo, apertura ===== */
.page-header{ padding:var(--space-6) 0 var(--space-5); }
.page-header h1{ margin:0; }
.page-header .lead{
  font-size:var(--text-lg);
  color:var(--color-text-secondary);
  max-width:40rem;
  margin:var(--space-3) 0 0;
}
.page-intro{
  font-size:var(--text-lg);
  line-height:1.55;
  color:var(--color-ink);
  max-width:44rem;
  margin:var(--space-4) 0 0;
}

/* Paragrafo unico nella colonna di destra di .section-layout */
.section-text{ margin:0; max-width:42rem; }

/* Voci delle sezioni "Ambiti di intervento" */
.area-item h3{ font-size:var(--text-lg); }
.area-item p{ margin:0; }

/* ===== Come lavoriamo: sequenza numerata =====
   Senza JavaScript (e su mobile o con movimento ridotto) è un normale
   elenco. Su desktop process.js aggiunge .is-pinned: la sezione resta
   ferma sullo schermo mentre i passaggi si aggiungono uno dopo l'altro;
   restano tutti visibili, quello in corso è evidenziato. */
.process-list{ position:relative; }
.process-steps{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:var(--space-3);
  position:relative;
}
.process-step{
  display:grid;
  grid-template-columns:3rem 1fr;
  column-gap:var(--space-3);
  align-items:start;
}
.process-step h3{ margin:.55rem 0 .35rem; font-size:var(--text-xl); }
.process-step p{ margin:0; max-width:36rem; grid-column:2; }
/* Il numero: cerchio con bordo verde (grafica, 4.18:1 su bianco ≥ 3:1),
   testo del numero in inchiostro */
.process-num{
  grid-row:1 / span 2;
  display:inline-flex; align-items:center; justify-content:center;
  width:3rem; height:3rem;
  border:2px solid var(--color-brand-green);
  border-radius:999px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.2rem;
  color:var(--color-ink);
  background:var(--color-bg);
  transition:background-color .4s ease, color .4s ease;
}
.surface .process-num{ background:var(--color-surface); }

.process.is-pinned{ height:280vh; padding:0; }
.process.is-pinned .process-sticky{
  position:sticky;
  top:var(--header-offset, 0px);
  min-height:calc(100vh - var(--header-offset, 0px));
  display:flex;
  align-items:center;
  padding:var(--space-5) 0;
}
.process.is-pinned .process-sticky > .container{ width:100%; }
.process.is-pinned .process-step{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s ease-out, transform .5s ease-out;
}
.process.is-pinned .process-step.is-shown{ opacity:1; transform:none; }
/* Passaggio in corso: numero pieno (bianco su #007a3f, 5.45:1) */
.process.is-pinned .process-step.is-current .process-num{
  background:var(--color-link-green);
  border-color:var(--color-link-green);
  color:#fff;
}
/* Linea di avanzamento a sinistra dei numeri */
.process-track{ display:none; }
.process.is-pinned .process-track{
  display:block;
  position:absolute;
  left:calc(1.5rem - 1px); top:1.5rem; bottom:1.5rem;
  width:2px;
  background:var(--color-line);
}
.process.is-pinned .process-track::after{
  content:"";
  position:absolute; inset:0;
  background:var(--color-brand-green);
  transform-origin:top center;
  transform:scaleY(var(--process-progress, 0));
  transition:transform .3s linear;
}
.process.is-pinned .process-step{ position:relative; z-index:1; }

/* ===== Loghi delle tecnologie ===== */
.logo-grid{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4) var(--space-5);
}
.logo-item{ display:flex; flex-direction:column; align-items:center; gap:.6rem; width:6rem; }
.logo-item img{ width:64px; height:64px; }
.logo-item span{ font-weight:600; font-size:1rem; text-align:center; }
/* Tecnologia senza logo: il nome in Exo 2 nello stesso riquadro 64x64 */
.logo-item .logo-wordmark{
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:-.01em;
  line-height:1;
  color:var(--color-ink);
}

/* ===== Chi siamo: il titolare =====
   Rilievo dato dalla tipografia e da un filetto verde, non da un riquadro. */
.owner-band{ padding:var(--space-5) 0; }
.owner-statement{
  margin:0;
  max-width:46rem;
  padding-left:var(--space-3);
  border-left:4px solid var(--color-brand-green);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:var(--text-xl);
  line-height:1.35;
  color:var(--color-ink);
}

/* ===== Chi siamo: la storia =====
   La linea verde cresce con lo scorrimento e non si ritrae (timeline.js
   imposta --tl-progress). Senza JavaScript, su mobile o con movimento
   ridotto è disegnata per intero. */
.timeline-wrap{ position:relative; max-width:46rem; }
.timeline{
  list-style:none;
  margin:0; padding:0 0 0 2.5rem;
}
.timeline-wrap::before,
.timeline-progress{
  content:"";
  position:absolute;
  left:.55rem; top:.6rem; bottom:.6rem;
  width:2px;
}
.timeline-wrap::before{ background:var(--color-line); }
.timeline-progress{
  background:var(--color-brand-green);
  transform-origin:top center;
  transform:scaleY(var(--tl-progress, 1));
}
.timeline-item{ position:relative; padding-bottom:var(--space-4); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:"";
  position:absolute;
  left:-2.5rem; top:.35rem;
  width:1.1rem; height:1.1rem;
  margin-left:.05rem;
  border:2px solid var(--color-brand-green);
  border-radius:999px;
  background:var(--color-brand-green);
  transition:background-color .3s ease;
}
.timeline-wrap.is-drawing .timeline-item::before{ background:var(--color-bg); }
.surface .timeline-wrap.is-drawing .timeline-item::before{ background:var(--color-surface); }
.timeline-wrap.is-drawing .timeline-item.is-reached::before{ background:var(--color-brand-green); }
.timeline-year{
  display:block;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:var(--text-lg);
  color:var(--color-ink);
  margin-bottom:.3rem;
}
.timeline-item p{ margin:0; }

@media(max-width:800px){
  .page-header{ padding:var(--space-5) 0 var(--space-4); }
  .logo-grid{ gap:var(--space-3); }
}