/* components.css — cleaning_services. Il segno del verticale è il MOSAICO: una griglia di tessere in cui
   campi di colore pieno e ritagli di fotografia stanno nella stessa maglia. Nasce dal riferimento di
   categoria (BeCorporation2) e risolve un vincolo reale del mestiere: i clienti di un'impresa di pulizie
   non hanno quasi mai fotografie di grande formato, e una tessera piccola non chiede risoluzione.
   Il secondo tratto è la TESTATA NERA piena, che regge la navigazione e dichiara «ente» invece di
   «studio creativo». Il terzo sono le fotografie che SCAVALCANO il confine fra due bande.
   I colori vengono solo da tokens.css. */

/* =========================================================================
   1. Bottoni e collegamenti
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-base);
  letter-spacing: -0.005em; line-height: 1.1;
  padding: 0.95rem 1.6rem; border: 2px solid transparent; border-radius: var(--radius);
  background: var(--brand); color: var(--on-dark);
  transition: background .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.btn:hover { background: var(--brand-dark); }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 0.62rem 1.05rem; font-size: var(--text-sm); letter-spacing: 0.01em; }
.btn--lg { padding: 1.1rem 2rem; }
/* Bottone secondario su fondo CHIARO: contorno inchiostro, testo inchiostro. */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
/* Bottone secondario su fondo SCURO (nero o verde): contorno bianco. */
.btn--onDark { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.55); }
.btn--onDark:hover { background: var(--on-dark); color: var(--forest); border-color: var(--on-dark); }
/* Bottone chiaro su fondo verde/nero: pieno bianco con testo scuro. */
.btn--light { background: var(--paper); color: var(--forest); }
.btn--light:hover { background: var(--tint); }

.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--brand-text); }
.link-arrow::after { content: "→"; transition: transform .22s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.on-dark .link-arrow, .section--night .link-arrow { color: var(--brand-soft); }

/* =========================================================================
   2. Testata: barra istituzionale verde + header NERO fisso che si contrae
   ========================================================================= */
.topbar { background: var(--brand); color: var(--on-dark); font-size: var(--text-sm); }
.topbar__row {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 40px; flex-wrap: wrap;
}
.topbar__item { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.topbar__item svg { width: 15px; height: 15px; flex: none; opacity: .9; }
.topbar__spacer { margin-left: auto; }
.topbar a { text-decoration: none; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--night); color: var(--on-dark);
  border-bottom: 1px solid rgba(255,255,255,.10);
  transition: box-shadow .3s var(--ease);
}
.site-header__row {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: var(--header-h);
  transition: min-height .28s var(--ease);
}
/* ⚠ nav e CTA hanno un margine di blocco di WP che li spinge sotto il centro: si azzera e si centra. */
.site-header__row > * { align-self: center; margin-block: 0; }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(16,19,18,.28); }
.site-header.is-scrolled .site-header__row { min-height: var(--header-h-shrunk); }

.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--on-dark); }
/* ⭐ Il marchio della TESTATA è una MASCHERA, non un <img>: così può prendere un gradiente. Il lettering
   parte bianco e si accende di verde verso il quadrifoglio, che nel marchio sta proprio a destra — lo stesso
   gesto delle bande, portato sul segno dell'azienda.
   ⚠ Il rapporto 148:38 è quello del file (400:103): una maschera non ha proporzioni proprie, e sbagliarle
   schiaccia le lettere. ⚠ Il piè di pagina resta un <img> bianco, per scelta dell'owner. */
.wordmark__mark {
  width: 148px; height: 38px; flex: none;
  background: linear-gradient(96deg, var(--on-dark) 0%, var(--on-dark) 38%, var(--brand-soft) 74%, #A9DCC0 100%);
  -webkit-mask: url("../assets/img/logo.svg") left center/contain no-repeat;
  mask: url("../assets/img/logo.svg") left center/contain no-repeat;
  transition: width .28s var(--ease), height .28s var(--ease);
}
.site-header.is-scrolled .wordmark__mark { width: 117px; height: 30px; }
.site-footer .wordmark__mark { width: auto; height: 38px; background: none; -webkit-mask: none; mask: none; }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.06; }
.wordmark__name { font-family: var(--font-display); font-weight: 800; font-size: 1.24rem; letter-spacing: -0.02em; }
.wordmark__tag { font-size: 0.66rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--brand-soft); font-weight: 600; }

/* Navigazione: blocco wp:navigation (mai una nav a mano — il menu seedato dev'essere RESO).
   ⚠ A parità di specificità vince il CSS dei blocchi, iniettato DOPO il tema: per battere il fondo bianco
   che WP mette a dropdown e overlay servono selettori di pari schema, non un livello in meno. */
.site-nav { margin-left: auto; font-weight: 600; }
.site-header .site-nav a { color: var(--on-dark); font-size: 0.975rem; letter-spacing: -0.005em; }
.site-header .site-nav .wp-block-navigation-item { position: relative; }
.site-header .site-nav .wp-block-navigation-item__content { padding-block: 4px; }
/* filetto verde che si disegna sotto la voce al passaggio */
.site-header .site-nav .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--brand-soft); transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--ease);
}
.site-header .site-nav .wp-block-navigation-item__content:hover::after,
.site-header .site-nav .current-menu-item .wp-block-navigation-item__content::after { transform: scaleX(1); }

.site-header__cta { margin-left: var(--space-4); flex: none; }
.site-header__cta svg { width: 16px; height: 16px; }

/* =========================================================================
   3. Testata della pagina (hero): pannello di testo + MOSAICO di tessere
   ========================================================================= */
