/* =========================================================
   PROPOSTA A · «Concreta e locale» · revisione design (soft pass)
   Sobria, ad alto contrasto (WCAG AA), orientata al contatto.
   Font di sistema (nessun font esterno). Mobile-first.
   Palette: inchiostro #1a1a1a · carta #ffffff · sabbia chiara #f8f5f0
            terracotta #9a3412 (primario pieno: solo CTA «Fissa un colloquio» / «Parliamo…»)
            terracotta usata con parsimonia; bordi e ombre soft, hero leggero
   ========================================================= */
:root{
  --ink:#1a1a1a; --ink-2:#3d3d3d; --paper:#fff; --sand:#f8f5f0; --line:#e6e0d6;
  --accent:#9a3412; --accent-dark:#7c2a0e; --ochre:#d4a574; --ochre-soft:#f0e4d4; --focus:#0b57d0;
  --ok:#1d6b3a; --warn-bg:#fff8e8;
  --radius:12px; --wrap:72rem;
  --shadow:0 6px 20px rgba(26,26,26,.06);
  --shadow-sm:0 2px 8px rgba(26,26,26,.05);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem; scroll-padding-bottom:4.5rem}
body{margin:0; font-family:var(--font); font-size:1.0625rem; line-height:1.6; color:var(--ink); background:var(--paper)}
svg{max-width:100%}
h1,h2,h3{line-height:1.2; margin:0 0 .6em; letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,5.5vw,2.85rem); font-weight:750}
h2{font-size:clamp(1.4rem,4vw,2rem); font-weight:750}
h3{font-size:1.15rem; font-weight:700}
p{margin:0 0 1em}
a{color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:.08em}
a:hover{color:var(--accent-dark); text-decoration-thickness:.14em}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:3px}
main:focus{outline:none}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 1.25rem}
.narrow{max-width:48rem}
.sr-only,.sprite{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.ico{width:1.15em; height:1.15em; flex:none; vertical-align:-.2em}

.skip-link{position:absolute; left:1rem; top:-5rem; z-index:100; background:var(--ink); color:#fff; padding:.75rem 1rem; border-radius:0 0 8px 8px; font-weight:700; outline:3px solid var(--ochre)}
.skip-link:focus{top:0; color:#fff}

/* ---------- Topbar ---------- */
.topbar{position:sticky; top:0; z-index:50; background:var(--ink); color:#fff; border-bottom:2px solid rgba(154,52,18,.55)}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3.75rem}
.brand{display:flex; align-items:center; gap:.65rem; color:#fff; text-decoration:none; font-weight:800}
.brand:hover{color:#fff}
.brand-mark{display:grid; place-items:center; width:2.25rem; height:2.25rem; border:1.5px solid var(--ochre); color:var(--ochre); font-weight:900; border-radius:8px; flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-sub{font-weight:500; font-size:.8rem; color:#e6e1d8}
.topnav ul{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:1.1rem}
.topnav a{color:#fff; text-decoration:none; font-weight:600}
.topnav a:hover{color:var(--ochre); text-decoration:underline}
.topnav .btn:hover{color:#fff; text-decoration:none}
.nav-link,.nav-tel{display:none}
.topnav .btn-small{display:none} /* su mobile c'è la barra fissa in basso */
.nav-tel a{display:inline-flex; align-items:center; gap:.35rem; font-weight:800}

/* ---------- Bottoni ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:3rem; padding:.75rem 1.3rem; border-radius:10px; border:2px solid var(--accent); background:var(--accent); color:#fff; font:inherit; font-weight:750; text-decoration:none; cursor:pointer; line-height:1.2; text-align:center}
.btn:hover{background:var(--accent-dark); border-color:var(--accent-dark); color:#fff}
.btn-small{min-height:2.5rem; padding:.45rem .9rem; font-size:.95rem}
.btn-block{width:100%}
.btn-secondary{background:var(--paper); color:var(--ink); border-color:var(--ink)}
.btn-secondary:hover{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---------- Hero (primo schermo più leggero) ---------- */
.hero{background:var(--paper); padding:1.75rem 0 2rem; border-bottom:1px solid var(--line)}
.hero-grid{display:grid; gap:1.75rem}
.eyebrow,.kicker{font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.78rem; color:var(--ink-2); margin-bottom:.65rem}
.kicker-light{color:var(--ochre)}
.hl{background:linear-gradient(transparent 68%, var(--ochre-soft) 68%); padding:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.lead{font-size:1.12rem; color:var(--ink-2); max-width:40rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.75rem; margin:1.35rem 0 .65rem}
.hero-actions .btn{flex:1 1 100%}
.micro{font-size:.95rem; color:var(--ink-2)}
.hero-side{align-self:center}
.trust{list-style:none; margin:0; padding:1.15rem 1.2rem; display:grid; gap:.75rem; background:var(--sand); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); font-weight:650}
.trust li{display:flex; gap:.7rem; align-items:flex-start}
.trust .ico{color:var(--ink-2); width:1.4em; height:1.4em}
.temple{display:block; width:min(100%,18rem); height:auto; color:#c4b5a0; margin:1.25rem auto 0; opacity:.85}

/* ---------- Sezioni ---------- */
.section{padding:2.75rem 0}
.section-sand{background:var(--sand); border-block:1px solid var(--line)}
.section-lead{font-size:1.08rem; color:var(--ink-2); max-width:46rem}

.badge{display:inline-flex; align-items:center; gap:.45rem; background:var(--ink); color:#fff; font-weight:650; font-size:.9rem; padding:.3rem .75rem; border-radius:999px; margin-bottom:1rem}
.badge .ico{color:var(--ochre)}
.timeline{list-style:none; margin:1.5rem 0; padding:0; counter-reset:t; display:grid; gap:.9rem}
.timeline li{counter-increment:t; position:relative; padding:1rem 1.15rem .95rem 3.75rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm)}
.timeline li::before{content:counter(t); position:absolute; left:.9rem; top:.95rem; width:2rem; height:2rem; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff; font-weight:800; font-size:.95rem}
.timeline h3{margin-bottom:.3rem}
.timeline p{margin:0}
.helped{background:var(--sand); border-left:4px solid var(--ok); border-radius:0 var(--radius) var(--radius) 0; padding:1.2rem 1.3rem; margin-bottom:1.25rem}
.ticks,.crosses{list-style:none; padding:0; margin:0 0 1rem}
.ticks li,.crosses li{position:relative; padding-left:1.8rem; margin-bottom:.55rem}
.ticks li::before{content:""; position:absolute; left:.15rem; top:.45em; width:.95rem; height:.55rem; border-left:3px solid var(--ok); border-bottom:3px solid var(--ok); transform:rotate(-45deg)}
.crosses li::before{content:"×"; position:absolute; left:.2rem; top:-.05em; font-weight:900; font-size:1.3rem; color:var(--accent)}
.notice{border:1px dashed #8a8a8a; border-radius:var(--radius); padding:1rem 1.15rem; background:#fff}
.notice p{margin:0}
.reassure{border:1px solid var(--line); border-left:4px solid var(--ok); border-radius:var(--radius); padding:1rem 1.15rem; background:#fff; margin:0 0 1.5rem; box-shadow:var(--shadow-sm)}
.reassure p{margin:0; color:var(--ink-2)}
.reassure .note{margin-top:.75rem}
.page-actions{margin-top:1.5rem}

.cards4{display:grid; gap:1rem; margin-top:1.5rem}
.qcard{background:#fff; border:1px solid var(--line); border-top:3px solid var(--ink); border-radius:var(--radius); padding:1.15rem; box-shadow:var(--shadow-sm)}
.qcard p{margin:0}
.quote{margin:1.5rem 0 0; padding:1.15rem 1.3rem; background:var(--sand); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); font-size:1.05rem}
.quote p{margin:0}
.quote strong{color:var(--ink)}

.two{display:grid; gap:1.25rem; margin-top:1.5rem}
.panel{border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem; background:#fff; box-shadow:var(--shadow-sm)}
.labels{margin:0 0 1rem}
.labels div{display:grid; grid-template-columns:9.5rem 1fr; gap:.75rem; align-items:start; margin-bottom:.6rem}
.labels dd{margin:0}
.tag{display:inline-block; font-size:.85rem; font-weight:750; padding:.2rem .55rem; border-radius:5px; border:1.5px solid}
.tag-v{background:#e3f1e7; color:#14532d; border-color:#14532d}
.tag-d{background:#fdf0dc; color:#7a3e00; border-color:#7a3e00}
.tag-nv{background:#eee; color:#2b2b2b; border-color:#2b2b2b}
.note{font-size:.95rem; color:var(--ink-2); margin:0}

.steps{list-style:none; padding:0; margin:1.5rem 0; display:grid; gap:.9rem}
.steps li{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.15rem .95rem 4rem; box-shadow:var(--shadow-sm)}
.step-n{position:absolute; left:1rem; top:.95rem; width:2.15rem; height:2.15rem; display:grid; place-items:center; background:var(--ink); color:#fff; font-weight:800; border-radius:50%; font-size:.95rem}
.steps h3{margin-bottom:.25rem}
.steps p{margin:0}
.rules{background:var(--sand); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem}
.rules-title{color:var(--ink)}
.rules ul{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.rules li{display:flex; gap:.7rem; align-items:flex-start}
.rules .ico{color:var(--ink-2); margin-top:.2em}

.who-head{display:flex; gap:1.1rem; align-items:flex-start}
.avatar{flex:none; display:grid; place-items:center; width:4.5rem; height:4.5rem; border-radius:50%; background:var(--sand); color:var(--ink-2); font-weight:800; font-size:1.2rem; border:1px solid var(--line); overflow:hidden}
.avatar img,.avatar-photo{width:100%; height:100%; object-fit:cover; display:block}
.avatar-placeholder{width:100%; height:100%; object-fit:cover}
.honest{background:var(--sand); border-left:4px solid var(--ink); padding:1rem 1.15rem; margin:1.5rem 0 0}
.price-box{margin-top:1.5rem; padding:1.2rem 1.3rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.price-box p{margin:0}

/* Anteprima report demo («cosa ricevi») — da collegare in HTML quando Walterozzo conferma la struttura */
.report-preview{margin:1.25rem 0 0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); max-width:28rem}
.report-preview img,.report-preview object{display:block; width:100%; height:auto}
.report-preview figcaption{padding:.65rem .9rem; font-size:.88rem; color:var(--ink-2); border-top:1px solid var(--line); background:var(--sand)}

.faq details{background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:.55rem; box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer; padding:1rem 1.15rem; font-weight:700}
.faq summary:hover{color:var(--accent)}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details p{padding:1rem 1.15rem; margin:0}

/* ---------- Contatti (sezione primaria) ---------- */
.contact{background:var(--ink); color:#fff; padding:3rem 0; border-top:3px solid rgba(154,52,18,.7)}
.contact h2{color:#fff}
.contact-copy p{color:#ece7de}
.contact a{color:#fff}
.contact a:hover{color:var(--ochre)}
.contact-grid{display:grid; gap:2rem}
.contact-list{list-style:none; padding:0; margin:1.5rem 0; display:grid; gap:.9rem; font-size:1.1rem}
.contact-list li{display:flex; gap:.75rem; align-items:flex-start}
.contact-list .ico{color:var(--ochre); width:1.4em; height:1.4em; margin-top:.1em}
.contact-list a{font-weight:800; overflow-wrap:anywhere}
.cl-label{display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:#d6cfc3}
.warn{background:#2a2a2a; border-left:4px solid var(--ochre); padding:.9rem 1.1rem}

/* ---------- Moduli ---------- */
.form{background:var(--paper); color:var(--ink); border-radius:var(--radius); padding:1.35rem; border:1px solid var(--line); box-shadow:var(--shadow)}
.form a{color:var(--accent)}
.form a:hover{color:var(--accent-dark)}
.form h3{font-size:1.35rem}
.field{margin-bottom:1rem}
.field label{display:block; font-weight:700; margin-bottom:.3rem}
.req{color:var(--accent); font-weight:800}
.opt{font-weight:500; font-size:.88rem; color:var(--ink-2)}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%; font:inherit; color:var(--ink); background:#fff; border:1.5px solid #7a7a7a; border-radius:8px; padding:.65rem .75rem; min-height:3rem}
textarea{resize:vertical; min-height:6rem}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--focus); outline:3px solid var(--focus); outline-offset:1px}
::placeholder{color:#6b6b6b}
.field small{display:block; color:var(--ink-2); font-size:.9rem; margin-top:.3rem}
.check{display:flex; gap:.7rem; align-items:flex-start}
.check input{width:1.4rem; height:1.4rem; margin:.15rem 0 0; flex:none; accent-color:var(--accent)}
.check label{font-weight:500; font-size:.95rem; margin:0}
.small{font-size:.9rem; color:var(--ink-2); margin:.75rem 0}

.news{display:grid; gap:1.5rem}
.h-small{font-size:clamp(1.3rem,3.4vw,1.55rem)}
.form-news{border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; background:var(--sand)}
.form-news h3{font-size:1.15rem}

/* ---------- Footer ---------- */
.footer{background:#0c0c0c; color:#e6e1d8; padding:2rem 0 5.5rem; font-size:.95rem}
.footer a{color:#fff}
.footer a:hover{color:var(--ochre)}
.footer-inner p{margin:.3rem 0}

/* ---------- Barra mobile ---------- */
.quickbar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-template-columns:1fr 1.4fr; background:var(--ink); border-top:2px solid rgba(154,52,18,.65); transition:transform .2s ease, visibility .2s}
.quickbar a{display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:3.5rem; color:#fff; font-weight:800; text-decoration:none}
.quickbar .qb-primary{background:var(--accent)}
.quickbar a:focus-visible{outline:3px solid #fff; outline-offset:-5px}
.quickbar.is-hidden{transform:translateY(110%); visibility:hidden}

/* ---------- Pagine secondarie ---------- */
.page{padding:2.5rem 0 3.5rem}
.page h1{font-size:clamp(1.8rem,5vw,2.4rem)}
.page h2{font-size:1.35rem; margin-top:2rem}
.page table{width:100%; border-collapse:collapse; margin:1rem 0; font-size:.98rem}
.page th,.page td{border:1px solid var(--line); padding:.6rem .7rem; text-align:left; vertical-align:top}
.page th{background:var(--sand); width:30%}
.draft{background:var(--warn-bg); border:1.5px solid #8a5a00; padding:1rem; border-radius:8px; margin-bottom:1.5rem}
.page-actions{margin-top:1.5rem}
.page-footer{padding-bottom:2rem}

/* ---------- Breakpoint ---------- */
@media (min-width:40rem){
  .hero-actions .btn{flex:0 1 auto}
  .cards4{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:48rem){
  .quickbar{display:none}
  .footer{padding-bottom:2rem}
  html{scroll-padding-bottom:0}
  .nav-tel{display:block}
  .topnav .btn-small{display:inline-flex}
}
@media (min-width:60rem){
  .nav-link{display:block}
  .hero{padding:2.75rem 0 3rem}
  .hero-grid{grid-template-columns:1.45fr 1fr; gap:3rem}
  .cards4{grid-template-columns:repeat(4,1fr)}
  .timeline{grid-template-columns:repeat(4,1fr)}
  .timeline li{padding:3.6rem 1.15rem 1.15rem}
  .steps{grid-template-columns:repeat(5,1fr)}
  .steps li{padding:3.6rem 1.05rem 1.05rem}
  .two{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr 1.1fr; gap:3rem; align-items:start}
  .contact-copy{position:sticky; top:6rem}
  .news{grid-template-columns:1.1fr 1fr; gap:3rem; align-items:start}
}
@media (max-width:22rem){
  .labels div{grid-template-columns:1fr; gap:.25rem}
  .brand-sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
}
@media (forced-colors:active){
  .btn,.form,.panel,.timeline li{border:2px solid ButtonText}
}
@media print{
  .topbar,.quickbar,.skip-link{display:none}
}

/* Collegamento alla pagina della checklist (Proposta B) */
.crosslink{font-weight:600}

/* Su schermi stretti il placeholder di «Tipo di attività» non deve risultare tagliato */
@media (max-width: 26rem){ #attivita::placeholder{font-size:.875rem} }

/* Messaggi di errore dei moduli (assets/form-errors.js) */
.field-error{color:#9a3412; font-weight:700; font-size:.92rem; margin:.35rem 0 0}
.field-error:empty{display:none}
.has-error input,.has-error textarea,.has-error select{border-color:#9a3412}
.form-summary{background:#fdecea; color:#7a1d0e; border-left:4px solid #9a3412; padding:.6rem .8rem; font-weight:700; margin:0 0 1rem}
.check{flex-wrap:wrap}
.check .field-error{flex-basis:100%}
.check label{flex:1 1 0; min-width:0}