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

   Tokens, .container, .btn, the header/footer chrome, the sticky
   call bar and the .hero--split hero all come from global.css and
   are never redefined here (CLAUDE.md, "Section CSS" rule 2).
   Everything below is prefixed idr- so it cannot collide with a
   global component, now or later.

   Sections: services - faq - closing - categories - emergency
             (pricing + coverage now live in prezzi.css)
============================================================ */

/* --- Slots inside global components that this page fills with its
   own content. .feature-card__icon is built for a 24px inline SVG;
   this page puts a 128x128 PNG in it, so it needs sizing. --- */
.feature-card__icon img{
  width:28px; height:28px; object-fit:contain; display:block;
}
/* Deliberately a <p>, not a heading — the old page has no heading
   here and the hierarchy must match it exactly. */
.feature-card__title{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-weight:700; font-size:clamp(1.05rem,1rem + .3vw,1.2rem);
  line-height:1.3; color:var(--green-900);
}
.idr-feature-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(40, 167, 69, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
 
  .idr-feature-check svg { width: 11px; height: 11px; }
 
  .idr-section-title {
    margin: 0 0 18px;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    color: var(--green-900);
    letter-spacing: -0.01em;
  }
 
  .idr-section-text {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--ink-700);
    margin: 0 0 28px;
    max-width: 780px;
  }
 
  /* ============ Services section ============ */
 
  .idr-services {
    background: var(--paper-000);
    padding: 88px 5vw 64px;
  }
 
  .idr-services-inner {
    max-width: 1000px;
    margin: 0 auto;
  }
 
  .idr-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 36px;
  }
 
  .idr-service-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--green-100);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--green-900);
  }
 
  .idr-service-chip-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--amber-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
 
  .idr-service-chip-icon svg { width: 11px; height: 11px; }

  /* Inside a service card the column is half-width, so the chip
     grid drops to two across and loses its trailing gap. */
  .feature-card .idr-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0;
    text-align: left;
  }
  .feature-card .idr-service-chip { font-size: 14px; padding: 12px 14px; }
 
  .idr-services-closing {
    background: var(--amber-050);
    border: 1px solid var(--line-200);
    border-radius: 18px;
    padding: 28px 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
 
  .idr-services-closing p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink-700);
    max-width: 560px;
  }
 
  /* Targets global's .btn — this page's buttons moved onto it. Keeps
     the button from being squashed by the flex row and matches the
     slightly smaller size this panel used before. */
  .idr-services-closing .btn {
    flex-shrink: 0;
    padding: 15px 26px;
    font-size: 15px;
  }
 
  @media (max-width: 900px) {
    /* minmax(0,1fr): a plain 1fr track never shrinks below its longest
       word ("disincrostazione", "condizionamento"), which pushed the
       grid up to 38px past the screen on 360–390px phones. */
    .idr-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .idr-service-chip { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
  }
  @media (max-width: 480px) {
    .idr-service-grid { gap: 8px; }
    .idr-service-chip { gap: 6px; padding: 12px 8px; font-size: 13.5px; }
    .idr-service-chip-icon { width: 18px; height: 18px; }
    .idr-service-chip-icon svg { width: 9px; height: 9px; }
  }
 
  /* ============ FAQ section ============ */
 
  .idr-faq {
    background: var(--paper-050);
    padding: 64px 5vw 88px;
  }
 
  .idr-faq-inner {
    max-width: 900px;
    margin: 0 auto;
  }
 
  .idr-faq-item {
    background: var(--paper-000);
    border: 1px solid var(--line-200);
    border-radius: 16px;
    padding: 6px 26px;
    margin-bottom: 16px;
  }
 
  .idr-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--green-900);
  }
 
  .idr-faq-item summary::-webkit-details-marker { display: none; }
 
  .idr-faq-toggle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-900);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 700;
    transition: transform 0.15s ease;
  }
 
  .idr-faq-item[open] .idr-faq-toggle {
    transform: rotate(45deg);
  }
 
  .idr-faq-body {
    padding: 0 0 24px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-700);
  }
 
  .idr-faq-body p { margin: 0 0 14px; }
  .idr-faq-body p:last-child { margin-bottom: 0; }
 
  .idr-faq-checklist {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
 
  .idr-faq-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
 
  .idr-faq-checklist .idr-feature-check {
    margin-top: 2px;
  }
 
  /* ============ Closing panel ============ */
 
  .idr-closing {
    background: var(--green-900);
    padding: 72px 5vw;
  }
 
  .idr-closing-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }
 
  .idr-closing h2:where(:not(.h1-look)) {
    margin: 0 0 16px;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    color: var(--paper-000);
    letter-spacing: -0.01em;
  }
 
  .idr-closing p {
    margin: 0 0 32px;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--green-100);
  }

  /* ============ Service categories section ============ */
 
  .idr-categories {
    background: var(--paper-000);
    padding: 88px 5vw;
  }
 
  .idr-categories-inner {
    max-width: 1160px;
    margin: 0 auto;
  }
 
  .idr-categories-head {
    max-width: 620px;
    margin-bottom: 48px;
  }
 
  .idr-categories-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }
 
  .idr-categories-eyebrow-bar {
    width: 28px;
    height: 3px;
    background: var(--amber-600);
    border-radius: 2px;
    flex-shrink: 0;
  }
 
  .idr-categories-eyebrow-text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--amber-600);
  }
 
  .idr-categories-title {
    margin: 0;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    color: var(--green-900);
    letter-spacing: -0.01em;
  }
 
  .idr-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
 
  .idr-category-card {
    position: relative;
    background: var(--paper-050);
    border-radius: 24px;
    padding: 32px 30px 34px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
 
  .idr-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(14, 57, 94, 0.14);
  }
 
  .idr-category-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
  }
 
  .idr-category-media {
    width: 128px;
    height: 128px;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
  }
 
  .idr-category-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
  }
 
  .idr-category-card:hover .idr-category-media img {
    transform: scale(1.06);
  }
 
  .idr-category-title {
    margin: 0 0 16px;
    font-size: 19px;
    font-weight: 800;
    color: var(--green-900);
    line-height: 1.3;
  }
 
  .idr-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
 
  .idr-category-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    color: var(--ink-700);
  }
 
  .idr-category-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }
 
  .idr-category-card--a .idr-category-dot { background: var(--amber-600); }
  .idr-category-card--b .idr-category-dot { background: var(--green-900); }
  .idr-category-card--c .idr-category-dot { background: var(--gold-500); }
  .idr-category-card--d .idr-category-dot { background: var(--green-700); }
 
  @media (max-width: 1100px) {
    .idr-category-grid { grid-template-columns: repeat(2, 1fr); }
  }
 
  @media (max-width: 560px) {
    .idr-category-grid { grid-template-columns: 1fr; }
  }

  /* ============ Emergency dark section ============ */
 
  .idr-emergency {
    background: var(--green-950);
    padding: 92px 5vw;
  }
 
  .idr-emergency-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
  }
 
  .idr-emergency-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
  }
 
  .idr-emergency-eyebrow-bar {
    width: 28px;
    height: 3px;
    background: var(--amber-500);
    border-radius: 2px;
    flex-shrink: 0;
  }
 
  .idr-emergency-eyebrow-text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--amber-500);
  }
 
  .idr-emergency-title {
    margin: 0 0 24px;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    color: var(--paper-000);
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
 
  .idr-emergency-text {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--green-100);
    margin: 0 0 20px;
    max-width: 560px;
  }
 
  .idr-emergency-text a {
    color: var(--amber-400);
    font-weight: 700;
    text-decoration: underline;
  }
 
  .idr-emergency-cta {
    margin-top: 12px;
  }
 
  .idr-emergency-media {
    position: relative;
  }
 
  .idr-emergency-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 4.4;
    box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  }
 
  .idr-emergency-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
 
  .idr-emergency-badge {
    position: absolute;
    bottom: -22px;
    left: -22px;
    background: var(--amber-600);
    color: var(--paper-000);
    border-radius: 16px;
    padding: 16px 22px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.3);
  }
 
  .idr-emergency-badge-value {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
  }
 
  .idr-emergency-badge-label {
    font-size: 12.5px;
    margin-top: 3px;
    opacity: 0.92;
  }
 
  @media (max-width: 900px) {
    .idr-emergency-inner {
      grid-template-columns: 1fr;
      gap: 48px;
    }
    .idr-emergency-media { order: -1; max-width: 420px; margin: 0 auto; }
    .idr-emergency-text { max-width: none; }
  }
 
  @media (max-width: 480px) {
    .idr-emergency { padding: 64px 5vw; }
    .idr-emergency-badge { padding: 12px 16px; left: -10px; bottom: -16px; }
  }

  /* ============================================================
     /intervento-idraulico/idraulico-ticino/ — city page sections.
     Hero reuses .hero--split (global.css) exactly as the hub and
     /intervento-fabbro-h24/ pages do — no new hero CSS here.
     Pricing reuses .svc-pricing* from prezzi.css; the intro image+text
     reuses global's .about__grid. Everything else below is new,
     prefixed idr- to stay clear of the sections above.
  ============================================================ */

  /* ---- Icon strip ---- */
  .idr-icon-strip {
    background: var(--paper-000);
    padding: 80px 5vw 56px;
    text-align: center;
  }

  .idr-icon-strip-head {
    max-width: 640px;
    margin: 0 auto 44px;
  }

  /* Anzio heads the strip with the page's own H2, which carries a tel:
     link. Base links are color:inherit, so it would read as plain text. */
  .idr-icon-strip-head h2:where(:not(.h1-look)) a { color: var(--green-500); }
  .idr-icon-strip-head h2:where(:not(.h1-look)) a:hover { color: var(--green-700); }

  .idr-icon-strip-head h2:where(:not(.h1-look)) {
    margin: 0 0 10px;
    font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
    color: var(--green-900);
  }

  .idr-icon-strip-head h3 {
    margin: 0;
    font-weight: 400;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink-700);
  }

  .idr-icon-grid {
    --col-min: 140px; --gap: 20px; --cols-max: 6;
    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)
    );
    max-width: 1100px;
    margin: 0 auto;
  }

  .idr-icon-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 12px;
  }

  .idr-icon-tile img { width: 48px; height: 48px; object-fit: contain; }

  /* Most pages label these tiles with <strong>; Busto Arsizio's source
     uses <h5>, and that heading level has to survive; Bologna and Parma
     use <b> on a tile or two, and Parma splits one label across a
     <strong> and a <b>, which a <span> keeps on one line. Same look
     whichever the source used. */
  .idr-icon-tile strong,
  .idr-icon-tile b,
  .idr-icon-tile span,
  .idr-icon-tile h4,
  .idr-icon-tile h5 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--green-900);
    line-height: 1.35;
  }

  /* ---- Intro (image + prose — reuses global .about__grid) ---- */
  .idr-intro {
    background: var(--paper-050);
    padding: 72px 5vw;
  }

  .idr-intro-call {
    margin-top: 20px;
  }

  /* .btn is nowrap, and "CHIAMA SUBITO 03621637209" (Monza, 11 digits)
     is wider than a 320–360px phone's column: the page overflowed
     sideways and dragged the fixed .call-bar with it (same fault
     fabbro.css records for Asti). Wrapping only kicks in when the line
     doesn't fit, so wider screens render exactly as before. */
  .idr-intro-call .btn {
    white-space: normal;
    max-width: 100%;
  }


  /* Carpi draws the same rule with a real <hr> instead of characters.
     Nothing else on the site uses one, so it gets its look here. */
  .idr-intro hr {
    width: 72px;
    height: 3px;
    margin: 0 0 18px;
    border: 0;
    border-radius: 2px;
    background: var(--amber-500);
  }

  /* Velletri draws a short red rule under its H2 with a run of em-dashes.
     Keeping the characters keeps the copy intact; the colour is what the
     old page's inline style did. */
  .idr-intro-divider {
    margin: -6px 0 14px;
    color: var(--amber-500);
    letter-spacing: -1px;
    line-height: 1;
  }

  /* global.css paints every link inside .about__content green-500, which
     also catches the call button and turns its label blue. Put the
     button's own colour back — it wins on specificity (0,3,1). */
  .idr-intro .about__content a.btn,
  .idr-intro .about__content a.btn:hover,
  .idr-intro .about__content a.btn:focus-visible {
    color: var(--paper-000);
  }

  /* ---- Dove operiamo — subhead + city tile grid ---- */
  .idr-coverage {
    background: var(--green-050);
    padding: 72px 5vw;
    text-align: center;
  }

  .idr-coverage h3 {
    margin: 0 0 36px;
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
    color: var(--green-900);
  }

  .idr-city-grid {
    --col-min: 180px; --gap: 18px; --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)
    );
    max-width: 900px;
    margin: 0 auto;
  }

  .idr-city-tile {
    display: block;
    background: var(--paper-000);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-m);
    padding: 22px 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  a.idr-city-tile:hover { border-color: var(--green-700); box-shadow: var(--shadow-card); }

  .idr-city-tile h4 { margin: 0; font-size: 16px; color: var(--green-900); }
  a.idr-city-tile h4 { color: var(--green-700); }

  /* ---- Trust band — closing dark prose panel ---- */
  .idr-trust {
    background: var(--green-950);
    padding: 88px 5vw;
    text-align: center;
  }

  .idr-trust-inner { max-width: 820px; margin: 0 auto; }

  /* Ticino heads this band with an h3, Lugano with an h2 — both sit on
     the dark panel, so both take the same white treatment. */
  .idr-trust h2:where(:not(.h1-look)),
  .idr-trust h3 {
    margin: 0 0 20px;
    color: var(--paper-000);
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  }

  .idr-trust-lead {
    margin: 0 0 28px;
    color: var(--green-100);
    font-size: 17px;
    line-height: 1.6;
  }

  .idr-trust-lead a { color: var(--amber-400); font-weight: 700; }

  .idr-trust-grid {
    margin-top: 56px;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    text-align: left;
  }

  .idr-trust-item {
    background: var(--green-900);
    border: 1px solid var(--green-800);
    border-radius: var(--radius-l);
    padding: 32px 26px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .idr-trust-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-pop);
  }

  .idr-trust-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--amber-500);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .idr-trust-icon svg {
    width: 24px;
    height: 24px;
    color: var(--paper-000);
  }

  .idr-trust-item strong {
    display: block;
    color: var(--paper-000);
    font-size: 17px;
    margin-bottom: 10px;
  }

  .idr-trust-item p {
    margin: 0;
    color: var(--green-100);
    font-size: 15px;
    line-height: 1.6;
  }

  /* ---- Service cards, full-width rows, icon beside the text ----
     Scoped to this section so global's .feature-card (homepage and
     the idraulico hub) keeps its stacked layout. */
  .idr-services-split .features__grid {
    --cols-max: 1;
  }

  /* The icon is taken out of flow and the card reserves a gutter for it,
     so the copy column holds however many paragraphs a card carries.
     (A grid with pinned rows would overlap the 2nd paragraph on the 1st.)
     The left padding mirrors global's .feature-card padding. */
  .idr-services-split .feature-card {
    position: relative;
    padding-left: calc(clamp(20px, 2.5vw, 28px) + 132px + 28px);
    min-height: calc(132px + 2 * clamp(24px, 3vw, 34px));
  }

  .idr-services-split .feature-card__icon {
    position: absolute;
    left: clamp(20px, 2.5vw, 28px);
    top: clamp(24px, 3vw, 34px);
    width: 132px;
    height: 132px;
    border-radius: var(--radius-m);
    margin-bottom: 0;
  }

  .idr-services-split .feature-card__icon img { width: 96px; height: 96px; }

  /* Most pages ship 128px card icons, which take the 96px above happily.
     Pesaro e Urbino's are 64px originals — rendering those at 96px makes
     them visibly soft, so they stay at their own size inside the tile. */
  .idr-services-split .feature-card__icon img[width="64"] {
    width: 64px;
    height: 64px;
  }

  .idr-services-split .feature-card p { margin: 0 0 14px; }
  .idr-services-split .feature-card p:last-child { margin-bottom: 0; }

  /* global.css gives .feature-card headings their own link colour but
     nothing for links in the body copy, which fall back to the base
     a{color:inherit} and read as plain text. Every city page puts its
     phone number in these paragraphs, so they have to look clickable. */
  .idr-services-split .feature-card p a,
  .idr-services-split .feature-card li a,
  .idr-services-inline .feature-card p a,
  .idr-services-stack .feature-card p a,
  .idr-services-2col .feature-card p a {
    color: var(--green-500);
    font-weight: 700;
  }
  .idr-services-split .feature-card p a:hover,
  .idr-services-split .feature-card li a:hover,
  .idr-services-inline .feature-card p a:hover,
  .idr-services-stack .feature-card p a:hover,
  .idr-services-2col .feature-card p a:hover {
    color: var(--green-700);
  }

  /* A few pages (Viterbo) put bullet lists inside a card. */
  .idr-services-split .feature-card ul {
    margin: 0 0 14px;
    padding-left: 20px;
    list-style: disc;
  }

  .idr-services-split .feature-card li {
    margin-bottom: 6px;
    font-size: .97rem;
    color: var(--ink-700);
  }

  .idr-services-split .feature-card ul:last-child { margin-bottom: 0; }

  /* Same list treatment for the stacked two-column layout, whose
     cards are centred — the list itself still reads left. */
  .idr-services-2col .feature-card ul {
    margin: 0 0 14px;
    padding-left: 20px;
    list-style: disc;
    text-align: left;
  }
  .idr-services-2col .feature-card li {
    margin-bottom: 6px;
    font-size: .97rem;
    color: var(--ink-700);
  }
  .idr-services-2col .feature-card ul:last-child { margin-bottom: 0; }

  /* La Spezia closes two cards with a run of <br />-separated
     service names inside one paragraph, centred in the source.
     Kept centred, with tighter leading so it reads as a list. */
  .idr-services-linelist {
    margin: 0;
    padding: 16px 18px;
    background: var(--paper-050);
    border-radius: var(--radius-s);
    border-left: 3px solid var(--amber-500);
    font-size: .93rem;
    line-height: 1.9;
    color: var(--ink-700);
  }
  .idr-services-stack .feature-card .idr-services-linelist,
  .idr-services-2col .feature-card .idr-services-linelist { text-align: left; }

  @media (max-width: 560px) {
    .idr-services-split .feature-card {
      padding-left: calc(clamp(20px, 2.5vw, 28px) + 80px + 16px);
      min-height: calc(80px + 2 * clamp(24px, 3vw, 34px));
    }
    .idr-services-split .feature-card__icon { width: 80px; height: 80px; }
    .idr-services-split .feature-card__icon img { width: 56px; height: 56px; }
  }

  /* Lugano captions its intro photo. */
  .idr-intro-caption {
    margin: 10px 0 0;
    font-size: 14px;
    font-style: italic;
    text-align: center;
    color: var(--ink-500);
  }

  /* A call button sits between the services subhead and the cards on the
     Lugano page, rather than closing the section. */
  .idr-services-lead-cta {
    margin: 0 0 36px;
    text-align: center;
  }

  .idr-services-lead-cta .btn {
    white-space: normal;
    max-width: 100%;
  }

  /* The trust band centres its content, so its closing button only needs
     room above the credential cards. */
  .idr-trust-cta { margin: 0 0 8px; }

  /* ---- Service cards with the icon stacked above a centred heading ----
     Lugano's cards put a 128px PNG above the title rather than beside it.
     global's .feature-card__icon is a 48px tile built for a 24px inline
     SVG, so the icon block is resized and centred here. */
  .idr-services-stack .feature-card {
    text-align: center;
  }

  .idr-services-stack .feature-card__icon {
    width: 104px;
    height: 104px;
    background: transparent;
    margin: 0 auto 18px;
  }

  .idr-services-stack .feature-card__icon img {
    width: 88px;
    height: 88px;
  }

  .idr-services-stack .feature-card p {
    text-align: left;
  }

  /* Three across by default; the fluid grid drops to two columns and then
     one as the viewport narrows. */
  .idr-services-stack .features__grid { --cols-max: 3; }

  /* --3-2: three-up first row, two-up second — the layout Lugano's five
     cards use. A six-track grid gives both from one set of tracks: the
     first three cards take two tracks each, the rest take three. Only
     above 900px; below that the fluid grid takes over again. */
  @media (min-width: 900px) {
    .idr-services-stack--3-2 .features__grid {
      grid-template-columns: repeat(6, 1fr);
    }
    .idr-services-stack--3-2 .feature-card:nth-child(-n + 3) { grid-column: span 2; }
    .idr-services-stack--3-2 .feature-card:nth-child(n + 4)  { grid-column: span 3; }
  }

  @media (min-width: 900px) {
    .idr-services-stack .feature-card p { text-align: justify; }
  }

  @media (max-width: 560px) {
    .idr-services-stack .feature-card__icon { width: 84px; height: 84px; }
    .idr-services-stack .feature-card__icon img { width: 68px; height: 68px; }
  }

  /* Single-column variant: cards run full width, one per row. Kept as a
     modifier so the pages that put the Italy map in a spare grid cell
     (Bolzano, Ancona) keep their three-column layout. */
  .idr-services-1col .features__grid { --cols-max: 1; }

  /* Two-column variant: Bologna's nine cards carry no icons of their
     own and sat two-up on the old page, so the grid stops at two and
     the cards keep global's plain stacked layout. */
  .idr-services-2col .features__grid { --cols-max: 2; }

  .idr-services-2col .feature-card p { margin: 0 0 14px; }
  .idr-services-2col .feature-card p:last-child { margin-bottom: 0; }

  /* Bologna floats a row of six 128px service icons above the card
     grid. They carry no label and no link of their own, so they read
     as a decorative rule rather than tiles: .idr-icon-grid does the
     fluid columns, and only the tile padding and icon size change. */
  .idr-services-iconrow {
    margin: 0 0 40px;
  }

  .idr-services-iconrow .idr-icon-tile { padding: 0; }

  .idr-services-iconrow .idr-icon-tile img {
    width: 72px;
    height: 72px;
  }

  @media (max-width: 560px) {
    .idr-services-iconrow .idr-icon-tile img { width: 56px; height: 56px; }
  }

  /* ---- Service cards whose icon lives inside the heading ----
     Bolzano puts each card's 64px icon inside the h4 instead of in a
     separate .feature-card__icon block, so the icon cannot be pulled
     out to a gutter the way .idr-services-split does. Line it up with
     the label and let a long label wrap beside it. */
  .idr-services-inline .feature-card h4 {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .idr-services-inline .feature-card h4 img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    vertical-align: middle;
  }

  /* Vercelli nests the icon inside the heading's <strong> rather than
     beside it, so the <strong> is the single flex item and the icon
     sits inline with the label. vertical-align above keeps them on
     the same baseline; the gap is then the markup's own space. */

  /* The spare cell can hold a heading rather than a bare image
     (Vercelli wraps its map in an h4 with no text of its own). */
  .idr-services-grid-map h4 { margin: 0; }

  /* ---- Centred call button(s) closing the services block ---- */
  .idr-services-cta {
    margin-top: 44px;
    text-align: center;
  }
  /* Savona drops the map + call button into the grid's spare cell
     instead of a full-width strip below it. */
  .idr-services-cta--cell {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* One page's CTA label is a full sentence, so it has to be allowed to
     wrap — .btn is nowrap by default and would overflow on a phone. */
  .idr-services-cta .btn {
    white-space: normal;
    max-width: 100%;
    margin: 7px;
  }

  .idr-services-cta-map {
    display: block;
    width: 256px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 28px;
  }
  /* Genova wraps its map in an empty <h4> (a defect kept from the
     old page); the wrapper must not add heading spacing. */
  .idr-services-cta h4 { margin: 0; }

  /* ---- Italy map placed as a grid cell rather than below the cards ----
     Where a page's card count leaves the last cell of a row empty
     (Bolzano: five cards on a three-column grid), the map fills it and
     centres in whatever space that cell has. */
  .idr-services-grid-map {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .idr-services-grid-map img {
    width: 100%;
    max-width: 256px;
    height: auto;
  }

  /* Most pages drop the portrait Italy map into that cell, which the
     256px cap suits. Ferrara's is a wide city map (700x369) — capped it
     would render as a thumbnail, so it fills the cell instead. */
  .idr-services-grid-map--wide img { max-width: 100%; }

  /* Torino fills that cell with a lone 128px service icon rather than a
     map. Stretching it to 256px would show the upscaling, so icon-sized
     originals stay at their own size, as they do in .idr-services-split. */
  .idr-services-grid-map img[width="128"] {
    width: 128px;
    height: 128px;
  }

  /* ---- Linked icon tiles — some strip items are links on the
     Milano page, plain text on the others. ---- */
  a.idr-icon-tile strong { transition: color .15s ease; }
  a.idr-icon-tile:hover strong { color: var(--amber-600); }

  /* Genova links only the label text, not the whole tile, so the
     anchor sits inside <strong> instead of wrapping it. */
  .idr-icon-tile strong a { transition: color .15s ease; }
  .idr-icon-tile strong a:hover { color: var(--amber-600); }

  /* ---- Prose block — headings + body copy, no card chrome ---- */
  .idr-prose {
    background: var(--paper-000);
    padding: 72px 5vw;
  }

  .idr-prose-inner {
    max-width: 860px;
    margin: 0 auto;
  }

  .idr-prose h2:where(:not(.h1-look)) {
    margin: 0 0 16px;
    font-size: clamp(24px, 2.4vw, 32px);
    color: var(--green-900);
  }

  .idr-prose h3 {
    margin: 0 0 14px;
    font-size: clamp(20px, 2vw, 25px);
    color: var(--green-900);
  }

  .idr-prose p {
    margin: 0 0 18px;
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--ink-700);
  }

  .idr-prose :is(h2:where(:not(.h1-look)), h3):not(:first-child) { margin-top: 40px; }
  /* global.css sets a{color:inherit}, so prose links need their own
     colour or they read as plain body text. */
  .idr-prose p a {
    color: var(--green-500);
    font-weight: 700;
  }
  .idr-prose p a:hover { color: var(--green-700); }

  /* ---- Blue variant — the deep brand navy, same treatment as
     .idr-closing. Used by Imperia's closing section; the plain
     white .idr-prose is unchanged for Milano. ---- */
  .idr-prose--blue { background: var(--green-900); }
  .idr-prose--blue :is(h2:where(:not(.h1-look)), h3) { color: var(--paper-000); }
  .idr-prose--blue p { color: var(--green-100); }
  .idr-prose--blue p a { color: var(--gold-500); }
  .idr-prose--blue p a:hover { color: var(--amber-400); }

  /* ---- Editorial blocks — icon rail down the left, copy right,
     closing line pulled out as a callout ---- */
  .idr-editorial {
    background: var(--green-050);
    padding: 80px 5vw;
  }

  .idr-editorial-inner {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 52px;
  }

  .idr-editorial-block {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 26px;
  }

  .idr-editorial-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .idr-editorial-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--amber-500);
    color: var(--paper-000);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(255, 81, 0, .3);
  }

  .idr-editorial-dot svg { width: 22px; height: 22px; }

  .idr-editorial-line {
    flex: 1;
    width: 2px;
    border-radius: 1px;
    background: linear-gradient(var(--green-700), transparent);
    opacity: .35;
  }

  /* Blocks carry an h2 on some pages and an h3 on others (Roma mixes
     both); the rail treatment is the same either way. */
  .idr-editorial-body h2:where(:not(.h1-look)) {
    margin: 4px 0 16px;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.25;
    color: var(--green-900);
  }

  .idr-editorial-body h3 {
    margin: 4px 0 16px;
    font-size: clamp(19px, 1.7vw, 23px);
    line-height: 1.35;
    color: var(--green-900);
  }

  .idr-editorial-body p {
    margin: 0 0 16px;
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--ink-700);
  }

  .idr-editorial-body p:last-child { margin-bottom: 0; }

  .idr-editorial-body .idr-editorial-callout {
    margin: 26px 0 0;
    padding: 18px 24px;
    background: var(--paper-000);
    border-left: 4px solid var(--amber-500);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    box-shadow: var(--shadow-card);
    font-size: 17px;
    font-weight: 600;
    color: var(--green-900);
  }

  .idr-editorial-body a { color: var(--green-500); font-weight: 700; }
  .idr-editorial-body a:hover { color: var(--green-700); }

  /* The callout closes the block on Roma and Milano. On Pomezia the
     pulled-out line opens it instead, so the margin has to flip. */
  .idr-editorial-body .idr-editorial-callout:not(:last-child) {
    margin: 0 0 26px;
  }

  /* A section with a single block has nothing for the connector line to
     join to, so it would hang into empty space below the dot. (Roma and
     Milano stack several blocks, where it runs from one dot to the next.) */
  .idr-editorial-inner > :only-child .idr-editorial-line { display: none; }

  @media (max-width: 560px) {
    .idr-editorial { padding: 56px 5vw; }
    .idr-editorial-block { grid-template-columns: 34px 1fr; gap: 16px; }
    .idr-editorial-dot { width: 34px; height: 34px; }
    .idr-editorial-dot svg { width: 17px; height: 17px; }
  }

  /* ---- Closing keyword lists ----
     Chieti closes with a heading over four <ul> columns of service
     names. Kept as real lists; the columns flow into a fluid grid and
     each item gets a check mark instead of a bullet. */
  .idr-keywords {
    background: var(--green-050);
    padding: 72px 5vw;
  }

  .idr-keywords-inner {
    max-width: 1080px;
    margin: 0 auto;
  }

  .idr-keywords h3 {
    margin: 0 0 36px;
    text-align: center;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.35;
    color: var(--green-900);
  }

  .idr-keywords-grid {
    --col-min: 220px; --gap: 20px; --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)
    );
  }

  .idr-keywords-grid ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .idr-keywords-grid li {
    position: relative;
    padding: 8px 0 8px 26px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink-700);
    border-bottom: 1px solid var(--line-100);
  }

  .idr-keywords-grid li:last-child { border-bottom: 0; }

  .idr-keywords-grid li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 15px;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--amber-500);
    border-bottom: 2px solid var(--amber-500);
    transform: rotate(-45deg);
  }

  /* ---- Dark band — closing copy with gold section labels ---- */
  .idr-band {
    background: var(--green-950);
    padding: 80px 5vw;
  }

  .idr-band-inner {
    max-width: 960px;
    margin: 0 auto;
  }

  .idr-band h3 {
    margin: 0 0 32px;
    color: var(--paper-000);
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.45;
  }

  .idr-band h4,
  .idr-band-label {
    margin: 0 0 10px;
    color: var(--gold-500);
    font-size: 18px;
    font-weight: 700;
  }

  .idr-band h4 {
    margin-top: 32px;
    color: var(--paper-000);
    font-size: clamp(19px, 1.8vw, 22px);
    line-height: 1.4;
  }
  .idr-band-inner > h4:first-child { margin-top: 0; margin-bottom: 28px; }

  .idr-band p {
    margin: 0 0 18px;
    color: var(--green-100);
    font-size: 16px;
    line-height: 1.8;
  }

  .idr-band .btn { margin-top: 14px; }

  /* Base links are color:inherit, which on this band makes a tel: link
     identical to the copy around it. Gold is already the band's accent. */
  .idr-band p a { color: var(--gold-500); font-weight: 700; }

  /* ...but a call button inside that copy is not a text link: the rule
     above outranks .btn--primary's own colour and turns its label gold
     on an orange fill. Buttons keep white text. */
  .idr-band p a.btn { color: var(--paper-000); }

  /* Velletri closes on a single sentence rather than a block of copy, so
     the band narrows and centres instead of running the full 960px. */
  .idr-band--lead .idr-band-inner { max-width: 720px; text-align: center; }
  .idr-band--lead p { margin: 0; font-size: 18px; }

  /* ---- City cards inside the dark band ---- */
  .idr-band-cities {
    --col-min: 220px; --gap: 14px; --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 0 32px;
  }

  .idr-band-city {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--green-900);
    border: 1px solid var(--green-800);
    border-radius: var(--radius-m);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--paper-000);
  }

  .idr-band-city svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--gold-500);
  }

  @media (max-width: 560px) {
    .idr-band-cities { --cols-max: 2; --col-min: 150px; }
    .idr-band-city { padding: 12px; gap: 9px; font-size: 13.5px; }
  }

  /* ============================================================
     /intervento-caldaie/ — the few pieces nothing above covers.
     Everything else on that page is an existing idr- or global
     component.
  ============================================================ */

  /* ---- Intro tiles whose icon lives inside the H2 ----
     The old page puts each 128px icon inside the heading, so it
     cannot use .feature-card__icon. Stacked above the title,
     centred, same size as .idr-services-stack's icons. */
  .idr-services-headicon .feature-card h2:where(:not(.h1-look)) img {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    object-fit: contain;
  }

  @media (max-width: 560px) {
    .idr-services-headicon .feature-card h2:where(:not(.h1-look)) img { width: 68px; height: 68px; }
  }

  /* ---- Icon strip: the heading's <hr> and call line ---- */
  .idr-icon-strip-head hr {
    width: 72px;
    height: 3px;
    margin: 0 auto 18px;
    border: 0;
    border-radius: 2px;
    background: var(--green-900);
  }

  .idr-icon-strip-call {
    margin: 0;
    font-size: 1.1rem;
    color: var(--amber-500);
  }

  .idr-icon-strip-call a { color: inherit; }
  .idr-icon-strip-call a:hover { text-decoration: underline; }

  /* ---- Icon strip, tiles as white cards on the tinted band ----
     Four tiles, so the grid stops at four across; two across on a
     phone (150px minimum). */
  .idr-icon-strip--cards { background: var(--green-050); }

  .idr-icon-strip--cards .idr-icon-grid {
    --cols-max: 4;
    --col-min: 150px;
    max-width: 960px;
  }

  .idr-icon-strip--cards .idr-icon-tile {
    justify-content: center;
    padding: 28px 16px;
    background: var(--paper-000);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    transition: transform .18s ease, border-color .18s ease;
  }

  .idr-icon-strip--cards a.idr-icon-tile:hover {
    transform: translateY(-3px);
    border-color: var(--green-700);
  }

  .idr-icon-strip--cards .idr-icon-tile h4 { transition: color .15s ease; }
  .idr-icon-strip--cards a.idr-icon-tile:hover h4 { color: var(--amber-600); }

  /* ---- Region cards ("Dove operiamo") ----
     Each region <p> is a card: its label on top, its cities as pills
     below. The <strong>/<b> wrappers from the old markup are kept
     but take no box (display: contents), so the label span, the city
     spans and the separator text all become items of the card's own
     flex row. The old " | " and " – " separators stay in the text,
     drawn faintly between the pills. */
  .idr-regions-head { margin-bottom: 36px; }
  .idr-regions-head hr { margin-bottom: 0; }

  .idr-regions-layout {
    display: grid;
    gap: 40px;
    align-items: start;
  }

  @media (min-width: 980px) {
    .idr-regions-layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .idr-regions-map { position: sticky; top: 110px; }
  }

  .idr-regions-grid {
    display: grid;
    gap: 16px;
  }

  @media (min-width: 700px) {
    .idr-regions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .idr-region-card--wide { grid-column: 1 / -1; }
  }

  .idr-region-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 8px 6px;
    margin: 0;
    padding: 20px 22px 22px;
    background: var(--paper-000);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    font-size: 14px;
    line-height: 1.3;
    color: var(--line-200);
  }

  .idr-region-card > strong,
  .idr-region-card > b { display: contents; }

  /* The old markup's line breaks: the card layout does the breaking. */
  .idr-region-card br { display: none; }

  .idr-region-name {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-100);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--green-900);
  }

  .idr-region-name::before {
    content: "";
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M12 21s-7-6.5-7-11.5C5 5.9 8.1 3 12 3s7 2.9 7 6.5C19 14.5 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E")
      center / 16px no-repeat,
      var(--amber-500);
  }

  /* inline-block, not inline-flex: several cities are two anchors
     ("Intervento caldaie a" + " Roma") and flex would trim the
     space that opens the second one. */
  .idr-city {
    display: inline-block;
    padding: 8px 14px;
    background: var(--green-050);
    border: 1px solid var(--line-200);
    border-radius: 999px;
    font-weight: 600;
    color: var(--green-900);
    transition: border-color .15s ease, background .15s ease;
  }

  .idr-city:has(a):hover {
    border-color: var(--green-700);
    background: var(--green-100);
  }

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

  /* The map file is 262px wide locally; any wider and it goes soft. */
  .idr-regions-map img {
    display: block;
    width: 100%;
    max-width: 262px;
    height: auto;
    margin-inline: auto;
  }

  @media (max-width: 560px) {
    .idr-region-card { padding: 16px 16px 18px; }
    .idr-regions-map img { max-width: 220px; }
  }

  /* ---- Closing call box: an H1 in the source, drawn as the old
     orange rounded box. Its two spans stack; the <br> between them
     stays in the markup but has no job inside the flex column. ---- */
  .idr-closing-call {
    margin: 36px 0 0;
    text-align: center;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    line-height: 1.2;
  }

  .idr-closing-call a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 44px;
    border-radius: var(--radius-l);
    background: var(--amber-500);
    color: var(--paper-000);
    box-shadow: 0 10px 26px rgba(255, 81, 0, .35);
    transition: background .15s ease, box-shadow .15s ease;
  }

  .idr-closing-call a:hover {
    background: var(--amber-600);
    box-shadow: 0 14px 30px rgba(255, 81, 0, .45);
  }

  .idr-closing-call br { display: none; }

  .idr-closing-call span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .idr-closing-call svg { width: .85em; height: .85em; flex-shrink: 0; }

  /* The navy panel's H2 is a link on this page. */
  .idr-prose--blue :is(h2:where(:not(.h1-look)), h3) a:hover { color: var(--gold-500); }

  @media (max-width: 480px) {
    .idr-closing-call a { display: flex; padding: 20px 16px; }
  }

  /* ============================================================
     /riparazione-caldaie/riparazione-caldaie-milano/ — image/text
     rows and the closing band. Rows reuse .idr-intro + global's
     .about__grid; only the pieces below are new.
  ============================================================ */

  /* Alternating row colour for stacked .idr-intro rows. */
  .idr-intro--white { background: var(--paper-000); }

  /* The riparazione-caldaie rows put an <hr> between the H2 and the
     copy; riparazione-caldaie-mantova's source has none, so its first
     paragraph would sit on global's 8px heading margin. Opt-in
     modifier, so the idraulico city pages (which run H2 straight into
     a paragraph by design) are untouched. */
  .idr-intro--nohr .about__content h2:where(:not(.h1-look)) + p { margin-top: 18px; }

  /* Section H3 inside a row. The old page drew a short rule under it
     with a background image (hr.png); same idea, drawn in CSS. */
  .idr-split-title {
    position: relative;
    margin: 0 0 20px;
    padding-bottom: 16px;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.3;
    color: var(--green-900);
  }

  .idr-split-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 3px;
    border-radius: 2px;
    background: var(--amber-500);
  }

  /* The row illustrations are 291px originals — shown at their own
     size so they stay sharp, centred in the column. */
  .idr-intro .about__media img[width="291"] {
    max-width: 291px;
    margin-inline: auto;
  }

  /* ---- Closing band split: feature line left, call box right ---- */
  .idr-band--split .idr-band-inner {
    display: grid;
    gap: 36px;
    align-items: center;
  }

  @media (min-width: 900px) {
    .idr-band--split .idr-band-inner { grid-template-columns: minmax(0, 1fr) auto; }
  }

  .idr-band-feature {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .idr-band-feature > p { margin: 0; flex-shrink: 0; }
  .idr-band-feature img { display: block; width: 96px; height: 96px; }

  .idr-band .idr-band-feature h4 { margin: 0 0 8px; }
  .idr-band-feature div p { margin: 0; }

  /* .idr-band's own p and p a rules (font size, gold links) outrank
     the call box's classes, so its size and white label go back. */
  .idr-band .idr-closing-call {
    margin: 0;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    line-height: 1.2;
    text-align: center;
  }

  .idr-band .idr-closing-call a { color: var(--paper-000); }

  /* riparazione-caldaie-bologna closes on a plain single-line call
     button instead of the two-line box; centred when the band stacks,
     full width on a phone like the site's other lone buttons. */
  .idr-band-cta { text-align: center; }

  @media (max-width: 480px) {
    .idr-band-cta .btn { width: 100%; }
  }

  @media (max-width: 560px) {
    .idr-band-feature { flex-direction: column; text-align: center; gap: 16px; }
    .idr-band-feature img { width: 80px; height: 80px; }
  }

  /* ---- Hero headline that is not a heading ----
     riparazione-caldaie-brescia's export sets its hero headline in a
     <p>, and the page has no H1 anywhere. Heading levels are fixed,
     so it stays a <p>; this gives it the exact type global.css's
     .hero.hero--split h1 gets, so the hero reads the same as its
     sibling pages. (Same idea as .hero--city .hero__headline in
     elettricista.css, which that file scopes to its own pages.) */
  .hero.hero--split .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: -.02em;
    color: var(--ink-900);
    text-wrap: balance;
  }

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

  /* ---- riparazione-caldaie-parma: older template ----
     Three service cards side by side (global .features grid, three
     up by default), each an illustration over an H2 and its copy.
     Headings centre under the picture; copy stays left-aligned
     (global justifies .feature-card p from 900px). */
  .idr-services-cards .feature-card { text-align: center; }
  .idr-services-cards .feature-card p { text-align: left; }

  .idr-card-illus img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto 18px;
  }

  /* The closing sentence is an H1 in the source (the page's second);
     global h1 sizing is hero-scale, so it is brought down to a
     panel headline on the navy .idr-closing band. */
  .idr-closing .idr-closing-h1 {
    margin: 0 0 28px;
    font-size: clamp(22px, 1.4rem + 1vw, 30px);
    font-weight: 800;
    line-height: 1.3;
    color: var(--paper-000);
  }

  /* ---- riparazione-caldaie-ravenna ----
     The intro photo carries its own H2 caption above it (a WPBakery
     single-image heading in the source); set as a quiet label so it
     does not compete with the section H2 beside it. */
  .idr-intro .about__media .idr-media-title {
    margin: 0 0 14px;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.3;
    text-align: center;
    color: var(--green-900);
  }

  /* ---- riparazione-caldaie-torino ----
     Heading row over the three cards: the H2 with its orange rule on
     the left, the call button on the right; stacked on phones. */
  .idr-cards-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    margin-bottom: var(--space-xl);
  }
  .idr-cards-head .idr-split-title { margin: 0; }

  /* ---- riparazione-caldaie-alessandria ----
     Each call button sits inside an H3 in the source; the H3 is kept
     but neutralised so the .btn inside looks like any other. The
     closing sentence (also an H3) is the navy panel's headline. */
  .idr-cta-h3 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
  .idr-cta-h3 .btn { white-space: normal; max-width: 100%; }
  /* ---- riparazione-caldaie-novara ----
     The band's second line is an H5 here (a <p><strong> elsewhere),
     set to match. The call box is a <div> whose label is plain text
     split by a <br>, so here the <br> does the stacking. */
  .idr-band .idr-band-feature h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--green-100);
  }
  /* riparazione-caldaie-prato: the same pair one level up, H3 + H4. */
  .idr-band .idr-band-feature h3 {
    margin: 0 0 8px;
    font-size: clamp(19px, 1.8vw, 22px);
    line-height: 1.4;
  }
  .idr-band .idr-band-feature h3 + h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--green-100);
  }
  .idr-band div.idr-closing-call { font-weight: 700; }
  .idr-band div.idr-closing-call a { display: inline-block; }
  .idr-band div.idr-closing-call br { display: inline; }
  @media (max-width: 480px) {
    .idr-band div.idr-closing-call a { display: block; }
  }

  /* ---- idraulico-milano/emergenza-allagamenti-e-riparazione-perdite-milano ----
     Sub-page of Idraulico Milano. The hero's second line is an H4 in
     the source; set as the hero subtitle. */
  .hero.hero--split h4.hero__sub {
    margin: 16px 0 0;
    max-width: 46ch;
    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink-700);
  }

  /* "Perché scegliere…" — the page's only H1 sits mid-page in the
     source, above six checkmark labels. Brought down from hero scale
     to a section headline; the labels reuse the chip grid. */
  .idr-why {
    background: var(--paper-000);
    padding: clamp(56px, 6vw, 80px) 5vw;
  }
  .idr-why-inner { max-width: 1000px; margin: 0 auto; }
  .idr-why h1,
