/* ==========================================================
   SERVICE PAGES — shared styles
   Used by services/cvrpii/, maintenance/, consumables/,
   validation/, spare-parts/
========================================================== */

/* PAGE HERO — compact, Apple-like: content visible in first viewport */
.phero{padding:112px 0 42px;background:radial-gradient(110% 120% at 88% 10%,#EAF3FD 0%,#F6FAFE 46%,#FFFFFF 80%);position:relative;overflow:hidden}
.phero h1{font-weight:600;font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:1.04;letter-spacing:-0.036em;margin-top:18px;max-width:16ch}
.phero h1 .g{display:inline-block;padding-bottom:0.30em;margin-bottom:-0.30em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.phero p.sub{font-size:clamp(0.98rem,1.3vw,1.12rem);color:var(--muted);max-width:52ch;margin-top:16px;line-height:1.6}
.phero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

/* two-column hero: copy left, signature visual right (visible immediately) */
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(30px,4.5vw,70px);align-items:center}
.hero-visual .flow-stage{margin-top:0;aspect-ratio:16/10}
.hero-visual .visual-panel{aspect-ratio:5/4;background:linear-gradient(160deg,#0A1B30,#123057);border-radius:22px;position:relative;overflow:hidden;border:1px solid var(--line)}
.hero-visual .visual-panel canvas{position:absolute;inset:0;width:100%;height:100%}

/* SECTION scaffolding */
.sec{padding:var(--sp) 0}
.phero+.sec{padding-top:var(--sp)}
.sec.alt{padding:var(--ritmo) 0;margin:var(--sp) 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec .head{max-width:60ch}
.sec h2{font-weight:600;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;letter-spacing:-0.03em;margin-top:16px}
.sec p.sub{color:var(--muted);font-size:1.06rem;margin-top:18px;max-width:58ch}

/* OVERVIEW (2col: body + at-a-glance) */
.ov{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:start;margin-top:44px}
.ov .lead-body{font-size:1.12rem;color:var(--ink-2);line-height:1.65}
.ov .side{border-left:2px solid var(--blue);padding-left:22px}
.ov .side .lab{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-2)}
.ov .side p{color:var(--muted);font-size:0.98rem;margin-top:6px;margin-bottom:22px}

/* SPEC TABLE */
/* Titolo sopra una tabella di specifica, quando in una pagina ce n'e'
   piu' d'una e vanno distinte. */
.spec-title{margin:52px 0 0;font-size:1.25rem;letter-spacing:-0.02em;color:var(--ink)}
.spec-title+.spec-table{margin-top:18px}
.spec-table{margin-top:var(--hg);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--white)}
.spec-row{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;padding:20px 26px;border-bottom:1px solid var(--line);transition:background .3s;opacity:0;transform:translateY(16px)}
.spec-row.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease),background .3s}
.spec-row:last-child{border-bottom:none}
.spec-row:hover{background:var(--paper)}
.spec-row .k{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted);letter-spacing:0.03em}
.spec-row .v{font-size:1.02rem;color:var(--ink);font-weight:500}
.spec-row .v .hl{color:var(--blue)}

/* COMPAT CHIPS */
.chips{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.chip{border:1px solid var(--line);border-radius:100px;padding:12px 22px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink-2);background:var(--white);transition:all .3s;cursor:default}
.chip:hover{border-color:var(--blue);color:var(--blue)}

/* FEATURE GRID (icons that light up on reveal) */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:56px;background:var(--line-2);border:1px solid var(--line-2);border-radius:18px;overflow:hidden}
.fcard{background:var(--white);padding:36px 30px 40px;position:relative;transition:background .4s var(--ease);opacity:0;transform:translateY(20px)}
.fcard.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease),background .4s var(--ease)}
.fcard:hover{background:var(--paper);transform:translateY(-2px)}
.fcard.in{transition:opacity .8s var(--ease),transform .5s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.fcard .num{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--blue);letter-spacing:0.1em}
.fcard svg{width:34px;height:34px;color:var(--ink);margin-top:20px;transition:color .4s,transform .5s var(--ease)}
.fcard:hover svg{color:var(--blue);transform:translateY(-3px)}
.fcard h3{font-weight:600;font-size:1.18rem;letter-spacing:-0.01em;margin-top:20px}
.fcard p{color:var(--muted);font-size:0.95rem;margin-top:10px}

