/* components.css — security_institute. Le forme del verticale: barra istituzionale, testata a due campi,
   mosaico dei servizi, banda della Centrale Operativa, passi del presidio, territorio e sedi, fascia
   contatti, piè a quattro colonne. I colori arrivano SOLO dai token: qui non si dichiarano valori. */

/* ===========================================================================
   1. BARRA ISTITUZIONALE + INTESTAZIONE
   Due bande navy sovrapposte: la superiore, più profonda, porta i dati di servizio; la principale porta
   marchio, navigazione e il recapito della Centrale. È il device che la categoria usa per dire «ente»
   invece di «studio»: la testata è un CAMPO PIENO, non una barra trasparente.
   =========================================================================== */
.topbar { background: var(--brand-dark); color: var(--on-dark-muted); font-size: var(--text-sm); }
.topbar__row {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 38px; flex-wrap: wrap;
}
.topbar__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar__item a, .topbar a { color: var(--on-dark-muted); }
.topbar__item a:hover, .topbar a:hover { color: var(--on-dark); }
.topbar__spacer { margin-left: auto; }
/* Il presidio continuo è l'informazione più cercata: sta a destra, in ottone, e non scompare mai. */
.topbar__h24 { color: var(--accent); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ⚠⚠ L'intestazione è FISSA: resta agganciata in cima mentre la pagina scorre, non sparisce. La barra di
   servizio sopra scorre via (è informazione di contorno), la barra istituzionale no — su un sito di
   vigilanza il numero della Centrale deve restare raggiungibile in ogni punto della pagina.
   ⚠ NIENTE `backdrop-filter` qui: creerebbe un containing-block per il `position:fixed`, e romperebbe SIA
   l'overlay del menu mobile SIA le fotografie ancorate (che sono fixed dentro un clip). È la stessa
   famiglia di trappola, pagata due volte. */
/* ⚠⚠ Lo `sticky` NON va sull'header: `position:sticky` si muove dentro il proprio BLOCCO CONTENITORE, e
   qui il contenitore è il `wp-block-template-part` che avvolge SOLO la testata — alto quanto lei, quindi
   con corsa ZERO: l'header si "aggancia" per zero pixel e scorre via. Misurato: dopo 1200px di
   scorrimento il suo bordo alto stava a -1028. L'aggancio va messo sulla PARTE, che è figlia di
   `.wp-site-blocks` ed ha tutta la pagina come corsa.
   Il `top` negativo è l'altezza della barra di servizio: quella scorre via (è contorno), la barra
   istituzionale si ferma in cima. */
.wp-site-blocks > .wp-block-template-part:first-child {
  position: sticky; top: calc(var(--topbar-h) * -1); z-index: 40;
}
.site-header {
  background: var(--brand); color: var(--on-dark);
  position: relative; z-index: 40;
  box-shadow: 0 0 0 rgba(11,42,78,0);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Quando la pagina è scorsa, l'intestazione si stacca dal contenuto con un'ombra e un filo d'ottone:
   il distacco si vede, invece di lasciare il contenuto che "tocca" la barra. */
.site-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(7,15,27,.55); }
.site-header.is-scrolled::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent) 78%, transparent);
}
.site-header__row {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 80px;
  transition: min-height var(--dur) var(--ease);
}
/* Alla discesa l'intestazione si stringe: guadagna schermo senza sparire. */
.site-header.is-scrolled .site-header__row { min-height: 64px; }
.site-header.is-scrolled .wordmark__mark { width: 38px; height: 38px; flex-basis: 38px; }
.wordmark__mark { transition: width var(--dur) var(--ease), height var(--dur) var(--ease), flex-basis var(--dur) var(--ease); }
/* ⚠ Regola 16: nav e CTA hanno 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__mark { width: 44px; height: 44px; flex: 0 0 44px; }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: .01em; text-transform: uppercase;
}
.wordmark__tag {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}

/* Navigazione: blocco wp:navigation (mai una nav a mano — l'hamburger mobile è suo). */
.site-nav { margin-left: auto; font-family: var(--font-body); font-weight: 500; }
.site-header .site-nav a { color: var(--on-dark); font-size: .98rem; letter-spacing: .01em; }
.site-header .site-nav a:hover { color: var(--accent-lt); }
.site-header .site-nav .wp-block-navigation-item { position: relative; }
/* Voce corrente e hover: filetto in ottone sotto, non un fondo pieno (il fondo pieno su una barra piena
   crea una seconda gerarchia che non serve). */
.site-header .site-nav .current-menu-item > a::after,
.site-header .site-nav .wp-block-navigation-item:hover > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  border-bottom: 2px solid var(--accent);
}
/* ⚠ Specificità: a parità WP vince, perché il CSS dei blocchi è iniettato DOPO il tema. Il sotto-menu di
   core è dichiarato con `.wp-block-navigation .wp-block-navigation__submenu-container` (0,2,0): serve un
   livello in più per riportarlo sul navy. */
.site-header .site-nav .wp-block-navigation__submenu-container {
  background: var(--brand-dark); border: 1px solid var(--brand-mid); box-shadow: var(--shadow-md);
}
.site-header .site-nav .wp-block-navigation__submenu-container a { color: var(--on-dark); }

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

/* --- Menu mobile: overlay a tutto schermo (regola 15). ⚠ WP tiene l'overlay BIANCO con un selettore a
   specificità (0,4,0): si vince solo ricopiandone lo schema. --- */
/* ⚠⚠ Core tiene l'overlay BIANCO con `…is-menu-open:not(.has-background):not(.disable-default-overlay)`,
   che vale (0,4,0). Ricopiarne lo schema dà PARITÀ — e in parità vince lui, perché il CSS dei blocchi è
   iniettato DOPO il tema. Serve un livello in più: `.site-header` davanti porta a (0,5,0).
   Misurato prima del fix: fondo `rgb(255,255,255)`, testo nero, voci a filo del bordo sinistro. */
