/* components.css — le sezioni del verticale refrigeration_service.
   Il segno del verticale è il MOSAICO DI TESSERE (riferimento BeCorporation2): una griglia in cui si
   alternano ritagli di fotografia, campi di colore pieno e vuoti chiari. Non è un vezzo: gli impianti si
   fotografano col telefono, in verticale, e una tessera accetta un ritratto mentre una fascia a piena
   larghezza no. Il carattere lo danno i campi pieni, non la risoluzione delle foto. */

/* ============================== CROMO ============================== */

/* La testata è un CAMPO PIENO, non trasparente: nella categoria «Aziende» la barra di colore dice
   «impresa», e una testata trasparente sopra una foto costerebbe contrasto proprio dove serve.
   ⚠ Niente backdrop-filter: creerebbe un containing-block per il position:fixed dell'overlay del menu,
   che si limiterebbe all'altezza dell'header. Qui il fondo è pieno e il problema non si pone. */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--brand); color: var(--on-dark);
  border-bottom: 1px solid rgba(241, 246, 248, .14);
}
/* ⚠ Il wrapper del template-part confina lo sticky: display:contents lo lascia passare. */
.wp-block-template-part:has(> .site-header) { display: contents; }

/* Altezza FISSATA, non dedotta dalle metriche del font: cambiare il marchio di 0,2rem sposterebbe il
   cromo, e [id]{scroll-margin-top} qui sopra dipende da questo valore. */
.site-header__row {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 72px;
}
/* ⚠ nav e CTA portano un margine di blocco da WP che li spinge sotto il centro. */
.site-header__row > * { align-self: center; margin-block: 0; }

.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--on-dark); }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.28rem;
  letter-spacing: -0.015em; text-transform: uppercase;
}
.wordmark__tag {
  font-size: 0.68rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--on-dark-muted);
}
/* Il segno tipografico del marchio: una barra di ghiaccio che precede il nome, come il quadrato pieno
   che apre il logotipo del riferimento. Costa zero fotografia. */
.wordmark::before {
  content: ""; width: 6px; height: 30px; background: var(--sage); flex: 0 0 auto;
}

/* Nav. ⚠ A PARITÀ di specificità vince WP (il suo CSS è iniettato dopo il tema): il colore va messo
   con un livello in più E sullo __label, sennò le voci restano scure. */
.site-nav { margin-left: auto; }
.site-header .site-nav .wp-block-navigation-item__content,
.site-header .site-nav .wp-block-navigation-item__label {
  color: var(--on-dark);
  font-size: 0.95rem; font-weight: 500;
}
.site-header .site-nav .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 5px; }
/* ⚠ Una ul di wp:navigation nasce flex-wrap:wrap: con margin-left:auto una voce va orfana su due righe. */
@media (min-width: 900px) { .site-header .site-nav .wp-block-navigation { flex-wrap: nowrap; } }

/* Overlay mobile del menu. Il fondo lo porta l'attributo del blocco (has-background), quindi la regola
   di WP che lo tiene bianco non si applica; resta da riparare l'ALTEZZA. */
.wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-bottom: 96px;   /* l'ultima voce non deve finire sotto la barra CTA fissa */
}
/* ⚠⚠ Le voci escono allineate a DESTRA e non basta correggere l'<a>: ad allineare è il primo antenato
   largo quanto lo schermo, `__responsive-container-content`, che WP mette a `align-items:flex-end`
   perché la nav della testata è `items-justified-right`. Misurato risalendo la catena dei genitori: la
   voce partiva da left=322 su 390. Si raddrizzano il contenitore, la lista e il li — poi l'<a>. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: stretch; width: 100%;
}
/* Il menu mobile è una PAGINA, non un elenco appoggiato al bordo: margini veri, voci grandi con un
   numero d'ordine, e un filetto che separa invece di incorniciare. */
