/* ============================================================
   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);
}
/* ============================================================
   condizionatore.css — /pronto-intervento-condizionatore/ and its
   city pages. Loaded after global.css and prezzi.css.

   Only what global.css and prezzi.css do not provide. Tokens,
   .btn, .container, header and footer are never redefined here.

   The CITY PAGE section below is copied from elettricista.css (the
   parts bin model: two service files never load together, so the
   same class names cannot collide). City pages here are built to
   look like /intervento-elettricista/elettricista-milano/.
============================================================ */


/* HERO H1 — takes global.css's hero size and capitals like every other
   service page (owner request). One physical limit: "CONDIZIONATORE" is
   ~9.9em wide and a word cannot wrap, so at the global size it spills
   out of the copy column and into the photo between 980px (hero goes
   two-up) and ~1250px. min() caps the size at 4.4vw only in that band;
   at 1280px it is 56px against the global 57.6px, and above ~1310px the
   global size applies untouched. Below 980px the hero is one column and
   the word already fits. */
@media (min-width:980px){
  .hero.hero--split h1{ font-size:min(clamp(2.1rem,1.4rem + 3vw,3.6rem),4.4vw); }
}


/* ------------------------------------------------------------
   HUB — "PRONTO INTERVENTO CONDIZIONATORE 24 ORE": space between
   the paragraph and the CHIAMA SUBITO button that follows it.
------------------------------------------------------------ */
#condizionatore-24-ore .about__content + p{ margin-top:var(--space-m); }


/* ============================================================
   CITY PAGE — copied from elettricista.css
============================================================ */

/* Section headings: green, a step down from global.css's h2. */
.section-title {
  margin: 0 0 var(--space-s);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
  font-weight: 800;
  color: var(--green-900);
  letter-spacing: -0.01em;
}

.section-title--center { text-align: center; }


/* Hero trust list two-up on a phone (see elettricista.css). */
@media (max-width: 560px) {
  .hero--city .hero__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }

  .hero--city .hero__trust li { font-size: 0.82rem; gap: 8px; }

  .hero--city .hero__trust svg { width: 17px; height: 17px; }
}


/* ------------------------------------------------------------
   PROSE BANDS
------------------------------------------------------------ */
.city-prose { background: var(--paper-000); }

.city-prose__col { max-width: none; }

/* Round icon badge floated into the copy. */
.city-prose__icon {
  float: left;
  shape-outside: circle(50%);
  margin: 2px 20px 12px 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.city-prose__col p {
  margin: 0 0 var(--space-s);
  font-size: 1.03rem;
  line-height: 1.75;
  color: var(--ink-700);
  text-align: left;
}

.city-prose__col p:last-child { margin-bottom: 0; }

.city-prose__col strong { color: var(--green-900); }

.city-prose__col a {
  color: var(--green-500);
  font-weight: 700;
  text-decoration: underline;
}

.city-prose__col a:hover { color: var(--green-700); }

.city-prose__col a.btn { text-decoration: none; }

.city-prose__col a.btn--primary,
.city-prose__col a.btn--primary:hover { color: var(--paper-000); }

/* Sub-headings inside running copy (a second <h3> mid-column). */
.city-prose h3,
.city-prose h4 {
  margin: 0 0 var(--space-s);
}

.city-prose__col p + h3 { margin-top: var(--space-l); }


/* Callout — the orange call line. */
.city-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  margin: 0 0 var(--space-s) !important;
  padding: var(--space-s) var(--space-m);
  background: var(--amber-050);
  border-radius: var(--radius-m);
  border: 1px solid var(--line-200);
}

.city-prose__col .city-callout__tel {
  color: var(--amber-600);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  text-decoration: none;
  line-height: 1.2;
}

.city-prose__col .city-callout__tel:hover { text-decoration: underline; }


/* Split prose — copy left, photo right, from 992px up. */
.city-prose__grid {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.city-prose--split .city-prose__col { max-width: none; }

.city-prose__media { min-width: 0; }

.city-prose__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop);
}