/* CTA */
.cta-section{max-width:var(--maxw);margin:0 auto;padding:var(--sp) clamp(34px,5vw,80px) var(--ritmo)}
.ctaband{background:linear-gradient(135deg,#0A1B30,#123963);border-radius:26px;padding:64px 60px;display:flex;justify-content:space-between;align-items:center;gap:40px;position:relative;overflow:hidden;color:#fff}
.ctaband::after{content:"";position:absolute;right:-90px;top:-70px;width:380px;height:380px;background:radial-gradient(circle,rgba(56,169,234,0.22),transparent 66%)}
.ctaband h3,.ctaband h2{font-weight:600;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-0.02em;max-width:22ch;position:relative;z-index:2}
.ctaband p{color:rgba(255,255,255,0.7);margin-top:12px;max-width:44ch;position:relative;z-index:2}
.ctaband .btn-primary{background:#fff;color:var(--ink);position:relative;z-index:2}
.ctaband .btn-primary:hover{background:var(--cyan);color:var(--ink)}

/* ===== CVRPII flow diagram ===== */
.flow-stage{margin-top:56px;background:linear-gradient(160deg,#0A1B30,#123057);border-radius:22px;overflow:hidden;position:relative;aspect-ratio:16/9;border:1px solid var(--line)}
.flow-stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* ===== VALIDATION timeline ===== */
.timeline{margin-top:var(--hg);display:grid;grid-template-columns:1fr;gap:0;position:relative}
.tstep{display:grid;grid-template-columns:120px 1fr;gap:40px;padding:38px 0;border-bottom:1px solid var(--line);position:relative;opacity:0;transform:translateY(16px)}
.tstep.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.tstep:first-child{padding-top:0}
.tstep:last-child{border-bottom:none;padding-bottom:0}
.tstep .code{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--blue);letter-spacing:0.1em;position:relative}
.tstep .code::before{content:"";position:absolute;left:-1px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(20,102,214,0.15);margin-left:-5px;transform:scale(0);transition:transform .5s var(--ease) .2s}
.tstep.in .code::before{transform:scale(1)}
.tstep .code{padding-left:26px}
.tstep h3{font-weight:600;font-size:1.35rem;letter-spacing:-0.01em}
.tstep p{color:var(--muted);font-size:1rem;margin-top:8px;max-width:56ch}
.tstep .tags{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.tstep .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;color:var(--muted);background:var(--paper);border:1px solid var(--line);padding:5px 11px;border-radius:100px}

/* ===== CONSUMABLES cards ===== */
.ccards{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:var(--hg)}
.ccard{background:var(--white);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease);display:flex;flex-direction:column}
.ccard:hover{transform:translateY(-4px);box-shadow:0 24px 60px -30px rgba(10,27,48,0.28)}
.ccard .visual{aspect-ratio:16/10;background:linear-gradient(180deg,#F7FAFD,#EFF5FB);position:relative;overflow:hidden}
.ccard canvas{position:absolute;inset:0;width:100%;height:100%}
.ccard .pad{padding:30px 32px 34px}
.ccard .badge{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);background:var(--paper-2);padding:5px 11px;border-radius:100px;display:inline-block}
.ccard h3{font-weight:600;font-size:1.5rem;letter-spacing:-0.02em;margin-top:14px}
.ccard p{color:var(--muted);font-size:0.98rem;margin-top:10px}
.ccard ul{list-style:none;margin-top:18px;display:grid;gap:9px}
/* non flex: un apice (<sup>) dentro la voce diventerebbe un elemento a parte
   e si staccherebbe dal testo */
.ccard li{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink-2);position:relative;padding-left:23px}
.ccard li::before{content:"—";color:var(--blue);position:absolute;left:0;top:0}

/* ===== SPARE PARTS catalog ===== */
.filter-row{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.filter-btn{border:1px solid var(--line);background:var(--white);padding:9px 18px;border-radius:100px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink-2);cursor:pointer;transition:all .3s}
.filter-btn:hover{border-color:var(--blue);color:var(--blue)}
.filter-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- tabella ricambi: colonne fisse, ordinabile, filtrabile ---- */
.ptable{width:100%;margin-top:28px;border:1px solid var(--line);border-radius:16px;
  background:var(--white);border-collapse:separate;border-spacing:0;overflow:hidden;
  table-layout:fixed}
/* larghezze dichiarate una volta: filtrando cambia il numero di righe, non
   il contenuto piu' largo, quindi le colonne devono restare ferme */
.ptable col.k-pn{width:28%}
.ptable col.k-name{width:24%}
.ptable col.k-grp{width:16%}
.ptable col.k-plat{width:32%}
.ptable-2 col.k-pn{width:30%}
.ptable-2 col.k-name{width:70%}
.ptable thead{background:var(--paper)}
.ptable th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--muted-2);padding:14px 20px;border-bottom:1px solid var(--line);
  cursor:pointer;user-select:none;white-space:nowrap}
.ptable th:hover{color:var(--blue)}
.ptable th[data-sort]::after{content:'';display:inline-block;margin-left:6px;width:7px;height:7px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:0.25}
.ptable th.asc::after{transform:rotate(-135deg) translateY(2px);opacity:0.85}
.ptable th.desc::after{transform:rotate(45deg) translateY(-2px);opacity:0.85}
.ptable td{padding:14px 20px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-2);
  overflow-wrap:break-word}