.wp-block-navigation__responsive-container.is-menu-open {
  background-image: var(--grad-brand);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-inline: var(--gutter); padding-top: var(--space-6);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width: 100%; text-align: left;
  padding-block: var(--space-5);
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -0.015em;
  border-bottom: 1px solid rgba(241, 246, 248, .18);
}
/* Il numero d'ordine: dà scala e ritmo a un elenco di cinque voci che altrimenti galleggia. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  counter-increment: fp-voce;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { counter-reset: fp-voce; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label::before {
  content: "0" counter(fp-voce);
  font-size: 0.72rem; font-weight: 700; letter-spacing: var(--tracking-label);
  color: var(--sage); margin-right: var(--space-4); vertical-align: middle;
}
/* ⚠ Senza misura dichiarata WP rende i due bottoni del menu mobile minuscoli e incollati all'angolo:
   l'area di tocco va dichiarata, non ereditata. La X è il solo comando di uscita: sta larga e si vede. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
  width: 56px; height: 56px; padding: 12px; color: var(--on-dark);
  margin: var(--space-4) var(--gutter) 0 0;
  background: rgba(241, 246, 248, .12);
  border: 2px solid rgba(241, 246, 248, .5);
}
.wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }
.wp-block-navigation__responsive-container-open { width: 48px; height: 48px; padding: 10px; color: var(--on-dark); }
.wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }

.site-header__cta { margin-left: var(--space-2); }

/* Barra CTA fissa su mobile: sotto ai 780px il pulsante della testata sparisce e questa lo sostituisce. */
.cta-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
  display: none; background: var(--brand-dark); color: var(--on-dark);
}
.cta-bar a {
  flex: 1; text-align: center; padding: var(--space-4) var(--space-3);
  font-weight: 600; letter-spacing: .02em; color: var(--on-dark);
}
.cta-bar a + a { border-left: 1px solid rgba(241, 246, 248, .2); }
@media (max-width: 780px) {
  .cta-bar { display: flex; }
  body { padding-bottom: 60px; }
}

/* Icona flottante WhatsApp: è l'UNICO canale telefonico del sito (la nota del cliente vieta di
   pubblicare il cellulare come recapito). Sta sopra la barra CTA su mobile. */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 46;
  width: 54px; height: 54px; display: grid; place-items: center;
  background: var(--brand); color: var(--on-dark);
  border: 2px solid var(--on-dark); box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease);
}
.wa-float:hover { transform: translateY(-3px); }
@media (max-width: 780px) { .wa-float { bottom: 74px; width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

/* ============================== BOTTONI ============================== */

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--brand); color: var(--on-dark);
  font-weight: 600; font-size: 0.95rem; letter-spacing: .02em;
  border: 2px solid var(--brand);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: 0.9rem; }
