/* ==========================================================
   InterFIX — pronto intervento casa, Milano
   Bianco, quasi-nero, e l'arancio speso una volta sola.
   Sistema ereditato dalla v2 approvata, esteso al sito a piu' pagine.
   ========================================================== */

/* tre pesi statici: il peso e' davvero quello richiesto su qualsiasi browser */
@font-face{font-family:'Host Grotesk';src:url(fonts/host-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Host Grotesk';src:url(fonts/host-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Host Grotesk';src:url(fonts/host-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  --bg:#FFFFFF;
  --ink:#111315;
  --ink-2:#33383B;
  --muted:#5F6668;
  --line:#E4E6E6;
  --line-2:#CFD3D3;
  --wash:#F7F6F3;   /* off-white caldo, non grigio freddo */
  --or:#F2761F;          /* porta sempre testo NERO */
  --or-hi:#FF8A3D;       /* arancio piu' chiaro: hover dei pulsanti */
  --or-ink:#C4560E;      /* arancio scuro: bordi, ombre, stati attivi */
  --or-soft:#FFF3E9;     /* velo arancio: sfondi tenui */
  --wa:#0B7A38;

  --sans:'Host Grotesk',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  --wrap:1180px;
  --gut:clamp(20px,4.4vw,56px);
  --bar:66px;
  --nav:48px;
  --mbar:62px;
  --strip:116px;   /* altezza fissa della riga dei numeri */

  --z-map:1; --z-scrim:2; --z-hero:3; --z-bar:50;
  --e:cubic-bezier(.16,.84,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:400;
  font-variant-numeric:lining-nums tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.032em;line-height:1.02;text-wrap:balance}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:12px 18px;z-index:999}
.skip:focus{left:0;top:0}

/* ---------- marchio ---------- */
/* il marchio e' testo, non un'immagine: nitido a ogni densita', zero richieste */
.mark{font-weight:800;letter-spacing:-.045em;line-height:1;white-space:nowrap;text-decoration:none}
.mark em{font-style:normal;color:var(--or)}
.bar__logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.mascot{height:36px;width:auto;flex:none;display:block}
.bar__logo .mark{font-size:25px}
.foot .mark{font-size:21px;color:var(--ink)}

/* ---------- barra ---------- */
.bar{position:sticky;top:0;z-index:var(--z-bar);background:var(--bg);border-bottom:1px solid var(--line)}
.bar__in{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  height:var(--bar);display:flex;align-items:center;justify-content:space-between;
  gap:24px;position:relative;
}
.bar__right{display:flex;align-items:center;gap:16px}
/* nav centrata in modo assoluto: sta al centro esatto della barra a prescindere
   da quanto sono larghi logo (sinistra) e stato+chiamata (destra) */
.topnav{
  position:absolute;left:50%;top:0;height:100%;transform:translateX(-50%);
  display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);
}
.bar__meta{font-size:14.5px;color:var(--muted);white-space:nowrap}
.bar__meta b{color:var(--ink);font-weight:500}
.bar__meta .live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#12A150;margin-right:7px;vertical-align:middle}

.tel{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;
  background:var(--or);color:#000;font-weight:800;letter-spacing:-.01em;
  padding:12px 18px;font-size:18px;line-height:1;
  transition:transform .18s var(--e),background .18s;
}
.tel:hover{background:var(--or-hi);transform:translateY(-1px)}
.tel svg{width:16px;height:16px;flex:none}

/* ---------- navigazione centrata nella barra ---------- */
.topnav a{
  display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;
  font-size:15.2px;color:var(--muted);border-bottom:2px solid transparent;
  padding-block:6px;transition:color .18s,border-color .18s;
}
.topnav a:hover{color:var(--ink)}
.topnav a[aria-current="page"]{color:var(--ink);font-weight:500;border-bottom-color:var(--or)}

@media(max-width:1000px){
  /* poco spazio: logo + chiamata sulla prima riga, nav centrata sotto */
  .bar__in{flex-wrap:wrap;height:auto;gap:8px 12px;padding-block:9px}
  .bar__meta{display:none}
  .bar__logo .mark{font-size:21px}
  .mascot{height:30px}
  .bar__right{margin-left:auto}
  /* nav torna nel flusso, seconda riga centrata */
  .topnav{position:static;transform:none;height:auto;order:3;flex-basis:100%;justify-content:center;gap:22px}
  .tel{font-size:16px;padding:12px 15px}
}

/* ---------- testata con la foto vera ---------- */
/* altezza libera: la testata contiene numero, promessa e sintomi.
   Si ancora in basso, come nella v2. */
.hero{position:relative;min-height:clamp(460px,66svh,760px);overflow:hidden;background:#15171A;display:flex;align-items:flex-end}
.hero picture{display:contents}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* velatura al minimo: scurisce la fascia bassa dove sta il testo.
   Volti, furgoni e targhe restano chiari: sono loro la prova. */
.hero::after{
  content:'';position:absolute;inset:0;z-index:var(--z-scrim);
  background:
    linear-gradient(to top,
      rgba(9,10,11,.93) 0%, rgba(9,10,11,.86) 18%, rgba(9,10,11,.72) 34%,
      rgba(9,10,11,.44) 46%, rgba(9,10,11,.12) 57%, rgba(9,10,11,0) 68%),
    linear-gradient(to right,rgba(9,10,11,.34) 0%,rgba(9,10,11,.08) 42%,rgba(9,10,11,0) 60%);
}
.hero__in{position:relative;width:100%;z-index:var(--z-hero);padding-block:clamp(24px,2.6vw,36px)}
.hero h1{
  color:#fff;font-size:clamp(2.15rem,4.1vw,4.2rem);max-width:15ch;
  text-shadow:0 2px 34px rgba(6,7,8,.62),0 1px 4px rgba(6,7,8,.34);
}
.hero h1 span{display:block}
.hero p{color:#E9EBEB;font-size:clamp(1rem,1.35vw,1.16rem);max-width:48ch;margin-top:16px}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.tel--big{font-size:clamp(1.4rem,2.6vw,2rem);padding:19px 26px;gap:13px;box-shadow:0 10px 24px -12px var(--or-ink)}
.tel--big svg{width:22px;height:22px}
.wa{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  color:#fff;border:1.5px solid rgba(255,255,255,.5);padding:18px 22px;
  font-weight:500;font-size:1.02rem;line-height:1;transition:border-color .18s,background .18s;
}
.wa:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.wa svg{width:19px;height:19px}

.facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;color:#D6D9D9;font-size:14.6px}
.facts li{display:flex;align-items:center;gap:9px}
.facts li::before{content:'';width:5px;height:5px;background:var(--or);flex:none}

@media(max-width:760px){
  .hero{min-height:clamp(440px,66svh,600px)}
  .hero::after{
    background:linear-gradient(to top,
      rgba(9,10,11,.94) 0%, rgba(9,10,11,.89) 22%, rgba(9,10,11,.78) 42%,
      rgba(9,10,11,.62) 60%, rgba(9,10,11,.44) 78%, rgba(9,10,11,.30) 100%);
  }
  .hero__cta{gap:10px}
  .facts{gap:8px 18px;font-size:14px}
}

/* ---------- testata delle pagine servizio ---------- */
/* piu' bassa della home: qui il visitatore sa gia' cosa cerca,
   il numero deve arrivare prima possibile */
.phero{position:relative;overflow:hidden;background:#15171A;min-height:clamp(360px,52svh,480px);display:flex;align-items:flex-end}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.phero::after{
  content:'';position:absolute;inset:0;z-index:var(--z-scrim);
  background:linear-gradient(to top,
    rgba(9,10,11,.94) 0%, rgba(9,10,11,.88) 20%, rgba(9,10,11,.74) 40%,
    rgba(9,10,11,.5) 58%, rgba(9,10,11,.22) 78%, rgba(9,10,11,.08) 100%);
}
/* pagine senza foto vera: fondo pieno, nessuna finta immagine */
.phero--flat{background:var(--ink);min-height:auto}
.phero--flat::after{display:none}
.phero__in{position:relative;z-index:var(--z-hero);width:100%;padding-block:clamp(30px,4.4vw,52px)}
.phero h1{color:#fff;font-size:clamp(2rem,4.2vw,3.4rem);max-width:18ch;text-shadow:0 2px 30px rgba(6,7,8,.6)}
.phero--flat h1{text-shadow:none}
.phero p{color:#E4E7E7;font-size:clamp(1rem,1.3vw,1.12rem);max-width:52ch;margin-top:14px}
.phero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}

/* briciole */
.crumbs{font-size:14px;color:#B9BDBE;margin-bottom:18px}
.crumbs a{color:#E4E7E7;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.crumbs a:hover{border-color:#fff}
.crumbs span{color:#8E9394}

/* ---------- sezioni ---------- */
.sec{padding:clamp(44px,5.4vw,76px) 0}
.sec + .sec{border-top:1px solid var(--line)}
.sec--wash{background:var(--wash)}
.sec--wash + .sec{border-top:0}
.sec h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:clamp(22px,2.8vw,34px)}
.sec .lede{max-width:62ch;color:var(--ink-2);font-size:1.06rem;margin-top:-18px;margin-bottom:clamp(26px,3.4vw,40px)}

/* elenchi dei servizi */
/* auto-fit: tre gruppi fanno tre colonne, quattro ne fanno quattro.
   Nessun gruppo resta orfano su una riga da solo. */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:clamp(22px,3.6vw,52px)}
.cols--2{grid-template-columns:repeat(2,1fr)}
.cols h3{font-size:1.22rem;letter-spacing:-.02em;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.cols li{
  padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:16.2px;
  /* lo scatto e' su transform, non su padding: nessun ricalcolo di layout */
  transition:transform .2s var(--e),color .2s;
}
.cols li:hover{transform:translateX(8px);color:var(--ink)}
@media(max-width:820px){.cols,.cols--2{grid-template-columns:1fr;gap:26px}}

.aside{margin-top:clamp(26px,3.4vw,40px);color:var(--muted);font-size:16px}
.aside a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--or);font-weight:500}
.aside a:hover{background:var(--or-soft)}

/* ---------- come funziona ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:18px}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-weight:800;font-size:14px;color:var(--or);letter-spacing:.04em;margin-bottom:10px}
.steps b{display:block;font-weight:800;letter-spacing:-.02em;font-size:1.08rem;margin-bottom:6px}
.steps p{color:var(--muted);font-size:15.4px;line-height:1.5}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- prima e dopo ---------- */
.ba{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px)}
.ba figure{margin:0}
.ba figcaption{margin-top:12px;font-size:15.2px;color:var(--muted)}
.ba figcaption b{display:block;color:var(--ink);font-weight:500;font-size:16px;margin-bottom:2px}
.ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.ba__slot{
  position:relative;aspect-ratio:4/3;background:var(--wash);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
}
.ba__slot::after{
  content:attr(data-tag);position:absolute;left:0;top:0;
  background:var(--ink);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;
  padding:5px 9px;text-transform:uppercase;
}
.ba__slot--after::after{background:var(--or);color:#000}
.ba__slot span{color:#A8ADAE;font-size:13px;letter-spacing:.02em}
.ba__slot img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.ba{grid-template-columns:1fr;max-width:520px}}

/* ---------- dove interveniamo ---------- */
.zona{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(24px,3.4vw,46px);align-items:start}
#mappa{height:clamp(320px,44vh,470px);border:1px solid var(--line);background:#EAECEA}
.key li{padding:16px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start}
.key li:first-child{border-top:0;padding-top:0}
.key .pin{width:22px;height:22px;fill:var(--or);flex:none;margin-top:1px}
.key .pin--soft{fill:#9aa0a1}
.key b{display:block;font-weight:800;letter-spacing:-.02em;font-size:1.02rem;margin-bottom:3px}
.key p{color:var(--muted);font-size:15.2px;line-height:1.5}
@media(max-width:900px){.zona{grid-template-columns:1fr}}

/* ---------- domande ---------- */
.faq{max-width:78ch}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-weight:500;font-size:1.06rem;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--or);border-bottom:2px solid var(--or);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--e);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 0 22px;color:var(--ink-2);max-width:68ch}
/* apertura fluida in tempo reale, solo CSS: animo grid-template-rows del
   contenitore risposta (0fr chiuso -> 1fr aperto). Zero JS, zero throttling. */
.faq details .faq__wrap{display:grid!important;grid-template-rows:0fr;transition:grid-template-rows .28s var(--e)}
.faq details[open] .faq__wrap{grid-template-rows:1fr}
.faq details .faq__clip{overflow:hidden;min-height:0}
@media(prefers-reduced-motion:reduce){.faq details .faq__wrap{transition:none}}

/* ---------- rimandi alle altre pagine ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
.cards a{
  display:block;text-decoration:none;border:1px solid var(--line);padding:22px;
  transition:border-color .18s,transform .18s var(--e);
}
.cards a:hover{border-color:var(--ink);transform:translateY(-2px)}
.cards b{display:block;font-weight:800;letter-spacing:-.025em;font-size:1.1rem;margin-bottom:6px}
.cards p{color:var(--muted);font-size:15px;line-height:1.5}
.cards span{display:inline-block;margin-top:12px;font-size:14.4px;font-weight:500;border-bottom:2px solid var(--or)}
@media(max-width:900px){.cards{grid-template-columns:1fr}}

/* ---------- chiusura ---------- */
.close{padding:clamp(46px,5vw,72px) 0;border-top:1px solid var(--line);text-align:center}
.close h2{margin-bottom:6px}
.close p{color:var(--muted);margin-bottom:26px}
.bignum{
  display:inline-block;text-decoration:none;font-weight:800;letter-spacing:-.045em;
  font-size:clamp(2.4rem,7.6vw,4.6rem);line-height:1;color:var(--ink);
  border-bottom:5px solid var(--or);padding-bottom:6px;transition:color .18s;
}
.bignum:hover{color:var(--or)}
.close .sub{margin-top:22px;font-size:15.4px}
.close .sub a{color:var(--ink);font-weight:500;text-decoration:none;border-bottom:1px solid var(--line-2)}
.close .sub a:hover{border-color:var(--ink)}

/* ---------- piede ---------- */
footer{border-top:1px solid var(--line);padding:36px 0 40px;font-size:14.6px;color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot__nav{display:flex;flex-wrap:wrap;gap:8px 22px;width:100%;margin-top:4px}
.foot__end{width:100%;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:13.4px;color:var(--muted)}
.tbd{font-style:italic}

/* mappa: etichette nostre, in italiano */
.leaflet-container{font-family:var(--sans)}
.leaflet-marker-icon.lbl{
  background:none;border:0;width:0!important;height:0!important;overflow:visible;
  font-weight:500;font-size:12px;letter-spacing:.02em;color:#4A5052;white-space:nowrap;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 8px #fff,0 0 8px #fff;
}
.leaflet-marker-icon.lbl span{position:absolute;left:0;top:0;display:block;transform:translateX(-50%)}
.leaflet-marker-icon.lbl.main{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.leaflet-marker-icon.dot{background:var(--ink);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1.5px var(--ink)}
.leaflet-control-attribution{font-size:10px}

/* barra chiamata su telefono */
.mobibar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);display:none;
  background:var(--or);color:#000;text-decoration:none;font-weight:800;font-size:1.16rem;
  align-items:center;justify-content:center;gap:10px;padding:16px;letter-spacing:-.01em;
}
.mobibar svg{width:19px;height:19px;flex:none}
@media(max-width:760px){
  .mobibar{display:flex}
  body{padding-bottom:var(--mbar)}
  .hero__in{padding-bottom:calc(clamp(30px,4.6vw,54px) + var(--mbar))}
}

/* ---------- movimento: solo l'ingresso della testata ---------- */
.rise{animation:rise .62s var(--e) both}
.rise-1{animation-delay:.05s}
.rise-2{animation-delay:.13s}
.rise-3{animation-delay:.21s}
@keyframes rise{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
.anim-off .rise{animation:none!important;opacity:1!important;transform:none!important}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rise{animation:none;opacity:1;transform:none}
  .cols li:hover{transform:none}
}

/* ---------- fascia condomini ---------- */
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,44px)}
.band h2{margin-bottom:10px}
.band p{color:var(--ink-2);max-width:56ch}
.band__go{
  flex:none;text-decoration:none;font-weight:500;font-size:1.02rem;
  border:1.5px solid var(--ink);padding:16px 22px;line-height:1;
  transition:background .18s,color .18s;
}
.band__go:hover{background:var(--ink);color:#fff}
@media(max-width:760px){.band__go{width:100%;text-align:center}}

/* ---------- promessa in testata ---------- */
/* le due cose che servono davvero a chi ha un guasto: quanto ci mettiamo
   e a che ora rispondiamo. Prima erano in grigio piccolo sotto il pulsante. */
.hero .promise{
  margin-top:12px;color:#fff;max-width:none;
  font-size:clamp(1.08rem,1.7vw,1.5rem);
  letter-spacing:-.015em;text-shadow:0 2px 20px rgba(6,7,8,.6);
}
.hero .promise b{font-weight:800}
.hero .promise i{font-style:normal;color:var(--or);padding-inline:4px}

/* ---------- sintomi ---------- */
/* chi ha un guasto non cerca un mestiere, cerca il suo problema.
   Ogni pastiglia chiama direttamente: nessun passaggio intermedio. */
.ask{margin-top:18px;color:#C9CDCE;font-size:14.6px;letter-spacing:.02em}
.symptoms{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;margin-top:11px;max-width:760px;
}
.symptoms a{
  display:flex;align-items:center;min-height:48px;padding:9px 15px;
  text-decoration:none;color:#fff;font-weight:500;font-size:15.6px;line-height:1.2;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(2px);
  transition:background .16s,border-color .16s,color .16s;
}
.symptoms a::before{
  content:'';width:3px;align-self:stretch;background:var(--or);
  margin:-10px 13px -10px -15px;flex:none;
}
.symptoms a:hover{background:var(--or);border-color:var(--or);color:#000}
.symptoms a:hover::before{background:#000}
@media(max-width:760px){
  .symptoms{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:none}
  .symptoms a{font-size:14.6px;min-height:54px;padding:10px 12px}
  .symptoms a::before{margin:-10px 10px -10px -12px}
  .ask{margin-top:16px}
}

/* ---------- riga dei numeri ---------- */
/* sostituisce il "chi siamo": stessi fatti, una riga invece di una sezione */
/* nessun bordo: era una riga chiara su fondo quasi nero, e cadeva
   esattamente sulla piega. Contro la sezione bianca sotto non serve. */
.strip{background:var(--ink);height:var(--strip)}
.strip__in{
  display:grid;grid-template-columns:repeat(4,1fr);align-content:center;
  gap:clamp(14px,2.4vw,34px);height:100%;
}
.strip__in li{display:flex;flex-direction:column;gap:3px}
.strip__in b{color:#fff;font-weight:800;letter-spacing:-.03em;font-size:clamp(1.12rem,1.8vw,1.44rem)}
.strip__in span{color:#9BA1A2;font-size:14px;line-height:1.35}
@media(max-width:760px){
  .strip{height:auto}
  .strip__in{grid-template-columns:repeat(2,1fr);gap:16px 18px;padding-block:20px}
  .strip__in b{font-size:1.08rem}
  .strip__in span{font-size:13.2px}
}

/* ---------- schermi grandi (full HD e oltre) ---------- */
/* a 1920 una colonna da 1180 lascia mezzo schermo vuoto: si allarga tutto
   di un passo, senza toccare le proporzioni sotto i 1500px */
@media(min-width:1500px){
  :root{--wrap:1340px}
  .symptoms{max-width:860px;gap:10px}
  .symptoms a{min-height:54px;font-size:16.4px}
  .hero .promise{font-size:1.62rem}
  .hero__in{padding-block:clamp(36px,2.6vw,48px)}
  :root{--strip:140px}
  .strip__in b{font-size:1.56rem}
  .strip__in span{font-size:14.8px}
}

/* ---------- da tablet in su: testata a schermo pieno ---------- */
/* testata + riga dei numeri = esattamente l'altezza della finestra, cosi'
   sotto la riga non resta una striscia bianca all'apertura */
@media(min-width:900px){
  .hero{
    /* i 2px sono i bordi inferiori di barra e navigazione */
    min-height:max(560px, calc(100svh - var(--bar) - 1px));
  }
}

/* terzo anello della legenda: i comuni a est, dove abbiamo la base */

/* ---------- riga geografica sulle pagine servizio ---------- */
/* le citta' del corridoio annunci, sopra la piega: rilevanza per la ricerca
   "servizio + citta'" e punteggio di qualita' Ads piu' alto */
.phero__geo{
  color:#F6C9A3;font-size:clamp(.92rem,1.1vw,1rem);font-weight:500;
  letter-spacing:-.01em;margin-top:14px;max-width:60ch;
  text-shadow:0 2px 20px rgba(6,7,8,.5);
}
.phero--flat .phero__geo{color:var(--or);text-shadow:none}

/* ================= testata ristrutturata ================= */
/* riga "cosa facciamo" + rassicurazione: informano in un colpo d'occhio */
.hero .lead{
  color:#fff;max-width:none;margin-top:14px;
  font-size:clamp(1.05rem,1.7vw,1.5rem);letter-spacing:-.015em;
  text-shadow:0 2px 20px rgba(6,7,8,.6);
}
.hero .lead b{font-weight:800}
.hero .reassure{
  color:#E9EBEB;max-width:52ch;margin-top:8px;
  font-size:clamp(.98rem,1.2vw,1.12rem);text-shadow:0 2px 18px rgba(6,7,8,.55);
}
@media(min-width:1500px){.hero .lead{font-size:1.62rem}}

/* pulsante secondario "Vedi i servizi" */
.ghost{
  display:inline-flex;align-items:center;text-decoration:none;
  color:#fff;border:1.5px solid rgba(255,255,255,.5);
  padding:18px 22px;font-weight:500;font-size:1.02rem;line-height:1;
  transition:border-color .18s,background .18s;
}
.ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* riga credenziali (numeri veri) in testata */
.cred{
  display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:26px;
}
.cred li{display:flex;flex-direction:column;gap:2px;position:relative;padding-left:15px}
/* [hidden] da solo perde contro display:flex qui sopra: va forzato */
.cred li[hidden]{display:none}
.cred li::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:3px;background:var(--or)}
.cred b{color:#fff;font-weight:800;letter-spacing:-.02em;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.cred span{color:#D2D6D6;font-size:13.6px;line-height:1.3}
.cred__rev .stars{color:var(--or);letter-spacing:2px}
@media(max-width:760px){
  .cred{gap:12px 20px;margin-top:22px}
  .cred b{font-size:1.05rem}
  .hero__cta .ghost{order:3}
}

/* ================= menu a tendina Servizi ================= */
.drop{position:relative;align-self:stretch;display:flex;align-items:center}
.drop>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;padding-block:6px;
  white-space:nowrap;font-size:15.2px;color:var(--muted);
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.drop>summary::-webkit-details-marker{display:none}
.drop>summary:hover{color:var(--ink)}
.drop.on>summary{color:var(--ink);font-weight:500;border-bottom-color:var(--or)}
.drop__caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--e)}
.drop[open]>summary .drop__caret{transform:translateY(1px) rotate(225deg)}

.drop__panel{
  position:absolute;left:0;top:calc(100% + 1px);z-index:60;
  width:min(92vw,640px);background:var(--bg);
  border:1px solid var(--line);border-top:2px solid var(--or);
  box-shadow:0 24px 60px -24px rgba(6,7,8,.35);
  padding:22px;
}
.drop__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 24px}
.drop__col .drop__head{
  display:block;text-decoration:none;font-weight:800;letter-spacing:-.02em;
  font-size:1rem;color:var(--ink);padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.drop__col .drop__head:hover{color:var(--or)}
.drop__col ul{display:flex;flex-direction:column;gap:6px}
.drop__col li a{text-decoration:none;color:var(--muted);font-size:14.4px;transition:color .16s,transform .16s var(--e);display:inline-block}
.drop__col li a:hover{color:var(--ink);transform:translateX(3px)}
.drop__all{display:inline-block;margin-top:18px;font-weight:500;font-size:14.6px;text-decoration:none;color:var(--ink);border-bottom:2px solid var(--or)}
.drop__all:hover{background:var(--or-soft)}

/* numero nella nav, spinto a destra */
.nav__tel{margin-left:auto;font-weight:500;color:var(--ink)!important;text-decoration:none}
.nav__tel:hover{color:var(--or)!important}

@media(max-width:760px){
  .drop__panel{position:fixed;left:8px;right:8px;width:auto;top:auto;max-height:70vh;overflow:auto}
  .drop__grid{grid-template-columns:repeat(2,1fr);gap:14px 16px}
  .nav__tel{display:none}
}

/* ================= sintomi come sezione (Cosa risolviamo) ================= */
#risolviamo .symptoms{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:none;margin-top:0;
}
#risolviamo .symptoms a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:60px;padding:14px 18px;text-decoration:none;
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  font-weight:500;font-size:16px;line-height:1.2;
  transition:border-color .16s,background .16s,transform .16s var(--e);
}
#risolviamo .symptoms a::before{content:none}
#risolviamo .symptoms a svg{width:19px;height:19px;flex:none;color:var(--or)}
#risolviamo .symptoms a:hover{border-color:var(--ink);background:var(--wash);transform:translateY(-2px)}
@media(max-width:820px){#risolviamo .symptoms{grid-template-columns:1fr 1fr}}
@media(max-width:520px){#risolviamo .symptoms{grid-template-columns:1fr}}

/* ================= lavori veri: coppia prima/dopo + galleria ================= */
/* coppia singola, larga e centrata: la storia prima->dopo che vende la ricerca perdite */
.ba--one{grid-template-columns:1fr;max-width:760px;margin-inline:0}
.ba--one .ba__slot{aspect-ratio:1}
.ba--one figcaption{margin-top:14px}

/* galleria: foto vere, didascalia che compare sopra la foto */
.gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px);
  margin-top:clamp(28px,3.6vw,44px);
}
.gallery figure{position:relative;margin:0;aspect-ratio:1;overflow:hidden;background:var(--wash)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:38px 16px 14px;color:#fff;font-size:14.6px;font-weight:500;line-height:1.35;
  background:linear-gradient(to top,rgba(9,10,11,.92),rgba(9,10,11,.55) 55%,rgba(9,10,11,0));
  transform:translateY(0);
}
@media(max-width:820px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.gallery{grid-template-columns:1fr}.gallery figure{aspect-ratio:4/3}}

/* ================= voce del titolare: virgolettato umano ================= */
.voice{border-left:3px solid var(--or);padding:2px 0 2px 22px;margin-top:clamp(22px,2.6vw,32px);max-width:60ch}
.voice p{font-size:clamp(1.12rem,1.7vw,1.44rem);font-weight:500;letter-spacing:-.02em;line-height:1.28;color:var(--ink);text-wrap:balance}
.voice cite{display:block;margin-top:12px;font-style:normal;font-size:14.6px;color:var(--muted)}


/* ---------- accessibilita' tocco su telefono: bersagli >= 44px ---------- */
@media(max-width:760px){
  .topnav a{min-height:44px}
  .drop>summary{min-height:44px}
  .drop__col li a{padding-block:7px}          /* sottoservizi piu' facili da toccare */
  .drop__all{padding-block:8px;display:inline-block}
}