.hero { background: var(--paper); position: relative; padding-block: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem) 0; }
.hero__row {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3.2vw, 4rem); align-items: center;
}
.hero__panel { padding-bottom: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); max-width: 39rem; }
.hero h1 { margin-bottom: var(--space-4); }
/* Una parola del titolo nel verde: il taglio editoriale del riferimento di categoria. */
.hero h1 .accent { color: var(--brand-text); }
.hero__lead { font-size: var(--text-md); line-height: 1.55; color: var(--ink-muted); max-width: 46ch; }
.hero__checks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4); margin-top: var(--space-5);
}
.hero__checks li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.94rem; font-weight: 600; }
.hero__checks li::before {
  content: ""; width: 18px; height: 18px; flex: none; margin-top: 2px; background: var(--brand);
  -webkit-mask: url("../assets/img/icons/check.svg") center/contain no-repeat; mask: url("../assets/img/icons/check.svg") center/contain no-repeat;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* Il mosaico sborda a destra fino al bordo della pagina: la maglia continua oltre il container, che è il
   modo del riferimento di dire «l'azienda è più larga della colonna di testo».
   ⚠ Le sei celle sono coperte per costruzione (2 colonne × 3 righe, con due tessere a campata doppia):
   una campata sbagliata lascia un buco, e il buco si vede. */
.hero__mosaic {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, clamp(146px, 18.6vw, 312px));
  gap: 10px; align-self: stretch;
  margin-right: calc((100vw - min(100vw - var(--gutter) * 2, var(--container))) / -2);
  padding-bottom: clamp(1.4rem, 1rem + 1.4vw, 2.6rem);
}
.mtile { position: relative; overflow: hidden; background: var(--surface-2); }
.mtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.mtile:hover img { transform: scale(1.045); }
.mtile--wide { grid-column: 1 / -1; }
.mtile--tall { grid-row: span 2; }
.mtile--brand { background: var(--brand); color: var(--on-dark); display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-4); }
.mtile--night { background: var(--forest); color: var(--on-dark); display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-4); }
.mtile__k { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1; letter-spacing: -0.03em; }
.mtile__t { display: block; margin-top: var(--space-2); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: .92; }
/* Il marchio nella tessera e una MASCHERA, non un <img>: dentro un <img> il `currentColor` del
   quadrifoglio si risolve in nero (SVG = documento a se) e la tessera verde mostrava un blocco
   scuro che copriva il numero. Come maschera il colore lo mette il token. */
.mtile__mark { width: 34px; height: 34px; flex: none; background: var(--on-dark); opacity: .55;
  -webkit-mask: url("../assets/img/favicon.svg") center/contain no-repeat; mask: url("../assets/img/favicon.svg") center/contain no-repeat; }
/* Didascalia sulla tessera fotografica. ⚠ Il testo sopra una foto NON ha una coppia di colori: il
   contrasto va misurato dal PIXEL, e un velo «elegante» misurava 3,24 contro i 4,5 richiesti. Il velo è
   quindi DENSO nella fascia dove il testo si posa e svanisce sopra: il contrasto diventa strutturale,
   non dipendente dal fotogramma. */
.mtile__cap {
  position: absolute; inset: auto 0 0 0; padding: var(--space-3) var(--space-4);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--on-dark);
  /* Targa PIENA, non sfumatura: su una tessera piccola il velo graduato lasciava il testo a 3,83 misurato
     dal pixel contro i 4,5 richiesti, e il valore dipendeva da quanto era chiara la foto sotto. */
  background: rgba(16,19,18,.90);
}

/* =========================================================================
   4. Introduzione di sezione + numerale
   ========================================================================= */
.section-intro { max-width: 46rem; margin-bottom: var(--space-7); }
.section-intro--center { margin-inline: auto; text-align: center; }
.section-intro--center .eyebrow { justify-content: center; }
.section-intro h2 { margin-bottom: var(--space-3); }
.section-intro .lead { margin-top: var(--space-3); }
/* Il numerale di sezione è un contatore CSS: zero markup, e non può disallinearsi dal contenuto. */
.section { counter-increment: fp-section; }
.section-intro__n {
  font-family: var(--font-display); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.16em;
  color: var(--brand); display: block; margin-bottom: var(--space-2);
}
.section-intro__n::before { content: "0" counter(fp-section); }

/* =========================================================================
   5. Chi siamo: due colonne, con la fotografia che SCAVALCA la banda successiva
   ========================================================================= */
.about { position: relative; }
.about__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4.5rem); align-items: start;
}
.about__body p + p { margin-top: var(--space-4); }
.about__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); border-top: var(--border); padding-top: var(--space-5); }
.about__fact strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1; letter-spacing: -0.03em; color: var(--brand-text); }
.about__fact span { display: block; margin-top: var(--space-2); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }

/* ⚠ Una fotografia CENTRATA non scavalca mai: il padding della sezione assorbe la sporgenza e la banda
   cresce con lei. Va ancorata al bordo e tirata oltre con un margine maggiore del padding, così il suo
   contributo all'altezza cala e la riga la decide il testo. */
/* ⚠⚠ La banda che segue è un fratello SUCCESSIVO con lo stesso z-index: dipingeva SOPRA la fotografia
   sporgente e lo scavalco si vedeva tagliato a metà. Non basta alzare lo z-index del figlio — quello vive
   dentro il contesto di impilamento della sezione: va alzata la SEZIONE. */
.about { z-index: 3; }
/* ⚠ Con `align-self: end` la fotografia si appoggiava al fondo lasciando ~300px di vuoto in alto: la
   colonna di testo è più alta e nessuno riempiva la differenza. Ora la colonna si TENDE e la fotografia
   prende l'altezza che avanza, così il vuoto non esiste e lo scavalco resta. */