/* Sul fondo petrolio il pulsante si inverte: ghiaccio pieno con inchiostro (15.06). */
.btn--chiaro { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.btn--chiaro:hover { background: var(--sage-light); border-color: var(--sage-light); }
.btn--ghost { background: transparent; color: var(--accent-ink); border-color: var(--accent-ink); }
.btn--ghost:hover { background: var(--accent-ink); color: var(--on-dark); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ============================== INTESTAZIONI DI SEZIONE ============================== */

.eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: var(--space-3);
}
/* ⚠ Solo le bande DAVVERO scure invertono l'occhiello. La testata ha fondo ghiaccio: trattarla come
   scura portava l'occhiello a 1,58 su bianco — misurato dal pixel, non dedotto dal nome della classe. */
.banda .eyebrow, .richiamo .eyebrow { color: var(--on-dark-muted); }
/* Il filetto che accompagna l'occhiello: è una DECORAZIONE, quindi può animarsi senza toccare i glifi. */
.eyebrow::before {
  content: ""; display: inline-block; width: 26px; height: 2px; vertical-align: middle;
  margin-right: var(--space-2); background: currentColor;
}

/* ⚠ L'intestazione di sezione era una colonna di 62ch appoggiata a sinistra, con mezza riga vuota a
   destra: è il difetto che il cliente ha indicato. Ora è una TESTATA A DUE CAMPATE — titolo a sinistra,
   testo di apertura a destra — che riempie la riga e mette i due elementi sulle stesse tracce di griglia
   di tutto il resto della pagina. */
.sezione-intro {
  display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: end;
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 2px solid var(--line);
}
/* ⚠ Con 5 colonne i titoli lunghi del cliente («Servizi per refrigerazione industriale e commerciale»)
   andavano a QUATTRO righe: la campata del display passa a 6, che è la metà esatta della griglia e li
   riporta a due. Misurato: 511px → 4 righe, 615px → 2. */
.sezione-intro > :first-child { grid-column: span 6; }
.sezione-intro > p { grid-column: span 6; padding-left: clamp(0px, 2vw, 2.5rem); }
.sezione-intro h2 { font-size: var(--text-2xl); }
.sezione-intro p { color: var(--ink-muted); font-size: var(--text-md); margin-top: 0; }
.banda .sezione-intro, .richiamo .sezione-intro { border-bottom-color: rgba(241, 246, 248, .22); }
@media (max-width: 860px) { .sezione-intro > :first-child, .sezione-intro > p { grid-column: 1 / -1; padding-left: 0; } .sezione-intro > p { margin-top: var(--space-4); } }
.banda .sezione-intro p { color: var(--on-dark-muted); }
.banda .sezione-intro h2 { color: var(--on-dark); }

/* Banda piena: l'intermezzo scuro fra le sezioni chiare. Ridichiara i propri alias di colore. */
.banda { background: var(--grad-brand); color: var(--on-dark); padding-block: var(--section-y); }
.banda h2, .banda h3 { color: var(--on-dark); }

/* ============================== MOSAICO (il segno del verticale) ============================== */

/* ⚠⚠ Le tessere stanno su RIGHE DI ALTEZZA FISSA e occupano righe e colonne INTERE: così i bordi si
   allineano per costruzione. La prima stesura lasciava a ogni cella il proprio `aspect-ratio` e le righe
   uscivano frastagliate, con due campi pieni che il cliente ha letto come «due foto che non si vedono».
   Un campo di colore in un mosaico deve PORTARE QUALCOSA (una targa, un dato): un rettangolo muto in
   mezzo alle fotografie non legge come composizione, legge come immagine mancante. */
.mosaico {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  grid-auto-rows: clamp(4.4rem, 2.6rem + 5.6vw, 8rem);
  gap: var(--grid-gap);
}
.mosaico__cella { position: relative; overflow: hidden; background: var(--sage-tint); }
.mosaico__cella img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaico__cella--larga  { grid-column: span 12; grid-row: span 2; }  /* la sola scena orizzontale */
.mosaico__cella--alta   { grid-column: span 6;  grid-row: span 3; }  /* il ritratto */
.mosaico__cella--quadra { grid-column: span 6; grid-row: span 2; }
.mosaico__cella--targa  { grid-column: span 6; grid-row: span 1;
  background: var(--brand); color: var(--on-dark);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: var(--space-3) var(--space-4);
}
.mosaico__cella--piena   { background: var(--brand); }
.mosaico__cella--accento { background: var(--accent); }
.mosaico__cella--acciaio { background: var(--sage); }
.mosaico__anno {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  line-height: 1; letter-spacing: -0.02em;
}
/* ⚠ La targa portava una frase NOSTRA («l'anno in cui tutto comincia»). Ora porta solo ciò che il
   cliente scrive di sé — «dal 1989» — con la preposizione in occhiello sopra l'anno. */
.mosaico__dal {
  font-size: 0.68rem; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--sage);
}
.mosaico__nota { font-size: 0.76rem; line-height: 1.35; color: var(--on-dark-muted); }
.mosaico__cella--accento .mosaico__nota { color: var(--on-dark); font-weight: 600; }

/* ============================== TESTATA ============================== */

/* ⚠ `align-items: center` centrava la colonna di testo dentro una banda alta quanto il mosaico, e sopra
   e sotto restava un campo morto di centinaia di pixel. Le due colonne partono ora dalla STESSA linea, e
   ciò che avanza in basso lo riempie la barra istituzionale a tutta larghezza. */
.hero { background: var(--grad-ghiaccio); padding-block: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); }
.hero__griglia {
  display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap); align-items: start;
}
.hero__testo { grid-column: span 5; padding-right: clamp(0px, 3vw, 3rem); }
.hero__griglia > .mosaico { grid-column: span 7; }
.hero__testo h1 { font-size: var(--text-3xl); font-weight: 800; color: var(--brand-dark); }
.hero__lead {
  margin-top: var(--space-5); font-size: var(--text-md); color: var(--ink-muted);
  max-width: 48ch;
}
.hero__azioni { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* I due dati di orientamento sotto le azioni: chiudono la colonna invece di lasciarla finire nel nulla. */
.hero__fatti {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 2px solid var(--sage);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5);
}
.hero__fatti dt {
  font-size: 0.68rem; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-ink);
}
.hero__fatti dd { margin: var(--space-2) 0 0; font-weight: 600; color: var(--ink); line-height: 1.35; }

/* La barra istituzionale: tre campate a tutta larghezza sotto testo e mosaico, allineate al contenitore. */
.hero__barra {
  margin-top: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
  border-top: 2px solid var(--brand);
}
.hero__barra li {
  grid-column: span 4;
  padding: var(--space-5) var(--space-5) 0 0;
  font-weight: 600; color: var(--brand); line-height: 1.35;
}
.hero__barra li + li { padding-left: var(--space-5); box-shadow: -1px 0 0 var(--line); }
.hero__barra li::before {
  content: ""; display: block; width: 22px; height: 3px; background: var(--accent);
  margin-bottom: var(--space-3);
}

