/* ============================================================
   LONGEVITY MED SYSTEM — design system
   Ordine: token · base · utilità · testata · componenti ·
           template · piè di pagina · adattamento
   ============================================================ */

/* ---------- TOKEN ---------- */
:root{
  --deep:       #0E2129;   /* petrolio profondo — fondi scuri */
  --brand:      #2F6B5E;   /* verde clinico — colore identitario */
  --brand-dark: #235045;   /* per testo piccolo su chiaro */
  --brand-pale: #9DBFB4;   /* per fondi scuri */
  --paper:      #F1F3F2;   /* fondo pagina */
  --white:      #FFFFFF;
  --ink:        #16242A;   /* testo */
  --muted:      #5F7078;   /* testo secondario */
  --line:       #D5DCDA;   /* hairline */
  --line-deep:  rgba(255,255,255,.18);

  --f-display: "Newsreader", Georgia, "Times New Roman", serif;
  --f-body:    "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1180px;
  --maxw-text: 760px;
  --gut: 26px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-weight:300; font-size:16.5px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:300; margin:0; letter-spacing:-.01em; line-height:1.16; text-wrap:balance}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
::selection{background:var(--brand); color:#fff}

/* salto al contenuto, per tastiera e lettori di schermo */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200; background:var(--brand); color:#fff;
  padding:12px 20px; font-family:var(--f-mono); font-size:12px;
}
.skip:focus{left:0}

/* ---------- UTILITÀ ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.wrap-text{max-width:var(--maxw-text); margin:0 auto; padding:0 var(--gut)}
section{padding:104px 0; position:relative}
.sec-tight{padding:72px 0}

.tag{
  font-family:var(--f-mono); font-size:11px; font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand-dark); display:block; margin-bottom:18px;
}
.on-deep .tag{color:var(--brand-pale)}

.lead{font-size:17.5px; color:var(--muted); max-width:68ch; text-wrap:pretty}
.on-deep{background:var(--deep); color:#DCE5E4}
.on-deep h1,.on-deep h2,.on-deep h3{color:#fff}
.on-deep p{color:#A9BABC}
.on-paper2{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* comparsa allo scroll */
/* il contenuto si nasconde solo se il JS è disponibile per rivelarlo:
   senza, resta visibile e si perde soltanto l'animazione */
.js .rv{opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .rv.in{opacity:1; transform:none}
.js .rv[data-d="1"]{transition-delay:.08s}
.js .rv[data-d="2"]{transition-delay:.16s}
.js .rv[data-d="3"]{transition-delay:.24s}

/* ---------- FIRMA: scala di misura a tacche ---------- */
.scale{position:relative}
.scale .ticks{display:flex; align-items:flex-end; height:24px; border-bottom:1px solid var(--line)}
.scale .ticks i{flex:1; display:block; border-left:1px solid var(--line); height:7px}
.scale .ticks i:nth-child(5n+1){height:16px; border-left-color:var(--muted)}
.scale .marks{display:flex; justify-content:space-between; margin-top:10px}
.scale .marks span{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; color:var(--muted)}
.scale .marks span.hi{color:var(--brand-dark)}
.on-deep .scale .ticks{border-bottom-color:var(--line-deep)}
.on-deep .scale .ticks i{border-left-color:var(--line-deep)}
.on-deep .scale .ticks i:nth-child(5n+1){border-left-color:rgba(255,255,255,.48)}
.on-deep .scale .marks span{color:rgba(255,255,255,.6)}
.on-deep .scale .marks span.hi{color:var(--brand-pale)}

/* ---------- TRATTAMENTO IMMAGINI ----------
   Due varianti. Sul <body> si mette .img-duo (predefinita) oppure .img-bn.
   Si cambia da functions.php senza toccare i file delle foto.        */
.ph{position:relative; overflow:hidden; background:var(--line)}
.ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.ph:hover img{transform:scale(1.03)}

/* bianco e nero puro */
.img-bn .ph img{filter:grayscale(100%) contrast(1.06) brightness(1.02)}

/* duotone: grigio + velo petrolio. Legge come b/n ma resta in famiglia */
.img-duo .ph img{filter:grayscale(100%) contrast(1.05) brightness(1.03)}
.img-duo .ph::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--deep); mix-blend-mode:color; opacity:.24;
}
/* su fondo scuro il velo va più leggero, altrimenti la foto sparisce */
.img-duo .on-deep .ph::after{opacity:.16}