.idr-why h2:where(.h1-look) {
    margin: 0 0 32px;
    font-size: clamp(26px, 2.8vw, 36px);
    line-height: 1.25;
    text-align: center;
    color: var(--green-900);
    text-wrap: balance;
  }
  .idr-why .idr-service-grid { margin-bottom: 0; }

  /* Copy with a link list beside it (8/4 in the source). */
  .idr-aside-split {
    background: var(--paper-050);
    padding: clamp(56px, 6vw, 80px) 5vw;
  }
  .idr-aside-split-inner { max-width: 1140px; margin: 0 auto; }
  .idr-aside-split h2:where(:not(.h1-look)) {
    margin: 0 0 24px;
    font-size: clamp(24px, 2.4vw, 32px);
    color: var(--green-900);
  }
  .idr-aside-split-grid { display: grid; gap: 32px; align-items: start; }
  @media (min-width: 900px) {
    .idr-aside-split-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; }
  }
  .idr-aside-split-copy p {
    margin: 0 0 18px;
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--ink-700);
  }
  .idr-aside-split-copy p a,
  .idr-aside-card a { color: var(--green-500); font-weight: 700; }
  .idr-aside-split-copy p a:hover,
  .idr-aside-card a:hover { color: var(--green-700); }
  .idr-aside-card {
    background: var(--paper-000);
    border: 1px solid var(--line-200);
    border-top: 4px solid var(--amber-500);
    border-radius: 18px;
    padding: 26px 26px 20px;
  }
  .idr-aside-card h4 {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.35;
    color: var(--green-900);
  }
  .idr-aside-card ul { list-style: none; margin: 0; padding: 0; }
  .idr-aside-card li {
    position: relative;
    padding: 10px 0 10px 22px;
    border-top: 1px solid var(--line-200);
    font-size: 15.5px;
    line-height: 1.45;
    color: var(--ink-700);
  }
  .idr-aside-card li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 17px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber-500);
  }

  /* "SOS Idraulico Milano 24 ore su 24" — navy heading card on the
     left, copy on the right, the last paragraph
     pulled out as an orange-edged callout. */
  .idr-sos {
    background: var(--paper-000);
    padding: clamp(56px, 6vw, 88px) 5vw;
  }
  .idr-sos-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    gap: 28px;
    align-items: start;
  }
  @media (min-width: 900px) {
    .idr-sos-inner { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; }
  }
  .idr-sos-head {
    position: relative;
    overflow: hidden;
    background: var(--green-900);
    border-radius: 22px;
    padding: 34px 30px 36px;
    box-shadow: 0 18px 40px rgba(14, 57, 94, .18);
  }
  /* soft orange glow in the corner, purely decorative */
  .idr-sos-head::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 81, 0, .35), rgba(255, 81, 0, 0) 70%);
    pointer-events: none;
  }
  .idr-sos-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border-radius: 16px;
    background: var(--amber-500);
    color: var(--paper-000);
    box-shadow: 0 8px 20px rgba(255, 81, 0, .35);
  }
  .idr-sos-icon svg { width: 28px; height: 28px; }
  .idr-sos-head h3 {
    position: relative;
    margin: 0;
    padding-bottom: 18px;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.25;
    color: var(--paper-000);
  }
  .idr-sos-head h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: var(--amber-500);
  }
  .idr-sos-body p {
    margin: 0 0 20px;
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--ink-700);
  }
  .idr-sos-body p.idr-sos-callout {
    margin: 28px 0 0;
    padding: 22px 26px;
    background: var(--green-100);
    border-left: 4px solid var(--amber-500);
    border-radius: 0 16px 16px 0;
    font-weight: 600;
    color: var(--green-900);
  }
  /* idraulico-brescia/emergenza-allagamenti…: the SOS panel's copy
     also carries an H4 and a list. */
  .idr-sos-body h4 {
    margin: 30px 0 12px;
    font-size: clamp(18px, 1.6vw, 21px);
    color: var(--green-900);
  }
  .idr-sos-body p a { color: var(--green-500); font-weight: 700; }
  .idr-sos-body p a:hover { color: var(--green-700); }
  .idr-sos-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .idr-sos-body li {
    position: relative;
    padding: 16px 18px 16px 50px;
    background: var(--green-100);
    border-radius: 14px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-700);
  }
  .idr-sos-body li::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 17px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--amber-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
  }

  /* The "Segni che potresti avere una perdita" blockquote, set as a
     checklist card (its bullets and <br>s are the source's). */
  .idr-aside-split-copy blockquote {
    margin: 0 0 8px;
    padding: 22px 26px;
    background: var(--paper-000);
    border: 1px solid var(--line-200);
    border-left: 4px solid var(--amber-500);
    border-radius: 0 16px 16px 0;
    box-shadow: var(--shadow-card);
  }
  .idr-aside-split-copy blockquote p {
    margin: 0;
    font-size: 16px;
    line-height: 2;
    font-weight: 600;
    color: var(--green-900);
  }
  .idr-aside-split-copy > p:first-child em { color: var(--amber-600); font-weight: 600; }
  .idr-aside-split-copy p + h3 { margin-top: 32px; }

  @media (max-width: 560px) {
    .idr-sos-head { padding: 28px 24px 30px; }
    .idr-sos-body p.idr-sos-callout { padding: 18px 20px; }
  }

  /* ---- idraulico-milano/riparazione-lavandini-e-tubature-milano ----
     Hero: three "»" lines, each an H4 in the source. */
  .hero.hero--split .hero__points { margin-top: 18px; }
  .hero.hero--split .hero__points h4 {
    margin: 0 0 6px;
    font-size: clamp(16px, 1.3vw, 18px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink-700);
  }

  /* Four perk cards (global .features), four across on desktop. */
  .idr-perks .features__grid { --cols-max: 4; --col-min: 230px; }
  .idr-perks .feature-card { text-align: center; }
  .idr-perks .feature-card__icon {
    margin-inline: auto;
    background: var(--amber-050);
    color: var(--amber-600);
  }
  .idr-perks .feature-card p { text-align: left; }

  /* "Riparazione e manutenzione lavandini" as cards instead of one
     long column: copy card + navy call card, then the "Aggiorna la
     tua cucina" heading beside two paragraph cards. */
  .idr-lav {
    background: var(--paper-000);
    padding: clamp(56px, 6vw, 88px) 5vw;
  }
  .idr-lav-inner { max-width: 1140px; margin: 0 auto; }
  .idr-lav-top,
  .idr-lav-split { display: grid; gap: 24px; align-items: stretch; }
  .idr-lav-split { margin-top: clamp(40px, 5vw, 64px); align-items: start; }
  @media (min-width: 900px) {
    .idr-lav-top { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .idr-lav-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
  }
  .idr-lav-card {
    background: var(--amber-050);
    border: 1px solid var(--line-200);
    border-radius: 20px;
    padding: clamp(26px, 3vw, 36px);
  }
  .idr-lav-card h3 {
    position: relative;
    margin: 0 0 18px;
    padding-bottom: 14px;
    font-size: clamp(19px, 1.8vw, 23px);
    line-height: 1.3;
    color: var(--green-900);
  }
  .idr-lav-card h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: var(--amber-500);
  }
  .idr-lav-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: var(--ink-700);
  }
  .idr-lav-card p a { color: var(--green-500); font-weight: 700; }
  .idr-lav-card p a:hover { color: var(--green-700); }

  .idr-lav-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    background: var(--green-900);
    border-radius: 20px;
    padding: clamp(28px, 3vw, 40px);
    box-shadow: 0 18px 40px rgba(14, 57, 94, .18);
  }
  .idr-lav-cta h2:where(:not(.h1-look)) {
    margin: 0;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.25;
    color: var(--paper-000);
  }
  .idr-lav-cta p { margin: 0; }
  .idr-lav-cta .idr-lav-call a {
    display: inline-flex;
    align-items: center;
    padding: 14px 26px;
    border-radius: 999px;
    background: var(--amber-500);
    font-size: clamp(18px, 1.8vw, 21px);
    color: var(--paper-000);
    box-shadow: 0 10px 24px rgba(255, 81, 0, .35);
    transition: background .15s ease;
  }
  .idr-lav-cta .idr-lav-call a:hover { background: var(--amber-600); }
  .idr-lav-cta .idr-lav-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    color: var(--green-100);
  }
  .idr-lav-cta .idr-lav-badge img { width: 44px; height: 44px; flex-shrink: 0; }

  .idr-lav-head { display: flex; flex-direction: column; gap: 18px; }
  .idr-lav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--amber-500);
    color: var(--paper-000);
  }
  .idr-lav-icon svg { width: 28px; height: 28px; }
  .idr-lav-head h3 {
    margin: 0;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.25;
    color: var(--green-900);
  }
  .idr-lav-cols { display: grid; gap: 18px; }
  @media (min-width: 700px) {
    .idr-lav-cols { grid-template-columns: 1fr 1fr; }
  }
  .idr-lav-cols p {
    margin: 0;
    padding: 24px 24px 24px 26px;
    background: var(--paper-000);
    border: 1px solid var(--line-200);
    border-left: 4px solid var(--green-500);
    border-radius: 0 16px 16px 0;
    box-shadow: var(--shadow-card);
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--ink-700);
  }

  /* idraulico-bologna/riparazione-lavandini-e-tubature-bologna:
     the hero's "»" lines are <p>s there (H4s on Milano). */
  .hero.hero--split .hero__points p {
    margin: 0 0 6px;
    font-size: clamp(16px, 1.3vw, 18px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink-700);
  }

  /* Bologna: the long "L'installazione del rubinetto…" paragraph
     after the navy call card, as a full-width note card. */
  .idr-lav-note {
    margin: 24px 0 0;
    padding: 24px 28px;
    background: var(--green-100);
    border-left: 4px solid var(--amber-500);
    border-radius: 0 18px 18px 0;
    font-size: 16px;
    line-height: 1.8;
    color: var(--ink-700);
  }
  .idr-lav-note .idr-lav-note-num a {
    font-size: clamp(19px, 1.9vw, 24px);
    color: var(--amber-600);
  }
  .idr-lav-note .idr-lav-note-num a:hover { color: var(--amber-500); }

  /* Bologna promo card: the five tap types, one per line. */
  .idr-promo-card .idr-promo-list { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.9; }

  /* Bologna: three cards, each with its own centred H3. */
  @media (min-width: 980px) {
    .idr-tips--three .idr-tips-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .idr-tips--three .idr-tips-card:nth-child(3) { border-top-color: var(--green-950); }
  .idr-tips .idr-tips-card h3 {
    margin: 0 0 14px;
    font-size: clamp(18px, 1.6vw, 20px);
    line-height: 1.35;
    text-align: center;
  }
  .idr-tips--three .idr-tips-icon { display: flex; margin: 0 auto 16px; }
  .idr-tips-card p + p { margin-top: 14px; }
  .idr-tips-card p a { color: var(--green-500); font-weight: 700; }
  .idr-tips-card p a:hover { color: var(--green-700); }

  /* Bologna allagamenti: a second copy + image row in the same
     section, the image framed as a card. */
  .idr-aside-split-grid + .idr-aside-split-grid { margin-top: clamp(32px, 4vw, 48px); }
  .idr-aside-media {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-000);
    border: 1px solid var(--line-200);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--shadow-card);
  }
  .idr-aside-media p { margin: 0; }
  .idr-aside-media img { display: block; width: 100%; max-width: 300px; height: auto; }

  /* idraulico-torino/riparazione-lavandini-e-tubature-torino:
     two paragraph cards straight after the copy + call row, H4
     titles in the tip cards, and an image H4 leading the last
     column. */
  .idr-lav-cols--after { margin-top: 24px; }
  .idr-lav-card p + p { margin-top: 14px; }
  .idr-lav-card p:first-of-type em { color: var(--amber-600); font-weight: 600; }
  .idr-tips .idr-tips-card h4 {
    margin: 0 0 14px;
    font-size: clamp(18px, 1.6vw, 20px);
    line-height: 1.35;
    text-align: center;
    color: var(--green-900);
  }
  .idr-tips-card .idr-tips-icon--center { display: flex; margin: 0 auto 16px; }
  .idr-aside-split-copy > h4:first-child { margin-top: 0; }

  /* Bologna: the last column's image sits inside an H4. */
  .idr-aside-split-copy h4 img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: var(--shadow-card);
  }

  /* "Un rubinetto o un soffione…" — heading over two icon cards,
     then the H4 + paragraph as a highlighted strip. */
  .idr-tips {
    background: var(--green-050);
    padding: clamp(56px, 6vw, 88px) 5vw;
  }
  .idr-tips-inner { max-width: 1140px; margin: 0 auto; }
  .idr-tips h3 {
    margin: 0 0 28px;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.25;
    text-align: center;
    color: var(--green-900);
  }
  .idr-tips-grid { display: grid; gap: 22px; }
  @media (min-width: 800px) {
    .idr-tips-grid { grid-template-columns: 1fr 1fr; }
  }
  .idr-tips-card {
    background: var(--paper-000);
    border-radius: 20px;
    border-top: 4px solid var(--amber-500);
    padding: 28px 28px 30px;
    box-shadow: var(--shadow-card);
  }
  .idr-tips-card + .idr-tips-card { border-top-color: var(--green-700); }
  .idr-tips-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--green-100);
    color: var(--green-700);
  }
  .idr-tips-icon svg { width: 24px; height: 24px; }
  .idr-tips-card p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--ink-700);
  }
  .idr-tips-strip {
    margin-top: 24px;
    padding: 26px 30px;
    background: var(--green-900);
    border-radius: 20px;
  }
  .idr-tips-strip h4 {
    margin: 0 0 10px;
    font-size: clamp(18px, 1.7vw, 21px);
    color: var(--paper-000);
  }
  .idr-tips-strip p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--green-100);
  }

  /* Promo row: light "RIPARAZIONE LAVANDINI" card + navy 24h card. */
  .idr-promo {
    background: var(--paper-050);
    padding: clamp(48px, 5vw, 72px) 5vw;
  }
  .idr-promo-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    gap: 24px;
  }
  @media (min-width: 900px) {
    .idr-promo-inner { grid-template-columns: 1fr 1fr; }
  }
  .idr-promo-card {
    background: var(--paper-000);
    border: 1px solid var(--line-200);
    border-top: 4px solid var(--amber-500);
    border-radius: 20px;
    padding: 32px 30px;
    box-shadow: var(--shadow-card);
  }
  .idr-promo-card p { margin: 0 0 14px; line-height: 1.6; color: var(--green-900); }
  .idr-promo-card p:last-child { margin-bottom: 0; }
  .idr-promo-card .idr-promo-title { font-size: clamp(20px, 2vw, 24px); letter-spacing: .01em; }
  .idr-promo-card .idr-promo-lead { font-size: clamp(17px, 1.6vw, 20px); }
  .idr-promo-card .idr-promo-call { font-size: clamp(20px, 2vw, 24px); }
  .idr-promo-card .idr-promo-call a { color: var(--amber-600); }
  .idr-promo-card .idr-promo-call a:hover { color: var(--amber-500); }
  .idr-promo-card--dark {
    background: var(--green-900);
    border-color: var(--green-900);
    border-top-color: var(--amber-500);
  }
  .idr-promo-card--dark p { font-size: clamp(16px, 1.5vw, 19px); color: var(--green-100); }
  .idr-promo-card--dark .idr-promo-big {
    display: block;
    margin-bottom: 6px;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.1;
    color: var(--paper-000);
  }

  /* Aside on the left (4/8 in the source): list card + copy. */
  @media (min-width: 900px) {
    .idr-aside-split--left .idr-aside-split-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  }
  .idr-aside-split-copy :is(h3, h4) { color: var(--green-900); }
  .idr-aside-split-copy h3 { margin: 0 0 14px; font-size: clamp(20px, 2vw, 25px); }
  .idr-aside-split-copy h4 { margin: 32px 0 12px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.35; }
  .idr-aside-card li strong { font-weight: 600; color: var(--green-900); }
  .idr-aside-card a.btn { width: 100%; margin-top: 18px; color: var(--paper-000); justify-content: center; }
  .idr-aside-card a.btn:hover { color: var(--paper-000); }

  /* ============================================================
     /preventivi/ — quote finder page. Everything below is scoped
     to .pv-* classes used only there.
  ============================================================ */

  /* 1. Top: logo, H3 and the Servizio / Zona finder. */
  .pv-top {
    position: relative;
    overflow: hidden;
    background: var(--paper-050);
    padding: clamp(48px, 6vw, 88px) 5vw;
  }
  .pv-top::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 81, 0, .12), rgba(255, 81, 0, 0) 70%);
    pointer-events: none;
  }
  .pv-top-card {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px);
    background: var(--paper-000);
    border: 1px solid var(--line-200);
    border-top: 4px solid var(--amber-500);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(14, 57, 94, .12);
    text-align: center;
  }
  .pv-top-card > p:first-child { margin: 0 0 18px; }
  .pv-top-card > p:first-child img { display: inline-block; width: 100%; max-width: 280px; height: auto; }
  .pv-top-card > h3 {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.25;
    color: var(--amber-600);
  }
  .pv-finder {
    display: grid;
    gap: 18px;
    margin-top: 28px;
    text-align: left;
  }
  @media (min-width: 640px) {
    .pv-finder { grid-template-columns: 1fr 1fr; }
  }
  .pv-finder h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--green-900);
  }
  .pv-finder form { margin: 0; }
  .pv-finder select {
    width: 100%;
    padding: 14px 44px 14px 16px;
    border: 1.5px solid var(--line-200);
    border-radius: 14px;
    background: var(--paper-000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e395e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
    font: inherit;
    font-size: 16px;
    color: var(--green-900);
    appearance: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .pv-finder select:focus {
    outline: none;
    border-color: var(--amber-500);
    box-shadow: 0 0 0 4px rgba(255, 81, 0, .15);
  }
  .pv-finder-go { grid-column: 1 / -1; }
  .pv-finder-go button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--amber-500);
    box-shadow: 0 10px 24px rgba(255, 81, 0, .35);
    cursor: pointer;
    transition: background .15s ease;
  }
  .pv-finder-go button:hover { background: var(--amber-600); }
  .pv-finder-go button h3 {
    margin: 10px 0;
    font-size: 18px;
    letter-spacing: .03em;
    color: var(--paper-000);
  }
  .pv-finder-msg {
    grid-column: 1 / -1;
    margin: 0;
    min-height: 1.4em;
    font-size: 14px;
    text-align: center;
    color: var(--amber-600);
  }

  /* 2. Three steps (each an H2 with its linked icon). */
  .pv-steps {
    background: var(--green-900);
    padding: clamp(56px, 6vw, 80px) 5vw;
  }
  .pv-steps-grid {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    gap: 24px;
  }
  @media (min-width: 900px) {
    .pv-steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .pv-step {
    background: var(--paper-000);
    border-radius: 22px;
    padding: 30px 28px 32px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
  }
  .pv-step h2:where(:not(.h1-look)) {
    margin: 0 0 14px;
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.3;
    color: var(--green-900);
  }
  .pv-step h2:where(:not(.h1-look)) a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--amber-050);
    transition: transform .2s ease;
  }
  .pv-step h2:where(:not(.h1-look)) a:hover { transform: scale(1.05); }
  .pv-step h2:where(:not(.h1-look)) img { width: 72px; height: 72px; }
  .pv-step p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    text-align: left;
    color: var(--ink-700);
  }

  /* 3. What we offer (12 tiles) + quote accordion. */
  .pv-offer {
    background: var(--paper-000);
    padding: clamp(56px, 6vw, 88px) 5vw;
  }
  .pv-offer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 40px;
    align-items: start;
  }
  @media (min-width: 1000px) {
    .pv-offer-inner { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; }
  }
  .pv-offer h1,