/* I capoversi di apertura della Home e i «Servizi principali»: chiudono la testata con il testo che il
   cliente ha scritto per quella pagina, e riempiono la banda invece di lasciarla finire nel bianco.
   ⚠ Non c'erano da nessuna parte nel sito: li ha trovati la misura di fedeltà nel VERSO OPPOSTO. */
.hero__prosa {
  margin-top: clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
  display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); gap: var(--grid-gap);
  align-items: start;
}
.hero__prosa-testo {
  grid-column: span 6; padding-right: clamp(0px, 2.5vw, 2.5rem);
  columns: 2; column-gap: clamp(1.25rem, 1rem + 1.6vw, 2.25rem); color: var(--ink-muted);
}
.hero__prosa-testo p { break-inside: avoid; }
.hero__prosa-testo p + p { margin-top: var(--space-4); }
.hero__principali { grid-column: span 6; border-top: 2px solid var(--brand); padding-top: var(--space-4); }
.hero__principali ul { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.hero__principali li { display: grid; gap: 2px; padding-left: var(--space-4); border-left: 3px solid var(--sage); }
.hero__principali strong { font-family: var(--font-display); font-size: 1.02rem; color: var(--brand); }
.hero__principali span { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.45; }

/* Il sottotitolo che il cliente dà a ogni intervento, e l'etichetta del blocco «a chi è rivolto». */
.intervento__sotto { margin-top: var(--space-2); font-weight: 600; color: var(--accent-ink); }
.intervento__etichetta {
  margin-top: var(--space-5); font-size: 0.68rem; font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink);
}
.intervento__etichetta + .intervento__nota { margin-top: var(--space-2); padding-top: 0; border-top: 0; }

/* ============================== CHI SIAMO (featured) ============================== */

/* Il device del riferimento: una foto VERTICALE con blocchi di colore sfalsati dietro e davanti.
   ⚠ Lo sfalsamento vive nel mosaico, non in colonna: in una colonna verticale uno sfalsamento non
   legge come ritmo, legge come errore di allineamento. */
.chisiamo__griglia {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem); align-items: center;
}
.chisiamo__figura { position: relative; padding: 0 26px 26px 0; }
.chisiamo__figura img { aspect-ratio: var(--tile-ratio); object-fit: cover; width: 100%; position: relative; z-index: 1; }
.chisiamo__figura::before {
  content: ""; position: absolute; right: 0; top: 40px; width: 62%; bottom: 0;
  background: var(--accent); z-index: 0;
}
.chisiamo__figura::after {
  content: ""; position: absolute; left: -18px; bottom: 46px; width: 84px; height: 84px;
  background: var(--sage-tint); z-index: 2;
}
.chisiamo__testo h2 { font-size: var(--text-2xl); }
.chisiamo__testo p { margin-top: var(--space-4); color: var(--ink-muted); }
.chisiamo__nota {
  margin-top: var(--space-6); padding: var(--space-5);
  background: var(--surface); border-left: 4px solid var(--accent);
  color: var(--ink);
}
.chisiamo__pilastri { margin-top: var(--space-6); display: grid; gap: var(--space-5); }
.chisiamo__pilastri h3 { font-size: var(--text-md); }
.chisiamo__pilastri p { margin-top: var(--space-2); }

/* ============================== CERTIFICAZIONI E GAS (trust) ============================== */

/* Il blocco-dati tecnico del riferimento, con contenuto VERO: i gas che l'impresa è abilitata a
   trattare. Dove il template mette KPI di vanteria (che il claim-linter blocca comunque), qui c'è una
   sigla di refrigerante. */
.gas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-6); }
.gas li {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: .01em;
  padding: var(--space-2) var(--space-4);
  background: rgba(241, 246, 248, .1); color: var(--on-dark);
  border: 1px solid rgba(241, 246, 248, .3);
}
/* La banda scura porta ora la SUA fotografia: era dichiarata nell'IR e non veniva resa, e una banda di
   sole targhe su otto sezioni era una delle tre senza immagini. La foto e le schede stanno affiancate,
   così la banda non cresce e la riga resta piena da bordo a bordo. */