@media (max-width: 991px) {
  .city-prose__media { max-width: 520px; margin-inline: auto; }
}

@media (min-width: 992px) {
  .city-prose--split .city-prose__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .city-prose--split .section-title {
    font-size: clamp(1.25rem, 0.7rem + 0.95vw, 1.75rem);
    line-height: 1.2;
  }
}


/* ------------------------------------------------------------
   WHY / SERVICES PANEL — tinted band: title + intro, an orange
   call strip, then a white panel with the keyword chips.
------------------------------------------------------------ */
.city-why { background: var(--green-050); }

.city-why__head {
  max-width: var(--max-w);
  margin: 0 0 var(--space-xl);
  text-align: left;
}

.city-why__title {
  margin: 0 0 var(--space-s);
  font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.375rem);
  font-weight: 800;
  color: var(--green-900);
  letter-spacing: -0.01em;
}

.city-why__intro {
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.city-why__intro strong { color: var(--green-900); }

.city-why__close {
  margin: 0 0 var(--space-xl);
  padding: var(--space-m) clamp(20px, 3vw, 32px);
  background: var(--amber-050);
  border-left: 4px solid var(--amber-500);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  font-size: 1.01rem;
  line-height: 1.7;
  color: var(--ink-700);
}

.city-why__close strong { color: var(--green-900); }

.city-why__close a {
  color: var(--amber-600);
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

.city-why__close a:hover { color: var(--amber-500); }

.city-why__panel {
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 44px);
}

.city-why__subhead {
  margin: 0 0 var(--space-s);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.75vw, 1.6rem);
  font-weight: 800;
  color: var(--green-900);
  line-height: 1.25;
}

.city-why__lead {
  margin: 0 0 var(--space-m);
  font-size: 1.01rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 72ch;
}

.city-why__lead strong { color: var(--green-900); }

.city-why__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
}

@media (min-width: 760px)  { .city-why__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .city-why__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.city-why__chips li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: 10px 14px;
  background: var(--green-100);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-s);
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--green-900);
}

.city-why__chips li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.42em;
  border-radius: 50%;
  background: var(--amber-500);
  flex-shrink: 0;
}

/* Condizionatore addition: the call button under the chips. */
.city-why__cta { margin: var(--space-m) 0 0; }

@media (max-width: 560px) {
  .city-why__panel   { padding: 20px 18px; }
  .city-why__chips li { padding: 10px 12px; font-size: 0.78rem; }
  .city-why__cta .btn { width: 100%; justify-content: center; }
}


/* ------------------------------------------------------------
   SERVICE CARDS — heading + paragraph cards, centred.
   Condizionatore change: the card titles are <h3> on the old
   Milano page, so the h4 rule covers h3 too.
------------------------------------------------------------ */
.city-services { background: var(--paper-000); }

.city-services__head { margin-bottom: var(--space-l); }

.city-svc-grid {
  --col-min: 300px;
  --gap: clamp(20px, 2.4vw, 32px);
  --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
    )
  );
}

.city-svc-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 3vw, 32px);
  transition: transform .22s cubic-bezier(.2,.7,.3,1),
              box-shadow .22s cubic-bezier(.2,.7,.3,1),
              border-color .22s ease;
}

.city-svc-card:hover,
.city-svc-card:focus-within {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-pop);
}

.city-svc-card :is(h3, h4) {
  margin: 0 0 var(--space-xs);
  text-align: center;
  color: var(--green-900);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  line-height: 1.3;
  letter-spacing: 0;
}

.city-svc-card p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--ink-700);
  text-align: center;
}

/* Two paragraphs in one card (riparazione-condizionatore-reggio-emilia).
   From elettricista.css. */
.city-svc-card p + p { margin-top: var(--space-xs); }

.city-svc-card p strong { color: var(--green-900); }

.city-svc-card p a {
  color: var(--green-500);
  font-weight: 700;
  text-decoration: underline;
}

.city-svc-card p a:hover { color: var(--green-700); }


