/* ============================================================
   assets/css/elettricista.css
   /intervento-elettricista/ — page-specific sections only.

   Load order: global.css -> prezzi.css -> elettricista.css
   ($page_css = array("prezzi", "elettricista"))

   The page is assembled out of shared components. This file adds
   only the four things neither shared file has, plus two slot
   fillers for content global.css's components don't style.

   Comes from global.css, never redefined here:
     tokens, reset, typography, .container, .btn/.btn--primary/
     .btn--outline, .icon-phone, header + mobile nav, footer,
     .call-bar, .hero--split (the whole hero), .features/
     .features__head/.features__grid/.feature-card (intro tiles),
     .tile-strip/.tile (icon tiles), .faq/.faq__wrap/.faq-item/
     .faq-item__q/.faq-item__plus/.faq-item__a (FAQ accordion),
     .services background, .section-kicker

   Comes from prezzi.css, never redefined here:
     .svc-coverage / .svc-region-* ("Dove operiamo")

   Sections below: slot fillers · section headings · service chips ·
                   FAQ answer list · closing panel · emergency panel
============================================================ */


/* ============================================================
   SLOT FILLERS — content global.css's components don't cover
============================================================ */

/* global.css styles headings inside .feature-card, but the intro
   tiles are deliberately <p>: the old page has no heading there and
   the hierarchy must match it exactly (hard rule 9). */
.feature-card__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--green-900);
}

/* Bulleted lists inside a FAQ answer. global.css styles the answer's
   paragraphs and links but has no list treatment. */
.faq-item__a-inner .faq-list {
  margin: 0 0 var(--space-s);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.faq-item__a-inner .faq-list li {
  display: flex;
  gap: var(--space-2xs);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.faq-item__a-inner .faq-list li::before {
  content: "\2013";
  color: var(--amber-500);
  font-weight: 700;
  flex-shrink: 0;
}

.faq-item__a-inner strong { color: var(--green-900); }


/* ============================================================
   SECTION HEADINGS
   The page's sections lead with a green heading rather than
   global.css's default --ink-900 one.
============================================================ */
.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; }

.section-text {
  margin: 0 0 var(--space-l);
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 68ch;
}


/* ============================================================
   SERVICE CHIPS — the scannable list under "Pronto Intervento
   Elettricista 24H". No shared component has this; global's
   .service-card is an image card, not a chip.
   Fluid grid, so the number of chips never needs new CSS.
============================================================ */
.service-grid {
  --col-min: 260px;
  --gap: var(--space-xs);
  --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
    )
  );
  margin-bottom: var(--space-l);
}

.service-chip {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--green-100);
  border-radius: var(--radius-s);
  padding: var(--space-s) 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--green-900);
}

.service-chip-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--amber-600);
  color: var(--paper-000);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-chip-icon svg { width: 11px; height: 11px; }

.services-closing {
  background: var(--amber-050);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-l);
  padding: 28px 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.services-closing p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 60ch;
}

/* Targets global.css's .btn — keeps it from being squashed by the
   flex row, at the slightly smaller size this panel wants. */
.services-closing .btn {
  flex-shrink: 0;
  padding: 15px 26px;
  font-size: 0.95rem;
}


/* ============================================================
   CLOSING PANEL — dark centred band.
   Not global.css's .cta-band: that one is a single lead line plus a
   button, with nowhere to put this section's paragraph, and copy is
   never dropped to fit a layout (hard rule 7).
============================================================ */
.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 h2:where(:not(.h1-look)),
.closing h1:where(.h2-look) {
  margin: 0 0 var(--space-s);
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
  font-weight: 800;
  color: var(--paper-000);
  letter-spacing: -0.01em;
}

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

/* .btn is nowrap; "Chiama Subito Pronto Intervento Elettricista 24"
   is wider than a 360px phone, so let it wrap inside the band. */
@media (max-width: 480px) {
  .closing .btn { white-space: normal; max-width: 100%; line-height: 1.3; }
}


/* ============================================================
   EMERGENCY PANEL — dark two-column band with photo + badge.
   global.css's .about__grid is the nearest thing and has neither
   the dark treatment nor the overlapping badge.
============================================================ */
.emergency {
  background: var(--green-950);
  padding-block: clamp(64px, 8vw, 92px);
}

.emergency-inner {
  width: min(100% - (var(--gutter) * 2), var(--max-w));
  margin-inline: auto;
  display: grid;
  gap: clamp(48px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 900px) {
  .emergency-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.emergency-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: 22px;
}

.emergency-eyebrow-bar {
  width: 28px;
  height: 3px;
  background: var(--amber-500);
  border-radius: 2px;
  flex-shrink: 0;
}

.emergency-eyebrow-text {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--amber-500);
}

.emergency-title {
  margin: 0 0 var(--space-m);
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  font-weight: 800;
  color: var(--paper-000);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.emergency-text {
  font-size: 1.03rem;
  line-height: 1.75;
  color: var(--green-100);
  margin: 0 0 var(--space-m);
  max-width: 62ch;
}

.emergency-text a {
  color: var(--amber-400);
  font-weight: 700;
  text-decoration: underline;
}

.emergency-cta { margin-top: var(--space-xs); }

.emergency-media { position: relative; }

@media (max-width: 899px) {
  .emergency-media { max-width: 420px; margin-inline: auto; }
}

.emergency-frame {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 6 / 4.4;
  box-shadow: var(--shadow-pop);
}

.emergency-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.emergency-badge {
  position: absolute;
  bottom: -22px;
  left: -22px;
  background: var(--amber-600);
  color: var(--paper-000);
  border-radius: var(--radius-m);
  padding: var(--space-s) 22px;
  box-shadow: var(--shadow-pop);
}

.emergency-badge-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
}

.emergency-badge-label {
  font-size: 0.78rem;
  margin-top: 3px;
  opacity: 0.92;
}