.about__media { align-self: stretch; display: flex; flex-direction: column; position: relative; z-index: 2; margin-bottom: calc((var(--section-y) * -1) - var(--space-7)); }
.about__media > img { width: 100%; flex: 1 1 auto; min-height: 340px; object-fit: cover; }
/* ⚠ La didascalia era una fascia a piena larghezza in BASSO, e la fotografia sporgente le si sovrapponeva
   a sinistra: il testo finiva sotto l'inset e sembrava tagliato. Ora è una TARGA in alto a sinistra, dove
   nulla la copre, e la scritta sta tutta a sinistra com'è giusto per una didascalia. */
.about__media figcaption {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--brand); color: var(--on-dark); padding: var(--space-3) var(--space-4);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
/* Seconda fotografia che si ACCAVALLA alla prima, spostata nella gronda fra le due colonne.
   ⚠ Si sposta solo dentro il `gap` della griglia: una sporgenza maggiore finirebbe sopra il testo — è
   così che, su un altro verticale, una foto ha coperto tre tessere cliccabili senza che nessun controllo
   lo vedesse. Su schermo stretto la griglia si impila e lo scostamento va azzerato. */
.about__inset {
  position: absolute; left: calc(var(--space-6) * -1); bottom: calc(var(--space-7) * -1);
  width: 44%; z-index: 3; border: 7px solid var(--forest); background: var(--forest);
}
.about__inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* =========================================================================
   6. Certificazioni: banda NERA, tessere rialzate
   ========================================================================= */
.certs__row { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2rem, 1.2rem + 3vw, 4.2rem); align-items: start; }
.certs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.cert {
  background: var(--forest-2); border-left: 3px solid var(--brand-soft); padding: var(--space-4) var(--space-5);
  display: flex; align-items: flex-start; gap: var(--space-3);
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.cert:hover { border-left-color: var(--on-dark); transform: translateX(3px); }
.cert__icon { width: 20px; height: 20px; flex: none; margin-top: 3px; background: var(--brand-soft);
  -webkit-mask: url("../assets/img/icons/check.svg") center/contain no-repeat; mask: url("../assets/img/icons/check.svg") center/contain no-repeat; }
.cert p { font-size: 0.94rem; font-weight: 600; line-height: 1.45; }

/* Seconda riga della banda: lo staff a sinistra, una fotografia di mestiere a destra. La fascia chiude
   la banda nera senza che nessuna delle due colonne resti scoperta.
   ⚠ La fotografia ha un'altezza DICHIARATA: lasciata a riempire la colonna diventava l'immagine più
   grande della pagina, e la testata tornava a essere la più piccola. */
.certs__bottom {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4.2rem); align-items: center;
  margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.14);
}
.certs__staff h3 { margin-bottom: var(--space-3); }
.certs__staff p { color: var(--on-dark-muted); }
.certs__photo { overflow: hidden; }
.certs__photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; transition: transform .9s var(--ease); }
.certs__photo:hover img { transform: scale(1.04); }

/* =========================================================================
   7. Servizi: il mosaico delle tessere (foto + campo pieno nella stessa maglia)
   ========================================================================= */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.tile {
  position: relative; background: var(--paper); border: var(--border);
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3); min-height: 172px;
  transition: border-color .24s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}
.tile:hover { border-color: var(--brand); box-shadow: var(--shadow-1); transform: translateY(-3px); }
.tile__icon { width: 30px; height: 30px; flex: none; background: var(--brand-text); }
.tile h3 { font-size: 1.06rem; line-height: 1.25; }
.tile p { font-size: 0.92rem; color: var(--ink-muted); }
/* Tessere PIENE: sono la voce del mosaico che dà ritmo alla griglia. Sul verde il testo è BIANCO. */
.tile--brand { background: var(--brand); border-color: var(--brand); color: var(--on-dark); }
.tile--brand .tile__icon { background: var(--on-dark); }
.tile--brand p { color: var(--on-dark); opacity: .93; }
.tile--brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.tile--night { background: var(--forest); border-color: var(--forest); color: var(--on-dark); }
.tile--night .tile__icon { background: var(--brand-soft); }
.tile--night p { color: var(--on-dark-muted); }
/* Tessera FOTOGRAFICA dentro la stessa maglia: è il device del riferimento di categoria. */
.tile--photo { padding: 0; border: 0; overflow: hidden; min-height: 0; }
.tile--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile--photo:hover img { transform: scale(1.05); }
.tile--photo:hover { transform: none; box-shadow: none; }

/* Icone del mestiere. ⚠ La maschera vive QUI e non in uno style inline: `url()` dentro un attributo
   style NON viene riscritto nel post_content (il rewrite tocca solo i .php del tema, e nel database il
   PHP non gira) ⇒ l'icona sparirebbe. Nel CSS l'url si risolve rispetto al FOGLIO, che è sempre servito
   dal tema. L'aggancio è `data-icon` dall'IR.
   ⚠ Il nome dell'icona è ancorato al SIGNIFICATO della voce, non alla sua posizione: un'icona legata
   all'indice finisce sulla voce sbagliata appena il cliente riordina l'elenco. */