.pv-offer h2:where(.h1-look) {
    margin: 0 0 24px;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.2;
    text-align: center;
    color: var(--amber-600);
  }
  .pv-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  @media (min-width: 700px) {
    .pv-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .pv-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 12px;
    background: var(--green-050);
    border: 1px solid var(--line-200);
    border-radius: 18px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .pv-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
  .pv-tile img { width: 52px; height: 52px; }
  .pv-tile h4 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .01em;
    color: var(--green-900);
  }

  .pv-acc {
    border: 1px solid var(--line-200);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  .pv-acc-panel + .pv-acc-panel { border-top: 1px solid var(--line-200); }
  .pv-acc-title { margin: 0; font-size: 16px; }
  .pv-acc-title a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-weight: 700;
    color: var(--green-900);
    background: var(--paper-000);
    transition: background .15s ease;
  }
  .pv-acc-title a::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--amber-500);
    border-bottom: 2px solid var(--amber-500);
    transform: rotate(45deg) translateY(-3px);
    transition: transform .2s ease;
  }
  .pv-acc-title a:hover { background: var(--green-050); }
  .pv-acc-panel.is-open .pv-acc-title a { background: var(--green-900); color: var(--paper-000); }
  .pv-acc-panel.is-open .pv-acc-title a::after { transform: rotate(-135deg) translateY(-3px); }
  .pv-acc-body { display: none; padding: 8px 20px 14px; background: var(--paper-050); }
  .pv-acc-panel.is-open .pv-acc-body { display: block; }
  .pv-acc-body h4 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 0;
    font-size: 15.5px;
  }
  .pv-acc-body h4 + h4 { border-top: 1px solid var(--line-200); }
  .pv-acc-body h4 a { color: var(--green-900); font-weight: 600; }
  .pv-acc-body h4 a:hover { color: var(--amber-600); }
  .pv-acc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--amber-050);
    color: var(--amber-600);
  }
  .pv-acc-icon svg { width: 18px; height: 18px; }

  /* 4. Where we work: navy band, one card per region, cities as chips. */
  .pv-regions {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(rgba(14, 57, 94, .07) 1px, transparent 1px) 0 0 / 22px 22px,
      var(--green-050);
    padding: clamp(64px, 7vw, 100px) 5vw;
  }
  .pv-regions::after {
    content: "";
    position: absolute;
    left: -160px;
    bottom: -160px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 81, 0, .1), rgba(255, 81, 0, 0) 70%);
    pointer-events: none;
  }
  .pv-regions-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
  .pv-regions h2:where(:not(.h1-look)) {
    margin: 0 0 40px;
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: .04em;
    text-align: center;
    color: var(--green-900);
  }
  .pv-regions h2:where(:not(.h1-look))::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: 4px;
    background: var(--amber-500);
  }
  .pv-regions-grid {
    display: grid;
    gap: 16px;
  }
  @media (min-width: 640px) {
    .pv-regions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1000px) {
    .pv-regions-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  }
  .pv-region {
    padding: 22px 20px 24px;
    background: var(--paper-000);
    border: 1px solid var(--line-200);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
  }
  .pv-region:hover {
    border-color: rgba(255, 81, 0, .5);
    box-shadow: var(--shadow-pop);
    transform: translateY(-3px);
  }
  .pv-region-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--line-200);
  }
  .pv-region-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--amber-500);
    color: var(--paper-000);
    box-shadow: 0 8px 18px rgba(255, 81, 0, .35);
  }
  .pv-region-pin svg { width: 20px; height: 20px; }
  .pv-region h3 {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.25;
    letter-spacing: .05em;
    color: var(--green-900);
  }
  .pv-region p {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0;
  }
  .pv-region p br { display: none; }
  .pv-region p strong {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-900);
  }
  .pv-region p strong::before {
    content: "";
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--amber-500);
    box-shadow: 0 0 0 3px rgba(255, 81, 0, .15);
  }

  /* ============================================================
     /preventivi/intervento-<servizio>-<città>/ — quote pages.
     Scoped to .pvq-* classes so every city quote page can reuse it.
  ============================================================ */

  /* 1. Hero: H1, orange call box, three step pills. */
  .pvq-hero {
    position: relative;
    padding: clamp(56px, 8vw, 110px) 5vw clamp(40px, 5vw, 64px);
    background:
      linear-gradient(160deg, rgba(14, 57, 94, .92) 0%, rgba(24, 64, 105, .82) 100%),
      url("/wp-content/uploads/2016/11/BG.jpg") center / cover no-repeat;
    text-align: center;
    color: var(--paper-000);
  }
  .pvq-hero-inner { max-width: 820px; margin: 0 auto; }
  .pvq-hero h1,