@media (max-width: 480px) {
  .emergency-badge { padding: 12px 16px; left: -10px; bottom: -16px; }
}


/* ============================================================
   ============================================================
   CITY PAGE — /intervento-elettricista/elettricista-milano/
   ============================================================

   Everything below belongs to the city page only. Nothing above
   is touched, so /intervento-elettricista/ renders unchanged.

   All selectors are .city-* (or .closing h3, which the parent
   page has no h3 inside .closing to match), so the two pages
   sharing this file cannot collide.

   Reused, never redefined here:
     global.css  .btn/.btn--primary/.btn--white, .icon-phone,
                 .container, .tile-strip/.tile, .call-bar,
                 .section-kicker
     prezzi.css  .svc-pricing*
     this file   .section-title, .section-text, .closing
============================================================ */


/* ------------------------------------------------------------
   HERO — global.css's .hero--split, used verbatim exactly as
   /intervento-elettricista/ does. Do not re-implement it here.

   The one exception: this page's H1 is "PRONTO INTERVENTO
   ELETTRICISTA MILANO?" — all caps and half again as long as the
   parent page's, so global.css's hero H1 clamp sets it too large
   and the line breaks three ways. .hero--city steps it down until
   it breaks two ways at every width.

   The clamp is sized off the longest of the two lines,
   "ELETTRICISTA MILANO?" (~13.2em in Archivo 900 uppercase),
   against the narrowest the copy column ever gets. That column is
   narrowest just after the hero goes two-up at 980px (~425px), not
   on a phone. So the vw term stays gentle to clear that band, and
   the growth it gives up there is put back as a higher ceiling for
   the wide screens that have room to spare:

     400px  -> 24.8px, line ~327px in a ~360px column
     980px  -> 30.4px, line ~401px in a ~425px column
     1200px -> 33.8px, line ~446px in a ~518px column
     1440px -> 37.6px, line ~496px in a ~600px column

   text-wrap:balance (inherited from global.css's h1 rule) then
   splits it "PRONTO INTERVENTO / ELETTRICISTA MILANO?".

   The modifier exists so the override cannot reach the parent
   page, which shares this stylesheet. Specificity (0,3,1) beats
   global.css's .hero.hero--split h1 (0,2,1) whatever the load
   order, so this does NOT depend on file order.
   global.css itself is untouched.
------------------------------------------------------------ */
/* Step-down override removed (owner request): the city H1 now takes
   global.css's hero size like every other service page, so it may
   wrap onto three lines. Nothing to override here. */

/* Trust list two-up on a phone. global.css builds it with
   auto-fit and a 200px minimum, which needs ~424px of room for a
   second column — so below that it collapses to one item per row
   and the four items cost four full rows above the fold, on the
   screen where fold space is worth most.

   Forcing exactly two columns leaves ~149px of text per cell at
   400px, so the type, the tick and both gaps come down to keep
   "Preventivo Trasparente", the longest of the four, on one line.

   Scoped to .hero--city, like the H1 rule above, so the parent
   page's hero is untouched. Each selector carries one class more
   than the global.css rule it overrides, so load order is
   irrelevant. */
@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; }
}

/* Trust items that are headings on the old page (riparazione-
   elettrici-milano: five "»" <h4>s). The <h4> takes the <li>'s look
   rather than the heading type scale; its "»" is the marker, so no
   check icon. */
.hero__trust li h4 {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* Trust points that are whole phrases, not two-word badges
   (impianti-allarme-e-antifurto-milano): one column at every width,
   the check icon aligned to the first line of text. Beats the 2-up
   phone rule for .hero--city above by specificity. */
.hero--city .hero__trust.hero__trust--list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
}

.hero__trust--list li { align-items: flex-start; }

.hero__trust--list li svg { margin-top: 0.1em; }


/* ------------------------------------------------------------
   ICON STRIP — two of the six tile labels are links on the old
   page. global.css styles .tile__label but not an <a> inside it.
------------------------------------------------------------ */
.tile-strip .tile__label a {
  color: inherit;
  text-decoration: none;
}

.tile-strip .tile__label a:hover,
.tile-strip .tile__label a:focus-visible {
  color: var(--amber-600);
  text-decoration: underline;
}


/* ------------------------------------------------------------
   PROSE BANDS — the body-copy sections. One measured column so
   long Italian paragraphs stay readable on a wide screen, and
   left-aligned rather than the old page's justified text (which
   rivers badly at phone width).
------------------------------------------------------------ */
.city-prose { background: var(--paper-000); }

/* Full width by default. .city-prose--split re-caps its own copy
   column further down for the two-column layout most city pages
   use; the base (single-column) case — elettricista-aprilia and
   elettricista-tivoli's icon+prose band — spans the container. */
.city-prose__col { max-width: none; }

/* elettricista-roma/elettricista-tivoli's prose icon: a soft round
   badge floated into the paragraph so the text wraps around it
   instead of the icon sitting in its own block above 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); }

/* A .btn ending the copy column (elettricista-brescia). The
   descendant rules above colour and underline every <a> in the
   column, which would strip a button of its own styling — so the
   button opts back out. */
.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); }

.city-prose__cta { margin-top: var(--space-s); }

/* elettricista-udine: several sub-headings (H3s, one H4) sit inside
   prose copy between paragraphs — both in .city-prose__col and in
   .city-prose__media used as a text/list sidebar rather than a
   photo column. No other city page nests a heading inside its
   copy, so global.css's headings carry no margin of their own (the
   universal reset zeroes it); without this, the paragraph right
   after one of these would sit flush against the heading text. */
.city-prose h3,
.city-prose h4 {
  margin: 0 0 var(--space-s);
}