[data-icon="pulizie"] .tile__icon, [data-icon="pulizie"] .plate__i { -webkit-mask: url("../assets/img/icons/pulizie.svg") no-repeat center / contain; mask: url("../assets/img/icons/pulizie.svg") no-repeat center / contain; }
[data-icon="industriali"] .tile__icon, [data-icon="industriali"] .plate__i { -webkit-mask: url("../assets/img/icons/industriali.svg") no-repeat center / contain; mask: url("../assets/img/icons/industriali.svg") no-repeat center / contain; }
[data-icon="sanificazione"] .tile__icon, [data-icon="sanificazione"] .plate__i { -webkit-mask: url("../assets/img/icons/sanificazione.svg") no-repeat center / contain; mask: url("../assets/img/icons/sanificazione.svg") no-repeat center / contain; }
[data-icon="disinfestazione"] .tile__icon, [data-icon="disinfestazione"] .plate__i { -webkit-mask: url("../assets/img/icons/disinfestazione.svg") no-repeat center / contain; mask: url("../assets/img/icons/disinfestazione.svg") no-repeat center / contain; }
[data-icon="derattizzazione"] .tile__icon, [data-icon="derattizzazione"] .plate__i { -webkit-mask: url("../assets/img/icons/derattizzazione.svg") no-repeat center / contain; mask: url("../assets/img/icons/derattizzazione.svg") no-repeat center / contain; }
[data-icon="disinfezione"] .tile__icon, [data-icon="disinfezione"] .plate__i { -webkit-mask: url("../assets/img/icons/disinfezione.svg") no-repeat center / contain; mask: url("../assets/img/icons/disinfezione.svg") no-repeat center / contain; }
[data-icon="verde"] .tile__icon, [data-icon="verde"] .plate__i { -webkit-mask: url("../assets/img/icons/verde.svg") no-repeat center / contain; mask: url("../assets/img/icons/verde.svg") no-repeat center / contain; }
[data-icon="edile"] .tile__icon, [data-icon="edile"] .plate__i { -webkit-mask: url("../assets/img/icons/edile.svg") no-repeat center / contain; mask: url("../assets/img/icons/edile.svg") no-repeat center / contain; }
[data-icon="facchinaggio"] .tile__icon, [data-icon="facchinaggio"] .plate__i { -webkit-mask: url("../assets/img/icons/facchinaggio.svg") no-repeat center / contain; mask: url("../assets/img/icons/facchinaggio.svg") no-repeat center / contain; }
[data-icon="fotovoltaico"] .tile__icon, [data-icon="fotovoltaico"] .plate__i { -webkit-mask: url("../assets/img/icons/fotovoltaico.svg") no-repeat center / contain; mask: url("../assets/img/icons/fotovoltaico.svg") no-repeat center / contain; }
[data-icon="pietra"] .tile__icon, [data-icon="pietra"] .plate__i { -webkit-mask: url("../assets/img/icons/pietra.svg") no-repeat center / contain; mask: url("../assets/img/icons/pietra.svg") no-repeat center / contain; }
[data-icon="antigraffiti"] .tile__icon, [data-icon="antigraffiti"] .plate__i { -webkit-mask: url("../assets/img/icons/antigraffiti.svg") no-repeat center / contain; mask: url("../assets/img/icons/antigraffiti.svg") no-repeat center / contain; }
[data-icon="piscine"] .tile__icon, [data-icon="piscine"] .plate__i { -webkit-mask: url("../assets/img/icons/piscine.svg") no-repeat center / contain; mask: url("../assets/img/icons/piscine.svg") no-repeat center / contain; }
[data-icon="rifiuti"] .tile__icon, [data-icon="rifiuti"] .plate__i { -webkit-mask: url("../assets/img/icons/rifiuti.svg") no-repeat center / contain; mask: url("../assets/img/icons/rifiuti.svg") no-repeat center / contain; }
[data-icon="legionella"] .tile__icon, [data-icon="legionella"] .plate__i { -webkit-mask: url("../assets/img/icons/legionella.svg") no-repeat center / contain; mask: url("../assets/img/icons/legionella.svg") no-repeat center / contain; }

/* Fascia fotografica a filo pagina: l'intermezzo scuro fra due bande chiare del riferimento di categoria.
   ⚠ Il titolo NON si appoggia alla fotografia nuda: sta su un velo denso misurato dal pixel, perché sopra
   uno scatto il contrasto non si deduce da una coppia di colori. */
.photoband { position: relative; overflow: hidden; background: var(--forest); isolation: isolate; }
.photoband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.photoband::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(16,19,18,.92) 0%, rgba(16,19,18,.86) 46%, rgba(16,19,18,.55) 100%);
}
.photoband__row { display: grid; justify-items: center; text-align: center; gap: var(--space-5); padding-block: clamp(3.2rem, 2.2rem + 3.6vw, 5.8rem); }
.photoband h2 { color: var(--on-dark); max-width: 30ch; }
.photoband p { color: var(--on-dark-muted); margin-top: var(--space-3); max-width: 46ch; }
.photoband .btn { flex: none; }

/* =========================================================================
   8. Attrezzature: fotografia a filo pagina + elenco a targhe
   ========================================================================= */
/* Due righe: l'intestazione (numerale + occhiello) sta nella riga 1 a destra, la fotografia nella riga 2 a
   sinistra. Il bordo alto della fotografia cade così alla quota del TITOLO per COSTRUZIONE — nessun offset
   da tarare a mano, che si romperebbe al primo cambio di corpo — e il vuoto in alto a sinistra non c'è più. */
.gear__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  grid-template-rows: auto 1fr; gap: 0 clamp(2rem, 1.2rem + 3vw, 4.4rem); align-items: start;
}
.gear__head { grid-area: 1 / 2; }
.gear__body { grid-area: 2 / 2; }
.gear__media { grid-area: 2 / 1; }
/* La fotografia esce dal container verso SINISTRA, fino al bordo della pagina. */
.gear__media { position: relative; margin-left: calc((100vw - min(100vw - var(--gutter) * 2, var(--container))) / -2); }
.gear__media img { width: 100%; flex: 1 1 auto; min-height: 300px; object-fit: cover; }
.gear__plates { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.plate {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--paper); border-left: 3px solid var(--brand); padding: var(--space-3) var(--space-4);
  font-weight: 600; font-size: 0.95rem;
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.plate:hover { transform: translateX(4px); border-left-color: var(--brand-dark); }
.plate__i { width: 20px; height: 20px; flex: none; background: var(--brand-text); }

/* =========================================================================
   9. Lavori: il mosaico sfalsato delle fotografie REALI
   ========================================================================= */
/* ⚠ Le righe hanno un'altezza DICHIARATA: lasciandola al rapporto della fotografia, una tessera a campata
   doppia diventava 816x612 = più grande dell'intera testata, e l'immagine principale del sito finiva per
   essere la più piccola — difetto già visto da un cliente su un altro verticale. */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--work-row); gap: var(--space-4); }
