html{scroll-padding-top:84px}
  .top .wrap{max-width:1320px}
  .top nav{display:flex;gap:22px}
  .top nav a{color:var(--mist);text-decoration:none;font-size:.9rem;white-space:nowrap;transition:color .2s}
  .top nav a:hover{color:#fff}
  .top .call{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--amber);color:var(--ink);
    padding:9px 16px;border-radius:var(--radius);
    font-size:.9rem;font-weight:600;text-decoration:none;
    transition:background .2s;
  }
  .top .call:hover{background:var(--amber-soft)}
  .top-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
  .menu-toggle{display:none;background:none;border:none;cursor:pointer;width:34px;height:34px;position:relative;flex-shrink:0;padding:0}
  .menu-toggle span{position:absolute;left:6px;right:6px;height:2px;background:var(--mist);transition:transform .2s,opacity .2s}
  .menu-toggle span:nth-child(1){top:11px}
  .menu-toggle span:nth-child(2){top:17px}
  .menu-toggle span:nth-child(3){top:23px}
  .menu-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-toggle.open span:nth-child(2){opacity:0}
  .menu-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:96px 0 88px;overflow:hidden}
  .hero::after{
    content:"";position:absolute;right:-120px;top:-120px;width:480px;height:480px;
    background:radial-gradient(circle,rgba(216,162,74,.16),transparent 70%);
    pointer-events:none;
  }
  .hero .eyebrow{
    color:var(--amber);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
    margin-bottom:20px;
  }
  .hero h1{color:#fff;font-size:clamp(2.1rem,5vw,3.4rem);max-width:16ch}
  .hero p.lead{color:var(--mist);font-size:1.18rem;max-width:54ch;margin-top:22px}
  .hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
  .hero .reassure{color:var(--mist);font-size:.9rem;margin-top:26px;display:flex;gap:22px;flex-wrap:wrap}
  .hero .reassure b{color:#fff;font-weight:600}

  /* ---------- scenari (signature) ---------- */
  .scenari{background:var(--paper);color:var(--ink);padding:84px 0}
  .section-eyebrow{color:var(--amber-dark);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
  .scenari h2{font-size:clamp(1.8rem,4vw,2.5rem);max-width:20ch}
  .scenari .sub{color:#4a5564;font-size:1.05rem;max-width:60ch;margin-top:14px;margin-bottom:42px}
  /* 9 schede su 3 colonne (3×3, nessuna riga spaiata). Ogni scheda è un <details>: da
     chiusa mostra solo titolo e primo passo, la spiegazione si apre al tocco. Così la
     sezione è un terzo più corta e il lettore apre solo la situazione che lo riguarda. */
  .grid-scenari{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .scenario{
    background:#fff;border:1px solid var(--paper-2);border-left:3px solid var(--amber);
    border-radius:var(--radius);transition:box-shadow .2s;
  }
  .scenario summary{list-style:none;cursor:pointer;padding:22px 22px 18px}
  .scenario summary::-webkit-details-marker{display:none}
  .scenario summary:focus-visible{outline:2px solid var(--amber-dark);outline-offset:-2px}
  .scenario:hover{box-shadow:0 10px 30px rgba(14,26,43,.08)}
  .scenario h3{font-size:1.15rem;margin-bottom:10px}
  .scenario p{color:#4a5564;font-size:1rem;padding:0 22px 20px}
  .scenario .first-step{display:block;font-size:.9rem;font-weight:600;color:var(--amber-dark)}
  .scenario .more{display:inline-block;margin-top:12px;font-size:.85rem;color:var(--mist-ink)}
  .scenario .more::after{content:" +"}
  .scenario[open] .more::after{content:" −"}
  @media(prefers-reduced-motion:no-preference){
    .scenario[open] p{animation:faqin .25s ease}
  }
  .link-soft{color:var(--amber-soft);font-weight:600}
  .bio-second{margin-top:56px;padding-top:40px;border-top:1px solid var(--paper-2)}

  /* ---------- come lavoro ---------- */
  .lavoro{background:var(--night-2);color:#fff;padding:84px 0}
  .lavoro .section-eyebrow{color:var(--amber)}
  .lavoro h2{font-size:clamp(1.8rem,4vw,2.5rem);max-width:18ch}
  .lavoro .sub{color:var(--mist);max-width:58ch;margin-top:14px;margin-bottom:44px}
  .grid-lavoro{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .work-item h3{color:var(--amber-soft);font-size:1.1rem;margin-bottom:10px;display:flex;align-items:baseline;gap:10px}
  .work-item h3 i{font-style:normal;font-family:Georgia,serif;color:var(--amber);font-size:.85rem;opacity:.7}
  .work-item p{color:var(--mist);font-size:1rem}
  .impresa-note{
    margin-top:40px;border-top:1px solid var(--line);padding-top:26px;
    color:var(--mist);font-size:.97rem;max-width:62ch;
  }
  .impresa-note b{color:#fff}

  /* ---------- percorso ---------- */
  .percorso{background:var(--paper);color:var(--ink);padding:84px 0}
  .percorso .section-eyebrow{color:var(--amber-dark)}
  .percorso h2{font-size:clamp(1.8rem,4vw,2.5rem)}
  .percorso .sub{color:#4a5564;max-width:58ch;margin-top:14px;margin-bottom:46px}
  .steps{display:grid;gap:0}
  .step{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--paper-2)}
  .step:last-child{border-bottom:1px solid var(--paper-2)}
  .step .num{font-family:Georgia,serif;font-size:1.6rem;color:var(--amber);font-weight:600}
  .step h3{font-size:1.15rem;margin-bottom:6px}
  .step p{color:#4a5564;font-size:1rem;max-width:60ch}

  /* ---------- riservatezza ---------- */
  .riserv{background:var(--night);color:#fff;padding:84px 0}
  .riserv .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .riserv .section-eyebrow{color:var(--amber)}
  .riserv h2{font-size:clamp(1.8rem,4vw,2.4rem)}
  .riserv p{color:var(--mist);margin-top:16px;font-size:1.02rem}
  .riserv ul{list-style:none;margin-top:8px}
  .riserv li{color:var(--mist);padding:12px 0 12px 28px;position:relative;border-bottom:1px solid var(--line)}
  .riserv li::before{content:"—";position:absolute;left:0;color:var(--amber)}
  .riserv li b{color:#fff;font-weight:600}

  /* ---------- chi sono ---------- */
  .chi{background:var(--paper);color:var(--ink);padding:84px 0}
  .chi .section-eyebrow{color:var(--amber-dark)}
  .chi h2{font-size:clamp(1.8rem,4vw,2.4rem)}
  .chi .chi-intro{color:#3c4654;font-size:1.12rem;max-width:60ch;margin-bottom:36px}
  .chi .chi-intro p+p{margin-top:14px}
  .chi .chi-intro b{color:var(--ink)}
  .chi .bio{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:32px}
  .chi .bio p{color:#3c4654;margin-bottom:16px}
  .chi .creds{background:#fff;border:1px solid var(--paper-2);border-radius:var(--radius);padding:26px}
  .chi .creds h3{font-size:1.05rem;margin-bottom:14px}
  .chi .creds li{list-style:none;padding:9px 0;border-bottom:1px solid var(--paper-2);color:#4a5564;font-size:1rem}
  .chi .creds li:last-child{border-bottom:none}

  /* ---------- contatti ---------- */
  .contatti{background:var(--night-2);color:#fff;padding:84px 0}
  .contatti .section-eyebrow{color:var(--amber)}
  .contatti h2{font-size:clamp(1.8rem,4vw,2.5rem);max-width:18ch}
  .contatti .sub{color:var(--mist);max-width:54ch;margin-top:14px;margin-bottom:38px}
  /* Due schede grandi a specchio (una per avvocato), poi tre recapiti comuni in riga,
     poi la nota a tutta larghezza: prima le cinque schede erano impilate a sinistra e
     la nota, a destra, restava vuota per due terzi. */
  .contact-people{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .contact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .ccard{
    background:var(--night);border:1px solid var(--line);border-radius:var(--radius);
    padding:20px 22px;text-decoration:none;display:block;transition:border-color .2s;
  }
  .ccard:hover{border-color:var(--amber)}
  .ccard-main{border-left:3px solid var(--amber);padding:26px 24px}
  .ccard .label{color:var(--mist);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
  /* overflow-wrap:anywhere: l'indirizzo email non ha spazi e sotto i 350px allargava la pagina */
  .ccard .value{color:#fff;font-size:1.25rem;font-family:Georgia,serif;margin-top:6px;overflow-wrap:anywhere}
  .ccard-main .value{font-size:1.6rem}
  .contact-cards .value{font-size:1.1rem} /* l'email a 1,25rem andava a capo a metà parola nella riga a tre colonne */
  .ccard .hint{color:var(--mist);font-size:.9rem;margin-top:8px}
  /* Schede degli avvocati: non sono un link unico (telefono ed email), i link sono dentro. */
  .ccard-person:hover{border-color:var(--line)}
  .ccard-person a{display:block;text-decoration:none}
  .ccard-person a:hover{color:var(--amber)}
  /* Il 379 non riceve chiamate: l'avviso deve saltare all'occhio quanto il numero, non stare nella riga grigia. */
  .ccard-person a.wa-badge{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px 6px 10px;
    background:var(--amber);color:var(--ink);border-radius:50px;font-weight:600;font-size:.9rem}
  .ccard-person a.wa-badge:hover{background:var(--amber-soft);color:var(--ink)}
  .wa-badge .wa-ico{width:18px;height:18px}
  .ccard .mail{color:#fff;font-size:1.05rem;margin-top:16px;overflow-wrap:anywhere}
  .ccard .mail-2{margin-top:6px}
  .ccard .albo{color:var(--mist);font-size:.88rem;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
  .contact-note{
    margin-top:14px;
    background:var(--night);border:1px solid var(--line);border-left:3px solid var(--amber);
    border-radius:var(--radius);padding:24px;color:var(--mist);font-size:1rem;
  }
  .contact-note b{color:#fff}

  /* ---------- faq ---------- */
  .faq{background:var(--paper);color:var(--ink);padding:84px 0}
  .faq .section-eyebrow{color:var(--amber-dark)}
  .faq h2{font-size:clamp(1.8rem,4vw,2.5rem)}
  .faq .sub{color:#4a5564;max-width:60ch;margin-top:14px;margin-bottom:40px}
  .faq-group{margin-bottom:36px}
  .faq-group > h3{font-family:Georgia,serif;font-size:1.15rem;color:var(--amber-dark);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--paper-2)}
  .faq-item{background:#fff;border:1px solid var(--paper-2);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
  /* Le FAQ sono <details>/<summary> nativi: si aprono senza JavaScript, le risposte chiuse
     non sono raggiungibili da tastiera né lette dagli screen reader, e Chrome le apre da
     solo quando "cerca nella pagina" trova il testo. Nessuno script da mantenere. */
  .faq-q{padding:18px 22px;font-size:1.02rem;font-weight:600;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;line-height:1.4;list-style:none}
  .faq-q::-webkit-details-marker{display:none}
  .faq-q:hover{color:var(--amber-dark)}
  .faq-q:focus-visible{outline:2px solid var(--amber-dark);outline-offset:-2px;border-radius:var(--radius)}
  .faq-q .icon{flex-shrink:0;width:22px;height:22px;position:relative;transition:transform .25s}
  .faq-q .icon::before,.faq-q .icon::after{content:"";position:absolute;background:var(--amber);border-radius:2px}
  .faq-q .icon::before{top:10px;left:3px;right:3px;height:2px}
  .faq-q .icon::after{left:10px;top:3px;bottom:3px;width:2px;transition:transform .25s}
  .faq-item[open] .faq-q .icon::after{transform:scaleY(0)}
  .faq-a{padding:0 22px 20px}
  @media(prefers-reduced-motion:no-preference){
    .faq-item[open] .faq-a{animation:faqin .25s ease}
    @keyframes faqin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  }
  .faq-a p{color:#4a5564;font-size:1rem;line-height:1.6}
  .faq-a a{color:var(--amber-dark);font-weight:600;text-decoration:none}
  .faq-a a:hover{text-decoration:underline}

  /* ---------- responsive ---------- */
  /* Il menu a hamburger scatta molto prima del breakpoint "mobile" vero e proprio:
     con 5 voci + brand + Contatti, la riga del menu non ci sta in nessuna finestra
     più stretta di ~1140px, anche su desktop.
     La soglia è in em (71em = 1136px col carattere standard) e non in px: chi ha
     ingrandito il carattere del browser ha voci più larghe, e così la soglia sale con loro.
     La stessa stringa è usata nel JS del menu: se cambia qui, va cambiata anche lì. */
  @media(max-width:71em){
    .top nav{
      display:none;position:absolute;top:100%;left:0;right:0;
      flex-direction:column;gap:0;background:var(--night-2);
      border-top:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.25);
    }
    .top nav.open{display:flex}
    .top nav a{padding:14px 24px;border-bottom:1px solid var(--line)}
    .menu-toggle{display:block}
  }
  @media(max-width:820px){
    .grid-scenari,.grid-lavoro,.riserv .wrap,.chi .bio,.contact-people,.contact-cards{grid-template-columns:1fr}
    .hero{padding:64px 0 56px}
  }
  @media(max-width:40em){
    .top-actions{gap:8px}
    .top .call{padding:9px 12px;font-size:.85rem}
  }
  /* Telefoni da 320px: la testata cede altri pixel al brand (vedi site.css). */
  @media(max-width:22em){
    .top .wrap{gap:8px}
    .top .call{padding:9px 10px}
  }

/* ---------- pulsante WhatsApp (in basso a destra) ---------- */
  .wa-fab{
    position:fixed; bottom:24px; right:24px; z-index:100;
    background:var(--amber); color:var(--ink); text-decoration:none;
    border-radius:50px; padding:13px 20px; font-weight:600; font-size:.95rem;
    box-shadow:0 8px 24px rgba(0,0,0,.3); display:flex; align-items:center; gap:9px;
    transition:transform .15s, background .2s;
  }
  .wa-fab:hover{transform:translateY(-2px); background:var(--amber-soft)}
  .wa-fab.hidden{display:none}
  .wa-ico{width:22px;height:22px;flex-shrink:0}
  .fab-short{display:none}
  /* Sul telefono l'etichetta lunga coprirebbe il primo schermo: resta "WhatsApp", più in basso. */
  @media(max-width:40em){
    .wa-fab{bottom:16px;right:16px;padding:11px 16px}
    .fab-long{display:none}
    .fab-short{display:inline}
  }