.pvq-hero h2:where(.h1-look) {
    margin: 0;
    font-size: clamp(28px, 4.4vw, 48px);
    line-height: 1.15;
    letter-spacing: .01em;
    color: var(--paper-000);
  }
  .pvq-call {
    display: inline-block;
    margin: 28px 0 0;
  }
  .pvq-call h1,
.pvq-call h2:where(.h1-look) { margin: 0; font-size: inherit; line-height: 1.2; }
  .pvq-call a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 40px;
    border-radius: 20px;
    background: var(--amber-500);
    box-shadow: 0 16px 36px rgba(255, 81, 0, .4);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--paper-000);
    transition: background .15s ease, transform .15s ease;
  }
  .pvq-call a:hover { background: var(--amber-600); transform: translateY(-2px); }
  .pvq-call a br { display: none; }
  .pvq-call-num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(26px, 3.4vw, 36px);
    letter-spacing: .02em;
  }
  .pvq-call-num svg { width: .8em; height: .8em; }
  .pvq-steps {
    display: grid;
    gap: 12px;
    max-width: 960px;
    margin: 40px auto 0;
  }
  @media (min-width: 760px) {
    .pvq-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .pvq-steps h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-size: 15.5px;
    color: var(--paper-000);
  }
  .pvq-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--amber-500);
  }
  .pvq-step-icon svg { width: 16px; height: 16px; }

  /* 2. Intro: quote copy + features, and the "Indica…" call card. */
  .pvq-intro {
    background: var(--paper-000);
    padding: clamp(56px, 6vw, 88px) 5vw;
  }
  .pvq-intro-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 36px;
    align-items: start;
  }
  @media (min-width: 1000px) {
    .pvq-intro-inner { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 48px; }
  }
  .pvq-intro h1,