.work { position: relative; overflow: hidden; background: var(--surface-2); }
.work img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.work:hover img { transform: scale(1.045); }
/* Le campate CHIUDONO la griglia (2+1+1 · 2+1 · 2+1 = 9 celle su 3 colonne, tre righe piene). */
.work--w2 { grid-column: span 2; }
.work--tall { grid-row: span 2; }
.work__cap {
  position: absolute; inset: auto 0 0 0; padding: var(--space-7) var(--space-4) var(--space-4);
  color: var(--on-dark); font-size: 0.88rem; font-weight: 600; line-height: 1.35;
  background: linear-gradient(to top, rgba(16,19,18,.94) 0%, rgba(16,19,18,.84) 46%, rgba(16,19,18,0) 100%);
}
.works__note { margin-top: var(--space-5); max-width: 48ch; }

/* =========================================================================
   10. Committenti pubblici: targhe su banda tint
   ========================================================================= */
/* Tre ambiti in riga: tessere basse, larghe, con l'icona di fianco al titolo. */
.refs__kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-7); }
.refs__kind {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--paper); border: var(--border); border-bottom: 3px solid var(--brand);
  padding: var(--space-4) var(--space-5);
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.refs__kind:hover { border-bottom-color: var(--brand-dark); transform: translateY(-3px); }
.refs__kind h3 { font-size: 1.02rem; line-height: 1.2; }
.refs__kind .plate__i { width: 26px; height: 26px; }

/* Il muro dei committenti: quattro colonne di targhe sotto un titolo di riga. */
.refs__wall { border-top: var(--border); padding-top: var(--space-6); }
.refs__wallTitle { font-size: 0.84rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-4); }
.refs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.refs__grid li.is-wide { grid-column: span 2; }
.refs__grid li {
  background: var(--paper); border: var(--border); border-left: 3px solid var(--brand);
  padding: var(--space-3) var(--space-4); font-size: 0.9rem; font-weight: 600; line-height: 1.3;
  display: flex; align-items: center;
}
.refs__note { margin-top: var(--space-5); font-size: 0.94rem; color: var(--ink-muted); max-width: 76ch; }
/* ⚠⚠ Questa regola era MANCANTE e la fotografia rendeva alla propria misura naturale (1100×1030): la banda
   è cresciuta di mille pixel e l'immagine è diventata la più grande della pagina, scavalcando la testata.
   Una fotografia senza una misura dichiarata non prende quella del contenitore: prende la propria. */
.refs__photo { margin-top: var(--space-7); overflow: hidden; box-shadow: var(--shadow-1); }
.refs__photo img { width: 100%; aspect-ratio: 21 / 6; object-fit: cover; object-position: center 38%; transition: transform .9s var(--ease); }
.refs__photo:hover img { transform: scale(1.04); }

/* =========================================================================
   11. Contatti: modulo + recapiti, due colonne
   ========================================================================= */
.contact__row { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2rem, 1.2rem + 3vw, 4rem); align-items: start; }
.contact-form { display: grid; gap: var(--space-4); }
.contact-form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-muted); }
.field input, .field textarea {
  font: inherit; font-size: 0.98rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 0.9rem; width: 100%;
  transition: border-color .2s var(--ease);
}
.field input:focus, .field textarea:focus { border-color: var(--brand); }
.field textarea { min-height: 132px; resize: vertical; }
/* ⚠ .consent è un flex: se il testo contiene un <a> si spezza in più flex-item → il testo INTERO,
   link compreso, sta dentro un solo <span>. */
.consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.86rem; color: var(--ink-muted); }
.consent input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--brand); }
.consent a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; }
.form-note { font-size: 0.82rem; color: var(--ink-muted); }

/* La scheda dei recapiti è CHIARA: la .facts delle bande scure avrebbe i colori invertiti qui. */
.contact-info { background: var(--paper); border: var(--border); border-top: 3px solid var(--brand); padding: var(--space-5); }
.contact-info h3 { margin-bottom: var(--space-4); }
.contact-info dl { display: grid; gap: var(--space-4); }
.contact-info dt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-1); }
.contact-info dd { font-size: 0.98rem; font-weight: 600; }
.contact-info dd a:hover { color: var(--brand-text); }
.hours { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.hours li { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 0.95rem; padding-bottom: var(--space-2); border-bottom: 1px dashed var(--line); }
.hours li:last-child { border-bottom: 0; }
.hours span:first-child { font-weight: 600; }
.hours span:last-child { color: var(--ink-muted); }
.map-link { margin-top: var(--space-5); display: inline-flex; }

/* =========================================================================
   12. Banda CTA finale
   ========================================================================= */
.cta-band { background: var(--forest); color: var(--on-dark); padding-block: clamp(2.6rem, 1.8rem + 3vw, 4.6rem); }
.cta-band__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.cta-band h2 { max-width: 22ch; }
.cta-band p { color: var(--on-dark-muted); margin-top: var(--space-3); max-width: 52ch; }
.cta-band__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* =========================================================================
   13. Piè di pagina
   ========================================================================= */
.site-footer { background: var(--forest); color: var(--on-dark); border-top: 1px solid rgba(255,255,255,.10); padding-block: var(--space-8) var(--space-5); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.site-footer h4 { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-soft); margin-bottom: var(--space-4); }
.site-footer p, .site-footer li { color: var(--on-dark-muted); font-size: 0.94rem; }
/* ⚠ Gli orari sono condivisi con la scheda CHIARA dei contatti, dove il secondario è --ink-muted: sul
   nero quello stesso token fa 2,41 ed è una violazione AA, non una sfumatura. Il fondo decide il token. */
.site-footer .hours li { border-bottom-color: rgba(255,255,255,.16); }
.site-footer .hours span:last-child { color: var(--on-dark-muted); }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__brand .wordmark { margin-bottom: var(--space-4); }
.site-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.22); }
.site-footer__social a:hover { border-color: var(--brand-soft); background: var(--forest-2); }
/* ⚠ Il glifo Facebook è un SVG NERO: dentro un <img> non erede nulla, e su fondo scuro sparisce. Come
   maschera il colore lo mette il token, e sull'hover diventa verde chiaro. */