.certificazioni__corpo {
  margin-top: var(--space-8);
  display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap); align-items: stretch;
}
.certificazioni__foto { grid-column: span 6; position: relative; overflow: hidden; margin: 0; }
.certificazioni__foto img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.certificazioni__foto figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--space-4); font-size: var(--text-sm); color: var(--on-dark);
  background: linear-gradient(180deg, rgba(8,40,48,0) 0%, rgba(8,40,48,.86) 60%);
}
.certificazioni__schede {
  grid-column: span 6;
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.certificazioni__scheda {
  padding: var(--space-6); background: rgba(241, 246, 248, .07);
  border-top: 3px solid var(--sage);
}
.certificazioni__scheda h3 { font-size: var(--text-md); color: var(--on-dark); }
.certificazioni__scheda p { margin-top: var(--space-3); color: var(--on-dark-muted); }
.certificazioni__nota { margin-top: var(--space-4); color: var(--on-dark-muted); font-size: var(--text-sm); }

/* ============================== NASTRO ============================== */

/* ⚠ Il salto fra due bande era un campo morto di 200px: qui lo occupa un nastro che porta gli ambiti
   dichiarati dal cliente. Non è decorazione — è la sezione «Cosa facciamo» annunciata in una riga.
   ⚠ Le immagini di un marquee sono logicamente in scena: qui non ce ne sono, ma la regola resta. */
.nastro {
  background: var(--brand-dark); color: var(--on-dark);
  overflow: hidden; display: flex; white-space: nowrap;
  border-block: 1px solid rgba(241, 246, 248, .18);
}
.nastro__pista {
  display: flex; align-items: center; flex: 0 0 auto;
  animation: fp-nastro 46s linear infinite;
}
.nastro__pista span {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, .8rem + .5vw, 1.35rem);
  letter-spacing: -0.01em; text-transform: uppercase;
  padding: var(--space-5) var(--space-6);
  display: inline-flex; align-items: center;
}
.nastro__pista span::after {
  content: ""; width: 9px; height: 9px; background: var(--accent);
  margin-left: var(--space-6); flex: 0 0 auto;
}
@keyframes fp-nastro { from { transform: translateX(0) } to { transform: translateX(-100%) } }
@media (prefers-reduced-motion: reduce) { .nastro__pista { animation: none; } }

/* ============================== AMBITI DI INTERVENTO (services) ============================== */

.tessere { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); }
.tessera {
  grid-column: span 4; padding: var(--space-6);
  background: var(--surface); border-top: 3px solid var(--brand);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.tessera h3 { font-size: var(--text-md); }
.tessera p { color: var(--ink-muted); }
/* La tessera FOTOGRAFICA e quella PIENA entrano nella stessa maglia degli ambiti: è il mosaico che
   continua, non una banda di foto a parte (le foto stanno NEAR la descrizione). */
/* ⚠ La tessera fotografica SCAVALCA due righe invece di dettare l'altezza della propria: con un
   rapporto 3/4 in una riga di tessere di testo, le tessere di testo si stiravano a 350px per due righe
   di parole — grandi scatole vuote. Ora la foto è alta quanto due righe di testo e nessuna tessera
   resta mezza vuota.
   ⚠ L'immagine è in posizionamento ASSOLUTO: `aspect-ratio` + `height:100%` in righe automatiche è una
   dipendenza circolare, e né il margine negativo né `align-self:stretch` la sciolgono. */
.tessera--foto { padding: 0; border-top: 0; overflow: hidden; position: relative; grid-row: span 2; min-height: 260px; }
.tessera--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tessera--piena { background: var(--brand); color: var(--on-dark); border-top-color: var(--sage); }
.tessera--piena h3 { color: var(--on-dark); }
.tessera--piena p { color: var(--on-dark-muted); }

/* ============================== I TRE INTERVENTI (method) ============================== */

/* Tre campate, ognuna con la propria ancora: il brief chiede che «i vari ancore link» funzionino.
   L'alternanza cambia gli ELEMENTI riga per riga, non solo il lato: campo pieno, foto, filetto. */
.interventi { display: grid; gap: var(--space-8); }
.intervento {
  display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap); align-items: center;
}
.intervento > div { grid-column: span 6; padding-right: clamp(0px, 2.5vw, 2.75rem); }
.intervento__figura { grid-column: span 6; margin: 0; }
.intervento:nth-child(even) .intervento__figura { order: -1; padding-right: 0; }
.intervento__figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.intervento__numero {
  font-family: var(--font-display); font-weight: 800; font-size: 3.2rem; line-height: 1;
  /* ⚠ Con --sage il numero misurava 1,54 sul ghiaccio: è testo, non decorazione, e resta sopra 3. */
  color: var(--brand-mid); display: block; margin-bottom: var(--space-3);
}
.intervento h3 { font-size: var(--text-xl); }
.intervento p { margin-top: var(--space-4); color: var(--ink-muted); }
.intervento__nota {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: var(--border); color: var(--ink); font-size: var(--text-sm);
}