@media (max-width: 560px) {
  .city-prose__cta { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------
   3 MOTIVI — centred intro, three numbered cards, a closing call
   strip, then the subhead panel with the keyword chips.
   Replaces the old .city-prose--tint treatment of this section.
------------------------------------------------------------ */
.city-why { background: var(--green-050); }

/* Left-aligned, flush with the cards below it — not centred.
   Centred type sets a ragged left edge, which is the edge the eye
   returns to on every line of a paragraph this long.

   Full container width. var(--max-w) IS 1240px — the token rather
   than the literal, per the CSS rules — and since .container is
   already capped at the same value, this makes the head span the
   full width of the card row beneath it. */
.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); }

/* Fluid — a fourth reason would need no new CSS. */
.city-why__grid {
  --col-min: 280px;
  --gap: clamp(20px, 2.4vw, 28px);
  --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
    )
  );
  margin-bottom: var(--space-l);
}

.city-reason {
  position: relative;
  overflow: hidden;
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-l);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-card);
  transition: transform .22s cubic-bezier(.2,.7,.3,1),
              box-shadow .22s cubic-bezier(.2,.7,.3,1),
              border-color .22s ease;
}

.city-reason::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--amber-500), var(--amber-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}

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

.city-reason:hover::before,
.city-reason:focus-within::before { transform: scaleX(1); }

/* The "1." / "2." / "3." lifted out of the paragraph text. */
.city-reason__num {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--amber-500);
  letter-spacing: -0.03em;
}

.city-reason p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-700);
}

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

/* Closing line — the one paragraph here that carries the number,
   so it reads as a call strip rather than more body copy. */
.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); }

/* Subhead + keyword chips */
.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-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;
}

/* The 16 terms that were one pipe-separated line.

   A column ladder, not a flowing cloud: 2 up on a phone, 5 on a
   wide screen, matching .city-area__cities so the two list blocks
   on this page behave the same way.

   Because a chip is now as wide as its column rather than as wide
   as its text, the long terms wrap at every size — so the shape is
   a --radius-s rectangle rather than a 999px pill (a pill with two
   lines in it reads as a mistake), and the dot sits on the first
   line instead of at the vertical centre of a box it no longer
   matches. */
.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)); } }
@media (min-width: 1240px) { .city-why__chips { grid-template-columns: repeat(5, 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;
}

/* Phone: the 2-up grid is already the base, so this only trims
   what costs width — the panel padding, the chip padding and the
   type — to keep the wrapped terms to two lines rather than three. */
@media (max-width: 560px) {
  .city-why__panel   { padding: 20px 18px; }
  .city-why__chips li { padding: 10px 12px; font-size: 0.78rem; }
}


/* ------------------------------------------------------------
   CALLOUT — the old page's orange "CHIAMA SUBITO" line, which was
   two inline-styled spans. No inline styles here (CSS rule 3).
------------------------------------------------------------ */
.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; }

.city-callout__tag {
  color: var(--amber-600) !important;
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.15rem);
  line-height: 1.3;
}


/* ------------------------------------------------------------
   SPLIT PROSE — copy left, photo right, from 992px up.
   Modifier-scoped so section 5, which shares .city-prose, stays
   one column.
------------------------------------------------------------ */
.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; }

/* No aspect-ratio here on purpose. The file is 747x499 and the
   markup carries those as width/height, so the browser reserves
   the right box from the attributes alone — the photo is shown
   whole rather than cropped to a ratio the CSS picked. */
.city-prose__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop);
}

/* A wide banner file (riparazione-elettrici-brescia: pronto-intervento-
   24.png, 612 x 218) reads as a thin strip at column width. The owner
   asked for it larger (2026-09-29): shown in a taller 16:10 frame,
   filled edge to edge and cropped at the sides, kept on the bulb. */
.city-prose__img--banner {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 72% 50%;
}

/* Below the split the photo would stretch to the full text
   measure, which is far wider than it is tall. Cap it. */
@media (max-width: 991px) {
  .city-prose__media { max-width: 520px; margin-inline: auto; }
}

/* elettricista-roma's own addition: a lead-in + paragraph sitting
   under the split photo. No sibling city page puts text in this
   column, only the image, so nothing shared covers it. */
.city-prose__note { margin-top: var(--space-m); }

.city-prose__note-title {
  margin: 0 0 var(--space-2xs);
  font-size: 1.05rem;
  color: var(--green-900);
}

.city-prose__note p:not(.city-prose__note-title) {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--ink-700);
}

/* elettricista-terni: two bullet lists sit under the split photo,
   in the media column global.css's own <ul> reset (list-style:none)
   would otherwise leave unmarked. */
.city-prose__media ul {
  margin: 0 0 var(--space-s);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

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

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

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

  /* Two lines, not four. The copy column is ~490px at 992px and
     ~680px at 1440px; the H2's longest natural line is
     "Riparazioni Urgenti – Elettricista Vicino a Me" (~23em in
     Archivo 800), so the clamp is sized to keep that inside the
     column at both ends. .section-title's own floor is 1.75rem,
     which is why this override exists at all — but it applies
     ONLY inside .city-prose--split, so every other .section-title
     on this page and on the parent page is untouched. */
  .city-prose--split .section-title {
    font-size: clamp(1.25rem, 0.7rem + 0.95vw, 1.75rem);
    line-height: 1.2;
  }

  /* One line for the callout. Sized to fit, but flex-wrap stays on
     as the safety net: if a font substitution makes it wider than
     the estimate it wraps to two lines instead of overflowing the
     column and giving the page a horizontal scrollbar. */
  .city-prose--split .city-callout {
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-s);
  }

  .city-prose--split .city-callout__tel {
    font-size: clamp(0.82rem, 0.52rem + 0.52vw, 1.05rem);
    white-space: nowrap;
  }

  .city-prose--split .city-callout__tag {
    font-size: clamp(0.68rem, 0.44rem + 0.42vw, 0.88rem);
    white-space: nowrap;
  }
}