.social__ico {
  width: 17px; height: 17px; display: block; background: var(--on-dark);
  -webkit-mask: url("../assets/img/icons/social-facebook.svg") center/contain no-repeat;
  mask: url("../assets/img/icons/social-facebook.svg") center/contain no-repeat;
  transition: background .22s var(--ease);
}
.site-footer__social a:hover .social__ico { background: var(--brand-soft); }
/* Tre campi sulla stessa linea: ragione sociale a sinistra, «Powered by» al CENTRO della barra, pagine
   legali a destra. ⚠ Le colonne laterali hanno la stessa larghezza (1fr) e il centro si dimensiona sul
   contenuto: è la sola forma in cui il campo centrale cade davvero a metà, invece di «circa» a metà. */
.site-footer__legal {
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.10);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  font-size: 0.84rem; color: var(--on-dark-muted);
}
.site-footer__vat { margin: 0; }
.site-footer__links { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: flex-end; }
/* ⚠ Il marchio è un badge quadrato e il testo una riga: `align-items: center` li allinea sull'asse, e
   `line-height: 1` toglie lo scarto della riga che li faceva sembrare disallineati. */
.powered { display: inline-flex; align-items: center; gap: var(--space-2); line-height: 1; white-space: nowrap; }
.powered img { width: 20px; height: 20px; display: block; }
@media (max-width: 760px) {
  .site-footer__legal { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-3); }
  .site-footer__links { justify-content: center; }
}

/* =========================================================================
   14. Barra CTA fissa su mobile
   ========================================================================= */
.cta-bar { display: none; }
@media (max-width: 900px) {
  .cta-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; inset: auto 0 0 0; z-index: 70; background: rgba(255,255,255,.14);
  }
  .cta-bar a { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.92rem; font-weight: 700; font-size: 0.94rem; background: var(--night); color: var(--on-dark); }
  .cta-bar a.is-primary { background: var(--brand); }
  .cta-bar svg { width: 17px; height: 17px; }
  /* la barra copre il fondo pagina: il piè di pagina le lascia il posto */
  .site-footer { padding-bottom: calc(var(--space-5) + 62px); }
}

/* =========================================================================
   15. Pagine interne (Privacy, 404)
   ========================================================================= */
.page-head { background: var(--surface); padding-block: clamp(2.4rem, 1.6rem + 2.6vw, 4rem); border-bottom: var(--border); }
.page-head h1 { font-size: var(--text-2xl); }
.prose { max-width: var(--container-narrow); }
.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.prose h3 { margin-top: var(--space-5); margin-bottom: var(--space-2); }
.prose p + p, .prose ul { margin-top: var(--space-4); }
.prose ul li { position: relative; padding-left: var(--space-5); margin-top: var(--space-2); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 2px; background: var(--brand); }
.prose a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
   16. Adattamento agli schermi stretti
   ========================================================================= */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero { padding-top: var(--space-6); }
  .hero__row { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero__panel { padding-bottom: 0; max-width: none; }
  /* ⚠ Su mobile il mosaico torna dentro il container: lo sbordo a destra, che su desktop è il segno del
     verticale, qui allargherebbe la pagina oltre il viewport. */
  .hero__mosaic { margin-right: 0; grid-template-rows: repeat(3, clamp(96px, 22vw, 150px)); }
  .about__row, .certs__row, .gear__row, .refs__row, .contact__row { grid-template-columns: 1fr; }
  .about__media { margin-bottom: 0; }
  .gear__media { margin-left: 0; }
  .certs__grid { grid-template-columns: 1fr; }
  .certs__bottom { grid-template-columns: 1fr; }
  .refs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .refs__kinds { grid-template-columns: 1fr; }
  /* impilata, la seconda fotografia torna in colonna: uno scostamento negativo qui leggerebbe come errore */
  .about__inset { position: static; width: 100%; left: auto; bottom: auto; border-width: 0; margin-top: var(--space-3); }
  .cta-band__row { flex-direction: column; align-items: flex-start; }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .topbar__spacer { margin-left: 0; }
  /* ⚠⚠ Il MENU MOBILE di wp:navigation. Il fondo lo decideva
     `.wp-block-navigation:not(.has-background) …container.is-menu-open:not(.disable-default-overlay)` —
     specificità (0,5,0) — che lo teneva BIANCO: le voci, bianche per il tema, erano invisibili su bianco
     e il menu sembrava vuoto. La via giusta NON è rincorrere quella specificità ma dichiarare i colori
     dell'overlay SUL BLOCCO (`overlayBackgroundColor`/`overlayTextColor`): WP genera le proprie classi
     `has-…-color`, che portano `!important` e vincono per costruzione.
     Qui resta solo la FORMA: altezza piena, voci a piena larghezza con divisori, e i due pulsanti. */
  .wp-block-navigation__responsive-container.is-menu-open { height: 100vh; max-height: 100vh; overflow-y: auto; }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { width: 100%; align-items: flex-start; padding-top: calc(var(--space-8) + 8px); }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding-bottom: 96px; }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    width: 100%; text-align: left; padding-block: var(--space-4); border-bottom: 1px solid rgba(255,255,255,.14);
    font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.015em;
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
  /* ⚠ I due pulsanti sono 24×24 SENZA padding: un'area di tocco di 24px è sotto il minimo, e la X appare
     sottile e appiccicata al bordo. Diventano un bersaglio da 44px con il tratto più corposo. */
  .site-header .wp-block-navigation__responsive-container-open,
  .site-header .wp-block-navigation__responsive-container-close {
    padding: 10px; margin: -10px; border-radius: var(--radius); color: var(--on-dark);
  }
  .site-header .wp-block-navigation__responsive-container-close { margin: 0; padding: 12px; }
  .site-header .wp-block-navigation__responsive-container-open svg,
  .site-header .wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; stroke-width: 2.2; }
  /* ⚠ Le voci partivano dal bordo dello schermo: il respiro a sinistra è quello del container, così la
     colonna del menu cade sulla stessa verticale del resto del sito. */
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding-inline: var(--gutter); }
  /* ⚠ Sul telefono la barra istituzionale mandava l'ORARIO a capo e il pulsante del numero stringeva
     l'hamburger verso il centro. Spariscono entrambi: il numero resta nella barra fissa in basso
     («Chiama ora»), che su mobile è il posto giusto, e l'hamburger va a destra. */
  .site-header__cta { display: none; }
  .topbar__spacer { display: none; }
}
@media (max-width: 640px) {
  .tiles, .works { grid-template-columns: 1fr; }
  .work--w2, .work--tall { grid-column: auto; grid-row: auto; }
  .works > .work { margin-top: 0; }
  .about__facts { grid-template-columns: 1fr; }
  .hero__checks { grid-template-columns: 1fr; }
  .contact-form .row { grid-template-columns: 1fr; }
}