/* ============================== GALLERY ============================== */

/* Mosaico di ritratti: 18 tessere verticali in maglia fitta. È qui che vive l'archivio del cliente. */
.gallery__griglia {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
}
/* ⚠ La gallery sta su fondo SCURO: tre sezioni chiare di fila appiattivano la pagina, e su petrolio
   le fotografie di cantiere guadagnano stacco invece di annegare nel bianco. */
.gallery--scura { background: var(--grad-brand); color: var(--on-dark); }
.gallery--scura h2, .gallery--scura .eyebrow { color: var(--on-dark); }
.gallery--scura .sezione-intro { border-bottom-color: rgba(241, 246, 248, .22); }
.gallery--scura .sezione-intro p, .gallery--scura .gallery__coda { color: var(--on-dark-muted); }
.gallery--scura .gallery__temi li { color: var(--on-dark); border-color: rgba(241, 246, 248, .34); }
.gallery__cella { grid-column: span 3; overflow: hidden; background: rgba(241, 246, 248, .08); }
.gallery__cella img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--tile-ratio);
  transition: transform var(--dur) var(--ease);
}
.gallery__cella:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .gallery__cella img { transition: none; } }
/* La prosa di coda su DUE colonne: a riga piena misurerebbe 146 caratteri (illeggibile), a metà riga
   lascerebbe mezza pagina vuota. Le colonne risolvono entrambe le cose. */
.coda-due { columns: 2; column-gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); margin-top: var(--space-6); color: var(--ink-muted); }
.banda .coda-due, .gallery--scura .coda-due, .richiamo .coda-due { color: var(--on-dark-muted); }
@media (max-width: 860px) { .coda-due { columns: 1; } }
.gallery__temi { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.gallery__temi li {
  font-size: var(--text-sm); font-weight: 600; color: var(--accent-ink);
  padding: var(--space-2) var(--space-4); border: 1px solid var(--line);
}
/* Il filmato di un controllore in funzione: è l'unico movimento reale del mestiere che il materiale
   porta. Muto, in ciclo, senza controlli — e senza nessuna richiesta di rete esterna (zero-live). */
.gallery__video { margin-top: var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-6); align-items: center; }
.gallery__video video { width: 100%; background: var(--brand-dark); aspect-ratio: var(--tile-ratio); object-fit: cover; }
.gallery__video p { color: var(--ink-muted); }
/* ⚠ Portando la gallery sul fondo scuro questo grigio è sceso a 2,02: un componente CONDIVISO eredita
   il colore dal contesto, e chi lo fissa lo fissa nella banda. */
.gallery--scura .gallery__video p { color: var(--on-dark-muted); }

/* ============================== CONTATTI ============================== */

.contatti__cols {
  display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap); align-items: start;
}
.contatti__cols > div:first-child { grid-column: span 5; padding-right: clamp(0px, 2.5vw, 2.5rem); }
.contatti__cols > aside { grid-column: span 4; }
/* ⚠ La fotografia è un RITRATTO: schiacciata in una striscia larga se ne vedeva una fetta. Occupa ora
   una colonna alta quanto le altre due — il ritaglio segue il contenitore, non il contrario. */
.contatti__foto { grid-column: span 3; margin: 0; overflow: hidden; align-self: stretch; }
.contatti__foto img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.contact-form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-muted);
}
.field input, .field textarea {
  padding: var(--space-3) var(--space-4); background: var(--paper);
  border: 1px solid var(--sage); border-radius: var(--field-radius);
}
.field textarea { min-height: 140px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
/* ⚠ .consent è un flex: il testo (link incluso) va in UN solo <span>, sennò il link diventa un
   flex-item a sé e la riga si spezza. */
.consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }
.consent a { text-decoration: underline; color: var(--accent-ink); }
/* ⚠ Aree di tocco: la casella nativa esce 13x13 e le frecce della lightbox 16x6. WCAG 2.2 esenta i
   collegamenti IN LINEA dentro una frase, non i controlli — questi vanno dimensionati. */