/* ------------------------------------------------------------
   IMAGE CAPTION — elettricista-valle-daosta: four images (the
   split photo and three of its Servizi icons) are WordPress
   [caption] figures with a visible "pronto intervento 24" line
   under them in the export — real copy, not metadata. No sibling
   page has visible caption text under an image.
------------------------------------------------------------ */
.img-caption {
  margin: var(--space-2xs) 0 0;
  font-size: 0.78rem;
  color: var(--ink-500);
  text-align: center;
}


/* ------------------------------------------------------------
   FEATURE CARD, HEADINGLESS TITLE — elettricista-ticino's intro
   row (Riparazione / Manutenzione / Installazione) has no heading
   at all in the export, just a bold lead line in a <p> (hard rule
   9 keeps it that way). global.css's .feature-card only styles a
   real h2-h6 as its title, so this gives a plain paragraph the
   same treatment.
------------------------------------------------------------ */
.feature-card__lead {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--green-900);
}


/* ------------------------------------------------------------
   CITY DIRECTORY — elettricista-ticino's "Dove Operiamo" row of
   place-name headings, two of them linked. Nothing shared covers a
   plain fluid row of headings with no card chrome around them.
------------------------------------------------------------ */
.city-directory {
  --col-min: 160px;
  --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
    )
  );
  text-align: center;
}

.city-directory h4 {
  margin: 0;
  font-size: 1.05rem;
}

.city-directory h4 a {
  color: var(--green-700);
  text-decoration: underline;
}

.city-directory h4 a:hover { color: var(--green-900); }


/* ------------------------------------------------------------
   SERVICE CARDS — 256px transparent icon + H4 + paragraph.
   global.css's .service-card is a 4/3 photo card with object-fit
   cover, which would crop these icons; this is a card built
   around a centred icon instead.
   Fluid grid — a seventh card would need no new CSS.
------------------------------------------------------------ */
.city-services { background: var(--paper-000); }

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

/* A standalone CHIAMA button that follows the whole card grid,
   not tied to any one card — elettricista-busto-arsizio's own
   export has one of these after its 2x2 grid. .btn is
   inline-flex, so centring its <p> wrapper is enough; no other
   city page needs this; it stays out of the way of every page
   that doesn't add the class. */
.city-services__cta { text-align: center; margin-top: 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
    )
  );
}

/* Two-up instead of the default three. The base grid above reads
   --cols-max, so capping the variable is the whole override — no
   media query, and it still collapses to one column on a phone
   because --col-min governs there.

   elettricista-varese: four cards, laid out 2 per row in the
   export (vc_col-sm-6), which is 2 x 2 rather than 3 + 1. */
.city-svc-grid--2up { --cols-max: 2; }

.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__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;
}

.city-svc-card 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;
}

/* elettricista-latina: all four card titles are plain <p>s in the
   export, not headings (hard rule 9 keeps them that way), so they
   need the h4 treatment above without the h4 element. Font-family
   and font-weight are set explicitly because a <p> doesn't inherit
   either from global.css's heading rule the way h4 does. */
.city-svc-card__title {
  margin: 0 0 var(--space-xs);
  text-align: center;
  color: var(--green-900);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.city-svc-card h4 a {
  color: inherit;
  text-decoration: none;
}

.city-svc-card h4 a:hover,
.city-svc-card h4 a:focus-visible {
  color: var(--amber-600);
  text-decoration: underline;
}

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

/* elettricista-brescia's CORTO CIRCUITO card carries two
   paragraphs where every other card carries one. */
.city-svc-card p + p { margin-top: var(--space-xs); }

/* elettricista-udine's sixth card is a plain keyword list instead
   of a paragraph — the same dash-bullet shape .city-prose__media ul
   already styles for elettricista-terni, reproduced here scoped to
   .city-svc-card since global.css's list reset (list-style:none)
   would otherwise leave it unmarked. */
.city-svc-card ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

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

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

.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); }

/* elettricista-bergamo ends two of its cards with a call line.
   One of them is an <h4> in the export, used as a button — the
   heading stays (hard rule 9), it just stops looking like a
   section title sitting in the middle of body copy. */
/* Sits directly under the paragraph it belongs to, not pushed to
   the foot of the card. It was margin-top:auto, which bottom-
   aligned the call lines across a row — but the cards stretch to
   the tallest in the row, so on pavia the short "Riparazioni
   Elettriche" card ended up with its call line stranded a long
   way below its own text, next to the tall province map. */
.city-svc-card__cta {
  margin-top: var(--space-s);
  text-align: center;
  font-size: 1rem !important;
  font-weight: 700;
  letter-spacing: 0;
}

/* THE CALL BUTTON: FULL WIDTH, LABEL ON ONE LINE.

   global.css's .btn is inline-flex with 28px of side padding, a
   20px .icon-phone, a 10px gap and font-size:1rem. "CHIAMA
   SUBITO 01118838242" at that size is wider than a card in the
   three-up grid, so the button overflowed its own card: the
   parent's text-align:center cannot centre a box wider than its
   line, and it sat flush against the right border with the full
   card padding still showing on the left, reading as badly
   off-centre.

   width:100% with display:flex fixes the centring structurally
   rather than arithmetically: the button now IS the card's
   content box, so its left and right margins are the card's own
   padding and are equal by construction at every width, with no
   dependency on how wide the label happens to render.
   justify-content:center from global.css then centres the icon
   and label inside it.

   That leaves only "does the label fit on one line". The side
   padding drops to 8px, the icon gap to 8px, and the font-size
   is fluid so the label scales with the viewport instead of
   wrapping.

   THE TIGHT WIDTHS ARE THE GRID'S COLUMN TRANSITIONS, not the
   extremes. .city-svc-grid is auto-fit with --col-min:300px and
   --cols-max:3, so cards are at their NARROWEST just after the
   grid gains a column — around 768px (1->2) and around 1240px
   (2->3) — and get wider again above each. A 320px phone is the
   other constraint, where --gutter bottoms out at 20px and the
   card's padding at 24px.

   The clamp is sized for those three points rather than for the
   widest desktop. Worth eyeballing at ~768px and ~1240px if the
   label on a future page runs longer than the 24–25 characters
   these three carry; a longer one may need the ceiling lowered
   again.

   min-height stays 44px — global.css marks that as a tap target
   and it is untouched, so the button remains a legal touch size
   even at the smallest font.

   min-height stays 44px — global.css marks that as a tap target
   and it is untouched, so the button stays a legal touch size
   even at the smallest font.

   Scoped to this slot, so no other .btn on the site changes.
   Three pages have a button here: ancona, lugano, torino. */