.site-header .wp-block-navigation__responsive-container.is-menu-open:not(.has-background):not(.disable-default-overlay) {
  background: var(--brand-dark); color: var(--on-dark);
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* Il respiro laterale mancava del tutto: le voci stavano a filo del bordo (left: 0 misurato). */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start; padding: var(--space-6) var(--gutter) 96px; width: 100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%; border-bottom: 1px solid rgba(255,255,255,.14);
}
/* Il marchio in cima all'overlay: aprendo il menu si deve sapere di che sito si tratta. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
  content: ""; display: block; width: 46px; height: 46px; margin-bottom: var(--space-5);
  background: url("../assets/img/logo.svg") no-repeat center / contain;
}
.site-header .wp-block-navigation__responsive-container-close { color: var(--on-dark); padding: var(--space-4); }
/* L'`<a>` è display:block e si restringe al contenuto: senza width 100% il flex-column lo allinea a destra. */
.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);
  font-family: var(--font-display); font-size: 1.6rem; text-transform: uppercase; letter-spacing: .02em;
  color: var(--on-dark);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
  color: var(--accent); padding-left: var(--space-3);
}
/* I sotto-menu diventano INLINE: il default WP li rende come card-dropdown, illeggibili su mobile. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important; border: none !important; box-shadow: none !important;
  background: none !important; padding-left: var(--space-5);
}
.wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container-open { color: currentColor; }

/* ===========================================================================
   2. BOTTONI
   Raggio zero, etichette in maiuscoletto tracciato. Il primario è l'OTTONE con l'inchiostro sopra (7,36) —
   su una barra navy un bottone navy sparirebbe.
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: .82rem 1.5rem; border: 2px solid transparent; border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 600; font-size: .92rem;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.1;
  background: var(--accent); color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--accent-dark); color: var(--ink); }
.btn--navy { background: var(--brand); color: var(--on-dark); }
.btn--navy:hover { background: var(--brand-dark); }
.btn--outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--outline:hover { background: var(--brand); color: var(--on-dark); }
/* Su fondo scuro: contorno chiaro, riempimento al passaggio. */
.btn--ghost-light { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.55); }
.btn--ghost-light:hover { background: var(--on-dark); color: var(--brand); border-color: var(--on-dark); }
.btn--sm { padding: .58rem 1.05rem; font-size: .82rem; }

/* ===========================================================================
   3. TESTATA A DUE CAMPI (il segno del verticale)
   Pannello di testo pieno accanto alla fotografia, mai sopra: così il contrasto del titolo è STRUTTURALE
   e non dipende dal fotogramma. La fotografia occupa metà campo — è la ragione per cui questo verticale
   regge con foto di media risoluzione, dove una testata full-bleed pretenderebbe scatti hero-grade.
   =========================================================================== */
.hero { background: var(--surface); position: relative; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch; min-height: clamp(30rem, 58vh, 40rem);
}
.hero__panel {
  background: var(--surface); position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, 0.6rem + 3vw, 4rem)
           clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--bleed);
  /* ⚠ --bleed CRESCE senza limite con la finestra: chi la usa come padding DEVE aggiungerla alla propria
     larghezza massima, altrimenti su un monitor largo il padding si mangia il blocco. */
  max-width: calc(var(--container) / 2 + var(--bleed));
  margin-left: auto; width: 100%;
}
/* La Trinacria incisa: il device di marca del cliente, ripreso come TEXTURE invece della tramatura
   diagonale del riferimento. È decorativa e tenue — non entra mai nel calcolo del contrasto del testo. */
/* ⚠ Nel pannello CHIARO la Trinacria non c'è, ed è una scelta presa GUARDANDO la resa: su fondo nebbia,
   a qualunque misura provata, il segno non legge come filigrana ma come una macchia grigia dietro il testo
   — cioè come un errore di composizione. Vive solo sulle superfici NAVY (testata di pagina e fascia
   finale), dove è un motivo inciso su campo pieno e non compete con nulla. */
.hero__panel > * { position: relative; }
.hero h1 { color: var(--brand); margin-bottom: var(--space-4); }
.hero__lead { font-size: var(--text-md); line-height: 1.55; color: var(--ink-muted); max-width: 46ch; }
.hero__checks { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.hero__checks li { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 500; }
.hero__checks li::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: .5rem;
  background: var(--accent); transform: rotate(45deg);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.hero__media { position: relative; overflow: hidden; background: var(--brand); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Velo leggerissimo: lega la fotografia al campo navy senza annegarla (il titolo non ci sta sopra). */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--scrim) 0%, transparent 38%);
}
/* Filetto in ottone sul giunto fra i due campi: il taglio è dichiarato, non casuale. */
.hero__media::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 2;
  background: var(--accent);
}

/* Variante DESIGN: senza una fotografia idonea il campo diventa una campitura navy con la Trinacria
   incisa. Nessuna foto finta: la variante esiste apposta. */
.hero--design .hero__media { background: var(--brand); }
.hero--design .hero__media::after {
  content: ""; position: absolute; inset: 0; background: none;
}
.hero__crest {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.hero__crest svg, .hero__crest img { width: min(58%, 320px); height: auto; opacity: .92; }

@media (max-width: 899.98px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__panel {
    max-width: none; padding: clamp(2rem, 1rem + 5vw, 3.5rem) var(--gutter);
    order: 2;
  }
  .hero__media { order: 1; aspect-ratio: 16 / 10; }
  .hero__media::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 5px; }
  .hero__media::after { background: linear-gradient(180deg, var(--scrim) 0%, transparent 45%); }
}

/* ===========================================================================
   4. INTESTAZIONE DI SEZIONE
   =========================================================================== */
.section-intro { max-width: 60ch; margin-bottom: var(--space-7); }
.section-intro--center { margin-inline: auto; text-align: center; }
.section-intro h2 { color: var(--brand); }
.section--navy .section-intro h2, .section--navy h2, .section--navy h3 { color: var(--on-dark); }
.section-intro p { margin-top: var(--space-4); }