/* =========================================================================
   17. Sfumature: i «giochi di colore» del verticale
   -------------------------------------------------------------------------
   Non decorazione: sono il modo di dare PROFONDITÀ a un sito che non può contare su fotografie di grande
   formato. Tre famiglie, tutte derivate dai token — nessun colore letterale:
   - un ALONE radiale di marca dietro i pannelli di testo (materia senza chiedere una foto);
   - una TINTA che si spegne verso il basso sulle bande alternate, così due bande chiare non sono un muro;
   - un CAMPO PROFONDO diagonale sulle bande nere e verdi, che le fa leggere come volumi e non come rettangoli.
   ⚠ Il testo sopra un gradiente non ha una coppia di colori: ogni superficie qui sotto tiene lo stesso
   inchiostro agli estremi del gradiente, così il contrasto non dipende da DOVE cade la parola.
   ========================================================================= */

/* alone di marca dietro la testata: si spegne prima di arrivare al testo */
.hero { background-image: radial-gradient(120% 90% at 88% 0%, var(--tint) 0%, rgba(227,237,230,0) 62%); }

/* bande alternate: la tinta si spegne verso il basso invece di essere un campo piatto */
.section--tint { background-image: linear-gradient(180deg, var(--tint) 0%, var(--surface) 46%, var(--paper) 100%); }

/* bande nere: campo profondo in diagonale + un alone verde nell'angolo, che dà volume */
.section--night {
  background-image:
    radial-gradient(70% 120% at 100% 0%, rgba(40,120,80,.30) 0%, rgba(40,120,80,0) 60%),
    linear-gradient(155deg, var(--forest-2) 0%, var(--forest) 55%, #0B0E0D 100%);
}
/* chiusura: dal verde profondo al nero, il passaggio che porta al piè di pagina */
.cta-band {
  background-image:
    radial-gradient(80% 140% at 8% 0%, rgba(111,177,140,.22) 0%, rgba(111,177,140,0) 58%),
    linear-gradient(120deg, var(--brand-dark) 0%, #14342A 46%, var(--forest) 100%);
}
/* piè di pagina: lo stesso campo, appena più fermo */
.site-footer { background-image: linear-gradient(180deg, var(--forest-2) 0%, var(--forest) 40%); }

/* tessere e bottoni pieni: il verde non è una campitura piatta */
.mtile--brand { background-image: linear-gradient(145deg, var(--brand) 0%, var(--brand-dark) 100%); }
.tile--brand { background-image: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%); }
.btn { background-image: linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 62%); }
.btn--ghost, .btn--onDark, .btn--light { background-image: none; }

/* la barra istituzionale verde prende la stessa inclinazione della chiusura: il sito si apre e si chiude
   con lo stesso gesto */
.topbar { background-image: linear-gradient(100deg, var(--brand-dark) 0%, var(--brand) 42%, var(--brand-dark) 100%); }

/* =========================================================================
   18. Materia, accavallamenti, profondità
   -------------------------------------------------------------------------
   Tre bande erano SPOGLIE: contatti, committenti e la fascia di chiusura vivevano di solo testo. Un fondo
   sfumato è atmosfera, non materia — qui entrano campi di colore PIENI, pannelli che si sovrappongono ai
   confini e piani a diverse profondità. Nessuna animazione in più: il movimento resta quello che c'era.
   ========================================================================= */

/* --- CONTATTI: il modulo su un pannello bianco che SCAVALCA la banda precedente, i recapiti su un campo
   scuro pieno. ⚠ Sul nero il secondario è --on-dark-muted (12,08): --ink-muted farebbe 2,41. --- */
.contatti { z-index: 2; }
/* ⚠⚠ Il pannello era tirato SOPRA la banda precedente con un margine negativo: non arrivava al confine
   (l'introduzione della sezione sta in mezzo) e finiva invece a COPRIRE il testo del lead — si vedeva una
   riga spuntare da sotto il bianco. Un pannello che scavalca è un gioco solo se scavalca spazio vuoto.
   Qui resta sollevato dall'ombra, che è già un piano, e non si muove. */