/* ------------------------------------------------------------
   CLOSING BAND — dark, two columns (as elettricista-rovigo), one
   shared button underneath.
------------------------------------------------------------ */
.closing {
  background: var(--green-900);
  padding-block: clamp(56px, 7vw, 72px);
}

.closing-inner {
  width: min(100% - (var(--gutter) * 2), 760px);
  margin-inline: auto;
  text-align: center;
}

.closing-inner--2up {
  width: min(100% - (var(--gutter) * 2), var(--max-w));
}

.closing p {
  margin: 0 0 var(--space-l);
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--green-100);
}

.closing__cols {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--space-l);
  text-align: left;
}

@media (min-width: 768px) {
  .closing__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Condizionatore change: each column holds two short paragraphs,
   so they sit close together rather than --space-l apart. */
.closing__cols p { margin-bottom: var(--space-2xs); }

.closing__cols p:last-child { margin-bottom: 0; }

.closing__lead {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 800;
  color: var(--paper-000) !important;
  text-align: center;
}

.closing__cols p:not(.closing__lead) { text-align: center; }

/* Closing heading at h3 (riparazione-condizionatore-parma: its
   closing heading is an <h3> on the old page). From elettricista.css. */
.closing h3 {
  margin: 0 0 var(--space-s);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 800;
  color: var(--paper-000);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Closing heading at h4 (riparazione-condizionatore-chieti: its
   closing heading is an <h4> on the old page). From elettricista.css. */
.closing h4 {
  margin: 0 0 var(--space-s);
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.5rem);
  font-weight: 800;
  color: var(--paper-000);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* A cut-out product image above the closing heading (Chieti's fan). */
.closing__img { margin: 0 auto var(--space-s); }

@media (max-width: 480px) {
  .closing .btn { width: 100%; justify-content: center; }
}


/* ============================================================
   CITY PAGE — additions for riparazione-condizionatore-chieti
============================================================ */

/* Why-band title set on a <p> (the old page's "ALTRI SERVIZI…" line
   is a paragraph, not a heading), so it needs the display face that
   an <h3> would inherit. */
.city-why__title { font-family: var(--font-display); }

/* Four cards two-up rather than 3 + 1. From elettricista.css. */
.city-svc-grid--2up { --cols-max: 2; }

/* Round icon above a card title. From elettricista.css. */
.city-svc-card__media {
  display: grid;
  place-items: center;
  width: clamp(76px, 11vw, 96px);
  height: clamp(76px, 11vw, 96px);
  margin: 0 auto var(--space-s);
  border-radius: 50%;
  background: var(--green-100);
  transition: background .22s ease;
}

.city-svc-card:hover .city-svc-card__media { background: var(--amber-050); }

.city-svc-card__media img {
  width: clamp(42px, 6vw, 54px);
  height: clamp(42px, 6vw, 54px);
  object-fit: contain;
}

/* Cut-out (transparent PNG) in the split's photo column: shown at
   its own size, centred, with no photo frame — .city-prose__img's
   100% width would upscale a 250px file and blur it. */
.city-prose__img--cutout {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 0;
  box-shadow: none;
}

/* ============================================================
   CITY PAGE — additions for riparazione-condizionatore-pescara
============================================================ */

/* Card title set on a <p>: Pescara's MANUTENZIONE / RIPARAZIONE /
   INSTALLAZIONE are bold paragraphs on the old page, not headings
   (hard rule 9). Same look as the h3/h4 card title. From
   elettricista.css. */
.city-svc-card__title {
  margin: 0 0 var(--space-xs) !important;
  text-align: center;
  color: var(--green-900);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem) !important;
  font-weight: 700;
  line-height: 1.3;
}

/* Bold paragraph used as a sub-title inside running copy (not a
   heading on the old page, so it stays a <p>). */
.city-prose__col p.city-prose__subhead {
  margin: var(--space-l) 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.3;
}

.city-prose__col p.city-prose__subhead:first-child { margin-top: 0; }

/* A short bullet list inside the copy column — global.css resets
   list-style, so the marker is drawn here (dash, as elsewhere). */
.city-prose__col ul {
  margin: 0 0 var(--space-s);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.city-prose__col ul li {
  display: flex;
  gap: var(--space-2xs);
  font-size: 1.03rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.city-prose__col ul li::before {
  content: "\2013";
  color: var(--amber-500);
  font-weight: 700;
  flex-shrink: 0;
}


/* ============================================================
   CITY PAGE — additions for riparazione-condizionatore-montesilvano
============================================================ */

/* ATTIVITÀ STEPS — tinted band: numbered step cards on the left,
   a white text panel on the right. The numbers come from a CSS
   counter because the old page's numbers came from an <ol> too
   (no digits in its text). */
.city-steps { background: var(--green-050); }

.city-steps__grid {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
  .city-steps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.city-steps__title {
  margin: 0 0 var(--space-m);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--green-900);
}

.city-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--space-s);
}

.city-step {
  --step-pad: clamp(18px, 2.4vw, 24px);
  counter-increment: step;
  position: relative;
  padding: var(--step-pad) var(--step-pad) var(--step-pad) calc(var(--step-pad) + 56px);
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-700);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s cubic-bezier(.2,.7,.3,1);
}

.city-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }

.city-step::before {
  content: counter(step);
  position: absolute;
  left: var(--step-pad);
  top: var(--step-pad);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amber-500);
  color: var(--paper-000);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.city-step strong {
  display: block;
  margin-bottom: var(--space-3xs);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--green-900);
}

.city-steps__panel {
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-top: 4px solid var(--amber-500);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 40px);
}

.city-steps__panel h3 {
  margin: 0 0 var(--space-s);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--green-900);
}

.city-steps__panel p {
  margin: 0;
  font-size: 1.01rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.city-steps__panel a {
  color: var(--amber-600);
  font-weight: 700;
  text-decoration: underline;
}

.city-steps__panel a:hover { color: var(--amber-500); }

@media (prefers-reduced-motion: reduce) {
  .city-step { transition: none; }
  .city-step:hover { transform: none; }
}

/* PROBLEMS + WHY US — dark band, centred intro, two white cards:
   the problems we fix (orange "!" badges) and the reasons to choose
   us (green tick badges). */
.city-issues {
  background: linear-gradient(160deg, var(--green-900) 0%, var(--green-800) 100%);
  color: var(--paper-000);
}

.city-issues__intro {
  max-width: 72ch;
  margin: 0 auto var(--space-xl);
  text-align: center;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.7;
  color: var(--green-100);
}

.city-issues__grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 28px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .city-issues__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.city-issues__card {
  background: var(--paper-000);
  border-top: 4px solid var(--amber-500);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop);
  padding: clamp(24px, 3.5vw, 40px);
  color: var(--ink-700);
}

.city-issues__card--check { border-top-color: var(--green-500); }

.city-issues__title {
  margin: 0 0 var(--space-m);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--green-900);
}

.city-issues__title a {
  color: var(--amber-600);
  text-decoration: underline;
  white-space: nowrap;
}

.city-issues__title a:hover { color: var(--amber-500); }

.city-issues__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}

.city-issues__list li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  background: var(--paper-050);
  border: 1px solid var(--line-100);
  border-radius: var(--radius-m);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--green-900);
}

.city-issues__list li::before {
  content: "!";
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--amber-500);
  color: var(--paper-000);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
}

.city-issues__card--check .city-issues__list li::before {
  content: "\2713";
  background: var(--green-500);
}


/* Brand logos — twelve small white-background logos, each on its own
   white tile so the mismatched sizes read as one even row. */
.city-brands { background: var(--paper-000); }

.city-brands__intro {
  max-width: 72ch;
  margin: 0 auto var(--space-l);
  text-align: center;
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--ink-700);
}

/* Six across on desktop — two even rows of six, as on the old page.
   Three across on a tablet (four even rows), two on a phone. */