/* ===========================================================================
   5. MOSAICO DEI SERVIZI
   Tessere che alternano fotografia e campo pieno. La tessera senza fotografia NON è un ripiego: è la forma
   stessa del mosaico, ereditata da BeCorporation2, ed è ciò che rende la sezione indipendente da quante
   fotografie il cliente possiede.
   =========================================================================== */
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); }
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 16.5rem; padding: var(--space-5); overflow: hidden;
  background: var(--surface); color: var(--ink);
  transition: transform var(--dur) var(--ease);
}
.tile:hover { transform: translateY(-4px); }
.tile__media { position: absolute; inset: 0; z-index: 0; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.tile:hover .tile__media img { transform: scale(1.04); }
/* Sulla tessera fotografica il testo sta su un velo profondo: qui il testo È sopra la foto, quindi il
   rapporto va garantito dal velo, non dalla palette. */
/* ⚠ Qui il testo sta SOPRA la fotografia, quindi il rapporto lo garantisce il velo, non la palette: i
   token non valgono su una superficie semitrasparente, e il contrasto va misurato dal PIXEL renderizzato.
   Il velo parte già denso a metà altezza, dove comincia il blocco di testo. */
.tile__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,15,27,.22) 0%, rgba(7,15,27,.62) 45%, rgba(7,15,27,.90) 100%);
}
.tile__body { position: relative; z-index: 1; }
.tile--photo { color: var(--on-dark); }
.tile--photo h3 { color: var(--on-dark); }
.tile--photo .tile__text { color: var(--on-dark-muted); }
.tile--navy { background: var(--brand); color: var(--on-dark); }
.tile--navy h3 { color: var(--on-dark); }
.tile--navy .tile__text { color: var(--on-dark-muted); }
.tile--tint { background: var(--surface); }
.tile--tint h3 { color: var(--brand); }
.tile--tint .tile__text { color: var(--ink-muted); }
.tile h3 { margin-bottom: var(--space-2); }
.tile__text { font-size: var(--text-base); line-height: 1.55; }
/* L'icona è una maschera CSS. ⚠⚠ Il percorso DEVE stare in questo foglio, mai in uno `style` inline del
   pattern: `url()` in uno style inline NON viene riscritto nel post_content (il rewrite tocca solo i .php
   del tema, e nel DB il PHP non gira) e l'icona sparirebbe sui siti di progetto. Quindi la maschera si
   sceglie con un ATTRIBUTO — `data-icon` — e la mappa vive qui sotto.
   ⚠ L'icona è ancorata al SIGNIFICATO della voce, non alla sua posizione: `build-ir` copia il campo `icon`
   PER SLOT dal golden, quindi un progetto che elenca i servizi in un altro ordine si ritroverebbe ogni
   icona sulla voce sbagliata. L'ordine del golden e quello del progetto vanno tenuti allineati. */
/* ⚠ `display:block` NON è cosmetico: l'icona è uno <span>, cioè `inline` per default, e su un elemento
   inline width/height NON SI APPLICANO. Senza questa riga la maschera si carica (nessun 404), il colore è
   quello giusto, e la scatola misura 0×0: l'icona semplicemente non esiste sullo schermo. Si vede solo
   misurando il DOM calcolato — a leggere il CSS sembra corretto. */
.tile__icon, .card__icon {
  display: block;
  width: 34px; height: 34px; margin-bottom: var(--space-4);
  background: var(--accent);
}
[data-icon="ronda"] .tile__icon, [data-icon="ronda"] .card__icon { -webkit-mask: url("../assets/img/icons/ronda.svg") no-repeat center / contain; mask: url("../assets/img/icons/ronda.svg") no-repeat center / contain; }
[data-icon="ispettivo"] .tile__icon, [data-icon="ispettivo"] .card__icon { -webkit-mask: url("../assets/img/icons/ispettivo.svg") no-repeat center / contain; mask: url("../assets/img/icons/ispettivo.svg") no-repeat center / contain; }
[data-icon="allarme"] .tile__icon, [data-icon="allarme"] .card__icon { -webkit-mask: url("../assets/img/icons/allarme.svg") no-repeat center / contain; mask: url("../assets/img/icons/allarme.svg") no-repeat center / contain; }
[data-icon="valori"] .tile__icon, [data-icon="valori"] .card__icon { -webkit-mask: url("../assets/img/icons/valori.svg") no-repeat center / contain; mask: url("../assets/img/icons/valori.svg") no-repeat center / contain; }
[data-icon="piantonamento"] .tile__icon, [data-icon="piantonamento"] .card__icon { -webkit-mask: url("../assets/img/icons/piantonamento.svg") no-repeat center / contain; mask: url("../assets/img/icons/piantonamento.svg") no-repeat center / contain; }
[data-icon="videosorveglianza"] .tile__icon, [data-icon="videosorveglianza"] .card__icon { -webkit-mask: url("../assets/img/icons/videosorveglianza.svg") no-repeat center / contain; mask: url("../assets/img/icons/videosorveglianza.svg") no-repeat center / contain; }
[data-icon="portierato"] .tile__icon, [data-icon="portierato"] .card__icon { -webkit-mask: url("../assets/img/icons/portierato.svg") no-repeat center / contain; mask: url("../assets/img/icons/portierato.svg") no-repeat center / contain; }
[data-icon="vigilanza"] .tile__icon, [data-icon="vigilanza"] .card__icon { -webkit-mask: url("../assets/img/icons/vigilanza.svg") no-repeat center / contain; mask: url("../assets/img/icons/vigilanza.svg") no-repeat center / contain; }
[data-icon="eventi"] .tile__icon, [data-icon="eventi"] .card__icon { -webkit-mask: url("../assets/img/icons/eventi.svg") no-repeat center / contain; mask: url("../assets/img/icons/eventi.svg") no-repeat center / contain; }
/* Su fondo chiaro l'ottone pieno come SUPERFICIE è legittimo (non è testo): l'icona resta ottone ovunque. */
.tile--tint .tile__icon, .card__icon { background: var(--accent-dark); }
.tile--photo .tile__icon, .tile--navy .tile__icon { background: var(--accent); }
.tile__more {
  margin-top: var(--space-4); font-size: .82rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.tile--photo .tile__more, .tile--navy .tile__more { color: var(--accent); }
/* La tessera intera è cliccabile: la card linka DIRITTO al servizio, mai a un hub intermedio (regola 12). */
.tile__link { position: absolute; inset: 0; z-index: 2; }
.tile__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 979.98px) { .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .mosaic { grid-template-columns: 1fr; } .tile { min-height: 13rem; } }

/* ===========================================================================
   6. LA CENTRALE OPERATIVA (featured)
   La sezione identitaria: fotografia della sala accanto all'elenco tecnico delle trasmissioni. Banda navy,
   perché è il cuore notturno dell'istituto.
   =========================================================================== */
.centrale { background: var(--brand); color: var(--on-dark); padding-block: var(--section-y); position: relative; }
.centrale__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 1rem + 3.5vw, 4rem); align-items: center;
}
.centrale h2 { color: var(--on-dark); }
.centrale__lead { font-size: var(--text-md); line-height: 1.55; color: var(--on-dark-muted); margin-top: var(--space-4); max-width: 54ch; }
.centrale__body { margin-top: var(--space-4); color: var(--on-dark-muted); max-width: 58ch; }
.centrale__media { position: relative; }
.centrale__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
/* Cornice in ottone sfalsata: il segno che lega la fotografia al campo senza incorniciarla di bianco. */
.centrale__media::after {
  content: ""; position: absolute; inset: auto -14px -14px auto; width: 62%; height: 62%;
  border-right: 4px solid var(--accent); border-bottom: 4px solid var(--accent);
  pointer-events: none;
}
/* Elenco tecnico: due colonne su desktop, il pallino è un quadrato in ottone. */
.tech-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
.tech-list li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--on-dark); font-size: .97rem; line-height: 1.45; }
.tech-list li::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: .45rem; background: var(--accent); }
@media (max-width: 899.98px) {
  .centrale__grid { grid-template-columns: 1fr; }
  .tech-list { grid-template-columns: 1fr; }
}