.contact__panel {
  background: var(--paper); border: var(--border); box-shadow: var(--shadow-2);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.6rem);
  position: relative; z-index: 2;
}
.contact-info--dark {
  position: relative; overflow: hidden;
  background: var(--forest-2); border: 0; border-top: 3px solid var(--brand-soft);
  color: var(--on-dark); box-shadow: var(--shadow-2);
  background-image: radial-gradient(90% 70% at 100% 0%, rgba(40,120,80,.34) 0%, rgba(40,120,80,0) 62%);
}
.contact-info--dark h3, .contact-info--dark dd { color: var(--on-dark); }
.contact-info--dark dt { color: var(--on-dark-muted); }
.contact-info--dark dd a:hover { color: var(--brand-soft); }
.contact-info--dark .hours li { border-bottom-color: rgba(255,255,255,.18); }
.contact-info--dark .hours span:last-child { color: var(--on-dark-muted); }
.contact-info--dark .map-link { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.55); }
.contact-info--dark .map-link:hover { background: var(--on-dark); color: var(--forest); border-color: var(--on-dark); }
/* il quadrifoglio come filigrana: un segno di marca che non costa una fotografia */
.contact-info__mark {
  position: absolute; right: -14%; bottom: -18%; width: 62%; aspect-ratio: 1; z-index: 0;
  background: var(--brand-soft); opacity: .085;
  -webkit-mask: url("../assets/img/favicon.svg") center/contain no-repeat;
  mask: url("../assets/img/favicon.svg") center/contain no-repeat;
}
.contact-info--dark > *:not(.contact-info__mark) { position: relative; z-index: 1; }

/* --- COMMITTENTI: due dei tre ambiti sono campi PIENI, il terzo resta chiaro: la riga diventa un accordo
   di tre superfici invece di tre schede uguali. --- */
.refs__kind--brand {
  background: var(--brand); background-image: linear-gradient(150deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-color: var(--brand-dark); border-bottom-color: var(--brand-soft); color: var(--on-dark);
  box-shadow: var(--shadow-1);
}
.refs__kind--brand .plate__i { background: var(--on-dark); }
.refs__kind--night {
  background: var(--forest); background-image: linear-gradient(150deg, var(--forest-2) 0%, var(--forest) 100%);
  border-color: var(--forest); border-bottom-color: var(--brand-soft); color: var(--on-dark);
  box-shadow: var(--shadow-1);
}
.refs__kind--night .plate__i { background: var(--brand-soft); }

/* --- CHIUSURA: una targa verde piena col numero, che è la conversione del mestiere. --- */
.cta-band__plate {
  display: flex; flex-direction: column; gap: 2px; flex: none;
  padding: var(--space-4) var(--space-6);
  background: var(--brand); background-image: linear-gradient(150deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: var(--on-dark); box-shadow: var(--shadow-2);
  border: 1px solid rgba(255,255,255,.16);
  transition: transform .24s var(--ease);
}
.cta-band__plate:hover { transform: translateY(-3px); }
.cta-band__plateLabel { font-size: 0.76rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: .9; }
.cta-band__plateNum { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem); letter-spacing: -0.02em; }

/* --- ACCAVALLAMENTI in altri due punti: la fotografia delle attrezzature scavalca la banda successiva,
   e una tessera dei lavori sporge oltre il bordo basso della propria. --- */
/* ⚠⚠ Perché uno scavalco esista servono DUE condizioni, e la prima da sola non basta:
   1. il margine negativo deve SUPERARE il padding di fine sezione (sennò la sporgenza viene assorbita);
   2. l'elemento deve essere ANCORATO al bordo basso della propria area. Dove il genitore CENTRA
      (`align-items: center`) il margine negativo viene mangiato dal centraggio e l'elemento si limita a
      scendere di mezzo margine: misurato, la fotografia delle attrezzature restava 141px DENTRO la banda.
      `align-self: end` la àncora al fondo, e solo allora il margine la porta oltre. */
.gear { z-index: 2; }
.gear__media {
  align-self: stretch; display: flex; z-index: 2; box-shadow: var(--shadow-2);
  margin-bottom: calc((var(--section-y) + var(--space-8)) * -1);
}
.lavori { z-index: 2; }
.works > .work--tall, .works > .work:nth-child(6) { box-shadow: var(--shadow-2); }
/* ⚠⚠ Qui uno scavalco è stato RITIRATO, e vale registrarlo: la tessera in fondo alla griglia, tirata
   oltre il bordo, finiva SOPRA il paragrafo che sta sotto la griglia. Un accavallamento su una fotografia
   è un gioco; su un testo è un difetto. Lo scavalco di questa banda lo fa la fotografia delle attrezzature
   e quella della banda nera, che escono su spazio vuoto. Resta solo l'ombra, che dà il piano. */
.works > .work:nth-child(6) { position: relative; z-index: 2; }
/* la fotografia della banda nera scavalca verso la banda chiara che segue */
.certs { z-index: 2; }
.certs__bottom { align-items: end; }
.certs__photo { align-self: end; margin-bottom: calc((var(--section-y) + var(--space-7)) * -1); z-index: 2; }

/* --- PROFONDITÀ: i piani che galleggiano hanno un'ombra, quelli incassati no. --- */
.hero__mosaic .mtile--tall { box-shadow: var(--shadow-2); }
.certs__photo { box-shadow: var(--shadow-2); }

@media (max-width: 900px) {
  /* impilato, uno scavalco negativo legge come un errore: si azzera tutto */
  .contact__panel { box-shadow: var(--shadow-1); }
  .gear__media { margin-bottom: 0; }
  .works > .work:nth-child(6) { margin-bottom: 0; }
  .certs__photo { margin-bottom: 0; }
  .contact-info__mark { width: 48%; right: -10%; bottom: -12%; }
  .cta-band__plate { width: 100%; }
}