/* ============================================================
   assets/css/prezzi.css
   Sections shared by EVERY service page (and, later, the city
   pages). Loaded by service pages only — never by the homepage,
   which uses none of it.

   Load order: global.css -> prezzi.css -> <service>.css
   so a page can still override a shared section locally.

   Tokens, .container, .btn and the header/footer/hero chrome stay
   in global.css and are never redefined here.

   Sections:
     1 pricing  ("Quanto costa un intervento ...")
     2 coverage ("Dove operiamo" — region cards + city links)

   Design is the /intervento-idraulico/ variant (left-aligned,
   1240px). The fabbro page previously carried a centred 1160px
   copy of the same section; both now render from this one
   definition.

   Deliberately NOT here: the "servizi"/"categorie" and "emergenza"
   blocks. They look shared from their class names but are genuinely
   different components on the two pages (fabbro's emergency is a
   centred text panel, idraulico's is two columns with a photo and a
   badge), so they stay page-local until a second page really does
   share the same design.
============================================================ */


/* ============================================================
   1. PRICING
============================================================ */
.svc-pricing{
  background:var(--paper-050);
  /* clamped rather than a flat 88px so it doesn't swallow a phone
     screen; identical to 88px from ~1250px up */
  padding:clamp(60px,7vw,88px) 5vw;
}
.svc-pricing-inner{ max-width:1240px; margin:0 auto; }

.svc-pricing-pill{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--amber-600); color:var(--paper-000);
  font-size:13px; font-weight:700; letter-spacing:.03em;
  padding:10px 20px 10px 18px; border-radius:999px;
  margin-bottom:26px;
}
.svc-pricing-pill-bar{
  width:16px; height:2px; border-radius:2px; background:var(--paper-000);
}

.svc-pricing-title{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:clamp(28px,3vw,38px); font-weight:800;
  color:var(--green-900); letter-spacing:-.01em;
}

.svc-pricing-intro{
  margin:0 0 8px;
  font-size:16.5px; line-height:1.65; color:var(--ink-700);
  max-width:760px;
}
.svc-pricing-intro a{
  color:var(--green-700); font-weight:700; text-decoration:underline;
}
.svc-pricing-link-full{
  display:inline-block; margin-top:4px;
  font-size:16px; font-weight:700;
  color:var(--green-900); text-decoration:underline;
}

.svc-pricing-cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; margin:48px 0 40px;
}
.svc-pricing-card{
  background:var(--paper-000);
  border:1px solid var(--line-200); border-radius:18px;
  padding:30px 28px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.svc-pricing-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(14,57,94,.1);
  border-color:transparent;
}

.svc-pricing-label{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.03em;
  color:var(--green-700); margin-bottom:16px;
}
.svc-pricing-label-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--amber-500); flex-shrink:0;
}
.svc-pricing-value{
  font-family:var(--font-display);
  font-size:27px; font-weight:800; line-height:1.15;
  color:var(--green-900); margin-bottom:10px;
}
.svc-pricing-note{ font-size:14.5px; line-height:1.5; color:var(--ink-700); }

.svc-pricing-terms{
  font-size:14.5px; line-height:1.7; color:var(--ink-700);
  max-width:900px; margin:0 0 40px;
}
.svc-pricing-terms strong{ color:var(--green-900); }

.svc-pricing-cta{
  display:inline-flex; align-items:center;
  background:transparent; color:var(--green-900);
  border:2px solid var(--green-900);
  font-family:var(--font-display);
  font-size:15.5px; font-weight:700; text-decoration:none;
  padding:15px 28px; border-radius:999px;
  transition:background .15s ease, color .15s ease;
}
.svc-pricing-cta:hover{ background:var(--green-900); color:var(--paper-000); }