.city-svc-card__cta .btn {
  display: flex;
  width: 100%;
  padding-inline: var(--space-2xs);
  gap: var(--space-2xs);
  white-space: nowrap;
  font-size: clamp(0.68rem, 0.5rem + 0.7vw, 0.85rem);
}

/* Element qualifiers on purpose. The plain .city-svc-card__cta a
   selector (0,1,1) loses to .city-svc-card p a and
   .city-svc-card h4 a (both 0,1,2) above, which coloured these
   green and underlined them. These are (0,2,2) and win.

   Three elements because the export is inconsistent about what it
   wraps the call line in: a <p> on bergamo card 2, an <h4> on
   bergamo card 4, an <h3> on pavia card 4. */
.city-svc-card :is(p, h3, h4).city-svc-card__cta a {
  color: var(--amber-600);
  font-weight: 700;
  text-decoration: none;
}

.city-svc-card :is(p, h3, h4).city-svc-card__cta a:hover { text-decoration: underline; }

.city-svc-card h3.city-svc-card__cta { color: var(--amber-600); }

/* elettricista-lugano card 6: the export's trailing CTA there is a
   real vc_btn3 button, not a text call line like the others above —
   .btn--primary already colours it white on an amber fill. Without
   this, the a.btn rule above still wins (0,2,2) and paints the
   button's own label and icon amber-on-amber, invisible. */
.city-svc-card :is(p, h3, h4).city-svc-card__cta a.btn {
  color: var(--paper-000);
}

/* elettricista-ancona card 6: the button sits directly above a
   trailing photo (.city-map, reused here for a plain image, not a
   province map). !important because .city-svc-card__cta's own
   margin-top already loses to .city-svc-card p's margin:0 reset
   (0,1,1 beats 0,1,0) — the only way to guarantee a small, fixed
   gap here without touching either of those shared rules. */
.city-svc-card__cta + .city-map {
  margin-top: var(--space-2xs) !important;
}

/* The province map card: an image and a button, no heading and no
   copy, so it opts out of the icon-circle treatment above. */
.city-svc-card--map {
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
}

/* width:auto, not 100%. The province maps differ in size per page
   — bergamo's gif is 342x303, pavia's is 676x600 — so a fixed
   percentage either upscales the small one into mush or caps the
   large one arbitrarily. At auto each renders at its own native
   width and only shrinks when the card is narrower. */
.city-map {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.city-map__cta { align-self: center; }

/* elettricista-perugia's map is 500x622 — much taller relative to
   its width than Bergamo's (342x303) or Pavia's (676x600), so at
   its native size it towered over the card beside it. Capped
   smaller here rather than changing .city-map's own default,
   which every other map card still renders at native size. */
.city-map--sm { max-width: 240px; }

/* ------------------------------------------------------------
   LAST ROW FILLS THE WIDTH — .city-svc-grid--last-even

   A 5-card grid is 3 + 2, so the last row held two cards at a
   third of the width each and left a third of the row empty.

   Fixed by counting in sixths: a normal card spans 2 of 6 (three
   per row, unchanged) and the last two span 3 of 6 each, filling
   the final row as equal halves.

   A 2 + 4 variant was tried for elettricista-monza, matching the
   export's own vc_col-sm-4 + vc_col-sm-8 there, and dropped —
   equal halves read better on both pages. To bring it back, span
   the last two 2 and 4 instead of 3 and 3.

   Only from 1100px, which is where the base grid actually reaches
   3 columns — --col-min is 300px, so 3 columns plus gaps need
   ~950px of container, and the container only gets there around a
   1055px viewport. Below that the fluid grid keeps its own 2-up
   and 1-up behaviour and this override stays out of the way.

   Modifier-scoped, so a grid without it is untouched. Used by
   elettricista-bergamo and elettricista-monza.
------------------------------------------------------------ */
@media (min-width: 1100px) {
  .city-svc-grid--last-even {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .city-svc-grid--last-even > * { grid-column: span 2; }

  .city-svc-grid--last-even > :nth-last-child(2),
  .city-svc-grid--last-even > :last-child { grid-column: span 3; }
}


/* ------------------------------------------------------------
   PROVINCE LIST — a directory panel: one white card on a tinted
   band, the towns set in CSS columns as hairline-separated rows.

   Chosen over the previous dark card grid for two reasons. It is
   about a third shorter — 100 boxed cards ran ~1250px tall, these
   rows run ~850px — and it stops .city-area and the .closing band
   right after it from reading as two dark slabs in a row.

   The 100 names are a single justified paragraph of pipe-
   separated text in the export. Every name survives, in the old
   order; only the "|" delimiters and <br>s are gone, because the
   row boundaries now do that job (hard rule 7 — rearranged, not
   cut).

   The markup did not change when this design replaced the last
   one: same section, same 100 spans. Only this block was rewritten.

   The pin is a CSS mask rather than 100 inline <svg>s: same mark,
   ~20KB less HTML, colour still from a token via `background`.
------------------------------------------------------------ */
.city-area {
  background: var(--green-050);
  padding-block: clamp(56px, 8vw, 88px);
}

.city-area__inner {
  width: min(100% - (var(--gutter) * 2), var(--max-w));
  margin-inline: auto;
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 48px);
}

/* Full-width rule under the heading with an amber segment sitting
   on top of it at the left. */
.city-area__title {
  position: relative;
  margin: 0 0 var(--space-m);
  padding-bottom: var(--space-s);
  border-bottom: 2px solid var(--line-200);
  color: var(--green-900);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
  font-weight: 800;
  letter-spacing: 0;
}

.city-area__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 72px;
  height: 2px;
  background: var(--amber-500);
}