.ptable tbody tr:last-child td{border-bottom:none}
.ptable tbody tr:hover{background:var(--paper)}
.ptable tr.hidden{display:none}
.ptable .c-pn{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--blue);
  letter-spacing:0.04em;overflow-wrap:break-word}
.ptable .c-plat .none{color:var(--muted-2);font-style:italic}
.ptable-note{margin-top:20px;font-size:14.5px;color:var(--muted)}
.ptable-note a{color:var(--blue);border-bottom:1px solid rgba(20,102,214,0.28);
  padding-bottom:1px;transition:border-color .25s}
.ptable-note a:hover{border-color:var(--blue)}
@media(max-width:760px){
  .ptable,.ptable thead{display:block}
  .ptable thead{position:absolute;left:-9999px}
  .ptable colgroup{display:none}
  .ptable tbody,.ptable tr{display:block}
  .ptable tr{border-bottom:1px solid var(--line);padding:14px 0}
  .ptable tr:last-child{border-bottom:none}
  .ptable td{display:flex;justify-content:space-between;gap:16px;border-bottom:none;padding:6px 4px;
    text-align:right}
  .ptable td::before{content:attr(data-label);font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--muted-2);text-align:left}
}
.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.part{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px 24px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .4s;opacity:0;transform:translateY(16px)}
.part.in{opacity:1;transform:none}
.part:hover{transform:translateY(-3px);box-shadow:0 16px 40px -20px rgba(10,27,48,0.24),0 3px 10px -6px rgba(10,27,48,0.08)}
.part.hidden{display:none}
.part .pn{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--blue);letter-spacing:0.06em}
.part h4{font-weight:600;font-size:1.05rem;margin-top:10px;letter-spacing:-0.01em}
.part .plat{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted-2);letter-spacing:0.08em;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* ===== MAINTENANCE service scope ===== */
.scope{display:grid;grid-template-columns:1.1fr 0.9fr;gap:50px;align-items:center;margin-top:50px}
.scope.solo{grid-template-columns:1fr;max-width:860px}
.scope .items{display:grid;gap:2px;background:var(--line-2);border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.scope .item{background:var(--white);padding:22px 26px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;opacity:0;transform:translateX(-14px)}
.scope .item.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.scope .item .n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--blue);width:24px}
.scope .item h4{font-weight:600;font-size:1.05rem}
.scope .item .badge{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted-2);letter-spacing:0.1em;text-transform:uppercase}
.scope .visual-panel{aspect-ratio:1/1;background:linear-gradient(160deg,#0A1B30,#123057);border-radius:22px;position:relative;overflow:hidden;border:1px solid var(--line)}
.scope .visual-panel canvas{position:absolute;inset:0;width:100%;height:100%}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .phero{padding:112px 0 44px}
  .ov,.scope{grid-template-columns:1fr}
  .fgrid,.catalog{grid-template-columns:1fr 1fr}
  .ccards{grid-template-columns:1fr}
  .ctaband{flex-direction:column;align-items:flex-start;padding:44px 34px}
  .tstep{grid-template-columns:1fr;gap:12px}
}
@media(max-width:560px){
  .fgrid,.catalog{grid-template-columns:1fr}
  .spec-row{grid-template-columns:1fr;gap:6px}
}

/* ==========================================================
   FULL-BLEED HERO FIELD
   The flow animation runs edge-to-edge behind the copy instead
   of sitting in a boxed panel beside it.
========================================================== */
.phero.has-field{padding:140px 0 42px;display:flex;align-items:center}
.phero.has-field .wrap{position:relative;z-index:2;width:100%}
.phero.has-field .hero-copy{max-width:56ch}
.hero-field{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
/* keep the copy readable over the field */
.phero.has-field .hero-copy h1,
.phero.has-field .hero-copy p.sub{position:relative}

@media(max-width:900px){
  .phero.has-field{padding:118px 0 42px;min-height:0}
  .phero.has-field .hero-copy{max-width:none}
  /* sotto i 900 px il testo occupa tutta la larghezza e lo schema animato
     gli finirebbe dietro: si nasconde, come gli ingranaggi di Maintenance */
  .phero.has-field .hero-field{display:none}
  }

/* ==========================================================
   CVRPII — content layout
   Lede, then one block per unit: label on the left, prose on
   the right. The opening line of a block states the condition
   being addressed and is set apart.
========================================================== */
.lede{max-width:62ch}
.lede p{font-size:clamp(1.12rem,1.7vw,1.38rem);line-height:1.55;color:var(--ink-2);
  letter-spacing:-0.011em}
.lede p+p{margin-top:18px;font-size:clamp(1rem,1.35vw,1.1rem);color:var(--muted);
  letter-spacing:0}

.unit{display:grid;grid-template-columns:230px 1fr;gap:clamp(24px,5vw,80px);
  padding:44px 0;border-top:1px solid var(--line)}
.unit:first-of-type{border-top:none;padding-top:0}
.unit-key{padding-top:4px}
.unit-key .eyebrow{display:block}
.unit-body{max-width:64ch}
.unit-body p{font-size:1.03rem;line-height:1.68;color:var(--muted)}
.unit-body p+p{margin-top:15px}
/* the condition being addressed reads a step above the rest */
.unit-body p.prob{color:var(--ink-2);font-size:1.1rem;line-height:1.6;
  padding-left:18px;border-left:2px solid var(--line-2)}

.cfg{max-width:64ch}
.cfg h2{font-weight:600;font-size:clamp(1.5rem,2.7vw,2.1rem);line-height:1.16;
  letter-spacing:-0.028em;margin-top:14px;max-width:20ch}
.cfg p{color:var(--muted);font-size:1.03rem;line-height:1.68;margin-top:16px}

.spec-note{margin-top:20px;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:0.04em;color:var(--muted-2)}

@media(max-width:820px){
  .unit{grid-template-columns:1fr;gap:14px;padding:34px 0}
  .unit-key{padding-top:0}
}

/* the last unit closes the block: its own padding is enough, the section
   below does not need to add a second gap on top of it */
.unit:last-of-type{padding-bottom:0}


/* ---- Configuration: testo a sinistra, schema che ruota a destra ---- */
.cfg-grid{display:grid;grid-template-columns:0.78fr 1.22fr;gap:clamp(28px,5vw,72px);
  align-items:center}
.cfg-anim{position:relative}
.cfg-anim svg{width:100%;height:auto;display:block}

@media(max-width:900px){
  .cfg-grid{grid-template-columns:1fr;gap:30px}
  .cfg-anim{max-width:560px}
}

/* rimando alla pagina di dettaglio dentro un blocco */
.unit-link{display:inline-block;margin-top:14px;text-decoration:none;color:var(--blue);
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.04em}
.unit-link .arr{display:inline-block;transition:transform .35s var(--ease)}
.unit-link:hover .arr{transform:translateX(4px)}


@media(max-width:560px){.cta-section{padding-left:22px;padding-right:22px}}
/* CVRP II: su telefono il testo occupa tutta la larghezza e il disegno
   del flusso gli passa sotto; resta come sfondo appena accennato */
@media(max-width:720px){#flowCanvas{opacity:.2}}

/* ==========================================================
   PROJECT MANAGEMENT & VALIDATION: fasi del progetto
   A sinistra numero, titolo e frase della fase; a destra le
   attivita', ognuna con titolo, testo breve e, dove serve, l'elenco
   delle voci come etichette (non come elenco puntato).
========================================================== */
.pj{list-style:none;margin:var(--hg) 0 0;padding:0;counter-reset:none}
.pj-ph{display:grid;grid-template-columns:minmax(220px,0.8fr) 1.6fr;gap:clamp(24px,4vw,64px);padding:48px 0;border-top:1px solid var(--line)}
.pj-ph:last-child{border-bottom:1px solid var(--line)}
.pj-h{position:sticky;top:96px;align-self:start}
.pj-n{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.14em;color:var(--blue)}
.pj-h h3{font-weight:600;font-size:clamp(1.35rem,2.2vw,1.75rem);letter-spacing:-0.022em;line-height:1.15;margin-top:12px;color:var(--ink)}
.pj-h p{color:var(--muted);font-size:0.98rem;line-height:1.6;margin-top:12px;max-width:34ch}
.pj-b{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pj-i{border:1px solid var(--line);border-radius:16px;background:#fff;padding:24px 24px 26px}
.pj-i:only-child,.pj-b .pj-i:last-child:nth-child(odd){grid-column:1/-1}
.pj-i h4,.pj-i h3{font-weight:600;font-size:1.06rem;letter-spacing:-0.01em;color:var(--ink)}
.pj-i p{color:var(--muted);font-size:0.95rem;line-height:1.6;margin-top:8px}
.pj-i h4+.pj-t,.pj-i h3+.pj-t{margin-top:14px}
.pj-i p a{color:var(--blue);text-decoration:none}
.pj-i p a:hover{text-decoration:underline}
.pj-t{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pj-t li{font-size:0.86rem;line-height:1.3;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 13px}
.pj-i:not(:has(h4)) .pj-t{margin-top:0}
@media(max-width:900px){
  .pj-ph{grid-template-columns:1fr;gap:20px;padding:36px 0}
  .pj-h{position:static}
  .pj-b{grid-template-columns:1fr}
  .pj-b .pj-i:last-child:nth-child(odd){grid-column:auto}
}

/* Assistenza dopo l'avviamento: blocco a parte, testo a sinistra e
   attivita' a destra */
.pj-af{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:start}
.pj-af .pj-i{margin-top:6px}
.pj-note{font-size:0.92rem;color:var(--muted);margin-top:16px!important;padding-top:14px;border-top:1px solid var(--line)}
.pj-after+.cta-section{padding-top:var(--sp)}
@media(max-width:900px){.pj-af{grid-template-columns:1fr}}