/* ============================================================
   2. COVERAGE — "Dove operiamo"
   <details> region cards holding the city links, so the disclosure
   works with JavaScript disabled.
============================================================ */
.svc-coverage{
  background:var(--green-050);
  padding:clamp(60px,7vw,88px) 5vw;
}
.svc-coverage-inner{ max-width:1240px; margin:0 auto; }
.svc-coverage-head{ max-width:640px; margin-bottom:44px; }

.svc-coverage-eyebrow{
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.svc-coverage-eyebrow-bar{
  width:28px; height:3px; border-radius:2px;
  background:var(--amber-600); flex-shrink:0;
}
.svc-coverage-eyebrow-text{
  font-size:13px; font-weight:700; letter-spacing:.03em;
  color:var(--amber-600);
}
.svc-coverage-title{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-size:clamp(28px,3vw,38px); font-weight:800;
  color:var(--green-900); letter-spacing:-.01em;
}
.svc-coverage-sub{
  margin:0; font-size:16px; line-height:1.6; color:var(--ink-700);
}

.svc-region-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.svc-region-card{
  background:var(--paper-000);
  border:1px solid var(--line-200); border-radius:16px;
  padding:4px 22px; height:max-content;
}
.svc-region-card summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:12px;
  padding:20px 0;
}
.svc-region-card summary::-webkit-details-marker{ display:none; }