/* Columns, not a grid: names flow down each column and across,
   which is how a directory is read, and a short name takes a
   short row instead of a fixed card.

   Explicit counts rather than an automatic column-width. Getting
   5 columns on a wide screen from `columns: <width> 5` needs a
   minimum low enough (~150px) that tablet also jumps to 4, where
   a 150px column is far too narrow for these names. Fixed counts
   per breakpoint keep the narrow widths sane.

   On wrapping: "Elettricista " is 13 characters before the town
   name even starts, and the longest entry is "Elettricista San
   Colombano al Lambro" at 36. Of the 100 names, 48 are over 22
   characters and 17 are over 30. The container is capped at
   --max-w, so the widest the content ever gets is ~1144px — at 5
   columns that is ~187px of text per row, and roughly a third of
   the names take two rows.

   To change the ceiling, edit the last media query only:
     5 -> a third of names wrap; no shorter than 4 (see below)
     4 -> the longest ~5 names wrap on a wide screen
     3 -> effectively no wrapping, widest rows */
.city-area__cities {
  column-count: 2;
  column-gap: clamp(20px, 2.5vw, 40px);
  margin: 0;
}

@media (min-width: 760px)  { .city-area__cities { column-count: 3; } }
@media (min-width: 1000px) { .city-area__cities { column-count: 4; } }
@media (min-width: 1240px) {
  .city-area__cities {
    column-count: 5;
    column-gap: 24px;   /* tighter, to buy back text width */
  }
}

.city-area__city {
  display: flex;
  align-items: center;
  gap: 9px;
  break-inside: avoid;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-100);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--green-900);
}

.city-area__city::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: var(--amber-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 21C12 21 5 14.5 5 9.5C5 5.9 8.1 3 12 3C15.9 3 19 5.9 19 9.5C19 14.5 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 21C12 21 5 14.5 5 9.5C5 5.9 8.1 3 12 3C15.9 3 19 5.9 19 9.5C19 14.5 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Two columns on a phone leaves only ~130px of text per row, so
   everything that costs width gets trimmed: the panel padding,
   the column gap, the pin and the type. Names still wrap here —
   at this width they would have to — but this keeps most of them
   to two rows rather than three. */
@media (max-width: 560px) {
  .city-area__inner  { padding: 20px 16px; }
  .city-area__cities { column-gap: 14px; }
  .city-area__city   { font-size: 0.78rem; padding: 7px 0; gap: 7px; }
  .city-area__city::before { width: 12px; height: 12px; }
}


/* ------------------------------------------------------------
   KEYWORD LIST — elettricista-varese's closing section.

   13 items that the export splits across three <ul>s of 6, 4 and
   3. One list here, laid out by the same fluid grid the rest of
   the page uses, so the count never needs new CSS.

   The element inside each <li> varies by page — <h5> on twelve
   pages, <h4> on elettricista-carrara, <strong> on
   elettricista-vicenza — and each page keeps its own (hard
   rule 9). The typography therefore sits on the li, and every
   element that might wrap the text is reset to inherit from it,
   so the panel looks identical on all fourteen pages.
------------------------------------------------------------ */
.city-kw { background: var(--green-050); }

.city-kw__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);
  text-align: center;
}

.city-kw__title {
  margin: 0 0 var(--space-m);
  color: var(--green-900);
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0;
}

.city-kw__list {
  --col-min: 240px;
  --gap: var(--space-2xs);
  --cols-max: 3;
  list-style: none;
  margin: 0 0 var(--space-l);
  padding: 0;
  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
    )
  );
  text-align: left;
}

/* The item's typography lives HERE, on the li, not on whatever
   element the export happened to wrap the text in. See the reset
   below for why. */
.city-kw__list 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-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--green-900);
}

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

/* WHATEVER THE EXPORT WRAPPED THE ITEM IN, IT IS A LIST ITEM, NOT
   A SECTION TITLE. The wrapper is not consistent across the run —
   twelve pages use <h5>, elettricista-carrara uses <h4>, and
   elettricista-vicenza uses <strong> with no heading at all — and
   hard rule 9 freezes each page's own level. So the reset has to
   cover every element the markup might carry rather than naming
   one.

   Before this existed, only h5 was reset, so carrara's h4 items
   fell through to global.css's h4 rule (clamp(1.1rem,…,1.3rem)/700
   in --font-display) and rendered noticeably bigger and bolder
   than the same panel on every sibling page; vicenza's bare
   <strong> items rendered at body size. Both now inherit from the
   li and match. */
