/* home.css — override 'versione light' della homepage, condiviso IT + EN.
   Estratto dal blocco <style> inline (era duplicato in index.html ed en/index.html).
   Caricato DOPO style.css per vincere nella cascata. */
    body { overflow-x: visible; }   /* non rompere position:sticky su iOS */
    /* hero bianco puro */
    .hero { background:#ffffff; color:var(--black); }
    /* hero NON a tutto schermo: la pagina continua, il marquee sotto fa capolino */
    .hero { min-height: auto; position: relative; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
    .scroll-cue { display: none; }
    .wrap { padding-inline: clamp(2rem, 4vw, 2.25rem); }   /* gutter come la hero, su tutta la pagina */
    .block-alt { background:#ffffff; }   /* via il grigio #f5f5f7 dopo la hero */
    /* foto verticali (servizi + ultimi lavori): stesso stile, più piccole da mobile */
    .svc-img-v, #lavori .lavori-mockup { max-width: min(360px, 74vw); }
    .svc-img-v, #lavori .lavori-mockup img { border-radius: 16px; }
    /* prova: immagine sopra, testo (titolo + paragrafo + bottone) sotto — servizi + ultimi lavori */
    .svc-section .wrap, #lavori .wrap { display: flex; flex-direction: column; align-items: center; }
    .svc-section .svc-img, #lavori .lavori-mockup { order: -1; margin: 0 auto 1.75rem; }
    /* form email rapido nella hero */
    /* form email nella hero — stile contatti (.field + .field-check) */
    .hero-quick { max-width:460px; margin:1.75rem auto 0; display:grid; gap:.85rem; text-align:left; }
    .hero-quick .field input { width:100%; }
    .hero-quick .btn { justify-self:center; margin-top:.25rem; }
    .hero-quick-msg { margin:.35rem 0 0; min-height:1.1em; font-size:.9rem; color:var(--gray-600); text-align:center; }
    .hero-quick-msg.ok { color:#1a7f3c; }
    .hero::before { background:none; }
    .hero .eyebrow { color:var(--gray-500); }
    .hero .h-display { color:var(--black); }
    .hero .lede { color:var(--gray-600); }
    .hero .lede strong, .hero .lede-strong { color:var(--black); }
    .hero .hl, .hero .h-display em { background:var(--black); color:var(--white); }
    .hero .u { text-decoration-color:rgba(10,10,10,.4); }
    .hero .btn-primary { background:var(--black); color:var(--white); }
    .hero .btn-primary:hover { background:transparent; color:var(--black); border-color:var(--black); }
    .hero-photo img { border:1px solid rgba(10,10,10,.10); background:var(--gray-100); }
    /* header bianco + brand centrato */
    .topbar { background:#ffffff; color:var(--black); border-bottom:1px solid rgba(10,10,10,.07); }
    .brand { color:var(--black); position:absolute; left:50%; transform:translateX(-50%); }
    .nav-toggle span { background:var(--black); }
    .nav-toggle { margin-left:auto; }
    .topbar-inner { position:relative; }
    .topbar .btn-primary { background:var(--black); color:var(--white); }
    .topbar .btn-primary:hover { background:transparent; color:var(--black); border-color:var(--black); }
    .nav-menu { background:#ffffff; border-top:1px solid rgba(10,10,10,.10); box-shadow:0 18px 40px rgba(0,0,0,.10); }
    .nav-menu a { color:rgba(10,10,10,.78); border-bottom:1px solid rgba(10,10,10,.08); }
    .nav-menu a:hover { color:var(--black); }
    .nav-menu .nav-cta { background:var(--black); color:var(--white); }
    .nav-menu .nav-cta:hover { background:transparent; color:var(--black); box-shadow:inset 0 0 0 1.5px var(--black); }

    /* ===== DARK ZONE: recensioni + about nella stessa sezione, scuriscono insieme scrollando ===== */
    .dark-zone { background:#ffffff; padding-top: var(--section-py); }   /* il bg bianco->nero lo guida il JS */
    .dark-zone .reviews-wrap { opacity: calc(1 - var(--p, 0)); will-change: opacity; }   /* le recensioni sfumano via mentre annerisce */
    .about2-lead { height: 12vh; }
    .about2-intro { max-width:920px; margin-inline:auto; padding: clamp(1rem,3vw,2rem) clamp(2rem, 4vw, 2.25rem) clamp(3rem,7vw,5rem); }
    .about2-intro p { margin:0; }
    .about2-intro p:first-child { color:#f4f4f4; font-weight:400; font-size:clamp(1.75rem, 4.2vw, 2.7rem); line-height:1.4; letter-spacing:-0.02em; text-align:center; }
    .about2-intro .about2-contact { margin-top:clamp(2.5rem, 6vw, 3.75rem); text-align:center; }
    .about2-contact .btn { background:#ffffff; color:#0a0a0a; }
    .about2-contact .btn:hover { background:transparent; color:#ffffff; border-color:#ffffff; }

    /* ===== Come (non) lavoro — dentro la dark-zone (nero): immagini bianche che staccano ===== */
    .cnl-wrap { padding-block: clamp(2.5rem,7vw,5rem); }
    .cnl-wrap .h-section { color:#ffffff; }
    .cnl-grid { display:grid; grid-template-columns:1fr; gap:clamp(3.5rem,10vw,4rem); max-width:1000px; margin-inline:auto; }
    .cnl-item { text-align:center; }
    .cnl-item img { width:100%; max-width:300px; aspect-ratio:1/1; object-fit:cover; display:block; margin:0 auto 1.1rem; border-radius:16px; }
    .cnl-item h3 { font-size:1.3rem; font-weight:700; letter-spacing:-.01em; margin:0 0 .9rem; color:#ffffff; }
    .cnl-item p { font-size:1rem; line-height:1.55; color:rgba(255,255,255,.7); margin:0 auto; max-width:28rem; }
    .cnl-down { display:block; margin-top:.7rem; font-size:1.7rem; line-height:1; opacity:.6; }
    @media (min-width:760px){ .cnl-grid { grid-template-columns:repeat(3,1fr); gap:2rem; align-items:start; } }

    /* ===== PRICING: niente morph, sezione chiara normale; team in fondo ===== */
    /* ===== Header che diventa scuro nella dark-zone ===== */
    .topbar { transition: background-color .3s ease, border-color .3s ease; }
    .topbar.is-dark { background:#0a0a0a; border-bottom-color:rgba(255,255,255,.1); }
    .topbar.is-dark .brand { color:#ffffff; }
    .topbar.is-dark .nav-toggle span { background:#ffffff; }
    .topbar.is-dark .btn-primary { background:#ffffff; color:#0a0a0a; }
    .topbar.is-dark .nav-menu { background:#0a0a0a; border-top-color:rgba(255,255,255,.12); box-shadow:0 18px 40px rgba(0,0,0,.5); }
    .topbar.is-dark .nav-menu a { color:rgba(255,255,255,.82); border-bottom-color:rgba(255,255,255,.1); }
    .topbar.is-dark .nav-menu a:hover { color:#ffffff; }
    .topbar.is-dark .nav-menu .nav-cta { background:#ffffff; color:#0a0a0a; }
    .topbar.is-dark .nav-menu .nav-cta:hover { background:transparent; color:#ffffff; box-shadow:inset 0 0 0 1.5px #ffffff; }

    /* ===== Sezioni scure dopo "Come (non) lavoro": progetto, pricing, CTA ===== */
    .dark-rest { background:#0a0a0a; color:#ffffff; }
    .dark-rest .block, .dark-rest .block-alt, .dark-rest .cta-final-light { background:transparent; }
    .dark-rest .h-section { color:#ffffff; }
    .dark-rest .block-sub { color:rgba(255,255,255,.7); }
    .dark-rest .price-card { background:#161616; border-color:rgba(255,255,255,.12); }
    .dark-rest .price-title { color:#ffffff; }
    .dark-rest .price-card > p { color:rgba(255,255,255,.72); }
    .dark-rest .price-tag .from { color:rgba(255,255,255,.55); }
    .dark-rest .price-tag .type { color:#ffffff; }
    .dark-rest .btn-primary { background:#ffffff; color:#0a0a0a; }
    .dark-rest .btn-primary:hover { background:transparent; color:#ffffff; border-color:#ffffff; }
    .dark-rest .block { margin-top:0; }   /* niente striscia bianca tra le sezioni scure */
    /* progetto: 3 foto team su una riga */
    .progetto-team { display:flex; justify-content:center; gap:clamp(.75rem,3vw,1.5rem); margin:clamp(1.75rem,5vw,2.75rem) auto 0; }
    .progetto-team img { width:clamp(82px,24vw,118px); height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.18); }
    /* CTA finale: immagine "Jazz do it" (sezione light) */
    .jazz-fig { margin:clamp(1.5rem,4vw,2.5rem) auto 0; max-width:460px; text-align:center; }
    .jazz-fig img { width:100%; height:auto; border-radius:16px; display:block; }
    .jazz-cap { margin:.85rem 0 0; font-weight:700; font-size:1.2rem; letter-spacing:-.01em; color:var(--black); }
    .jazz-sub { text-align:center; margin:1rem auto 0; }
    /* Quote prima del footer */
    .quote-sec { text-align:center; }
    .adv-quote { margin:0 auto; max-width:760px; }
    .adv-quote p { font-size:clamp(1.4rem,3.5vw,2.1rem); font-weight:300; line-height:1.38; letter-spacing:-.01em; color:var(--black); margin:0 0 1.4rem; }
    .adv-quote-by { display:flex; flex-direction:column; gap:.15rem; }
    .adv-quote-by strong { font-weight:700; font-size:1rem; color:var(--black); }
    .adv-quote-by span { font-size:.85rem; color:var(--gray-500); }