.pvq-intro h2:where(.h1-look) {
    margin: 0 0 18px;
    font-size: clamp(24px, 2.8vw, 34px);
    line-height: 1.2;
    color: var(--amber-600);
  }
  .pvq-lead {
    margin: 0 0 32px;
    padding: 18px 22px;
    border-left: 4px solid var(--amber-500);
    border-radius: 0 16px 16px 0;
    background: var(--amber-050);
    font-size: 16px;
    line-height: 1.7;
    text-wrap: wrap;
    color: var(--green-900);
  }
  .pvq-lead a { color: var(--amber-600); text-decoration: underline; text-underline-offset: 3px; }
  .pvq-intro-split {
    display: grid;
    gap: 28px;
    align-items: center;
  }
  @media (min-width: 700px) {
    .pvq-intro-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .pvq-intro-split--media-right { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  }
  .pvq-intro-media {
    border-radius: 22px;
    overflow: hidden;
    background: var(--green-100);
  }
  .pvq-intro-media img { display: block; width: 100%; height: auto; }
  @media (max-width: 699px) {
    .pvq-intro-media { width: 100%; max-width: 300px; margin: 0 auto; }
  }
  .pvq-feats { display: grid; gap: 14px; }
  .pvq-feat {
    padding: 18px 20px;
    border: 1px solid var(--line-200);
    border-radius: 18px;
    background: var(--paper-000);
    box-shadow: var(--shadow-card);
  }
  .pvq-feat h4 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    font-size: 16.5px;
    color: var(--green-900);
  }
  .pvq-feat h4 img {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    padding: 7px;
    border-radius: 12px;
    background: var(--amber-050);
  }
  .pvq-feat p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-700); }

  .pvq-ask {
    overflow: hidden;
    border-radius: 24px;
    background: var(--green-900);
    box-shadow: var(--shadow-pop);
    text-align: center;
  }
  .pvq-ask h3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 32px 24px 20px;
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.3;
    color: var(--paper-000);
  }
  .pvq-ask h3 img { width: 64px; height: 64px; }
  .pvq-ask-btn {
    display: inline-block;
    margin: 0 24px 28px;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--amber-500);
    box-shadow: 0 10px 24px rgba(255, 81, 0, .35);
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--paper-000);
    transition: background .15s ease;
  }
  .pvq-ask-btn:hover { background: var(--amber-600); }
  .pvq-ask p { margin: 0; }
  .pvq-ask p img { display: block; width: 100%; height: auto; }

  /* 3. Four linked service cards. */
  .pvq-services {
    background: var(--green-050);
    padding: clamp(56px, 6vw, 88px) 5vw;
  }
  .pvq-services-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
  }
  @media (min-width: 640px) {
    .pvq-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1100px) {
    .pvq-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .pvq-service {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px 24px;
    border: 1px solid var(--line-200);
    border-top: 4px solid var(--amber-500);
    border-radius: 20px;
    background: var(--paper-000);
    box-shadow: var(--shadow-card);
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .pvq-service:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
  .pvq-service img {
    width: 76px;
    height: 76px;
    margin-bottom: 18px;
    padding: 12px;
    border-radius: 20px;
    background: var(--green-100);
  }
  .pvq-service h4 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: .02em;
    color: var(--green-900);
  }
  .pvq-service-desc { font-size: 14.5px; line-height: 1.7; color: var(--ink-700); }

  /* 4. Navy band: H2, H5 copy and a second call box. */
  .pvq-band {
    background:
      radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 22px 22px,
      linear-gradient(160deg, var(--green-900) 0%, var(--green-800) 100%);
    padding: clamp(56px, 6vw, 88px) 5vw;
  }
  .pvq-band-card {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 26px;
    background: rgba(255, 255, 255, .05);
    text-align: center;
  }
  .pvq-band h2:where(:not(.h1-look)) {
    margin: 0 0 20px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.2;
    color: var(--paper-000);
  }
  .pvq-band h2:where(:not(.h1-look))::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: 4px;
    background: var(--amber-500);
  }
  .pvq-band h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
    text-align: left;
    text-wrap: wrap; /* global.css balances headings; this H5 is a paragraph */
    color: rgba(255, 255, 255, .88);
  }

  /* 5. "Sei un PROFESSIONISTA?" */
  .pvq-pro {
    background: var(--paper-050);
    padding: clamp(56px, 6vw, 88px) 5vw;
  }
  .pvq-pro-card {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    gap: 28px;
    align-items: center;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid var(--line-200);
    border-radius: 26px;
    background: var(--paper-000);
    box-shadow: var(--shadow-card);
  }
  @media (min-width: 800px) {
    .pvq-pro-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 44px; }
  }
  .pvq-pro-media { text-align: center; }
  .pvq-pro-media img { display: inline-block; width: 100%; max-width: 300px; height: auto; }
  .pvq-pro-copy { text-align: center; }
  @media (min-width: 800px) { .pvq-pro-copy { text-align: left; } }
  .pvq-pro h2:where(:not(.h1-look)) {
    margin: 0 0 12px;
    font-size: clamp(24px, 2.8vw, 32px);
    color: var(--green-900);
  }
  .pvq-pro h5 {
    margin: 0 0 22px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--ink-700);
  }
  .pvq-pro h4:empty { display: none; }
  .pvq-pro h3 { margin: 0; font-size: 16px; }
  .pvq-pro h3 a {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--green-900);
    letter-spacing: .04em;
    color: var(--paper-000);
    transition: background .15s ease;
  }
  .pvq-pro h3 a:hover { background: var(--green-700); }
  .pvq-pro h3 u { text-decoration: none; }

  /* ============================================================
     /imbianchino-a-milano/ — painter page. Scoped to .imb-* classes.
  ============================================================ */

  /* 1. Hero: two H1s (title + phone). */
  .imb-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 9vw, 120px) 5vw;
    background:
      radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 22px 22px,
      linear-gradient(150deg, var(--green-900) 0%, var(--green-800) 60%, var(--green-700) 100%);
    text-align: center;
  }
  .imb-hero::before,
  .imb-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }
  .imb-hero::before {
    right: -140px;
    top: -140px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255, 81, 0, .3), rgba(255, 81, 0, 0) 70%);
  }
  .imb-hero::after {
    left: -120px;
    bottom: -160px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(41, 145, 214, .35), rgba(41, 145, 214, 0) 70%);
  }
  .imb-hero-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
  .imb-hero h1,
