@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3.woff2") format("woff2");
          font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Oswald";src:url("fonts/oswald.woff2") format("woff2");
          font-weight:200 700;font-style:normal;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* Il sito e' disegnato in chiaro. Senza questa riga Chrome, se ha acceso
     "Auto Dark Mode for Web Contents", inverte da solo i colori della pagina:
     il fondo diventa scuro e il rosso #e81820 diventa un celeste #17e7df.
     E' successo davvero sul portatile del cliente, il 24 agosto 2026. */
  color-scheme: only light;
  --ink:#141b24; --ink2:#39454f; --mute:#6d7885; --line:#e4e9ee; --line2:#f0f3f6;
  --bg:#fff; --bg2:#f5f7f9; --acc:#e81820; --acc2:#c2101a; --dark:#141b24;
  --max:1180px; --r:7px;
  --disp:"Oswald","Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     color:var(--ink);background:var(--bg);line-height:1.66;font-size:17.5px;-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;letter-spacing:0;line-height:1.08;text-wrap:balance}
h1,h2{text-transform:uppercase}
h3,h4{font-weight:600;line-height:1.14}

/* ── header ── */
header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:9px 0}
.logo{display:block;text-decoration:none}
.logo img{height:52px;width:auto;display:block}
.hcta{display:flex;align-items:center;gap:12px}
.hcta .btn.call{display:none}
.tel{font-weight:700;text-decoration:none;white-space:nowrap;font-size:15px;letter-spacing:-.01em}
.btn{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;
     font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.9px;
     padding:12px 22px;border-radius:5px;font-size:15.5px;border:none;cursor:pointer;line-height:1.25;
     transition:background .15s,transform .12s}
.btn:hover{background:var(--acc2);transform:translateY(-1px)}
.btn.dark{background:var(--dark);color:#fff}
.btn.dark:hover{background:#2a3542}
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,.85);color:#fff;padding:9px 18px}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
nav{border-top:1px solid var(--line2)}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:1px}
nav a{display:block;padding:11px 14px;text-decoration:none;font-size:14.5px;font-weight:600;
      color:var(--ink2);border-bottom:3px solid transparent;transition:color .15s,background .15s}
nav a:hover{color:var(--ink);background:var(--bg2)}
nav a.on{color:var(--ink);border-bottom-color:var(--acc)}
.navtoggle{display:none;background:none;border:1px solid var(--line);border-radius:5px;padding:9px 14px;font-weight:700;font-size:14px}

/* ── hero ── */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden}
.hero img{width:100%;height:min(66vh,560px);object-fit:cover;opacity:.86}
.hero .hvid{position:absolute;inset:0;width:100%;height:min(66vh,560px);object-fit:cover;
            opacity:0;transition:opacity .8s ease;z-index:1}