/* ===========================================================================
   7. DAL SEGNALE ALL'INTERVENTO (method)
   Tre passi numerati. Il numero è in Barlow Condensed grande e in ottone: è l'unico punto in cui una cifra
   fa da segno grafico.
   =========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 0.8rem + 2.4vw, 3rem); }
.step { position: relative; padding-top: var(--space-5); border-top: 3px solid var(--line); }
/* ⚠ Il numero è ottone-TESTO, non ottone pieno: la banda dei passi è chiara e l'ottone pieno vi cade a
   2,23 — sotto la soglia perfino per il testo grande. Misurato, non stimato. */
.step__n {
  font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 1;
  color: var(--accent-ink); display: block; margin-bottom: var(--space-3);
}
.step h3 { color: var(--brand); margin-bottom: var(--space-2); }
.step p { color: var(--ink-muted); }
@media (max-width: 899.98px) { .steps { grid-template-columns: 1fr; } }

/* ===========================================================================
   8. TERRITORIO E SEDI (trust)
   =========================================================================== */
.territorio__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
.checks { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.checks li { display: flex; align-items: flex-start; gap: var(--space-3); }
.checks li::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: .18rem;
  background: var(--accent);
  -webkit-mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
  mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
}
.sedi-band { display: grid; gap: var(--tile-gap); }
.sede { background: var(--paper); border: var(--border); border-top: 4px solid var(--brand); padding: var(--space-5); }
.sede h3 { color: var(--brand); margin-bottom: var(--space-3); }
.sede__addr { font-style: normal; color: var(--ink-muted); line-height: 1.6; }
.sede__addr a { color: var(--accent-ink); font-weight: 500; }
.sede .hours { margin-top: var(--space-4); display: grid; gap: .3rem; font-size: .93rem; }
.sede .hours li { display: flex; justify-content: space-between; gap: var(--space-4); border-bottom: 1px dotted var(--line); padding-bottom: .28rem; }
.map-link {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4);
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink);
}
.map-link:hover { color: var(--brand); }
@media (max-width: 899.98px) { .territorio__grid { grid-template-columns: 1fr; } }

/* ===========================================================================
   9. FASCIA CONTATTI (contact_band)
   =========================================================================== */
.cta-band { background: var(--brand-dark); color: var(--on-dark); padding-block: var(--section-y); position: relative; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../assets/img/trinacria.svg") no-repeat left -4% center / auto 150%;
  opacity: .06;
}
.cta-band__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.cta-band h2 { color: var(--on-dark); max-width: 22ch; }
.cta-band__lead { 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; }

/* ===========================================================================
   10. TESTATA DI PAGINA
   ⚠ Regola 6: la page-head NON riusa la misura dell'hero. È una testata di pagina, non un hero: un gradino
   più piccolo e padding contenuto, altrimenti «occupa mezza schermata». È CONDIVISA da tutte le pagine
   interne: si sistema una volta sola.
   =========================================================================== */
.page-head { background: var(--brand); color: var(--on-dark); padding-block: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); position: relative; }
.page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../assets/img/trinacria.svg") no-repeat right -3% center / auto 155%;
  opacity: .06;
}
.page-head__inner { position: relative; }
.page-head h1 { font-size: var(--text-2xl); color: var(--on-dark); }
.page-head .lead { color: var(--on-dark-muted); margin-top: var(--space-3); }
/* Briciole: dove sono e da dove vengo, in maiuscoletto tracciato.
   ⚠ I link dentro un blocco di testo non possono distinguersi per il SOLO colore (axe: link-in-text-block):
   servono sottolineati, o chi non percepisce la differenza cromatica non li vede come link. */
.crumbs { font-size: var(--text-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); }
.crumbs a { color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: .22em; }
.crumbs a:hover { color: var(--on-dark); }

/* ===========================================================================
   11. PROSA E SCHEDE DI CONTENUTO (pagine servizio del progetto)
   =========================================================================== */
.prose { max-width: var(--container-narrow); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { color: var(--brand); margin-top: var(--space-7); }
.prose h3 { color: var(--brand); margin-top: var(--space-6); }
.prose p { color: var(--ink-muted); }
.prose ul { display: grid; gap: var(--space-2); }
.prose ul li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--ink-muted); }
.prose ul li::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: .55rem; background: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }

/* Riquadro d'evidenza: le «domande comuni» delle pagine servizio, e ogni avvertenza. */
.note { background: var(--accent-tint); border-left: 4px solid var(--accent); padding: var(--space-5); }
.note h3 { color: var(--brand); margin-bottom: var(--space-2); margin-top: 0; }
.note p { color: var(--ink-muted); }
.note + .note { margin-top: var(--space-4); }

/* Due colonne testo|foto per le pagine servizio: la foto sta NEAR la descrizione (regola 13), mai in una
   banda separata a fondo pagina. */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-items: start; }
.split--flip > .split__media { order: -1; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__media figcaption { font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--space-2); }
@media (max-width: 899.98px) { .split { grid-template-columns: 1fr; } .split--flip > .split__media { order: 0; } }

/* Griglia di card a due colonne: per MOLTE voci brevi è più ordinata delle fasce alternate (regola 5). */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tile-gap); }
.cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: var(--paper); border: var(--border); border-top: 4px solid var(--brand); padding: var(--space-5); display: flex; flex-direction: column; }
.card h3 { color: var(--brand); margin-bottom: var(--space-2); }
.card p { color: var(--ink-muted); font-size: .96rem; }
.card__media { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5); }
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 899.98px) { .cards, .cards--three { grid-template-columns: 1fr; } }

/* ===========================================================================
   12. PAGINA CONTATTI
   Due colonne: modulo a sinistra, recapiti in una scheda CHIARA a destra (⚠ non si riusa la scheda della
   fascia navy: i suoi colori sono invertiti e su fondo chiaro sparirebbero).
   =========================================================================== */
.contact-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
.contact-form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .78rem .9rem; width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--brand); }
.field textarea { min-height: 9rem; resize: vertical; }
/* ⚠ `.consent` è un flex: se il testo contiene un `<a>` si spezzerebbe in più flex-item → tutto il testo,
   link compreso, va dentro un solo `<span>`. */
.consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: .93rem; color: var(--ink-muted); }
.consent input { margin-top: .3rem; flex: 0 0 auto; }
.consent a { color: var(--accent-ink); text-decoration: underline; }
.contact-info { background: var(--surface); border-top: 4px solid var(--brand); padding: var(--space-6); }
.contact-info h3 { color: var(--brand); margin-bottom: var(--space-4); }
.contact-info dl { display: grid; gap: var(--space-4); }
.contact-info dt { font-size: var(--text-sm); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.contact-info dd { margin: 0; color: var(--ink); }
.contact-info dd a { color: var(--accent-ink); font-weight: 500; }
@media (max-width: 899.98px) { .contact-cols { grid-template-columns: 1fr; } .contact-form .row { grid-template-columns: 1fr; } }

/* ===========================================================================
   13. PIÈ DI PAGINA — quattro colonne di link, come nella categoria
   =========================================================================== */
.site-footer { background: var(--brand-dark); color: var(--on-dark-muted); padding-block: var(--space-8) var(--space-5); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-6); }
.site-footer h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--on-dark); margin-bottom: var(--space-4); }
.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: var(--accent-lt); }
.site-footer ul { display: grid; gap: var(--space-2); }
.site-footer .wordmark__name { color: var(--on-dark); }
.footer-sedi { display: grid; gap: var(--space-4); }
.footer-sedi span { display: block; line-height: 1.5; }
.site-footer__bar {
  margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between;
  font-size: var(--text-sm);
}
/* «Powered by Dgitaly» (regola 1): il marchio è un badge QUADRATO senza scritta, quindi il testo è nostro
   e il logo non si deforma. */
.powered { display: inline-flex; align-items: center; gap: .45rem; }
.powered img { width: 20px; height: 20px; }
.social { display: flex; gap: var(--space-3); }
.social a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); }
.social a:hover { border-color: var(--accent); }
.social svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 899.98px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599.98px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ===========================================================================
   14. BARRA CTA FISSA (mobile)
   Per un istituto di vigilanza il telefono È la conversione: sotto i 900px resta sempre a portata.
   =========================================================================== */
.cta-bar { display: none; }
@media (max-width: 899.98px) {
  .cta-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; inset: auto 0 0 0; z-index: 60; background: rgba(255,255,255,.16);
  }
  .cta-bar a {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: .9rem; background: var(--brand); color: var(--on-dark);
    font-weight: 600; font-size: .88rem; letter-spacing: .08em; text-transform: uppercase;
  }
  .cta-bar a.is-accent { background: var(--accent); color: var(--ink); }
  /* Lo spazio in fondo evita che l'ultima riga del footer finisca sotto la barra. */
  .site-footer { padding-bottom: calc(var(--space-5) + 56px); }
}

/* ===========================================================================
   15. PAGINA 404
   =========================================================================== */
.notfound { padding-block: clamp(4rem, 3rem + 5vw, 8rem); text-align: center; }
/* ⚠ Stessa ragione del numero dei passi: la 404 sta su fondo bianco, dove l'ottone pieno fa 2,42. */
.notfound__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 3rem + 9vw, 9rem); line-height: 1; color: var(--accent-ink); }
.notfound h1 { color: var(--brand); margin-top: var(--space-4); }
.notfound p { color: var(--ink-muted); margin-top: var(--space-4); margin-inline: auto; max-width: 48ch; }
.notfound .btn { margin-top: var(--space-6); }

/* ===========================================================================
   16. FOTOGRAFIA ANCORATA — il ritaglio resta fermo, la pagina ci passa davanti
   È il device di profondità del verticale. Si ottiene con `background-attachment: fixed`, NON con un
   `<img>` in `position:fixed`.
   ⚠⚠ Perché non con l'img fissa: per ritagliare un elemento fisso dentro una banda servirebbe un
   `clip-path` sul contenitore — ma un `clip-path` rende il contenitore il BLOCCO CONTENITORE dei
   discendenti `fixed`, che quindi tornerebbero a scorrere con la pagina. È l'esatto contrario
   dell'effetto voluto, e a leggere il CSS sembra giusto: si vede solo scorrendo.
   ⚠ Su mobile l'ancoraggio si DISATTIVA: iOS lo rende a scatti o lo ignora, e uno scorrimento a scatti è
   peggio di nessun effetto.
   ⚠ `prefers-reduced-motion` non tocca questo: non è un'animazione, è un ancoraggio — non produce moto
   proprio, e disattivarlo non aiuta chi soffre il movimento più di quanto lo faccia lo scorrimento stesso. */
.anchored {
  position: relative;
  background-color: var(--brand-dark);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
.anchored__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,15,27,.62), rgba(7,15,27,.44) 45%, rgba(7,15,27,.72)); }
.anchored__inner { position: relative; z-index: 1; }
/* Banda di respiro puramente fotografica: nessun testo, solo profondità fra due sezioni.
   Il filo d'ottone in alto e in basso dichiara il taglio invece di lasciarlo casuale. */
/* ⚠ Il fuoco NON è al centro: con l'ancoraggio la fotografia copre il viewport e la banda ne mostra una
   fetta — a «center» la fetta cadeva su cielo e montagna. Il 64% porta in vista le guardie e le auto,
   cioè il soggetto. Scelto guardando la resa, non calcolato. */
.anchored--breath { min-height: clamp(16rem, 34vh, 26rem); border-block: 3px solid var(--accent); background-position: center 64%; }
.anchored--breath .anchored__veil { background: linear-gradient(180deg, rgba(7,15,27,.30), rgba(7,15,27,.16) 50%, rgba(7,15,27,.34)); }
/* Il marchio inciso al centro della banda di respiro: il segno del cliente, non una scritta nuova. */
.anchored__crest {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  -webkit-mask: url("../assets/img/trinacria.svg") no-repeat center / auto 62%;
  mask: url("../assets/img/trinacria.svg") no-repeat center / auto 62%;
  background: rgba(255,255,255,.16);
}
@media (max-width: 899.98px) {
  .anchored { background-attachment: scroll; }
  .anchored--breath { min-height: 13rem; }
}

/* ===========================================================================
   17. BANDA CERTIFICAZIONI + SOCIAL
   Le certificazioni sono un fatto di FIDUCIA, e su un istituto di vigilanza pesano: stanno sopra il piè,
   su fondo chiaro, dove i marchi si leggono. Sono asset di DESIGN (@design), non fotografie.
   =========================================================================== */