.imb-hero h2:where(.h1-look) {
    margin: 0;
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.1;
    letter-spacing: .02em;
    color: var(--paper-000);
  }
  .imb-hero h1 + h1,
.imb-hero h2:where(.h1-look) + h1,
.imb-hero h1 + h2:where(.h1-look),
.imb-hero h2:where(.h1-look) + h2:where(.h1-look) { margin-top: 28px; font-size: inherit; }
  .imb-hero h1 + h1 a,
.imb-hero h2:where(.h1-look) + h1 a,
.imb-hero h1 + h2:where(.h1-look) a,
.imb-hero h2:where(.h1-look) + h2:where(.h1-look) a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 34px;
    border-radius: 999px;
    background: var(--amber-500);
    box-shadow: 0 16px 36px rgba(255, 81, 0, .4);
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--paper-000);
    transition: background .15s ease, transform .15s ease;
  }
  .imb-hero h1 + h1 a:hover,
.imb-hero h2:where(.h1-look) + h1 a:hover,
.imb-hero h1 + h2:where(.h1-look) a:hover,
.imb-hero h2:where(.h1-look) + h2:where(.h1-look) a:hover { background: var(--amber-600); transform: translateY(-2px); }
  .imb-hero h1 + h1 svg,
.imb-hero h2:where(.h1-look) + h1 svg,
.imb-hero h1 + h2:where(.h1-look) svg,
.imb-hero h2:where(.h1-look) + h2:where(.h1-look) svg { width: .9em; height: .9em; }

  /* 2. Chi Siamo: copy card + image. */
  .imb-about {
    background: var(--paper-000);
    padding: clamp(56px, 6vw, 88px) 5vw;
  }
  .imb-about-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 36px;
    align-items: center;
  }
  @media (min-width: 960px) {
    .imb-about-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; }
  }
  .imb-about h1,