.city-kw__list li :is(h1, h2, h3, h4, h5, h6, strong, b, span) {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

@media (max-width: 480px) {
  /* One line, always: .btn is white-space:nowrap and this button sits in
     a narrow panel, so the old long label ran out of both sides of the
     pill. Tighter side padding and slightly smaller type, together with the
     short "CHIAMA {numero}" label (owner request), keep it inside to 320px. */
  .city-kw__cta { width: 100%; justify-content: center; padding-inline: 14px; gap: 8px; }
  .city-kw__cta .btn__label { font-size: 0.85rem; }
}


/* ------------------------------------------------------------
   CLOSING BAND — .closing is defined above for the parent page,
   which closes on an h2. This page's closing heading is an h3
   (hard rule 9: the old page's hierarchy is preserved), so it
   needs the same treatment at its own level.
------------------------------------------------------------ */
.closing h3 {
  margin: 0 0 var(--space-l);
  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;
}

/* elettricista-velletri's closing heading is an h4 (hard rule 9
   again — its own hierarchy runs H1/H2/H3/H4, one level past
   Milano/Lodi's H3). Same treatment, one step down. */
.closing h4 {
  margin: 0 0 var(--space-l);
  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;
}

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


/* ------------------------------------------------------------
   REPERIBILITÀ 24H BAND — elettricista-roma/elettricista-tivoli's
   .cta-band is stacked (lead+text, then button, then trust row)
   rather than global.css's default lead-and-button-side-by-side
   row, so it needs its own inner layout plus a trust row neither
   global.css nor the parent page has a use for.
------------------------------------------------------------ */
.cta-band__inner--stack {
  flex-direction: column;
  text-align: center;
}

.cta-band__text {
  margin: var(--space-2xs) 0 0;
  color: rgba(255, 255, 255, 0.9);
}

.cta-band__text a {
  color: inherit;
  text-decoration: underline;
}

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

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

  .cta-band__trust > * + * {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: var(--space-m);
  }
}

.cta-band__trust-icon {
  width: 22px;
  height: 22px;
  color: var(--amber-400);
  margin-bottom: var(--space-2xs);
}

.cta-band__trust strong {
  display: block;
  margin-bottom: 4px;
  color: var(--paper-000);
  font-size: 0.98rem;
}

.cta-band__trust p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  line-height: 1.55;
}


/* ------------------------------------------------------------
   SIX-ACROSS FEATURE GRID — elettricista-roma/elettricista-tivoli's
   six icon cards sit in one row instead of global.css's default
   3-per-row wrap. --col-min still governs collapse on narrow
   screens, so this only raises the ceiling; every other
   .features__grid on the site (it has no modifier here) keeps its
   default 3-column wrap.
------------------------------------------------------------ */
.features__grid--cols-6 { --cols-max: 6; }

/* global.css's --col-min:280px floor keeps auto-fit from ever
   actually reaching 6 tracks at typical desktop widths (six 280px+
   columns need ~1850px). These cards are icon + one line of text,
   so a fixed 6-up grid from desktop width up is a straightforward,
   explicit override rather than fighting the fluid formula's floor. */
@media (min-width: 900px) {
  .features__grid--cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Six-up leaves much less width per card than global.css's default
   3-column grid sized its heading clamp for; scaled down to match. */
.features__grid--cols-6 .feature-card h4 {
  font-size: 0.85rem;
}


/* ------------------------------------------------------------
   SUB-HEADING INSIDE PROSE — elettricista-rovigo's prose band
   carries a SECOND h2 ("Elettricista Rovigo 24 ore") partway
   down, between paragraphs, where every other page's prose band
   has exactly one h2 and it is the section title.

   Hard rule 9 keeps it an h2, but it is a sub-heading inside
   running copy, not a section title, so it must not take
   .section-title's size. The :not() keeps every other page
   untouched — theirs all carry .section-title.

   Same idea as the .city-prose h3/h4 rule added for
   elettricista-udine, one level up.
------------------------------------------------------------ */
.city-prose h2:where(:not(.h1-look)):not(.section-title) {
  margin: var(--space-m) 0 var(--space-s);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--green-900);
  letter-spacing: 0;
}


/* ------------------------------------------------------------
   CLOSING BAND, TWO COLUMNS — elettricista-rovigo's closing
   section is two vc_col-sm-6 columns, each a centred bold lead
   line over a paragraph, with one shared button underneath.

   Every other page's closing band is a single measured column, so
   .closing-inner keeps its 760px cap and this modifier widens it
   to the container instead. Modifier-scoped: a .closing-inner
   without it is untouched.
------------------------------------------------------------ */
.closing-inner--2up {
  width: min(100% - (var(--gutter) * 2), var(--max-w));
}

.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)); }
}

/* .closing p carries a --space-l bottom margin for the single-column
   case, where one paragraph sits above the button. Inside a column
   that would double up with the grid gap. */
.closing__cols p:last-child { margin-bottom: 0; }

.closing__lead {
  margin: 0 0 var(--space-2xs);
  color: var(--paper-000);
  font-weight: 700;
  text-align: center;
}

/* ------------------------------------------------------------
   HERO HEADLINE THAT IS NOT A HEADING — .hero__headline

   elettricista-carrara's export marks its hero headline up as a
   <p>, not an <h1>, while styling it like one (2.5em, white,
   centred). Its only <h1> sits halfway down the page, after the
   pricing block. Hard rule 9 fixes heading levels, so the <p>
   stays a <p> — promoting it would give the page two h1s — but
   hard rule 9 also says "how they look is free", and a page's
   opening statement should not render as body copy.

   This gives that paragraph the same type treatment
   global.css's .hero.hero--split h1 gives a real heading, one
   step down so it does not out-shout the h1 further down the
   page. Scoped to .hero--city so it cannot reach the homepage
   or the parent page, and keyed to a class no other page uses.

   If Carrara's markup is ever fixed in WordPress — hero
   headline promoted to h1, the current h1 demoted — this block
   stops matching anything and can be deleted.
------------------------------------------------------------ */
.hero--city .hero__headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--green-950);
  text-wrap: balance;
}

.hero--city .hero__headline strong { font-weight: inherit; }


/* ------------------------------------------------------------
   ALTERNATING PANELS — a run of <h4> + paragraph blocks shown as
   rounded rows (riparazione-elettrici-torino). Each row: a dark green
   panel holding the heading (white, orange accent bar) beside the
   paragraphs on a light card; from 992px the panel sits left on odd
   rows and right on even rows. The headings share one size (some old
   <h4>s carry <strong>, some don't). Panel above text on a phone.
------------------------------------------------------------ */
.city-zig { background: var(--paper-050); }