.consent input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--brand); }

/* ============================== LIGHTBOX ============================== */

/* ⚠⚠ `reveal.js` crea l'overlay e gli mette `is-open` + `overflow:hidden` sull'<html>: senza CSS resta un
   div in FLUSSO NORMALE in fondo alla pagina, cioè lo scroll si blocca e non si apre niente. È il difetto
   che il cliente ha visto. Lo stato NASCOSTO è obbligatorio: un overlay sempre visibile intercetta ogni
   click della pagina (l'altra metà della stessa lezione). */
.fp-lb {
  position: fixed; inset: 0; z-index: 90;
  display: none; place-items: center;
  background: rgba(8, 40, 48, .95);
  padding: clamp(1rem, 4vw, 3.5rem);
}
.fp-lb.is-open { display: grid; }
.fp-lb__img {
  max-width: min(1080px, 90vw); max-height: 84vh;
  width: auto; height: auto; object-fit: contain;
  border: 6px solid var(--on-dark); box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}
.fp-lb__x, .fp-lb__nav {
  position: absolute; display: grid; place-items: center;
  background: rgba(241, 246, 248, .12); color: var(--on-dark);
  border: 2px solid rgba(241, 246, 248, .55);
  font-size: 1.6rem; line-height: 1;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fp-lb__x:hover, .fp-lb__nav:hover { background: var(--accent); border-color: var(--on-dark); }
.fp-lb__x { top: clamp(12px, 2vw, 28px); right: clamp(12px, 2vw, 28px); width: 56px; height: 56px; }
.fp-lb__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; padding: 12px; }
.fp-lb__nav svg { width: 30px; height: 30px; }
.fp-lb__prev { left: clamp(8px, 2vw, 28px); }
.fp-lb__next { right: clamp(8px, 2vw, 28px); }
@media (prefers-reduced-motion: reduce) { .fp-lb__x, .fp-lb__nav { transition: none; } }
@media (max-width: 640px) {
  .fp-lb__nav { width: 48px; height: 48px; top: auto; bottom: 18px; transform: none; }
  .fp-lb__prev { left: 18px; } .fp-lb__next { right: 18px; }
}

/* Aside chiara: ⚠ NON riusa lo stile dei recapiti della banda scura, che su fondo chiaro si
   invertirebbe e sparirebbe. */
.contact-info { background: var(--surface); padding: var(--space-6); border-top: 3px solid var(--brand); }
.contact-info dl { display: grid; gap: var(--space-4); }
.contact-info dt {
  font-size: 0.72rem; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-ink);
}
.contact-info dd { margin: var(--space-1) 0 0; color: var(--ink); }
.contact-info a { text-decoration: underline; text-underline-offset: 3px; }
.hours li { color: var(--ink); }
.contact-info .btn { margin-top: var(--space-5); }

/* ============================== RICHIAMO FINALE ============================== */

/* ⚠ Un MESTIERE per blocco: questa banda AGISCE (una sola chiamata all'azione), il piè ORIENTA.
   Ripetere qui i recapiti a 150px dal piè è il difetto già pagato altrove. */
/* Il richiamo finale su FOTOGRAFIA: era l'ultima banda senza immagini, ed è quella che deve convincere.
   ⚠ Il velo non è un'opacità qualunque: il testo poggia sulla metà sinistra, e il buio SEGUE il testo
   invece di stendersi su tutta la banda (misurato dal pixel: vedi contrast-pixel.mjs). */
.richiamo { position: relative; isolation: isolate; background: var(--brand-dark); color: var(--on-dark); padding-block: var(--section-y); overflow: hidden; }
.richiamo__sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.richiamo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(8,40,48,.96) 0%, rgba(8,40,48,.92) 46%, rgba(8,40,48,.62) 100%);
}
.richiamo__inner { display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.richiamo__inner > div:first-child { grid-column: span 8; padding-right: clamp(0px, 3vw, 3rem); }
.richiamo__zona { grid-column: span 4; }
.richiamo h2 { font-size: var(--text-2xl); color: var(--on-dark); }
.richiamo p { margin-top: var(--space-4); color: var(--on-dark-muted); font-size: var(--text-md); }
.richiamo__azioni { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.richiamo__zona { border-left: 3px solid var(--sage); padding-left: var(--space-5); }
/* ⚠ Il gradiente --grad-deep schiarisce in alto a destra, proprio dove sta questa colonna:
   --on-dark-muted ci misurava 3,8. Il testo qui prende --on-dark pieno. */
.richiamo__zona strong { color: var(--on-dark); display: block; }
.richiamo__zona p { color: var(--on-dark); }

/* ============================== PIÈ ============================== */

.site-footer { background: var(--brand-dark); color: var(--on-dark); padding-block: var(--space-9) var(--space-6); }
.site-footer h3 {
  font-size: 0.72rem; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--sage); margin-bottom: var(--space-3);
}
.site-footer__griglia {
  display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); gap: var(--grid-gap);
}
.site-footer__col { grid-column: span 3; padding-right: var(--space-5); }
/* L'ultima colonna si allinea al bordo DESTRO del contenitore, dove sta «Powered by Dgitaly»: con i
   contenuti corti restava sospesa a metà campata, e la riga legale sotto non le corrispondeva. */