.imb-about h2:where(.h1-look) {
    margin: 0 0 20px;
    font-size: clamp(28px, 3.2vw, 40px);
    color: var(--amber-600);
  }
  .imb-about h1::after,
.imb-about h2:where(.h1-look)::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 12px;
    border-radius: 4px;
    background: var(--amber-500);
  }
  .imb-about p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--ink-700);
  }
  .imb-about p:last-child { margin-bottom: 0; }
  .imb-about p strong { color: var(--green-900); }
  .imb-about-media {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: var(--green-100);
    box-shadow: var(--shadow-pop);
  }
  .imb-about-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 8px;
    background: linear-gradient(90deg, var(--amber-500), var(--green-500));
  }
  .imb-about-media img { display: block; width: 100%; height: auto; }

  /* 3. Contact band: two H2s. */
  .imb-contact {
    background: var(--paper-000);
    padding: 0 5vw clamp(56px, 6vw, 88px);
  }
  .imb-contact-card {
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid rgba(255, 81, 0, .2);
    border-radius: 26px;
    background: linear-gradient(135deg, var(--amber-050) 0%, var(--paper-000) 100%);
    box-shadow: var(--shadow-card);
    text-align: center;
  }
  .imb-contact h2:where(:not(.h1-look)) {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.45;
    color: var(--green-900);
  }
  .imb-contact h2:where(:not(.h1-look)) a {
    display: inline-block;
    margin-top: 6px;
    color: var(--amber-600);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }
  .imb-contact h2:where(:not(.h1-look)) + h2:where(:not(.h1-look)) {
    display: inline-block;
    margin-top: 18px;
    padding: 8px 22px;
    border-radius: 999px;
    background: var(--green-900);
    font-size: 15px;
    letter-spacing: .06em;
    color: var(--paper-000);
  }

  /* 4. Servizi: four cards. */
  .imb-services {
    background: var(--green-050);
    padding: clamp(56px, 6vw, 88px) 5vw;
  }
  .imb-services-inner { max-width: 1200px; margin: 0 auto; }
  .imb-services h1,