.city-zig__list {
  display: grid;
  gap: var(--space-m);
}

.city-zig__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--paper-000);
  box-shadow: var(--shadow-card);
}

@media (min-width: 992px) {
  .city-zig__row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }

  .city-zig__row:nth-child(even) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }

  .city-zig__row:nth-child(even) .city-zig__head { order: 2; }
}

.city-zig__head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(150deg, var(--green-900) 0%, var(--green-800) 100%);
}

.city-zig__head::before {
  content: "";
  width: 44px;
  height: 4px;
  margin-bottom: var(--space-s);
  border-radius: var(--radius-s);
  background: var(--amber-500);
}

.city-zig__head h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.55vw, 1.4rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--paper-000);
}

.city-zig__head h4 strong { font-weight: inherit; }

.city-zig__body {
  padding: clamp(24px, 3vw, 40px);
}

.city-zig__body p {
  margin: 0 0 var(--space-s);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-700);
}

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

.city-zig__body a {
  color: var(--amber-600);
  font-weight: 700;
}

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

/* ------------------------------------------------------------
   PROSE SUB-SECTIONS + CHIPS (riparazione-elettrici-roma).
   .section-title--sub: an <h3> that opens a block inside a prose
   band — a step down from the band-opening .section-title, so a run
   of them doesn't read as a stack of page titles.
   .city-chips: a short keyword list as tiles, the same look as
   .city-why__chips, auto-filling columns; a linked item keeps its
   link, in amber.
------------------------------------------------------------ */
.city-prose .section-title--sub {
  margin: var(--space-l) 0 var(--space-s);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  line-height: 1.2;
}

.city-prose .section-title--sub:first-child { margin-top: 0; }

.city-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

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

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

.city-prose__col .city-chips a {
  color: var(--amber-600);
  font-weight: 700;
}

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

/* ------------------------------------------------------------
   FEATURE STRIP + PHOTO CAPTION (impianti-allarme-e-antifurto-
   milano).
   .city-feats: four one-word features (the old page's bold <p>s under
   its icon font) as tiles with a decorative SVG badge; auto-fill
   columns, so any count lays out without new CSS.
   .city-prose__caption: the old image caption under a split photo;
   the <figure> wrapper loses its default margin.
------------------------------------------------------------ */
.city-feats {
  background: var(--green-050);
  padding-block: var(--space-xl);
}

.city-feats__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}

.city-feats__item {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-m);
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}

.city-feats__icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--amber-050);
  color: var(--amber-600);
}

.city-feats__icon svg { width: 24px; height: 24px; }

.city-feats__item p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--green-900);
}

figure.city-prose__media { margin: 0; }

.city-prose__caption {
  margin-top: var(--space-xs);
  font-size: 0.85rem;
  color: var(--ink-500);
  text-align: center;
}

/* ------------------------------------------------------------
   PREVENTIVO PAGE (preventivi/intervento-elettricista-torino).
   .hero__actions h3: the old page's two hero call links are <h3>s
   (heading level kept, hard rule 9); the heading steps aside so the
   .btn inside carries all the styling.
   .city-svc-card--link: on the old page each service card is ONE
   link (icon, <h4> title, text). The card is the <a>: no underline,
   body text keeps its colour, the title turns amber on hover/focus.
------------------------------------------------------------ */
.hero__actions h3 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

a.city-svc-card--link {
  color: inherit;
  text-decoration: none;
}

a.city-svc-card--link:hover h4,
a.city-svc-card--link:focus-visible h4 { color: var(--amber-600); }

a.city-svc-card--link:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 3px;
}

.city-svc-card__text {
  display: block;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--ink-700);
  text-align: center;
}

/* ------------------------------------------------------------
   SERVICES, DARK VARIANT (preventivi/intervento-elettricista-torino,
   owner 2026-09-29). Four linked cards read as an orphaned row in the
   3-up grid, so: a dark band, a strict 2 x 2 grid, and horizontal
   cards — icon badge left, title + text right, left-aligned, with a
   small decorative arrow that nudges on hover. One column below 760px.
------------------------------------------------------------ */
.city-services--dark {
  background: linear-gradient(160deg, var(--green-900) 0%, var(--green-800) 100%);
}

.city-services--dark .section-title { color: var(--paper-000); }

.city-svc-grid.city-svc-grid--rows {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}

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

.city-svc-card.city-svc-card--row {
  position: relative;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-m);
  padding: clamp(22px, 2.6vw, 30px);
  padding-right: clamp(48px, 5vw, 60px);
  border: 0;
  border-left: 4px solid var(--amber-500);
}

.city-svc-card--row .city-svc-card__media {
  flex: 0 0 auto;
  width: clamp(60px, 7vw, 72px);
  height: clamp(60px, 7vw, 72px);
  margin: 0;
  background: var(--amber-050);
}

.city-svc-card--row .city-svc-card__media img {
  width: clamp(34px, 4vw, 42px);
  height: clamp(34px, 4vw, 42px);
}

.city-svc-card__body { min-width: 0; }

.city-svc-card--row h4 {
  margin: 0 0 var(--space-2xs);
  text-align: left;
}

.city-svc-card--row .city-svc-card__text { text-align: left; }

.city-svc-card__arrow {
  position: absolute;
  right: clamp(16px, 2vw, 22px);
  bottom: clamp(16px, 2vw, 22px);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--amber-600);
  transition: transform .22s ease, background .22s ease;
}

.city-svc-card__arrow svg { width: 18px; height: 18px; }

a.city-svc-card--row:hover .city-svc-card__arrow,
a.city-svc-card--row:focus-visible .city-svc-card__arrow {
  transform: translateX(4px);
  background: var(--amber-050);
}

@media (prefers-reduced-motion: reduce) {
  .city-svc-card__arrow { transition: none; }
  a.city-svc-card--row:hover .city-svc-card__arrow { transform: none; }
}