.site-footer__col:last-child { padding-right: 0; text-align: right; }
.site-footer__col li + li { margin-top: var(--space-2); }
.site-footer__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer li, .site-footer p { color: var(--on-dark-muted); }
.legale {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid rgba(241, 246, 248, .16);
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center;
  font-size: var(--text-sm); color: var(--on-dark-muted);
}
.legale a, .legale .dgitaly { padding-block: var(--space-1); }
.legale .dgitaly { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); }
.legale .dgitaly img { display: inline-block; }

/* ============================== PAGINE INTERNE (Privacy, 404) ============================== */

/* ⚠ La page-head NON riusa la size dell'hero: è una testata di pagina, non un hero. */
.page-head { background: var(--brand); color: var(--on-dark); padding-block: var(--space-8); }
.page-head h1 { font-size: var(--text-2xl); color: var(--on-dark); }
.prose { max-width: var(--container-narrow); }
.prose h2 { font-size: var(--text-lg); margin-top: var(--space-7); }
.prose h3 { font-size: var(--text-md); margin-top: var(--space-5); }
.prose p, .prose li { color: var(--ink-muted); }
.prose ul { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.prose li { padding-left: 18px; position: relative; }
.prose li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--sage); }

/* ============================== RESPONSIVE ============================== */

/* Il responsive non cambia GRIGLIA, cambia quante colonne occupa ciascun pezzo: le dodici tracce
   restano, e l'allineamento con esse. */
@media (max-width: 1024px) {
  .site-footer__col { grid-column: span 6; }
  .site-footer__col:last-child { text-align: left; }
  .gallery__cella { grid-column: span 4; }
  .tessera { grid-column: span 6; }
  .certificazioni__foto { grid-column: span 12; }
  .certificazioni__schede { grid-column: span 12; }
}
@media (max-width: 860px) {
  .hero__testo, .hero__griglia > .mosaico,
  .intervento > div, .intervento__figura,
  .contatti__cols > div:first-child, .contatti__cols > aside, .contatti__foto,
  .richiamo__inner > div:first-child, .richiamo__zona { grid-column: 1 / -1; padding-right: 0; }
  .hero__barra li { grid-column: span 12; padding-left: 0; box-shadow: none; border-top: 1px solid var(--line); }
  .hero__barra li:first-child { border-top: 0; }
  .chisiamo__griglia, .gallery__video { grid-template-columns: minmax(0, 1fr); }
  .hero__prosa-testo, .hero__principali { grid-column: 1 / -1; padding-right: 0; columns: 1; }
  .hero__principali { margin-top: var(--space-6); }
  .contatti__foto img { min-height: 0; height: clamp(220px, 45vw, 340px); }
  .intervento:nth-child(even) .intervento__figura { order: 0; }
  .certificazioni__schede { grid-template-columns: minmax(0, 1fr); }
  .site-header__cta { display: none; }   /* la sostituisce la barra CTA fissa */
  /* ⚠ In colonna lo sfalsamento legge come errore di allineamento: le figure vanno a filo. */
  .chisiamo__figura { padding: 0; }
  .chisiamo__figura::before, .chisiamo__figura::after { display: none; }
}
@media (max-width: 640px) {
  .gallery__cella { grid-column: span 6; }
  .tessera { grid-column: span 12; }
  .mosaico__cella--alta, .mosaico__cella--quadra, .mosaico__cella--targa { grid-column: span 12; }
  .mosaico__cella--alta { grid-row: span 4; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .site-footer__col { grid-column: span 12; }
  .legale .dgitaly { margin-left: 0; }
}