.imb-services h2:where(.h1-look) {
    margin: 0 0 32px;
    font-size: clamp(28px, 3.2vw, 40px);
    text-align: center;
    color: var(--green-900);
  }
  .imb-services h1::after,
.imb-services h2:where(.h1-look)::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 4px;
    background: var(--amber-500);
  }
  .imb-services-grid { display: grid; gap: 20px; }
  @media (min-width: 860px) {
    .imb-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  }
  .imb-service {
    padding: 26px 26px 28px;
    border: 1px solid var(--line-200);
    border-top: 4px solid var(--amber-500);
    border-radius: 22px;
    background: var(--paper-000);
    box-shadow: var(--shadow-card);
  }
  .imb-service:nth-child(even) { border-top-color: var(--green-700); }
  .imb-service h3 {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 16px;
    font-size: clamp(18px, 1.8vw, 21px);
    letter-spacing: .04em;
    color: var(--green-900);
  }
  .imb-service h3 img {
    width: 84px;
    height: 73px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 16px;
    background: var(--green-100);
  }
  .imb-service p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--ink-700);
  }

  /* 5. Leftover rating shortcodes from the old page (kept as text). */
  .imb-rating {
    background: var(--green-050);
    padding: 0 5vw 40px;
    text-align: center;
  }
  .imb-rating p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-500);
  }

  /* Closing band on a single H4 sentence (Velletri-style lead band). */
  .idr-band--lead h4:first-child { margin-top: 0; }

  .idr-closing .idr-closing-h3 {
    margin: 0 0 28px;
    font-size: clamp(20px, 1.2rem + 1vw, 28px);
    font-weight: 800;
    line-height: 1.3;
    color: var(--paper-000);
  }
  .idr-cards-head .btn { white-space: normal; max-width: 100%; }
  @media (max-width: 600px) {
    .idr-cards-head { flex-direction: column; align-items: stretch; }
    .idr-cards-head .btn { width: 100%; justify-content: center; }
  }