.svc-region-pin{
  width:34px; height:34px; border-radius:10px;
  background:var(--green-100); color:var(--green-900);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.svc-region-pin svg{ width:16px; height:16px; }

.svc-region-name-wrap{ flex:1; min-width:0; }
.svc-region-name{
  font-family:var(--font-display);
  font-size:15.5px; font-weight:700; color:var(--green-900);
}
.svc-region-count{
  display:block; font-size:12.5px; color:var(--ink-500); margin-top:2px;
}
.svc-region-plus{
  width:24px; height:24px; border-radius:50%;
  background:var(--amber-050); color:var(--amber-600);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:17px; font-weight:700;
  transition:transform .15s ease;
}
.svc-region-card[open] .svc-region-plus{ transform:rotate(45deg); }

.svc-region-cities{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(14px,1.8vw,26px);
  list-style:none; margin:0; padding:4px 0 22px;
}
/* A row is an <li> (fabbro) or a bare <a> (the other two hubs). */
.svc-region-cities > li,
.svc-region-cities > a{
  display:flex;
  /* flex-start, not center: a long city name wraps to two lines in a card
     this narrow, and centred would float the dot into the middle of them */
  align-items:flex-start; gap:9px;
  min-width:0;
  padding:8px 2px;
  border-bottom:1px solid var(--line-200);
}
.svc-region-cities > li::before,
.svc-region-cities > a::before{
  content:""; flex-shrink:0;
  width:5px; height:5px; border-radius:50%;
  background:var(--amber-500);
  /* nudged down to sit on the first line's centre rather than the row's */
  margin-top:7px;
}
.svc-region-cities a{
  min-width:0;
  font-size:13.5px; font-weight:600; line-height:1.45;
  color:var(--green-700); text-decoration:none;
  transition:color .15s ease;
}
.svc-region-cities a:hover{ color:var(--green-900); }
.svc-region-cities > li > a{ flex:1 1 auto; }

/* Optional CTA under the region grid (fabbro uses it). */
.svc-coverage-cta{ text-align:center; margin-top:40px; }


/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:980px){
  .svc-region-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .svc-pricing-cards{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .svc-region-grid{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .svc-pricing-card{ padding:24px 22px; }
  .svc-region-card{ padding:2px 18px; }
  .svc-pricing-cta{ justify-content:center; }
}


/* ============================================================
   3. /prezzi/ — TARIFFE
   ------------------------------------------------------------
   PAGE-SCOPED. Every selector below is prefixed .pz- and no .pz-
   class appears in the markup of any other page, so the 396
   service pages that load this file render exactly as before —
   they only carry the extra bytes.

   The price tables stay real <table>s. On phones each row folds
   into a card and every cell labels itself from the data-label
   attribute the source markup already carries, so nothing is
   duplicated in the HTML to get the card view. The <thead> is
   not hidden on mobile: it becomes a compact legend, which is
   the only place the time ranges ("Lun–Ven, 8:00–17:00") are
   written, and they would otherwise be lost.
============================================================ */

/* ---------- shared shell ---------- */
.pz-inner{ max-width:1240px; margin:0 auto; }
.pz-inner--narrow{ max-width:900px; }

.pz-section{ padding:clamp(60px,7vw,88px) 5vw; }
.pz-section--alt{ background:var(--paper-050); }
.pz-section--tint{ background:var(--green-050); }

.pz-head{ max-width:70ch; margin:0 0 clamp(28px,3.5vw,44px); }
.pz-head h2:where(:not(.h1-look)){
  margin:0 0 14px;
  color:var(--green-900);
  font-size:clamp(1.5rem,1.25rem + 1.2vw,2.15rem);
  line-height:1.14;
  letter-spacing:-.02em;
}
.pz-lead{
  margin:0;
  max-width:62ch;
  font-size:1.02rem;
  line-height:1.7;
  color:var(--ink-500);
}
.pz-note{
  margin:clamp(22px,3vw,32px) 0 0;
  padding:16px 20px;
  border-left:3px solid var(--amber-500);
  background:var(--amber-050);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  font-size:.95rem;
  line-height:1.65;
  color:var(--ink-700);
}
.pz-note strong{ color:var(--green-900); }


/* ============================================================
   3.1 HERO
============================================================ */
.pz-hero{
  position:relative;
  overflow:hidden;
  background:var(--green-050);
  padding:clamp(40px,6vw,76px) 5vw clamp(44px,6vw,80px);
}
.pz-hero__shape{
  position:absolute;
  top:-48%; right:-10%;
  width:min(60vw,680px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,
              rgba(41,145,214,.16) 0%,
              rgba(255,81,0,.08) 45%,
              transparent 70%);
  pointer-events:none;
  z-index:0;
}
.pz-hero__inner{ position:relative; z-index:1; max-width:1240px; margin:0 auto; }

.pz-hero h1,
.pz-hero h2:where(.h1-look){
  margin:0 0 18px;
  max-width:18ch;
  color:var(--green-900);
  font-size:clamp(1.95rem,1.4rem + 2.4vw,3.1rem);
  line-height:1.05;
  letter-spacing:-.025em;
}
.pz-hero__lead{
  margin:0 0 clamp(24px,3vw,32px);
  max-width:60ch;
  font-size:clamp(1rem,.97rem + .2vw,1.1rem);
  line-height:1.7;
  color:var(--ink-700);
}

.pz-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  margin:0 0 clamp(26px,3.4vw,36px);
  padding:0;
}
.pz-point{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 16px 9px 13px;
  border:1px solid var(--line-200);
  border-radius:999px;
  background:var(--paper-000);
  font-size:.9rem;
  font-weight:600;
  line-height:1.3;
  color:var(--green-900);
}
.pz-point::before{
  content:"";
  flex-shrink:0;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--green-700);
  /* white tick, drawn rather than shipped as an asset */
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat,
        linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat,
        linear-gradient(#000,#000);
  mask-composite:exclude;
}


/* ============================================================
   3.2 SERVICE TABS + PRICE TABLES
   ------------------------------------------------------------
   One table visible at a time, switched by clicking a service
   name — the behaviour the export has, rebuilt without JS.

   Three same-name radios sit before the panels; each :checked
   radio reveals its sibling panel and lights its own label.
   site.js is untouched. The radios are moved off-screen rather
   than display:none so they stay keyboard-reachable: arrow keys
   move between services, exactly like a real tab strip.

   The labels are NOT headings — the export carries these three
   words as <button>s and the page's heading hierarchy is
   reproduced exactly (hard rule 9).

   A link such as /prezzi/#fabbro picks the tab: site.js §5 ticks
   the matching radio and scrolls this heading into view.
============================================================ */
.pz-tabs{ position:relative; }
/* Where site.js scrolls to when a link names a service: keep the
   heading clear of the sticky header. */
.pz-section .pz-head{ scroll-margin-top:calc(var(--header-h) + var(--space-s)); }

.pz-tabs__input{
  position:absolute;
  width:1px; height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}

.pz-tabs__list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 20px;
  padding:0;
}