.hero .hvid.on{opacity:.8}
.hero:after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(8,12,17,.92) 0%,rgba(8,12,17,.80) 30%,rgba(8,12,17,.34) 66%,rgba(8,12,17,.10) 100%)}
.hero .txt{position:absolute;inset:0;display:flex;align-items:center;z-index:2}
.hero h1{font-size:clamp(36px,6.4vw,70px);max-width:23ch;line-height:1.03}
.hero h1 .gold{color:var(--acc);display:block}
.hero p{margin-top:18px;font-size:clamp(16.5px,2vw,21px);max-width:48ch;opacity:.94;line-height:1.55}
.hero .acts{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.kick{display:inline-block;font-family:var(--disp);font-size:13.5px;letter-spacing:2.4px;text-transform:uppercase;color:#fff;opacity:.93;font-weight:600;margin-bottom:18px}
.kick.sm{font-size:11px;letter-spacing:1.6px;color:var(--acc2);opacity:1;margin-bottom:5px}

.phero{background:var(--dark);color:#fff;padding:52px 0 48px}
.phero h1{font-size:clamp(32px,5.6vw,56px);max-width:21ch;line-height:1.04}
.phero p{margin-top:13px;max-width:58ch;opacity:.88;font-size:17px}

/* ── sezioni ── */
section{padding:62px 0}
section.tight{padding:34px 0}
section.alt{background:var(--bg2)}
h2{font-size:clamp(27px,3.9vw,44px)}
h3{font-size:21px;margin-bottom:6px}
.lead{color:var(--ink2);max-width:62ch;margin-top:13px}
.lead.wide{max-width:78ch}
.shead{margin-bottom:32px}
.narrow{max-width:760px}
.note{font-size:14px;color:var(--mute);margin-top:9px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.split img{border-radius:var(--r)}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
/* schede lunghe (parco mezzi): una colonna sul telefono, due dal tablet in su */
.g2w{grid-template-columns:1fr}
@media(min-width:860px){.g2w{grid-template-columns:1fr 1fr}}

.card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
      text-decoration:none;display:block;transition:box-shadow .18s,transform .18s,border-color .18s}
a.card:hover{box-shadow:0 10px 30px rgba(20,30,45,.13);transform:translateY(-3px);border-color:#d5dde5}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card .bd{padding:17px 19px 19px}
.card .bd p{color:var(--mute);font-size:15px;margin-top:5px}
.card .more{display:inline-block;margin-top:12px;font-weight:700;font-size:14.5px;color:var(--acc2)}
.card.plain{background:#fff}

.fig{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.fig img{aspect-ratio:3/2;object-fit:cover;width:100%}
.fig figcaption{padding:14px 17px 16px}

/* fotografia a piena larghezza con didascalia sotto */
.figw{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff}
.figw img{width:100%;display:block}
.figw figcaption{padding:13px 18px 15px;font-size:15px;color:var(--mute);line-height:1.55}
.figw figcaption strong{color:var(--ink);font-weight:700}

/* ── prima e dopo ── */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.ba figure{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;margin:0}
.ba img{aspect-ratio:3/4;object-fit:cover;width:100%}
.ba .lab{position:absolute;top:12px;left:12px;background:rgba(20,27,36,.92);color:#fff;
   font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
   padding:6px 14px;border-radius:4px}
.ba .lab.dopo{background:var(--acc)}
.ba figcaption{padding:12px 15px 14px;font-size:14.5px;color:var(--mute)}
.ba.tre{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.ba.tre{grid-template-columns:1fr}
  .ba.tre img{aspect-ratio:4/3}}
@media(max-width:560px){.ba{gap:10px}.ba .lab{font-size:12px;padding:4px 10px;letter-spacing:1.2px}
  .ba figcaption{font-size:13px;padding:9px 11px 11px}}
.fig b{display:block;font-family:var(--disp);font-size:19px;line-height:1.2;font-weight:600}
.fig span{color:var(--mute);font-size:14.5px;display:block;margin-top:4px;line-height:1.5}

ul.ticks{list-style:none;margin-top:16px}
ul.ticks li{padding:9px 0 9px 24px;position:relative;border-bottom:1px solid var(--line)}
ul.ticks li:before{content:"";position:absolute;left:0;top:19px;width:13px;height:3px;background:var(--acc);border-radius:2px}
ul.ticks.cols{columns:2;column-gap:40px;max-width:760px}
ul.ticks.cols li{break-inside:avoid}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facts div{background:#fff;padding:24px 22px}
.facts b{display:block;font-family:var(--disp);font-size:40px;line-height:1;letter-spacing:0;font-weight:700}
.facts span{color:var(--mute);font-size:14px;display:block;margin-top:8px;line-height:1.45}

/* riquadro per una precisazione: non e' una citazione, e' una nota che
   vogliamo si legga senza rubare la scena alle schede accanto */
.quote{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
       padding:22px 26px 24px;max-width:74ch}
.quote .k{display:block;font-family:var(--disp);font-size:12.5px;letter-spacing:2.2px;
       text-transform:uppercase;color:var(--acc2);font-weight:600;margin-bottom:9px}
.quote p{color:var(--ink2);font-size:16.5px;line-height:1.62}
@media(max-width:560px){.quote{padding:18px 19px 20px}.quote p{font-size:15.5px}}

.zonelist{font-size:18px;line-height:2.1;color:var(--ink2);max-width:100%}
.zonelist strong{color:var(--ink)}

table.zones{width:100%;border-collapse:collapse;margin-top:16px}
table.zones td{padding:11px 0;border-bottom:1px solid var(--line);font-size:16px;vertical-align:top}
table.zones td:first-child{font-weight:700;width:36%;padding-right:16px}

/* ── fasce ── */
.band{background:var(--dark);color:#fff;padding:52px 0}
.band h2{max-width:22ch}
.band p{opacity:.85;margin-top:11px;max-width:58ch}
.band .acts{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* Fascia sotto i box di "Come lavoriamo": un solo concetto, detto forte.
   Stesso trattamento della fascia somma urgenza (.urg) ma piu' bassa,
   e senza bottoni: non e' una call to action. */
.rossa{background:linear-gradient(100deg,#280a0c,#4c1318);color:#fff;padding:26px 0;
       border-top:3px solid var(--acc)}
.rossa .wrap{display:flex;align-items:baseline;gap:12px 26px;flex-wrap:wrap}
.rossa .k{font-family:var(--disp);font-size:12px;letter-spacing:2.2px;text-transform:uppercase;
          font-weight:600;color:#ff6b63;white-space:nowrap}
.rossa p{color:#fff;font-size:20.5px;line-height:1.4;margin:0;font-weight:600;flex:1;min-width:280px}
@media(max-width:760px){.rossa{padding:22px 0}.rossa p{font-size:17.5px}}

.urg{background:linear-gradient(100deg,#280a0c,#4c1318);color:#fff;padding:30px 0;border-top:3px solid var(--acc)}
.uacts{display:flex;gap:10px;flex-wrap:wrap}
.urg .btn.ghost{border-color:rgba(255,255,255,.55)}
.urg .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.urg .k{display:inline-block;font-family:var(--disp);font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:#ff6b63;font-weight:600}
.urg h3{font-size:26px;margin-top:6px;max-width:24ch}
.urg p{opacity:.82;font-size:15.5px;margin-top:6px;max-width:56ch}


/* ── form ── */
form{display:grid;gap:14px;max-width:560px}
label{font-size:14px;font-weight:700;display:block;margin-bottom:6px}
label.chk{font-weight:400;font-size:14.5px;display:flex;gap:8px;align-items:flex-start}
label.chk input{width:18px;height:18px;flex:none;margin-top:3px}
input,textarea,select{width:100%;padding:12px 14px;border:1px solid #c7d0d9;border-radius:5px;font:inherit;font-size:16px;background:#fff}
input:focus,textarea:focus,select:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent}
textarea{min-height:135px;resize:vertical}

.todo{background:#fff6e0;border:1px dashed var(--acc);color:#8a6d1f;font-size:13px;padding:1px 7px;border-radius:4px;
      display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.esito{background:#eef7ee;border:1px solid #bcd9bc;border-left:4px solid #2f7d32;
       border-radius:var(--r);padding:16px 18px;font-size:16px;line-height:1.6;max-width:560px}
.esito a{color:var(--acc2);font-weight:700}
.note.errore{color:var(--acc2);font-weight:600}

/* ── footer ── */
footer{background:var(--dark);color:#c3ccd6;padding:52px 0 22px;font-size:15px}
footer a{color:#c3ccd6;text-decoration:none}
footer a:hover{color:#fff}
footer h4{color:#fff;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:14px}
footer ul{list-style:none}
footer li{margin-bottom:7px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:34px}
.fbot{border-top:1px solid #2b3743;margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;
      gap:14px;flex-wrap:wrap;font-size:13.5px;color:#8794a2}

.wa{position:fixed;right:18px;bottom:18px;z-index:60;background:#25d366;width:58px;height:58px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.3);text-decoration:none}
.wa svg{width:31px;height:31px;fill:#fff}

@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:30px}
  ul.ticks.cols{columns:1}
}
@media(max-width:820px){
  body{font-size:16px}
  .logo img{height:38px}
  nav ul{flex-direction:column;display:none}
  nav ul.open{display:flex}
  .navtoggle{display:block}
  nav a{padding:13px 4px;border-bottom:1px solid var(--line2)}
  .hero img{height:min(62vh,470px)}
  .hero .hvid{height:min(62vh,470px)}
  .hero:after{background:linear-gradient(180deg,rgba(8,12,17,.76) 0%,rgba(8,12,17,.94) 100%)}
  .tel{display:none}
  .hcta{gap:8px}
  .hcta .btn.sopr{display:none}
  .hcta .btn.call{display:inline-block;padding:10px 16px;font-size:14.5px;white-space:nowrap}
  .navtoggle{padding:9px 13px}
  section{padding:44px 0}
  .phero{padding:38px 0 34px}
  .urg .wrap{flex-direction:column;align-items:flex-start;gap:18px}
  .facts div{padding:18px 16px}
  .facts b{font-size:27px}
}