.ph-4x5{aspect-ratio:4/5}
.ph-3x2{aspect-ratio:3/2}
.ph-16x9{aspect-ratio:16/9}

/* ---------- PULSANTI ---------- */
.btn{
  display:inline-block; padding:16px 32px; text-decoration:none; font-family:var(--f-mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; transition:.28s; border:0; cursor:pointer;
}
.btn-p{background:var(--brand); color:#fff}
.btn-p:hover{background:var(--deep)}
.btn-s{border:1px solid var(--line); color:var(--ink); background:transparent}
.btn-s:hover{border-color:var(--brand); color:var(--brand-dark)}
.on-deep .btn-p{background:#fff; color:var(--brand-dark)}
.on-deep .btn-p:hover{background:var(--brand-pale)}
.on-deep .btn-s{border-color:rgba(255,255,255,.45); color:#fff}
.on-deep .btn-s:hover{background:rgba(255,255,255,.12); border-color:#fff}
.btns{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- TESTATA ---------- */
.site-head{
  position:sticky; top:0; z-index:50; background:rgba(14,33,41,.95);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid rgba(255,255,255,.1);
}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:70px; gap:22px}
.logo{
  display:block; line-height:0; text-decoration:none;
  width:210px; flex:0 0 auto;
}
.logo img{width:100%; height:auto; display:block}
.logo-foot{width:190px; margin-bottom:18px}

/* sotto una certa larghezza il tracciato non è più leggibile:
   si passa alla versione con le tacche spesse, senza ECG */
@media (max-width:600px){
  .logo{width:158px}
}
.nav ul{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav a{font-size:13.5px; color:rgba(255,255,255,.82); text-decoration:none; transition:color .25s}
.nav a:hover,.nav .current-menu-item > a{color:#fff}
.head-cta{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.35); color:#fff; text-decoration:none; padding:10px 17px; transition:.25s;
}
.head-cta:hover{background:var(--brand); border-color:var(--brand)}
.burger{display:none; background:none; border:0; color:#fff; padding:8px; cursor:pointer}
.burger span{display:block; width:22px; height:1px; background:#fff; margin:5px 0; transition:.3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- APERTURA DI PAGINA ---------- */
.phero{background:var(--deep); color:#DCE5E4; padding:96px 0 82px}
.phero h1{font-size:clamp(34px,4.6vw,58px); color:#fff; max-width:18ch; font-weight:200}
.phero .sub{color:#A9BABC; max-width:52ch; margin-top:22px; font-size:17px}

/* apertura della home */
.hero{background:var(--deep); color:#DCE5E4; padding:116px 0 92px; overflow:hidden}
.hero .grid{display:grid; grid-template-columns:1.28fr .72fr; gap:68px; align-items:end}
.hero h1{font-size:clamp(38px,5.4vw,72px); line-height:1.06; color:#fff; font-weight:200; max-width:14ch}
.hero h1 em{font-style:italic; font-weight:300; color:var(--brand-pale)}
.hero .sub{max-width:46ch; color:#B3C2C4; font-size:17px; margin-top:24px}
.hero .panel{border-left:1px solid var(--line-deep); padding-left:30px}
.hero .panel .k{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-pale)}
.hero .panel .v{font-family:var(--f-display); font-size:26px; font-weight:200; color:#fff; margin:8px 0 28px; line-height:1.28}

/* ---------- GRIGLIE ---------- */
.g2{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}
.g2-c{align-items:center}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.g-split{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start}

/* i blocchi in colonna sono distanziati fra loro, ma il primo di ogni
   colonna parte da zero: così le due colonne cominciano alla stessa altezza
   anche quando una ha un elemento in meno */
.blocco{margin-top:44px}
.g-split > div > .blocco:first-child,
.g2 > div > .blocco:first-child{margin-top:0}

/* ---------- SCHEDE ---------- */
.card{
  background:var(--white); border:1px solid var(--line); padding:32px 28px;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .45s var(--ease), box-shadow .45s, border-color .45s;
}
a.card:hover{transform:translateY(-6px); box-shadow:0 24px 48px -34px rgba(14,33,41,.5); border-color:var(--brand)}
.card h3{font-size:24px; margin:12px 0 10px}
.card p{color:var(--muted); font-size:15px; margin:0}
.card .n{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; color:var(--brand-dark)}
.card .scale{margin-top:24px}
.card-sub{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin:-4px 0 12px; line-height:1.65;
}
.card .more{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-dark); margin-top:auto; padding-top:24px;
}

/* elenco a due colonne, per indicazioni e controindicazioni */
.klist{list-style:none; margin:0; padding:0}
.klist li{
  padding:13px 0 13px 22px; border-top:1px solid var(--line); position:relative;
  color:var(--muted); font-size:15.5px;
}
.klist li::before{content:""; position:absolute; left:0; top:22px; width:11px; height:1px; background:var(--brand)}
.klist.neg li::before{background:var(--muted)}
.klist li:last-child{border-bottom:1px solid var(--line)}

/* riquadro dati, coppie chiave-valore */
.dl{margin:0; display:grid; grid-template-columns:130px 1fr; gap:14px 22px; font-size:15px}
.dl dt{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-dark); padding-top:4px}
.dl dd{margin:0}
.on-deep .dl dt{color:var(--brand-pale)}
.on-deep .dl dd{color:#E6ECEA}
.box{border:1px solid var(--line); background:var(--white); padding:30px 28px}
.on-deep .box{border-color:var(--line-deep); background:transparent}

/* ---------- PERCORSO CON BARRA DI AVANZAMENTO ----------
   --p va da 0 a 1 e viene aggiornata dal JS in base allo scroll.
   Senza JS resta a 1: la barra è piena e non manca nulla.        */
.timeline{--p:1; margin-top:64px}

.tl-track{position:relative; height:56px; margin-bottom:10px}

.tl-ticks{display:flex; align-items:flex-end; height:20px; position:absolute; left:0; right:0; top:16px}
.tl-ticks i{flex:1; display:block; border-left:1px solid var(--line); height:6px}
.tl-ticks i:nth-child(8n+1){height:14px; border-left-color:var(--muted)}

.tl-line{position:absolute; left:0; right:0; top:36px; height:2px; background:var(--line)}
.tl-fill{
  position:absolute; left:0; top:0; height:2px; width:100%; background:var(--brand);
  transform:scaleX(var(--p)); transform-origin:left center;
  transition:transform .2s linear;
}

.tl-nodes{position:absolute; left:0; right:0; top:36px; height:0}
.tl-node{
  position:absolute; top:-5px; width:12px; height:12px; margin-left:-6px;
  border-radius:50%; background:var(--white); border:2px solid var(--line);
  transition:border-color .45s, background .45s, transform .45s var(--ease);
}
.tl-node.on{border-color:var(--brand); background:var(--brand); transform:scale(1.35)}

.tl-steps{
  --p:inherit;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  list-style:none; margin:0; padding:0;
}
.tl-step{
  padding:26px 34px 0 0; position:relative;
  opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.tl-step.on{opacity:1; transform:none}
/* senza JS restano visibili: l'animazione è un di più, non un requisito */
html:not(.js) .tl-step{opacity:1; transform:none}
.tl-step + .tl-step{padding-left:34px; border-left:1px solid var(--line)}
.tl-step .n{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-dark)}
.tl-step h3{font-size:25px; margin:12px 0 10px; color:var(--ink)}
.tl-step p{color:var(--muted); font-size:15px; margin:0}

/* ---------- ETICHETTE DEI PUNTI DI PARTENZA ---------- */
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
/* cinque etichette distribuite su tutta la larghezza, testo centrato:
   riempiono la riga invece di ammassarsi a sinistra */
.pill-row + p, .pill-intro{max-width:none}
.pill-5{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.pill-5 .pill{text-align:center}

/* il messaggio di sezione vuota occupa tutta la griglia, non una colonna */
.g3 > .vuoto, .med-grid > .vuoto{grid-column:1 / -1; max-width:52ch}
.pill{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  border:1px solid var(--line); background:var(--white); color:var(--brand-dark);
  padding:12px 20px; text-decoration:none; transition:.28s;
}
.pill:hover{border-color:var(--brand); background:var(--brand); color:#fff}

/* ---------- FASCIA DI FOTOGRAFIE ---------- */
.strip{display:grid; gap:14px}
.strip-2{grid-template-columns:1fr 1fr}
.strip-3{grid-template-columns:1fr 1fr 1fr}
.strip-4{grid-template-columns:1.4fr 1fr 1fr 1.4fr}
.strip .ph{aspect-ratio:4/3}
/* con due sole immagini vale la pena darle più respiro */
.strip-2 .ph{aspect-ratio:3/2}
/* la prima e l'ultima più larghe: evita la griglia piatta di quattro quadrati uguali */
.strip-4 .ph:first-child, .strip-4 .ph:last-child{aspect-ratio:3/2}

/* scheda con miniatura, usata nell'indice delle procedure */
.card-foto{padding:0; overflow:hidden}
.card-foto .ph{aspect-ratio:3/2; margin:-1px -1px 0}
.card-foto h3{margin:26px 28px 10px}
.card-foto p{margin:0 28px}
.card-foto .more{margin:24px 28px 28px 28px; padding-top:0}

/* ---------- MEDICI ---------- */
.med-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.med{text-decoration:none; color:inherit; display:block}
.med .ph{margin-bottom:18px}
.med h3{font-size:21px; margin-bottom:6px}
.med .role{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--brand-dark); line-height:1.6}
.med p{color:var(--muted); font-size:14.5px; margin-top:12px}

/* le righe si allineano fra le schede: il nome e la qualifica occupano
   sempre lo stesso spazio, così il testo sotto parte alla stessa altezza */
.med h3{min-height:1.3em}
.med .role{min-height:3.2em; display:block}

/* ---------- ARTICOLI ---------- */
.post-list{display:grid; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.post-item{background:var(--paper); padding:34px 0; text-decoration:none; color:inherit; display:block; transition:background .3s}
.post-item:hover{background:var(--white)}
.post-item .meta{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.post-item h2{font-size:28px; margin:12px 0 10px; max-width:26ch}
.post-item p{color:var(--muted); font-size:15.5px; max-width:62ch; margin:0}

.prose{font-size:17px; line-height:1.78}

/* primo paragrafo: fa da apertura, non è un paragrafo qualsiasi */
.prose > p:first-of-type{font-size:19.5px; line-height:1.62; color:var(--ink)}

/* i titoli portano un trattino di accento a sinistra: è la scala,
   ridotta al minimo, che ricompare anche nel testo lungo */
.prose h2{
  font-size:31px; margin:2.4em 0 .7em; padding-top:1.4em; position:relative;
  border-top:1px solid var(--line);
}
.prose h2::before{
  content:""; position:absolute; top:-1px; left:0; width:38px; height:2px; background:var(--brand);
}
.prose h2:first-child{margin-top:0; padding-top:0; border-top:0}
.prose h2:first-child::before{display:none}
.prose h3{font-size:21px; margin:2em 0 .4em; color:var(--brand-dark)}

.prose p{color:var(--muted)}
.prose ul,.prose ol{padding:0; margin:1.4em 0; list-style:none}
.prose ol{counter-reset:lms-n}
.prose li{
  padding:12px 0 12px 26px; border-top:1px solid var(--line);
  position:relative; color:var(--muted); margin:0;
}
.prose li:last-child{border-bottom:1px solid var(--line)}
.prose ul li::before{content:""; position:absolute; left:0; top:22px; width:12px; height:1px; background:var(--brand)}
.prose ol li::before{
  counter-increment:lms-n; content:counter(lms-n,decimal-leading-zero);
  position:absolute; left:0; top:12px; font-family:var(--f-mono); font-size:11px; color:var(--brand-dark);
}
.prose li strong{color:var(--ink)}

.prose a{color:var(--brand-dark); text-decoration:underline; text-underline-offset:3px}
.prose blockquote{
  margin:2.4em 0; padding:26px 30px; background:var(--white); border-left:2px solid var(--brand);
  font-family:var(--f-display); font-size:21px; font-style:italic; color:var(--ink);
}
.prose blockquote p{color:inherit; margin:0}
.prose img{margin:2.4em 0}
.prose hr{border:0; border-top:1px solid var(--line); margin:3em 0}

/* ---------- classi da usare nei contenuti dall'editor ---------- */

/* riquadro in evidenza, per limiti e avvertenze cliniche */
.prose .rilievo{
  background:var(--white); border:1px solid var(--line); border-left:2px solid var(--brand);
  padding:28px 30px; margin:2.2em 0;
}
.prose .rilievo > *:first-child{margin-top:0}
.prose .rilievo > *:last-child{margin-bottom:0}
.prose .rilievo li:last-child{border-bottom:0; padding-bottom:0}

/* sequenza di passaggi con durata: il ritmo del percorso, non un elenco */
.prose .tappe{margin:2em 0}
.prose .tappe .tappa{
  display:grid; grid-template-columns:180px 1fr; gap:26px;
  padding:24px 0; border-top:1px solid var(--line); align-items:baseline;
}
.prose .tappe .tappa:last-child{border-bottom:1px solid var(--line)}
.prose .tappe .q{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand-dark); line-height:1.6;
}
.prose .tappe .d{color:var(--muted); font-size:16px}
.prose .tappe .d strong{color:var(--ink); font-weight:500}

@media (max-width:700px){
  .prose > p:first-of-type{font-size:18px}
  .prose h2{font-size:26px}
  .prose .tappe .tappa{grid-template-columns:1fr; gap:6px}
  .prose .rilievo{padding:22px 20px}
}

.byline{border-top:1px solid var(--line); margin-top:56px; padding-top:28px; display:flex; gap:22px; align-items:flex-start}
.byline .ph{width:74px; flex:0 0 74px; aspect-ratio:1; border-radius:50%}
.byline .who{font-family:var(--f-display); font-size:19px}
.byline .role{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--brand-dark); margin-top:4px}
.byline p{font-size:14.5px; color:var(--muted); margin:10px 0 0; max-width:60ch}

.disclaimer{
  margin-top:46px; padding:24px 26px; background:var(--white); border:1px solid var(--line);
  font-size:14px; color:var(--muted);
}

/* ---------- MODULO CONTATTI ---------- */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start}
.contact-list{list-style:none; margin:0; padding:0}
.contact-list li{padding:16px 0; border-bottom:1px solid var(--line)}
.contact-list .k{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-dark); display:block; margin-bottom:4px}
.contact-list a{text-decoration:none; font-size:18px}
.contact-list a:hover{color:var(--brand-dark)}

/* ---------- CHIAMATA ALL'AZIONE ---------- */
.cta{background:var(--brand); color:#fff; text-align:center}
.cta h2{color:#fff; font-size:clamp(28px,4vw,50px); max-width:17ch; margin:0 auto; font-weight:200}
.cta h2 em{font-style:italic}
.cta p{color:rgba(255,255,255,.85); max-width:50ch; margin:24px auto 34px}
.cta .btns{justify-content:center}
.cta .btn-p{background:#fff; color:var(--brand-dark)}
.cta .btn-p:hover{background:var(--deep); color:#fff}
.cta .btn-s{border-color:rgba(255,255,255,.5); color:#fff}
.cta .btn-s:hover{background:rgba(255,255,255,.14); border-color:#fff}

/* ---------- PIÈ DI PAGINA ---------- */
.site-foot{background:var(--deep); color:#93A6A8; padding:74px 0 32px; font-size:14px}
.site-foot .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px}
.site-foot .logo{display:inline-block; margin-bottom:16px}
.site-foot h4{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-pale); margin:0 0 15px; font-weight:400}
.site-foot ul{list-style:none; padding:0; margin:0}
.site-foot li{margin-bottom:9px}
.site-foot a{text-decoration:none; transition:color .25s}
.site-foot a:hover{color:#fff}
.legal{
  margin-top:52px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--f-mono); font-size:11px; line-height:1.95; color:#7E9294;
}

/* ---------- BARRA FISSA SU MOBILE ---------- */
.mbar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; background:var(--brand)}
.mbar a{
  flex:1; text-align:center; padding:15px 0; color:#fff; text-decoration:none;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
}
.mbar a+a{border-left:1px solid rgba(255,255,255,.25)}

/* ---------- PAGINAZIONE ---------- */
.pager{margin-top:52px; display:flex; gap:8px; font-family:var(--f-mono); font-size:12px}
.pager .page-numbers{padding:10px 15px; border:1px solid var(--line); text-decoration:none; background:var(--white)}
.pager .current{background:var(--brand); color:#fff; border-color:var(--brand)}

/* ---------- ADATTAMENTO ---------- */
@media (max-width:1040px){
  .med-grid{grid-template-columns:repeat(2,1fr)}
  .site-foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  section{padding:70px 0}
  .hero{padding:76px 0 60px}
  .phero{padding:64px 0 54px}
  .nav{
    display:none; position:absolute; top:70px; left:0; right:0; background:var(--deep);
    border-bottom:1px solid rgba(255,255,255,.12); padding:16px var(--gut) 24px;
  }
  .nav.open{display:block}
  .nav ul{flex-direction:column; gap:0}
  .nav li{border-top:1px solid rgba(255,255,255,.09)}
  .nav a{display:block; padding:14px 0; font-size:15px}
  .burger{display:block}
  .head-cta{display:none}
  .hero .grid,.g2,.g3,.g-split,.contact-grid{grid-template-columns:1fr; gap:40px}
  .g3{gap:16px}
  .med-grid{grid-template-columns:1fr; gap:32px}
  .med h3, .med .role{min-height:0}
  .pill-5{grid-template-columns:1fr 1fr}
  .strip-3, .strip-4{grid-template-columns:1fr 1fr}
  .strip-4 .ph:first-child, .strip-4 .ph:last-child{aspect-ratio:4/3}

  /* su mobile il percorso diventa verticale: la barra corre a sinistra
     e i tre momenti si susseguono dall'alto verso il basso */
  .tl-track{display:none}
  .tl-steps{grid-template-columns:1fr; padding-left:26px; position:relative}
  .tl-steps::before{
    content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--line);
  }
  .tl-steps::after{
    content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px;
    background:var(--brand); transform:scaleY(var(--p, 1)); transform-origin:top center;
    transition:transform .2s linear;
  }
  .tl-step{padding:0 0 34px}
  .tl-step + .tl-step{padding-left:0; border-left:0}
  .tl-step:last-child{padding-bottom:0}
  .tl-step::before{
    content:""; position:absolute; left:-30.5px; top:6px; width:9px; height:9px;
    border-radius:50%; background:var(--white); border:1px solid var(--brand);
  }
  .hero .panel{border-left:0; border-top:1px solid var(--line-deep); padding:26px 0 0}
  .site-foot .cols{grid-template-columns:1fr; gap:34px}
  .dl{grid-template-columns:1fr; gap:4px 0}
  .dl dd{margin-bottom:14px}
  .mbar{display:flex}
  body{padding-bottom:52px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .js .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}
@media print{
  .site-head,.mbar,.cta,.site-foot .cols{display:none}
  body{background:#fff; color:#000}
}