/* ============================================================================
   custom2026.css  —  Paolo Beraldo
   ----------------------------------------------------------------------------
   Questo file è TUO: modificalo quanto vuoi.
   Viene caricato DOPO gli stili incorporati in index.html, quindi qualsiasi
   regola qui sovrascrive quella di base (a parità di specificità vince l'ultima).

   Come si usa:
   - Togli il commento (elimina la barra e l'asterisco) dalle righe che ti
     interessano dentro :root per cambiare colori, font o lunghezze di scroll.
   - Più in basso trovi esempi pronti per ritocchi comuni: scommentali per
     attivarli.
   - Non serve toccare index.html: basta tenere questo file nella stessa
     cartella. Se lo lasci così com'è, il sito resta identico al default.
   ========================================================================== */


/* ----------------------------------------------------------------------------
   1) PALETTE & VARIABILI GLOBALI
   Questi sono i valori di default del tema chiaro. Scommenta e cambia i valori
   che vuoi. Il resto del sito si aggiorna da solo.
   -------------------------------------------------------------------------- */
:root{
  /* --- Colori --- */
  /* --paper:    #f4f5f7;  */  /* sfondo principale                    */
  /* --paper-2:  #eaecf1;  */  /* sfondo sezioni alternate (servizi/footer) */
  /* --surface:  #ffffff;  */  /* superfici in rilievo (schede, card contatti) */
  /* --head:     #14161e;  */  /* titoli / testo quasi nero            */
  /* --text:     #333846;  */  /* testo dei paragrafi                  */
  /* --dim:      #6a7180;  */  /* testo secondario / attenuato         */
  /* --dim-2:    #9298a6;  */  /* etichette molto tenui                */
  /* --line:     #e0e3ea;  */  /* linee sottili / bordi                */
  /* --line-2:   #d3d7e0;  */  /* bordi un filo più marcati            */
  /* --gold:     #9c6712;  */  /* accento oro (link, dettagli)         */
  /* --gold-soft:#b9821f;  */  /* accento oro più chiaro               */
  /* --teal:     #0e727f;  */  /* accento turchese                     */
  /* --teal-soft:#1f909d;  */  /* accento turchese più chiaro          */
  /* --video-bg: #05070f;  */  /* sfondo dietro al video (resta scuro) */

  /* --- Tipografia (i font sono caricati da Google Fonts in index.html) --- */
  /* --display: "Space Grotesk", system-ui, sans-serif;  */  /* titoli   */
  /* --body:    "Inter Tight", system-ui, sans-serif;    */  /* testo    */
  /* --mono:    "JetBrains Mono", ui-monospace, monospace; */ /* etichette/numeri */

  /* --- Lunghezze legate allo scroll --- */
  /* --stage-h: 560vh;  */  /* durata dello scrub del video: più alto = video più "lento" da scorrere */
  /* --gal-h:   420vh;  */  /* scorrimento della galleria "Anima nerd" */
}


/* ----------------------------------------------------------------------------
   2) ESEMPI PRONTI ALL'USO
   Scommenta un intero blocco per attivarlo.
   -------------------------------------------------------------------------- */

/* --- Sfondo bianco puro invece della carta fredda --------------------------
:root{
  --paper:   #ffffff;
  --paper-2: #f4f5f7;
}
*/

/* --- Rendere i pannelli progetto neutri (senza velatura di colore) ----------
   Sovrascrive lo sfondo generato via JS con un grigio chiaro uniforme.
.gal--full .card__art{
  background: linear-gradient(150deg,#f0f1f4,#f7f8fa 72%) !important;
}
*/

/* --- Cambiare l'accento (es. dal turchese a un blu) -------------------------
:root{
  --teal:      #1b5fb0;
  --teal-soft: #2f7bd0;
}
*/

/* --- Logo nell'hero più piccolo o più grande -------------------------------
.hero__logo{ width: min(440px, 60vw); }
*/

/* --- Logo nell'header più grande -------------------------------------------
.nav__logo{ height: 28px; }
*/

/* --- Header sempre visibile (anche durante il video) -----------------------
   Nota: sovrascrive il comportamento "compare a fine video".
.nav{ opacity:1 !important; transform:none !important; pointer-events:auto !important; }
*/

/* --- Header più compatto / più arioso --------------------------------------
.nav{ padding-top:10px; padding-bottom:10px; }
*/

/* --- Togliere del tutto la grana filmica -----------------------------------
.grain{ display:none; }
*/

/* --- Aumentare lo spazio verticale delle sezioni ---------------------------
.manifest, .services, .contact{ padding-top:200px; padding-bottom:200px; }
*/

/* --- Titoli in maiuscolo ----------------------------------------------------
.manifest h2, .services__head h2, .contact h2{ text-transform:uppercase; letter-spacing:-.01em; }
*/

/* --- Bordi delle schede più netti ------------------------------------------
.svc-grid, .contact__grid{ background:#c7ccd6; border-color:#c7ccd6; }
*/


/* ----------------------------------------------------------------------------
   3) SPAZIO PER LE TUE REGOLE
   Scrivi qui sotto qualsiasi altra personalizzazione.
   -------------------------------------------------------------------------- */

/* .esempio{ } */

section.manifest .wrap {
    grid-template-columns: 1fr;
}
section.manifest .wrap .gutter {
    display: none;
}
.eyebrow .idx {
    display: none;
}
.svc-grid {
    grid-template-columns: repeat(auto-fit,minmax(33%,1fr));
}
.method__head {
    max-width: 84ch;
}
.steps {
    max-width: 60vw;
    margin: 0 auto;
}
.method__close {
    max-width: 60vw;
    margin-left: auto;
    margin-right: auto;
}