/* ==========================================================================
   NNZN — pagine servizi (hub + singoli servizi), IT/EN
   Base: le classi .vaz-* nascono in video-aziendali.html; qui sono condivise.
   Motion: sipario letterbox in apertura, reveal a scorrimento nativo
   (animation-timeline), View Transitions tra pagine. Niente hover-lift/zoom,
   niente smooth-scroll. Tutto spento con prefers-reduced-motion.
   ========================================================================== */


.vaz-hero{position:relative;overflow:hidden;padding:clamp(7rem,14vw,11rem) 0 clamp(2.5rem,5vw,4rem);
  background:radial-gradient(62% 62% at 82% 6%,rgba(255,255,255,.5) 0%,transparent 60%),linear-gradient(158deg,#eceae7 0%,#e1ded8 54%,#d4d1cb 100%);color:#1a1714}
[data-theme="dark"] .vaz-hero{background:radial-gradient(55% 60% at 82% 12%,rgba(234,230,224,.07) 0%,transparent 58%),linear-gradient(158deg,#27272b 0%,#1a1a1d 52%,#101012 100%);color:#f4f2ee}
.vaz-kicker{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#8a5a16;display:flex;align-items:center;gap:.55rem;margin-bottom:1.1rem}
[data-theme="dark"] .vaz-kicker,.vaz-sec .vaz-kicker{color:var(--amber)}
.vaz-kicker::before{content:'';width:8px;height:8px;background:currentColor;transform:rotate(45deg);flex:0 0 auto}
.vaz-hero h1{font-size:clamp(2.5rem,6.6vw,5.4rem);font-weight:850;line-height:.95;letter-spacing:-.045em;max-width:17ch;view-transition-name:svc-title}
.vaz-blunt{margin-top:1.2rem;font-size:1.1rem;font-weight:800;letter-spacing:-.01em;max-width:56ch;color:#1a1714}
[data-theme="dark"] .vaz-blunt{color:#f4f2ee}
.vaz-hero .lead{margin-top:.9rem;max-width:60ch;font-size:1.02rem;line-height:1.7;color:#47423b}
[data-theme="dark"] .vaz-hero .lead{color:rgba(236,234,230,.8)}
.vaz-cta-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
.vaz-cta{display:inline-flex;align-items:center;gap:.6rem;background:var(--amber);color:#17120a;font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:1rem 1.6rem;border-radius:8px;transition:filter .2s}
.vaz-cta:hover{filter:brightness(1.08)}
.vaz-cta.ghost{background:transparent;border:1px solid var(--line-strong);color:inherit}
.vaz-sec{padding:clamp(2.8rem,5.5vw,5rem) 0;background:var(--bg)}
.vaz-sec.alt{background:var(--bg-alt)}
.vaz-sec h2{font-size:clamp(1.9rem,4.5vw,3.2rem);font-weight:850;letter-spacing:-.04em;line-height:.98;margin-bottom:.6rem;color:var(--text);max-width:22ch}
.vaz-sub{color:var(--text-2);max-width:62ch;line-height:1.65;margin-bottom:2rem}
.vaz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.vaz-card{border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.6rem;background:var(--panel)}
.vaz-card h3{font-size:1.08rem;font-weight:850;letter-spacing:-.02em;margin-bottom:.5rem;color:var(--text)}
.vaz-card p{font-size:.92rem;line-height:1.6;color:var(--text-2)}
.vaz-steps{display:grid;gap:.7rem;max-width:820px;counter-reset:step}
.vaz-step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.3rem;background:var(--panel)}
.vaz-step .n{font-family:var(--mono);font-size:.9rem;font-weight:900;color:var(--amber);min-width:2ch}
.vaz-step h3{font-size:1rem;font-weight:850;margin-bottom:.25rem;color:var(--text)}
.vaz-step p{font-size:.9rem;color:var(--text-2);line-height:1.55}
.vaz-split{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:820px){.vaz-split{grid-template-columns:1fr}}

/* ---- Riga "scheda tecnica" sotto l'hero (mono, crocini) ---- */
.svc-spec{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:2.4rem;padding-top:1rem;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.72}
.svc-spec span::before{content:'+ ';opacity:.6}

/* ---- Prove: casi reali, anteprime sempre 16/9 ---- */
.svc-proofs{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.1rem}
.svc-proof{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);color:inherit;text-decoration:none}
.svc-proof-media{position:relative;aspect-ratio:16/9;background:#0c0b0a;overflow:hidden}
.svc-proof-media img{width:100%;height:100%;object-fit:cover;display:block}
.svc-proof-media::after{content:'';position:absolute;inset:0;border-top:7px solid #0c0b0a;border-bottom:7px solid #0c0b0a;pointer-events:none}
.svc-slate{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem 1.2rem;background:linear-gradient(135deg,#2a1d12,#0c0b0a);color:#e9e3d6}
.svc-slate b{font-size:1.25rem;font-weight:850;letter-spacing:-.03em}
.svc-slate i{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:.4rem}
.svc-proof-meta{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.25rem 1.3rem}
.svc-proof-type{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.svc-proof-meta strong{font-size:1.05rem;font-weight:850;letter-spacing:-.02em;color:var(--text)}
.svc-proof-meta span:last-child{font-size:.9rem;line-height:1.55;color:var(--text-2)}
.svc-proof:hover strong{color:var(--amber)}
.svc-proof:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---- Ha senso / Non ha senso ---- */
.svc-fit{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:820px){.svc-fit{grid-template-columns:1fr}}
.svc-fit > div{border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.6rem;background:var(--panel)}
.svc-fit h3{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.9rem;color:var(--amber)}
.svc-fit .no h3{color:var(--muted)}
.svc-fit ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.svc-fit li{position:relative;padding-left:1.3rem;font-size:.94rem;line-height:1.55;color:var(--text-2)}
.svc-fit li::before{content:'';position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--amber);transform:rotate(45deg)}
.svc-fit .no li::before{background:transparent;border:1px solid var(--muted)}
.svc-fit a{color:var(--amber)}

/* ---- Indice servizi (hub): programma di sala, non card grid ---- */
.svc-index{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.svc-index li{border-bottom:1px solid var(--line)}
.svc-index a{display:grid;grid-template-columns:3.2rem 1fr auto;gap:1rem;align-items:baseline;padding:1.4rem 0;color:inherit;text-decoration:none}
.svc-index .n{font-family:var(--mono);font-size:.8rem;font-weight:800;color:var(--muted)}
.svc-index h3{font-size:clamp(1.3rem,3vw,2rem);font-weight:850;letter-spacing:-.035em;line-height:1.05;color:var(--text)}
.svc-index p{margin-top:.35rem;font-size:.93rem;line-height:1.55;color:var(--text-2);max-width:62ch}
.svc-index .arr{font-size:1.2rem;color:var(--muted);transition:transform .25s ease,color .25s ease}
.svc-index a:hover .n,.svc-index a:hover .arr,.svc-index a:hover h3{color:var(--amber)}
.svc-index a:hover .arr{transform:translateX(4px)}
@media(max-width:600px){.svc-index a{grid-template-columns:2.2rem 1fr}.svc-index .arr{display:none}}

/* ---- Altri servizi (link interni) ---- */
.svc-related{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.svc-related a{border:1px solid var(--line-strong);border-radius:999px;padding:.55rem 1rem;font-size:.84rem;font-weight:700;color:var(--text);text-decoration:none}
.svc-related a:hover{border-color:var(--amber);color:var(--amber)}

/* ---- Motion ---- */
@media (prefers-reduced-motion:no-preference){
  /* sipario letterbox: due bande nere che si ritirano all'apertura */
  .vaz-hero::before,.vaz-hero::after{content:'';position:absolute;left:0;right:0;height:18vh;background:#0c0b0a;z-index:3;pointer-events:none;animation:svcCurtain 1.1s cubic-bezier(.7,0,.2,1) .15s both}
  .vaz-hero::before{top:0;transform-origin:top}
  .vaz-hero::after{bottom:0;transform-origin:bottom}
  @keyframes svcCurtain{from{transform:scaleY(1)}to{transform:scaleY(0)}}
  .vaz-hero .container > *{animation:svcRise .9s cubic-bezier(.16,1,.3,1) both}
  .vaz-hero .container > :nth-child(2){animation-delay:.08s}
  .vaz-hero .container > :nth-child(3){animation-delay:.16s}
  .vaz-hero .container > :nth-child(n+4){animation-delay:.24s}
  @keyframes svcRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @supports (animation-timeline:view()){
    .svc-rv{animation:svcRise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .svc-proof-media img,.svc-proof-media .svc-slate{animation:svcWipe linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
    @keyframes svcWipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
  }
}