.pz-tab{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;                 /* tap target */
  padding:11px 22px;
  border:1px solid var(--line-200);
  border-radius:999px;
  background:var(--paper-000);
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(.95rem,.92rem + .2vw,1.05rem);
  line-height:1.2;
  color:var(--ink-700);
  user-select:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.pz-tab::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:var(--line-200);
  flex-shrink:0;
  transition:background .18s ease, transform .18s ease;
}
.pz-tab:hover{ border-color:var(--amber-400); color:var(--green-900); }

/* Panels are hidden until their radio is checked. */
.pz-panel{ display:none; }

/* --- Elettricista --- */
#pz-r-elettricista:checked ~ .pz-tabs__list .pz-tab[for="pz-r-elettricista"],
#pz-r-idraulico:checked    ~ .pz-tabs__list .pz-tab[for="pz-r-idraulico"],
#pz-r-fabbro:checked       ~ .pz-tabs__list .pz-tab[for="pz-r-fabbro"]{
  background:var(--green-900);
  border-color:var(--green-900);
  color:var(--paper-000);
}
#pz-r-elettricista:checked ~ .pz-tabs__list .pz-tab[for="pz-r-elettricista"]::before,
#pz-r-idraulico:checked    ~ .pz-tabs__list .pz-tab[for="pz-r-idraulico"]::before,
#pz-r-fabbro:checked       ~ .pz-tabs__list .pz-tab[for="pz-r-fabbro"]::before{
  background:var(--amber-500);
  transform:scale(1.15);
}

#pz-r-elettricista:checked ~ #pz-p-elettricista,
#pz-r-idraulico:checked    ~ #pz-p-idraulico,
#pz-r-fabbro:checked       ~ #pz-p-fabbro{ display:block; }

/* Keyboard focus has to show on the label, since the radio itself
   is off-screen. */
#pz-r-elettricista:focus-visible ~ .pz-tabs__list .pz-tab[for="pz-r-elettricista"],
#pz-r-idraulico:focus-visible    ~ .pz-tabs__list .pz-tab[for="pz-r-idraulico"],
#pz-r-fabbro:focus-visible       ~ .pz-tabs__list .pz-tab[for="pz-r-fabbro"]{
  outline:3px solid var(--green-500);
  outline-offset:3px;
}

/* Printing a tabbed page would lose two services out of three. */
@media print{
  .pz-panel{ display:block !important; }
  .pz-tabs__list{ display:none; }
}

.pz-table-wrap{
  border:1px solid var(--line-200);
  border-radius:var(--radius-m);
  background:var(--paper-000);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}

.pz-table{
  width:100%;
  border-collapse:collapse;
  font-size:.93rem;
}

.pz-table thead th{
  padding:14px 18px;
  text-align:left;
  vertical-align:bottom;
  background:var(--green-900);
  color:var(--paper-000);
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1.25;
}
.pz-table thead th span{
  display:block;
  margin-top:5px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.01em;
  text-transform:none;
  color:rgba(255,255,255,.66);
  white-space:nowrap;
}

.pz-table tbody th{
  padding:14px 18px;
  text-align:left;
  vertical-align:middle;
  font-weight:650;
  line-height:1.45;
  color:var(--green-900);
  border-top:1px solid var(--line-100);
}
.pz-table tbody td{
  padding:14px 18px;
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--ink-700);
  border-top:1px solid var(--line-100);
}
.pz-table tbody tr:nth-child(even) th,
.pz-table tbody tr:nth-child(even) td{ background:var(--green-050); }