.trustbar { background: var(--surface); border-top: 1px solid var(--line); padding-block: var(--space-7); }
.trustbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.trustbar__label { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.certs { display: flex; align-items: center; gap: clamp(1.5rem, 1rem + 2vw, 3rem); flex-wrap: wrap; }
/* I marchi di certificazione si presentano in grigio e prendono colore al passaggio: fermi non rubano
   la scena, ma restano leggibili (non sono sbiaditi, solo desaturati). */
.certs img {
  height: clamp(46px, 4vw, 62px); width: auto;
  filter: grayscale(1); opacity: .72;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.certs img:hover { filter: none; opacity: 1; transform: translateY(-3px); }
.social-group { display: flex; align-items: center; gap: var(--space-4); }

/* --- Icone social: pulsano con un anello che si espande, in ottone. -----------------
   ⚠ Il lampeggio è un ANELLO che si espande dietro l'icona, non l'icona che si accende e si spegne: un
   elemento di interfaccia che sfarfalla in opacità è fastidioso e, sopra i 3 lampi al secondo, è pure un
   rischio per chi ha epilessia fotosensibile. Qui il ciclo è lento (2,6s) e l'icona resta sempre piena.
   ⚠ `prefers-reduced-motion`: l'anello si ferma del tutto. */
.social__link {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; flex: 0 0 42px;
  border: 1px solid rgba(255,255,255,.24);
  color: var(--on-dark-muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social__link::before {
  content: ""; position: absolute; inset: -1px; border: 2px solid var(--accent);
  opacity: 0; transform: scale(.86); pointer-events: none;
  animation: fp-social-pulse 2.6s var(--ease) infinite;
}
.social__link:nth-of-type(2)::before { animation-delay: .55s; }
.social__link:nth-of-type(3)::before { animation-delay: 1.1s; }
/* ⚠ L'icona social vive nella barra CHIARA della fiducia: l'ottone pieno vi cade a 2,42, sotto soglia
   anche per un elemento grafico (che ne vuole 3). Al passaggio prende l'ottone-TESTO. Sulle superfici
   navy — se un giorno ci finisse — vale l'ottone pieno, che lì fa 5,15. */
.social__link:hover { color: var(--accent-ink); border-color: var(--accent-dark); transform: translateY(-2px); }
.site-footer .social__link:hover, .cta-band .social__link:hover { color: var(--accent); border-color: var(--accent); }
.social__ico { display: block; width: 19px; height: 19px; background: currentColor; }
.social__ico[data-social="facebook"] { -webkit-mask: url("../assets/img/icons/social-facebook.svg") no-repeat center / contain; mask: url("../assets/img/icons/social-facebook.svg") no-repeat center / contain; }
.social__ico[data-social="linkedin"] { -webkit-mask: url("../assets/img/icons/social-linkedin.svg") no-repeat center / contain; mask: url("../assets/img/icons/social-linkedin.svg") no-repeat center / contain; }
@keyframes fp-social-pulse {
  0%   { opacity: 0;   transform: scale(.86); }
  35%  { opacity: .85; transform: scale(1);   }
  70%  { opacity: 0;   transform: scale(1.28); }
  100% { opacity: 0;   transform: scale(1.28); }
}
@media (prefers-reduced-motion: reduce) { .social__link::before { animation: none; } }
/* Nella barra chiara della fiducia i social invertono i neutri: lì il fondo non è navy. */
.trustbar .social__link { border-color: var(--line); color: var(--ink-muted); }
.trustbar .social__link:hover { color: var(--accent-ink); border-color: var(--accent-dark); }
.trustbar .social__link::before { border-color: var(--accent-dark); }

/* ===========================================================================
   18. STRATIFICAZIONE — ciò che scavalca il confine fra due bande
   È il device che la categoria «Aziende» usa per dare profondità senza chiedere nulla alla fotografia.
   =========================================================================== */
.overlap-up { margin-top: calc(var(--space-8) * -1); position: relative; z-index: 2; }
.overlap-down { margin-bottom: calc(var(--space-8) * -1); position: relative; z-index: 2; }
/* La fotografia della Centrale scavalca il bordo basso della banda navy ed entra nella sezione chiara. */
.centrale__media { box-shadow: var(--shadow-md); }
.centrale--overlap { padding-bottom: calc(var(--section-y) + 3rem); }
.centrale--overlap .centrale__media { margin-bottom: calc(-6rem - var(--space-4)); }
@media (max-width: 899.98px) { .centrale--overlap { padding-bottom: var(--section-y); } .centrale--overlap .centrale__media { margin-bottom: 0; } }
/* Le tessere e le schede prendono un'ombra vera al passaggio: ferme restano piatte (l'istituzionale non
   gonfia), ma reagiscono. */
.tile, .card, .sede { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tile:hover, .card:hover, .sede:hover { box-shadow: var(--shadow-md); }
.card:hover, .sede:hover { transform: translateY(-4px); border-top-color: var(--accent); }

/* --- Scavalco REALE della fotografia della Centrale ------------------------------------
   ⚠ Il `margin-bottom` negativo da solo NON fa scavalcare nulla: in una griglia con `align-items:center`
   la fotografia sta al CENTRO della riga, lontana dal bordo della banda, e il margine negativo si limita
   a spostare ciò che viene dopo. Perché il bordo venga davvero attraversato servono DUE cose: la colonna
   ancorata in basso (`align-self:end`) e un margine negativo maggiore del padding della banda. Si vede
   misurando i rettangoli, non leggendo il CSS. */
.centrale--overlap { padding-bottom: 3rem; }
.centrale--overlap .centrale__media { align-self: end; margin-bottom: -5rem; position: relative; z-index: 3; }
/* La sezione che segue lascia spazio a ciò che le entra dentro dall'alto. */
.centrale--overlap + .section, .centrale--overlap + * { padding-top: calc(var(--section-y) + 3rem); }
@media (max-width: 899.98px) {
  .centrale--overlap { padding-bottom: var(--section-y); }
  .centrale--overlap .centrale__media { align-self: auto; margin-bottom: 0; }
  .centrale--overlap + .section, .centrale--overlap + * { padding-top: var(--section-y); }
}

/* --- La barra della fiducia è una SCHEDA che galleggia e scavalca la fascia navy sopra ----
   È il device della categoria «Aziende»: la scheda chiara che attraversa il confine fra due bande. */
.trustbar { background: transparent; border-top: 0; padding-block: 0 var(--space-7); }
.trustbar__card {
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) clamp(1.25rem, .6rem + 2.4vw, 2.75rem);
  margin-top: -4.5rem; position: relative; z-index: 3;
}
.cta-band { padding-bottom: calc(var(--section-y) + 4.5rem); }
@media (max-width: 899.98px) {
  .trustbar__card { margin-top: -3rem; }
  .cta-band { padding-bottom: calc(var(--section-y) + 3rem); }
}

/* ===========================================================================
   19. PROFONDITÀ — la testata inchiodata e la parallasse con ampiezza VERA
   ⚠ Perché la parallasse di reveal.js da sola non si vedeva: sposta l'elemento del `data-parallax`% della
   sua ALTEZZA, e con ampiezza 5 sono ±2,5% — su una foto da 500px fanno 12px lungo un'intera schermata di
   scorrimento, cioè un fattore di 0,02 misurato. Non è un difetto del motore: è che serve ampiezza, e
   l'ampiezza serve margine. Quindi la fotografia si fa più ALTA del suo contenitore e il contenitore la
   taglia: solo così può muoversi davvero senza scoprire un bordo.
   =========================================================================== */
.hero__media--anchored {
  background-repeat: no-repeat; background-position: center; background-size: cover;
  background-attachment: fixed;                /* la fotografia resta ferma: la pagina le passa davanti */
  background-color: var(--brand-dark);
}
@media (max-width: 899.98px) { .hero__media--anchored { background-attachment: scroll; } }

/* La fotografia della Centrale scorre più lenta della pagina: eccede il contenitore, che la taglia. */
.centrale__media { overflow: hidden; }
.centrale__media img { height: 122%; margin-top: -11%; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .centrale__media img { height: 100%; margin-top: 0; transform: none !important; } }

/* --- Micro-interazioni estese: tutto ciò che si può toccare REAGISCE ------------------
   Ferme le cose restano sobrie; al passaggio rispondono. È la differenza fra un sito del 2016 e uno del 2026. */
.site-header .site-nav a, .topbar a, .site-footer a, .crumbs a, .map-link, .tile__more, .social__link,
.contact-info dd a, .sede__addr a, .prose a {
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.site-footer a:hover, .topbar a:hover { color: var(--accent-lt); }
.map-link:hover, .tile__more:hover { transform: translateX(3px); }
/* Il bottone si solleva appena e proietta un'ombra: il gesto è breve, non un rimbalzo. */
.btn { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(7,15,27,.65); }
.btn:active { transform: translateY(0); }
/* La voce di menu attiva scorre un filo d'ottone da sinistra invece di apparire di scatto. */
.site-header .site-nav .wp-block-navigation-item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  border-bottom: 2px solid var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.site-header .site-nav .wp-block-navigation-item:hover > a::after,
.site-header .site-nav .current-menu-item > a::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .card:hover, .sede:hover, .tile:hover, .social__link:hover, .certs img:hover { transform: none; }
}

/* ===========================================================================
   20. STRATIFICAZIONE ESTESA — il contenuto sale SOPRA la testata
   Il mosaico dei servizi entra nel bordo basso della testata: la pagina non è più una pila di bande
   affiancate ma un insieme di piani. È il device che separa un impaginato del 2016 da uno del 2026.
   =========================================================================== */
/* ⚠ Il sollevamento va dato alla SEZIONE INTERA, non al mosaico: alzando solo la griglia, questa saliva
   sopra il proprio lead e ne copriva la seconda riga — un difetto che il punteggio non vedeva e che si
   nota solo guardando la pagina. La sezione intera invece scivola sopra la testata, che è l'effetto voluto,
   e le distanze interne restano quelle disegnate. */
.section--lift {
  margin-top: calc(var(--space-7) * -1);
  position: relative; z-index: 3;
  background: var(--paper);
}
@media (max-width: 899.98px) { .section--lift { margin-top: calc(var(--space-5) * -1); } }

/* Ombre a riposo: sobrie ma presenti, così ogni piano si stacca dal fondo invece di essere incollato. */
.tile { box-shadow: 0 10px 26px -20px rgba(7,15,27,.55); }
.centrale__media, .split__media img, .contact-info, .note, .card, .sede { box-shadow: var(--shadow-sm); }
.tile--photo, .tile--navy { box-shadow: 0 16px 34px -22px rgba(7,15,27,.8); }

/* La fascia finale è una fotografia ANCORATA sotto un velo navy: chiude la pagina con profondità invece
   che con un rettangolo di colore. ⚠ Il testo ci sta SOPRA: il rapporto lo garantisce il velo, e va
   MISURATO dal pixel renderizzato — i token non valgono su una superficie semitrasparente. */
.cta-band--anchored {
  background-repeat: no-repeat; background-position: center 30%; background-size: cover;
  background-attachment: fixed; background-color: var(--brand-dark);
}
.cta-band--anchored::before {
  /* ⚠ Il velo era al 93%: il contrasto era ottimo (16,3 misurato) ma la fotografia spariva, e una
     fotografia invisibile è una fotografia sprecata. Alleggerito finché lo scatto si legge, poi
     RI-MISURATO dal pixel — il margine c'era tutto. */
  background: linear-gradient(180deg, rgba(11,42,78,.82), rgba(7,15,27,.74) 55%, rgba(11,42,78,.86));
  opacity: 1;
}
.cta-band--anchored .cta-band__row { position: relative; z-index: 1; }
@media (max-width: 899.98px) { .cta-band--anchored { background-attachment: scroll; } }

/* ===========================================================================
   21. ALTRI PIANI — le schede sede entrano nella fascia finale
   =========================================================================== */
/* La sezione del territorio chiude stretta: lo spazio se lo prende la fascia sotto, dentro cui le schede
   entrano. Senza questo, le schede si fermerebbero dentro la propria sezione e non attraverserebbero nulla. */
.territorio-tight { padding-bottom: 1rem; }
/* ⚠ Un `margin-bottom` negativo NON sposta il rettangolo dell'elemento: tira su ciò che viene dopo e
   accorcia il genitore. Per far entrare davvero le schede nella fascia sotto serve una TRASFORMAZIONE,
   che sposta il riquadro reso (ed è ciò che si misura). */
.territorio__grid .sedi-band { transform: translateY(6.5rem); position: relative; z-index: 2; }
.cta-band { padding-top: calc(var(--section-y) + 3rem); }
@media (max-width: 899.98px) {
  .territorio__grid .sedi-band { transform: none; }
  .cta-band { padding-top: var(--section-y); }
}

/* La banda di respiro guadagna un accenno di movimento proprio: il marchio inciso respira lentissimo.
   ⚠ Ciclo lungo (9s) e scala minima: un'animazione percepibile ma che non chiede attenzione. */
.anchored__crest { animation: fp-breath 9s var(--ease) infinite; }
@keyframes fp-breath { 0%,100% { transform: scale(1); opacity: .16; } 50% { transform: scale(1.045); opacity: .24; } }
@media (prefers-reduced-motion: reduce) { .anchored__crest { animation: none; } }

/* ===========================================================================
   22. TRE PIANI VERI + rifiniture di movimento
   ⚠ `display: flow-root` non è cosmetico: senza, il margine negativo della scheda COLLASSA con il suo
   contenitore e trascina su anche lui — la scheda sembra spostata ma non attraversa nessun bordo, e lo
   scavalco non esiste. Con flow-root il contenitore tiene la propria posizione e la scheda esce davvero.
   =========================================================================== */
.trustbar { display: flow-root; }

/* La fotografia della tessera si avvicina e si scalda al passaggio: il velo si alleggerisce, il ritaglio
   respira. Fermo resta sobrio. */
.tile__media::after { transition: background var(--dur) var(--ease); }
.tile:hover .tile__media::after { background: linear-gradient(180deg, rgba(7,15,27,.12) 0%, rgba(11,42,78,.55) 45%, rgba(11,42,78,.88) 100%); }
.tile:hover { transform: translateY(-6px); }
.tile__icon { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.tile:hover .tile__icon, .card:hover .card__icon { transform: translateY(-2px) scale(1.06); }

/* Il filetto sotto l'occhiello di sezione si allunga quando la sezione entra in scena: un gesto solo,
   sulla riga che apre il blocco. */
.section-intro .rule { transition: width .7s var(--ease); transition-delay: .12s; }
.js .section-intro.reveal .rule { width: 0; }
.js .section-intro.reveal.is-visible .rule { width: 52px; }
@media (prefers-reduced-motion: reduce) { .js .section-intro.reveal .rule { width: 52px; transition: none; } }

/* Anello di focus a due tinte: resta visibile sia sulle superfici chiare sia su quelle navy, senza
   dipendere da quale delle due sta sotto. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(201,162,39,.28); }

/* ===========================================================================
   23. RIFINITURE DI ENTRATA — la fotografia entra in scena avvicinandosi
   ⚠ Solo `transform`: una fotografia in dissolvenza può impedire il download delle immagini che contiene,
   e un testo che sfuma attraversa la soglia AA mentre entra. Qui si muove e si avvicina, non si accende.
   =========================================================================== */
.js .split__media.reveal img, .js .centrale__media.reveal img { transform: scale(1.045); transition: transform 1.1s var(--ease); }
.js .split__media.reveal.is-visible img, .js .centrale__media.reveal.is-visible img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .js .split__media.reveal img, .js .centrale__media.reveal img { transform: none; transition: none; } }

/* Il bordo superiore delle schede si accende in ottone quando entrano: un solo gesto, sulla riga che le
   distingue. */
.card, .sede, .note { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-top-color .6s var(--ease); }
.js .card.reveal, .js .sede.reveal { border-top-color: var(--line); }
.js .card.reveal.is-visible, .js .sede.reveal.is-visible { border-top-color: var(--brand); }

/* Sotto i 900px la barra di servizio sparisce: il telefono è già nell'intestazione, e tenerla agganciata
   costerebbe tre righe di schermo (su mobile l'indirizzo va a capo). */
@media (max-width: 899.98px) { .topbar { display: none; } }

/* ===========================================================================
   24. TESTATA DI PAGINA FOTOGRAFICA + SCHEDE CON FOTOGRAFIA
   Le pagine interne non restano un rettangolo navy: portano la loro fotografia, ANCORATA come le bande
   della home, così il linguaggio è lo stesso ovunque.
   ⚠ Il testo ci sta sopra: il rapporto lo dà il velo e va MISURATO dal pixel, non dedotto dai token.
   =========================================================================== */
.page-head--photo {
  background-repeat: no-repeat; background-position: center 45%; background-size: cover;
  background-attachment: fixed; background-color: var(--brand-dark);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
.page-head--photo::before {
  background: linear-gradient(180deg, rgba(11,42,78,.88), rgba(7,15,27,.78) 55%, rgba(11,42,78,.90));
  opacity: 1;
}
@media (max-width: 899.98px) { .page-head--photo { background-attachment: scroll; } }

/* Scheda con fotografia in testa: la foto sborda dai lati della scheda (il padding si recupera coi
   margini negativi) e il bordo d'ottone resta il segno che la distingue. */
.card--photo { padding-top: 0; }
.card--photo .card__media { margin: 0 calc(var(--space-5) * -1) var(--space-5); overflow: hidden; }
.card--photo .card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 600ms var(--ease); }
.card--photo:hover .card__media img { transform: scale(1.05); }
/* L'icona sale a cavallo del bordo basso della fotografia: è il segno che lega la foto al testo. */
.card--photo .card__icon {
  position: relative; margin-top: calc(var(--space-5) * -1); margin-bottom: var(--space-4);
  width: 40px; height: 40px;
  background: var(--accent-dark);
}
/* ⚠ Niente riquadro dietro l'icona: la `mask` del genitore ritaglia ANCHE i suoi pseudo-elementi, quindi
   un `::before` pieno non fa da campo — viene mascherato pure lui e finisce per ridipingere il pittogramma
   del proprio colore (misurato: usciva navy invece che ottone). L'icona resta una maschera sola. */

/* ⚠ Con l'intestazione agganciata, qualunque elemento raggiunto da un'àncora o portato in cima dal
   browser finisce SOTTO la barra. `scroll-margin-top` riserva l'altezza del cromo: senza, il titolo di
   destinazione resta nascosto e sembra che il link non abbia funzionato. Si è visto misurando — un
   controllo che passava il mouse su un elemento portato in cima colpiva l'header invece dell'elemento. */
:where(h1, h2, h3, section, .section, .tile, .card, .sede, [id]) { scroll-margin-top: calc(var(--chrome) + 1rem); }

/* ===========================================================================
   25. INTESTAZIONE SU SCHERMO STRETTO
   A 390px il wordmark, l'hamburger e il bottone del telefono si contendono la riga: il nome andava a capo
   su due righe e il sottotitolo lo strozzava. Il sottotitolo sparisce (è contorno), il nome resta su una
   riga, il telefono si accorcia al solo numero.
   =========================================================================== */
@media (max-width: 599.98px) {
  .site-header__row { min-height: 62px; gap: var(--space-3); }
  .wordmark__tag { display: none; }
  .wordmark__name { font-size: 1.18rem; letter-spacing: 0; white-space: nowrap; }
  .wordmark__mark { width: 34px; height: 34px; flex-basis: 34px; }
  .site-header.is-scrolled .wordmark__mark { width: 30px; height: 30px; flex-basis: 30px; }
  .site-header__cta { margin-left: 0; padding: .5rem .7rem; font-size: .78rem; letter-spacing: .04em; }
  /* La barra CTA fissa in fondo copre l'ultima riga di ogni pagina: si riserva lo spazio. */
  .wp-site-blocks { padding-bottom: 56px; }
}