.city-brands__grid {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 600px) { .city-brands__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .city-brands__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.city-brands__item {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: var(--space-s);
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-m);
}

.city-brands__item img {
  width: auto;
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
}


/* ============================================================
   CITY PAGE — additions for riparazione-condizionatore-ancona
============================================================ */

/* CALL CARD — replaces the dark .closing band on this page: one
   rounded card, split in two from 768px. Left: dark call panel with
   the button. Right: light amber "24 ore su 24" panel with a clock
   badge. Stacked on a phone, call panel first. */
.city-cta { background: var(--paper-000); }

.city-cta__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

@media (min-width: 768px) {
  .city-cta__card { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.city-cta__main,
.city-cta__side {
  padding: clamp(28px, 4.5vw, 56px);
}

.city-cta__main {
  background: linear-gradient(150deg, var(--green-900) 0%, var(--green-800) 100%);
  color: var(--green-100);
}

.city-cta__side {
  position: relative;
  background: var(--amber-050);
  border-top: 4px solid var(--amber-500);
  color: var(--ink-700);
}

@media (min-width: 768px) {
  .city-cta__side {
    border-top: 0;
    border-left: 4px solid var(--amber-500);
  }
}

.city-cta p {
  margin: 0 0 var(--space-xs);
  font-size: 1.03rem;
  line-height: 1.7;
}

.city-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Lecco intro header. Title and call link read as one line: "Pronto Intervento
   Condizionatori Lecco – Chiama 03411716250". The <h2> keeps its own
   text; the dash (decorative, CSS) and the orange call link follow it
   inline at the same size, wrapping as a whole onto the next line
   when the column is narrow. */
.city-intro__head {
  position: relative;
  margin: 0 0 var(--space-m);
  padding-left: var(--space-s);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.25;
}

.city-intro__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 5px;
  border-radius: var(--radius-s);
  background: var(--amber-500);
}

.city-prose--split .city-intro__head .section-title.city-intro__title {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

.city-intro__call {
  display: inline;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.city-intro__call::before {
  content: " \2013  ";
  color: var(--ink-500);
  font-weight: 400;
}

/* Inline (not flex) so a space at the end of a link survives —
   Pescara splits the call over two links, "Chiama " + the number.
   nowrap on the <strong> keeps icon, words and number on one line. */
.city-intro__call strong { font-weight: inherit; white-space: nowrap; }

.city-intro__call a {
  color: var(--amber-600);
  text-decoration: none;
}

.city-intro__call a:hover { color: var(--amber-500); text-decoration: underline; }

.city-intro__call .icon-phone {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.3em;
  vertical-align: -0.08em;
}

/* Torino: a chips list inside a prose band ("I servizi includono:").
   Beats the plain .city-prose__col ul list rules (Pescara): two
   columns, the chip's own dot instead of the dash, chip type size,
   and the paragraph gap below it. */
.city-prose__col ul.city-why__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin: 0 0 var(--space-m);
}

.city-prose__col ul.city-why__chips li {
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--green-900);
}

.city-prose__col ul.city-why__chips li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.42em;
  border-radius: 50%;
  background: var(--amber-500);
}

@media (max-width: 560px) {
  .city-prose__col ul.city-why__chips li { font-size: 0.78rem; }
}

/* Udine's call-card title is an <h3>: same spacing as the <p> title. */
h3.city-cta__title { margin: 0 0 var(--space-xs); }

.city-cta__main .city-cta__title { color: var(--paper-000); }

.city-cta__main strong { color: var(--paper-000); }

.city-cta__side .city-cta__title { color: var(--green-900); }

.city-cta__main .btn { margin-top: var(--space-m); }

.city-cta__badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-s);
  border-radius: 50%;
  background: var(--amber-500);
  color: var(--paper-000);
  box-shadow: var(--shadow-card);
}

.city-cta__badge svg { width: 28px; height: 28px; }

@media (max-width: 480px) {
  .city-cta__main .btn { width: 100%; justify-content: center; }
}