/* Out-of-hours columns carry the premium — mark them, don't explain
   them in words the source does not have. */
.pz-table tbody td:nth-child(4),
.pz-table tbody td:nth-child(5){ color:var(--amber-600); }


/* ---------- phones: each row becomes a card ---------- */
@media (max-width:860px){
  .pz-table-wrap{ border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
  .pz-table,
  .pz-table tbody,
  .pz-table tr,
  .pz-table tbody th,
  .pz-table tbody td{ display:block; width:100%; }

  /* The header row is the only place the time ranges are written,
     so it stays — reflowed as a legend above the cards. */
  .pz-table thead{ display:block; }
  .pz-table thead tr{
    display:grid;
    gap:8px;
    padding:16px 18px;
    border-radius:var(--radius-m);
    background:var(--green-900);
  }
  .pz-table thead th{
    padding:0;
    background:none;
    border:0;
    font-size:.74rem;
  }
  .pz-table thead th:first-child{
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
  .pz-table thead th span{ display:inline; margin:0 0 0 6px; }

  .pz-table tbody tr{
    margin-top:14px;
    border:1px solid var(--line-200);
    border-radius:var(--radius-m);
    background:var(--paper-000);
    box-shadow:var(--shadow-card);
    overflow:hidden;
  }
  .pz-table tbody tr:nth-child(even) th,
  .pz-table tbody tr:nth-child(even) td{ background:none; }

  .pz-table tbody th{
    padding:14px 16px;
    border-top:0;
    border-bottom:1px solid var(--line-200);
    background:var(--green-050);
    font-size:.97rem;
  }
  .pz-table tbody td{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    padding:11px 16px;
    border-top:0;
  }
  .pz-table tbody td + td{ border-top:1px solid var(--line-100); }

  /* The label comes from the attribute already in the markup. */
  .pz-table tbody td::before{
    content:attr(data-label);
    font-weight:600;
    font-size:.86rem;
    letter-spacing:.01em;
    color:var(--ink-500);
    text-transform:none;
    white-space:normal;
  }
}


/* ============================================================
   3.3 INCLUDED / NOT INCLUDED
============================================================ */
.pz-split{
  display:grid;
  gap:var(--space-m);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}

.pz-card{
  padding:clamp(24px,3vw,34px) clamp(20px,2.5vw,30px);
  border:1px solid var(--line-200);
  border-radius:var(--radius-m);
  background:var(--paper-000);
  box-shadow:var(--shadow-card);
}
.pz-card h3{
  margin:0 0 16px;
  font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);
  font-weight:700;
  line-height:1.3;
  color:var(--green-900);
}
.pz-card p{
  margin:0;
  font-size:.97rem;
  line-height:1.7;
  color:var(--ink-700);
}

.pz-card--yes{ border-top:4px solid var(--green-700); }
.pz-card--no{ border-top:4px solid var(--amber-500); }

.pz-list{
  display:grid;
  gap:11px;
  margin:0;
  padding:0;
  font-size:.97rem;
  line-height:1.6;
  color:var(--ink-700);
}
.pz-list li{ position:relative; padding-left:28px; }
.pz-list li::before{
  content:"";
  position:absolute;
  left:0; top:.34em;
  width:16px; height:16px;
  border-radius:50%;
  flex-shrink:0;
}
.pz-card--yes .pz-list li::before{
  background:var(--green-100);
  box-shadow:inset 0 0 0 1px var(--green-500);
}
.pz-card--no .pz-list li::before{
  background:var(--amber-050);
  box-shadow:inset 0 0 0 1px var(--amber-400);
}


/* ============================================================
   3.4 FACTORS
============================================================ */
.pz-grid{
  --col-min:260px; --gap:var(--space-m); --cols-max:3;
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(
    auto-fit,
    minmax(max(min(var(--col-min),100%),
               (100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
  );
}

.pz-factor{
  padding:clamp(22px,2.6vw,28px) clamp(20px,2.4vw,26px);
  border:1px solid var(--line-200);
  border-left:3px solid var(--green-700);
  border-radius:var(--radius-s);
  background:var(--paper-000);
}
.pz-factor h3{
  margin:0 0 10px;
  font-size:1.02rem;
  font-weight:700;
  line-height:1.3;
  color:var(--green-900);
}
.pz-factor p{
  margin:0;
  font-size:.94rem;
  line-height:1.65;
  color:var(--ink-700);
}


/* ============================================================
   3.5 STEPS
============================================================ */
.pz-steps{
  --col-min:240px; --gap:var(--space-m); --cols-max:4;
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(
    auto-fit,
    minmax(max(min(var(--col-min),100%),
               (100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
  );
  margin:0; padding:0;
}

.pz-step{
  position:relative;
  padding:clamp(24px,3vw,30px) clamp(20px,2.4vw,26px);
  border-radius:var(--radius-m);
  background:var(--paper-000);
  box-shadow:var(--shadow-card);
}
.pz-step__num{
  display:grid;
  place-items:center;
  width:40px; height:40px;
  margin-bottom:16px;
  border-radius:50%;
  background:var(--green-900);
  color:var(--paper-000);
  font-family:var(--font-display);
  font-weight:800;
  font-size:1rem;
  line-height:1;
}
.pz-step h3{
  margin:0 0 10px;
  font-size:1.02rem;
  font-weight:700;
  line-height:1.3;
  color:var(--green-900);
}
.pz-step p{
  margin:0;
  font-size:.94rem;
  line-height:1.65;
  color:var(--ink-700);
}


/* ============================================================
   3.6 CLOSING CTA COPY
   .cta-band itself is global.css; this only lets the band hold a
   heading plus a line of copy instead of a single lead.
============================================================ */
.pz-cta-copy{ flex:1 1 min(100%,520px); }
.pz-cta-copy h2:where(:not(.h1-look)){
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem);
  line-height:1.15;
  letter-spacing:-.015em;
}
.pz-cta-copy p{
  margin:0;
  font-size:.98rem;
  line-height:1.6;
  color:rgba(255,255,255,.78);
}
/* ============================================================
   assets/css/spurgo.css
   /spurgo-pozzi-neri/ — page-specific sections only.

   Tokens, .container, .btn, the header/footer chrome, the sticky
   call bar, the .hero--split hero, .features__grid/.feature-card
   and the "Dove operiamo" accordion (.svc-coverage/.svc-region-*,
   prezzi.css) all come from global.css / prezzi.css and are never
   redefined here (CLAUDE.md, "Section CSS" rule 2). Everything
   below is prefixed sp- so it cannot collide with a shared
   component, now or later.

   Sections: steps - story - services - coverage (prezzi.css) - closing
============================================================ */

/* ---- Steps: three-up onboarding strip, centred cards ---- */
.sp-steps{
  background:var(--paper-000);
  padding:clamp(56px,7vw,88px) 5vw clamp(40px,5vw,64px);
}
.sp-steps-inner{ max-width:1080px; margin:0 auto; }

.sp-steps .feature-card{
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.sp-steps .feature-card__icon{
  width:84px; height:84px; border-radius:50%;
  background:var(--green-100);
  margin-bottom:22px;
}
.sp-steps .feature-card__icon img{ width:52px; height:52px; object-fit:contain; }
.sp-steps .feature-card p{ text-align:center; }

/* Plain paragraph in the source, not a heading (hard rule 9) — styled
   to read as this card's title regardless of tag, same treatment
   /intervento-apertura-porte/'s .fb-step-title gives its own
   heading-less step labels. */
.sp-steps .sp-step-title{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:1.15rem; font-weight:800; color:var(--green-900);
}

@media (max-width:560px){
  .sp-steps .feature-card__icon{ width:68px; height:68px; }
  .sp-steps .feature-card__icon img{ width:42px; height:42px; }
}

/* ============================================================
   Story: intro + three long-copy sub-sections.
   These carry real paragraphs, not blurbs, so an editorial rail
   (numbered dot + connector line) reads better than squeezing them
   into equal-width cards — same visual family as
   /intervento-idraulico/'s .idr-editorial, rebuilt here with its
   own prefix since spurgo.css cannot reach idraulico.css's classes.
============================================================ */
.sp-story{
  background:var(--paper-050);
  padding:clamp(56px,7vw,88px) 5vw;
}
.sp-story-inner{ max-width:900px; margin:0 auto; }

.sp-story-intro{ margin:0 0 clamp(40px,5vw,56px); }
.sp-story-intro h2{ margin:0 0 16px; color:var(--green-900); }
.sp-story-intro p{ margin:0; font-size:16.5px; line-height:1.75; }
.sp-story-intro p a{ color:var(--green-700); font-weight:700; }
.sp-story-intro p a:hover{ color:var(--green-900); }

.sp-story-grid{ display:grid; gap:clamp(36px,4vw,52px); }

.sp-story-block{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:24px;
}
.sp-story-rail{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.sp-story-dot{
  width:44px; height:44px; border-radius:50%;
  background:var(--amber-500); color:var(--paper-000);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 8px 20px rgba(255,81,0,.3);
}
.sp-story-dot svg{ width:22px; height:22px; }
.sp-story-line{
  flex:1; width:2px; border-radius:1px;
  background:linear-gradient(var(--green-700),transparent);
  opacity:.35;
}
.sp-story-block:last-child .sp-story-line{ display:none; }

.sp-story-body h3{ margin:4px 0 14px; color:var(--green-900); line-height:1.35; }
.sp-story-body p{ margin:0 0 14px; font-size:16px; line-height:1.75; }
.sp-story-body p:last-child{ margin-bottom:0; }
.sp-story-body a{ color:var(--green-700); font-weight:700; }
.sp-story-body a:hover{ color:var(--green-900); }

@media (max-width:560px){
  .sp-story-block{ grid-template-columns:34px 1fr; gap:16px; }
  .sp-story-dot{ width:34px; height:34px; }
  .sp-story-dot svg{ width:17px; height:17px; }
}

/* ---- Full-width prose: headings + text, no photo column.
   Verona's source runs an intro block ahead of the usual photo+text
   row — plain typography, not .about__grid. ---- */
.sp-prose{
  background:var(--paper-000);
  padding:clamp(40px,5vw,56px) 5vw;
}
.sp-prose-inner{ max-width:900px; margin:0 auto; }
.sp-prose h2{ margin:0 0 16px; color:var(--green-900); }
.sp-prose h3{ margin:32px 0 14px; color:var(--green-900); }
.sp-prose p{ margin:0 0 16px; font-size:16.5px; line-height:1.75; }
.sp-prose p:last-child{ margin-bottom:0; }
.sp-prose a{ color:var(--green-700); font-weight:700; }
.sp-prose a:hover{ color:var(--green-900); }

/* ---- Services: phone banner + two full-width split cards ---- */
.sp-services{
  background:var(--paper-000);
  padding:clamp(56px,7vw,88px) 5vw;
}
.sp-services-inner{ max-width:1000px; margin:0 auto; text-align:center; }

.sp-services-title{
  margin:0 0 18px;
  font-size:clamp(28px,3vw,38px); font-weight:800;
  color:var(--green-900); letter-spacing:-.01em;
}
.sp-services-rule{
  width:72px; height:4px; margin:0 auto 28px; border:0; border-radius:2px;
  background:var(--amber-500);
}
.sp-services-subtitle{
  margin:0 0 14px; font-size:clamp(1.05rem,1rem + .4vw,1.3rem);
  color:var(--ink-700);
}
.sp-services-call{ margin:0 0 44px; font-size:1.15rem; font-weight:800; }
.sp-services-call a{ color:var(--amber-600); }
.sp-services-call a:hover{ color:var(--amber-500); }

/* "DOVE OPERIAMO" heading — the source colours this one orange,
   unlike "I SERVIZI"'s navy, so it gets its own title class rather
   than reusing .sp-services-title with an inline-style override. */
.sp-coverage-title{
  margin:0 0 18px;
  font-size:clamp(28px,3vw,38px); font-weight:800;
  color:var(--amber-500); letter-spacing:-.01em;
}

.sp-services-grid{
  --col-min:320px; --gap:28px; --cols-max:2;
  text-align:left;
}
.sp-services-grid .feature-card{
  display:flex; gap:24px; align-items:flex-start;
}
.sp-services-grid .feature-card__icon{
  width:72px; height:72px; border-radius:16px;
  background:var(--green-100); flex-shrink:0; margin-bottom:0;
}
.sp-services-grid .feature-card__icon img{ width:44px; height:44px; object-fit:contain; }

/* A card that carries its own call button (Piacenza's second card)
   needs the same wrap guard every other long CTA label on this site
   needs: .btn is nowrap by default, so a full "CHIAMA! <number>"
   label forces the grid item's min-content width past its track at
   some in-between widths. */
.sp-services-grid .feature-card a.btn{
  white-space:normal; max-width:100%; margin-top:8px;
}

@media (max-width:640px){
  .sp-services-grid .feature-card{ flex-direction:column; align-items:center; text-align:center; }
}

/* A call button sitting under an .about__media photo, rather than
   inside .about__content, needs its own top margin. */
.about__media .btn{ margin-top:20px; }

/* global.css paints every link inside .about__content green-500
   (0,1,1), which also catches a call button placed in the text
   column and turns its label blue — same specificity trap
   /intervento-idraulico/'s .idr-intro already documents. Put the
   button's own colour back; it needs its own top margin too, since
   .about__content p only spaces paragraphs from each other. */
.about__content a.btn,
.about__content a.btn:hover,
.about__content a.btn:focus-visible{ color:var(--paper-000); }
.about__content a.btn{ margin-top:8px; }

/* ---- City-page closing CTA strip: icon + heading + line, paired
   with a call button — text left, button right, wraps on mobile.
   Same shape /intervento-idraulico/'s .idr-services-closing already
   established, rebuilt here with spurgo's own prefix. ---- */
.sp-city-cta{
  margin-top:clamp(40px,5vw,56px);
  background:var(--green-050);
  border:1px solid var(--line-200);
  border-radius:var(--radius-l);
  padding:clamp(24px,3vw,34px);
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:24px;
  text-align:left;
}
.sp-city-cta-media{ display:flex; align-items:center; gap:18px; flex:1 1 320px; }
.sp-city-cta-media img{ width:64px; height:64px; object-fit:contain; flex-shrink:0; }
.sp-city-cta-media h4{ margin:0 0 6px; color:var(--green-900); }
.sp-city-cta-media p{ margin:0; font-weight:700; color:var(--ink-700); }
.sp-city-cta .btn{ flex-shrink:0; white-space:normal; }

/* ---- Closing band: dark, single centred column ---- */
.sp-closing{
  background:var(--green-900);
  padding:clamp(64px,8vw,96px) 5vw;
  text-align:center;
}
.sp-closing-inner{ max-width:720px; margin:0 auto; }
.sp-closing h2{ margin:0 0 20px; color:var(--paper-000); }
.sp-closing p{ margin:0 0 32px; color:var(--green-100); font-size:16.5px; line-height:1.75; }