/* components.css — vocabolario di sezione di mutual_advisory, distillato dai 5 riferimenti della
   categoria «Aziende» con fedelta' ~70-75% su BeCorporation (nota committata template-notes/aziende.md).
   Preso: barra di navigazione come CAMPO PIENO · testata SPLIT · blocco navy accanto a pannello tramato ·
   scheda bianca che GALLEGGIA su una foto che le passa dietro · banda fotografica scura come intermezzo ·
   pie' a 4 colonne di link.
   NON preso: barre di avanzamento con percentuali inventate · testimonial firmati con nomi finti ·
   KPI da investor relations. La nota lo dice, e qui vale doppio: nessun numero che il cliente non abbia.

   I colori vengono SOLO dai token. ⚠ Le tre regole d'uso della palette (tokens.css) valgono qui:
   --sage non e' mai testo; il testo d'accento su chiaro e' --accent-ink; su scuro --accent-lt. */

/* ============================ Impalcatura ============================ */
.container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-y); background: var(--paper); position: relative; }
.section--alt { background: var(--grad-tint); }
.section--tint { background: var(--grad-carta); }
.section--tight { padding-block: calc(var(--section-y) * 0.66); }

.eyebrow {
  font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--space-3);
}
/* Su fondo scuro l'occhiello passa all'azzurro chiaro: la terracotta sul navy vale 2,10. */
.on-dark .eyebrow, .band-dark .eyebrow { color: var(--accent-lt); }

.section-intro { margin-bottom: var(--space-7); }
.section-intro h2 { font-size: var(--text-xl); }
/* ⚠ La misura sta sul paragrafo, non sul contenitore: se la sezione non ha figura, il testo deve
   prendere tutta l'area e andare a capo da solo. */
.section-intro .lead { font-size: var(--text-md); color: var(--ink-muted); margin-top: var(--space-4); }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--space-4) var(--space-6);
  background: var(--brand); color: var(--on-dark);
  border: 1px solid var(--brand); border-radius: var(--radius);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--accent { background: var(--accent-ink); border-color: var(--accent-ink); }   /* bianco sopra: 5,34 */
.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--ghost { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--ghost:hover { background: var(--brand); color: var(--on-dark); }
.on-dark .btn--ghost, .band-dark .btn--ghost { color: var(--on-dark); border-color: var(--on-dark-muted); }
.on-dark .btn--ghost:hover, .band-dark .btn--ghost:hover { background: var(--on-dark); color: var(--brand); }

/* Tramatura diagonale: la texture dei pannelli chiari di BeCorporation.
   ⭐ Da' MATERIA senza chiedere una fotografia — il problema centrale di questo verticale. */
.trama { position: relative; }
.trama::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: var(--trama-opacita);
  background: repeating-linear-gradient(135deg,
    var(--trama-colore) 0, var(--trama-colore) 1px,
    transparent 1px, transparent var(--trama-passo));
}
.trama > * { position: relative; }

/* ============================ Fascia di servizio ============================ */
.topbar {
  display: var(--topbar-display); align-items: center;
  background: var(--brand-dark); color: var(--on-dark-muted);
  font-size: 0.8rem; min-height: var(--chrome-topbar);
}
/* ⚠ I recapiti erano incollati l'uno all'altro e senza gerarchia. Ora hanno respiro, un filetto che li
   separa e il segno che dice di che cosa si tratta: una fascia di servizio si legge di sfuggita. */
.topbar__inner { display: flex; align-items: center; gap: 0; flex-wrap: wrap; width: 100%; }
.topbar a {
  color: var(--on-dark-muted); display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-5); line-height: 1;
  border-right: 1px solid rgba(244,246,250,.14);
  transition: color var(--dur) var(--ease);
}
.topbar__inner > a:first-child { padding-left: 0; }
.topbar a:hover { color: var(--on-dark); }
.topbar a::before {
  content: ""; width: .85rem; height: .85rem; flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.topbar a[href^="tel:"]   { --ico: url("../assets/img/icons/tel.svg"); }
.topbar a[href^="mailto:"]{ --ico: url("../assets/img/icons/mail.svg"); }

/* ⚠⚠ I tre social erano <span data-social> VUOTI, senza una sola regola che li disegnasse: invisibili.
   Si dipingono con la maschera, come le icone delle tessere — un SVG dentro <img> non erediterebbe
   `currentColor` e ripiegherebbe sul nero. */
.topbar__social { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.topbar__social a {
  padding: 0; border: 0; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(244,246,250,.22);
}
.topbar__social a::before { display: none; }
.topbar__social a:hover { background: var(--brand-mid); border-color: var(--brand-mid); color: var(--on-dark); }
.topbar__social [data-social] {
  display: block; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.topbar__social [data-social="facebook"]  { --ico: url("../assets/img/icons/facebook.svg"); }
.topbar__social [data-social="instagram"] { --ico: url("../assets/img/icons/instagram.svg"); }
.topbar__social [data-social="linkedin"]  { --ico: url("../assets/img/icons/linkedin.svg"); }
@media (max-width: 899.98px) { .topbar { display: none; } }

/* ============================ Testata ============================ */
/* Barra di navigazione come CAMPO PIENO, non trasparente: nella categoria la testata e' un blocco di
   colore istituzionale che regge la nav. Dice «ente», non «studio creativo». */
/* ⚠⚠ FISSA, non `sticky`. Misurato: con `position: sticky` la testata si staccava e finiva a -1425px
   allo scorrimento — uno sticky vive dentro il proprio genitore, e qui il genitore e' un contenitore
   flex che non lo trattiene. `fixed` la ancora al viewport e basta.
   ⚠ Una testata fissa TOGLIE spazio al flusso: va restituito con un padding pari al cromo, se no la
   prima banda ci finisce sotto. Il token --chrome esiste per questo ed e' fissato in border-box. */
/* ⭐ LA TESTATA A CAPSULA (stesso gesto di Mansi). A pagina aperta e' una barra NORMALE, a filo e piena;
   solo scorrendo si stacca dai bordi e diventa una capsula sospesa. Si nota senza doverla cercare, e non
   sposta nulla al caricamento — una capsula gia' staccata al primo sguardo si legge come un errore di
   allineamento.
   ⚠⚠ `position: fixed`, non `sticky`: misurato, lo sticky si staccava a -1425px perche' il genitore e'
   un contenitore flex che non lo trattiene. Lo spazio nel flusso lo restituisce --chrome. */
.site-header {
  position: fixed; top: var(--chrome-topbar); left: 0; right: 0; z-index: 50;
  width: 100%; margin-inline: auto;
  background: var(--brand); color: var(--on-dark);
  border: 1px solid transparent; border-bottom-color: rgba(244,246,250,.14); border-radius: 0;
  transition: top .38s var(--ease), width .38s var(--ease), border-radius .38s var(--ease),
              background .38s var(--ease), box-shadow .38s var(--ease), backdrop-filter .38s var(--ease);
}
/* ⚠⚠ La capsula vive SOLO sopra la soglia del pannello a tendina (1280px), non sopra i 900 di Mansi:
   il `backdrop-filter` crea un containing-block per il `position: fixed`, e sotto quella soglia
   l'overlay del menu si limiterebbe all'altezza della capsula invece di prendere la finestra.
   La soglia della capsula e quella del pannello DEVONO coincidere. */
@media (min-width: 1280px) {
  .site-header.fp-shrink.is-scrolled {
    top: var(--space-3);
    width: min(100% - (var(--gutter) * 1.2), calc(var(--container) + 6rem));
    border-radius: 999px;
    border-color: rgba(244,246,250,.18);
    background: rgba(30, 58, 107, .82);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 18px 44px -22px rgba(15,29,54,.92);
  }
  /* ⚠ Nessun padding aggiuntivo: il `.container` interno centra gia' su 1200px dentro una capsula di
     1296, cioe' 48px di scarto per lato — abbastanza per un'estremita' tonda. Sommandoci --space-6 il
     bottone finiva a 80px dal bordo e la capsula sembrava mezza vuota agli estremi. */
  .site-header.fp-shrink.is-scrolled .site-header__inner { padding-inline: 0; }
  /* ⚠ Il verticale ha il RAGGIO ZERO come registro (la categoria «Aziende» non arrotonda, ed e' una
     decisione documentata). La capsula e' l'eccezione, e vale solo per il CROMO: dentro un'estremita'
     tonda un bottone squadrato legge come un errore di montaggio. In pagina i bottoni restano squadrati. */
  .site-header.fp-shrink.is-scrolled .site-header__cta { border-radius: 999px; }
}
/* Sotto la soglia la testata resta una barra piena a filo: nessuna capsula, nessun filtro. */
@media (max-width: 1279.98px) {
  .site-header.fp-shrink.is-scrolled { top: 0; }
}
/* ⚠ La fascia di servizio non esiste piu': telefono, mail e social vivono nel pie', dove hanno spazio e
   bersagli veri. La testata parte quindi da 0 e il cromo perde il contributo della fascia
   (--chrome-topbar: 0). Le regole che la riguardano restano innocue: senza il markup non applicano. */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 51; }
/* Lo spazio che la testata non occupa piu' nel flusso. */
.wp-site-blocks { padding-top: var(--chrome); }
/* ⚠ Ritirata la fascia di servizio la testata sale, ma SOLO dove non c'e' la capsula: sopra i 1280
   la capsula deve galleggiare staccata dal bordo (`top: var(--space-3)`), e questa regola la
   schiacciava a filo perche' vince per specificita' (0,3,1 contro 0,3,0). Va quindi confinata sotto
   la soglia della capsula, invece di combattere con `!important`. */
@media (max-width: 1279.98px) {
  body:has(.fp-shrink.is-scrolled) .site-header { top: 0; }
}
/* ⚠⚠ Regola 16: marchio, navigazione e bottone sulla STESSA linea e centrati (spazio sopra = sotto).
   Prima era `align-items: baseline` — e le voci di menu finivano SOTTO il centro, perche' allineare
   sulla linea di base di caratteri di corpo diverso non e' centrare. E i figli di un wp:group portano
   un margine di blocco di WordPress che li spinge ancora piu' giu': va azzerato esplicitamente. */
.site-header__inner {
  display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-6);
  min-height: calc(var(--chrome) - var(--chrome-bordi));   /* l'interno DERIVA dal cromo */
  padding-block: var(--space-3);
  transition: min-height .38s var(--ease), padding var(--dur) var(--ease), padding-inline .38s var(--ease);
}
.site-header__inner > * { align-self: center; margin-block: 0; }
/* ⚠ Testo e nav CENTRATI hanno basi diverse: `align-items: baseline` sulla riga, `align-self: center`
   su marchio e CTA (che restano centrati verticalmente). Regola 7. */
.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); flex: 0 1 auto; min-width: 0; overflow: hidden; }
.wordmark::before {
  content: var(--wordmark-logo-content);
  background-image: var(--wordmark-logo);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  width: var(--wordmark-logo-w); height: var(--wordmark-logo-h); flex: none;
}
.wordmark__txt {
  display: var(--wordmark-name-display);
  font-family: var(--font-display); font-weight: 700; font-size: 1.28rem;
  letter-spacing: -0.01em; color: var(--on-dark);
  white-space: nowrap;   /* il nome del cliente non va a capo: e' un marchio, non un paragrafo */
}
.site-header__nav { margin-left: auto; flex: none; }
/* Il contenitore delle voci non va MAI a capo: se lo spazio manca interviene il pannello a tendina. */
.site-header .wp-block-navigation__container { flex-wrap: nowrap; }
.site-header__cta { margin-left: var(--space-4); display: var(--header-cta-display); flex: none;
  white-space: nowrap; padding-inline: var(--space-5); }
.site-header .btn { background: var(--accent-ink); border-color: var(--accent-ink); }
.site-header .btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* wp:navigation: il menu seedato va RESO, mai una nav hardcoded (regola 15). */
.site-header .wp-block-navigation { font-size: var(--nav-size); letter-spacing: var(--nav-tracking);
  text-transform: uppercase; font-weight: 600; }
/* Il passo fra le voci e' un token perche' dipende da QUANTE voci porta il cliente. */
.site-header .wp-block-navigation .wp-block-navigation__container { gap: var(--nav-gap); }
.site-header .wp-block-navigation li { white-space: nowrap; }
.site-header .wp-block-navigation a { color: var(--on-dark); }
.site-header .wp-block-navigation a:hover { color: var(--accent-lt); }
/* ⚠ Se l'header avesse `backdrop-filter`, quel filtro creerebbe un containing block per il
   `position: fixed` e l'overlay del menu si limiterebbe all'ALTEZZA DELL'HEADER. Qui l'header e' un
   campo pieno OPACO proprio per non incorrere in quel difetto (lezione dura Sirtel). */
/* ⚠⚠ Il pannello usciva BIANCO con le voci a destra e la X quasi invisibile: le regole di WP core
   vincevano sulle mie. Servono selettori piu' specifici (`.site-header` in testa) e, sul fondo e sui
   colori, `!important` — perche' WP li dichiara inline sul contenitore responsive.
   La X era `--on-dark` (#F4F6FA) su fondo bianco: 1,07 di contrasto, cioe' non c'era. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background-color: var(--brand-dark) !important;
  color: var(--on-dark) !important;
  padding: var(--space-8) var(--gutter) var(--space-7);
  align-items: stretch !important;
}
.site-header .is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%; align-items: stretch !important; justify-content: flex-start !important;
}
.site-header .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; align-items: stretch !important; }
.site-header .is-menu-open .wp-block-navigation-item { width: 100%; }
/* ⚠ L'<a> e' display:block e si restringe al testo: dentro una colonna flex finisce allineato a
   DESTRA. `width:100%` + `text-align:left` lo riportano a sinistra, e i filetti corrono da bordo a bordo. */
.site-header .is-menu-open .wp-block-navigation-item__content {
  width: 100%; text-align: left; display: block;
  padding: var(--space-4) 0; color: var(--on-dark) !important;
  border-bottom: 1px solid rgba(244,246,250,.16);
  font-size: 1.05rem; letter-spacing: .04em;
}
.site-header .is-menu-open .wp-block-navigation-item__content:hover { color: var(--accent-lt) !important; }
.site-header .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); width: 100%;
}
.is-menu-open .wp-block-navigation__responsive-container-content { padding-bottom: calc(96px + var(--menu-fondo)); }
/* ⚠ Il bottone di CHIUSURA del pannello: senza misura dichiarata WP lo rende minuscolo e incollato
   all'angolo, cioe' un bersaglio che su un telefono non si prende. 44x44 e' il minimo dell'area di
   tocco (WCAG 2.5.5), ed e' una delle tre regole di gusto che nessun livello puo' disattivare. */
/* La X: 44x44 di area di tocco, e un contorno che la rende un BERSAGLIO invece di un segno perso
   nell'angolo. Il colore e' esplicito e vince su WP core. */
.site-header .wp-block-navigation__responsive-container-close {
  width: 44px; height: 44px; padding: 10px;
  top: var(--space-4); right: var(--gutter);
  color: var(--on-dark) !important;
  border: 1px solid rgba(244,246,250,.35);
  background: transparent;
}
.site-header .wp-block-navigation__responsive-container-close:hover {
  background: var(--brand-mid); border-color: var(--brand-mid);
}
.site-header .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; fill: currentColor; }
/* Anche il bottone di APERTURA vuole la stessa area di tocco. */
.wp-block-navigation__responsive-container-open { width: 44px; height: 44px; padding: 10px; color: var(--on-dark); }
.wp-block-navigation__responsive-container-open svg { width: 24px; height: 24px; }

/* ⚠⚠ La soglia del pannello a tendina si ALZA a 1280px. WP la fissa a 600px, tarata su una nav corta;
   questo cliente porta SETTE voci e sotto i 1280px andavano a due righe — cioe' una testata che cresce
   e voci incolonnate, non un menu. Il frame scelto e' `compact-drawer`, che il pannello lo prevede:
   qui si dichiara solo DOVE comincia. Sopra la soglia la nav resta in linea e visibile.
   ⚠ Il pannello resta un <details> nativo: nessun JavaScript, quindi funziona anche con gli script
   disattivati e con qualunque CSP. */
@media (max-width: 1279.98px) {
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
}

/* Il bottone della testata e' piu' basso di quello delle bande: in una riga di cromo conta l'altezza. */
.site-header__cta { padding-block: var(--space-3); }

/* ============================ Testata SPLIT — il segno del verticale ============================ */
/* Pannello di testo su fondo chiaro tramato a sinistra | fotografia a META' CAMPO a destra.
   ⭐ E' il device che la nota di categoria indica per il materiale povero: «una foto a meta' campo regge
   con 1600x1066, una full-bleed no». Il contrasto del titolo NON dipende dal fotogramma, perche' il
   titolo sta sul PANNELLO, non sulla fotografia. */
.hero { background: var(--surface); }
.hero__grid { display: grid; grid-template-columns: var(--hero-split-cols); align-items: stretch;
  min-height: var(--hero-min-h); }
.hero__panel {
  background: var(--hero-panel-bg); padding: var(--hero-panel-pad);
  display: flex; flex-direction: column; justify-content: center;
  /* ⚠ La tramatura diagonale del riferimento e' SPENTA: sul pannello chiaro le righe si vedevano e
     l'owner le ha segnalate come «linee strane». Il pannello resta pulito. */
  --trama-opacita: 0;
}
.hero__panel h1 { font-size: var(--text-3xl); max-width: var(--display-measure); }
.hero__lead { font-size: var(--text-md); color: var(--ink-muted); margin-top: var(--space-5);
  max-width: var(--hero-lead-w); }
.hero__actions { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero__media { position: relative; overflow: hidden; background: var(--surface-2); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos); }
/* ⚠ Qui c'era una fascia tramata sul bordo interno della fotografia (il device di BeCorporation che
   «cuce» foto e pannello). A schermo leggeva come un artefatto, non come un segno: RIMOSSA su
   segnalazione dell'owner. Il confine fra pannello e foto e' netto, ed e' sufficiente. */
@media (max-width: 899.98px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { min-height: 260px; order: -1; }
  .hero__media::after { display: none; }
}

/* ============================ Blocco navy + pannello (featured) ============================ */
/* BeCorporation: un quadrato di colore PIENO accanto a un pannello di testo. Funziona con foto medie
   perche' nessuna tessera deve reggere da sola. */
.featured__grid { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  /* ⚠ `stretch`, non `center`: con `center` il blocco fotografico si accartocciava sulla propria altezza
     minima e restava sospeso accanto a una colonna di testo il doppio piu' alta. */
  align-items: stretch; }
.featured__grid > * { min-height: 0; }
/* ⚠ Quando la colonna di TESTO viene per prima, le proporzioni si invertono: il rapporto di default e'
   tarato sul blocco navy a sinistra, e applicato al testo lungo lo incolonna in ~300px mentre la
   fotografia prende il campo largo. La misura di lettura sta sul paragrafo, ma la COLONNA deve comunque
   essere quella giusta per chi porta il testo. */
.featured__grid--wide-text { grid-template-columns: minmax(0, .58fr) minmax(0, .42fr); }
@media (max-width: 899.98px) { .featured__grid--wide-text { grid-template-columns: 1fr; } }
/* ⚠ Prima il blocco era un campo navy con la fotografia PICCOLA dentro un padding generoso: il risultato
   era un rettangolo blu quasi vuoto attorno a un francobollo. Ora la fotografia RIEMPIE il blocco fino ai
   bordi e il testo le sta sopra, su un gradiente che parte dal fondo — cosi' il blocco e' pieno, la foto
   e' grande e il contrasto del titolo non dipende dal fotogramma ma dal gradiente. */
.featured__block {
  background: var(--grad-navy); color: var(--on-dark);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(20rem, 30vw, 30rem);
}
/* ⚠⚠ Il padding sta sul BLOCCO, non sui figli. Prima era su `> :last-child:not(img)` — ma l'<img> E'
   l'ultimo figlio, quindi quel selettore non trovava nulla e il titolo finiva esattamente sul bordo
   inferiore, tagliato da `overflow: hidden` (misurato: H2 da 452 a 480 in un blocco di 480).
   La fotografia e' `position: absolute; inset: 0`, quindi IGNORA il padding e continua a riempire. */
.featured__block { padding: clamp(var(--space-5), 2.6vw, var(--space-7)); }
.featured__block > :not(img) { position: relative; }
.featured__block h2, .featured__block h3 { color: var(--on-dark); }
.featured__block p { color: var(--on-dark); }
/* La fotografia riempie il blocco e sta DIETRO al testo. */
.featured__block img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos);
  margin: 0; aspect-ratio: auto;
}
/* Velo dal basso: scurisce dove sta la scritta, lascia respirare la foto in alto. */
.featured__block:has(img)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,29,54,.20) 0%, rgba(15,29,54,.55) 48%, rgba(15,29,54,.93) 100%);
}
/* Senza fotografia il blocco resta il campo navy pieno di prima: nessun buco. */
.featured__block:not(:has(img)) { justify-content: center; }
/* ⚠ Con le colonne pareggiate in altezza, il testo piu' corto lasciava un vuoto in fondo alla sua
   colonna. Centrandolo verticalmente il vuoto si ripartisce e non si legge piu' come uno strappo. */
.featured__body { display: flex; flex-direction: column; justify-content: center; }
.featured__body h2 { font-size: var(--text-xl); }
.featured__body .lead { font-size: var(--text-md); color: var(--ink-muted); margin-top: var(--space-4); }
.featured__body p + p { margin-top: var(--space-4); }
.checks { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.checks li { display: flex; gap: var(--space-3); align-items: flex-start; max-width: var(--prose-measure); }
.checks li::before {
  content: ""; flex: none; width: .7rem; height: .7rem; margin-top: .55rem;
  background: var(--accent-ink);          /* marcatore quadrato: la categoria non arrotonda */
}
.on-dark .checks li::before, .band-dark .checks li::before { background: var(--accent-lt); }
@media (max-width: 899.98px) { .featured__grid { grid-template-columns: 1fr; } }

/* ============================ Tessere (services) ============================ */
/* ⚠ Regola 12: la tessera linka DIRITTO alla pagina di destinazione, mai a un hub intermedio.
   ⚠ Un solo collegamento raggiungibile da tastiera per tessera: la fotografia esce dall'ordine di
   tabulazione invece di ripetere la stessa destinazione due volte. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--tile-gap); }
.tile { background: var(--paper); border: var(--border); display: flex; flex-direction: column;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tile:hover { border-color: var(--brand-mid); transform: translateY(-3px); }
.tile__media { aspect-ratio: var(--fig-ratio); overflow: hidden; background: var(--surface-2); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos); }
.tile__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
/* ⚠⚠ L'icona si dipinge con la MASCHERA, non con un <img>. Due difetti gia' pagati:
   1. un SVG dentro <img> NON eredita `currentColor` e ripiega sul nero (cleaning_services,
      building_metalwork: 1,23 di contrasto);
   2. uno <span> e' INLINE, e un inline ignora width/height — l'icona esce 0x0 (law_firm).
   Da qui `display: block` esplicito + `background: currentColor` sotto la maschera. */
.tile__icon {
  display: block; width: 2.2rem; height: 2.2rem; flex: none;
  background: currentColor; color: var(--brand-mid);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
/* ⚠ La mappatura nome -> file vive nel FOGLIO, non in uno `style` inline: un `url()` dentro una
   proprieta' personalizzata si risolve rispetto al foglio che la DICHIARA. Dichiarata inline puntava a
   `css/icons/…` e dava 404 su tutte e quattro. La copy porta il NOME (`percorso`), mai un percorso. */
.tile[data-icon="percorso"] .tile__icon { --icon: url("../assets/img/icons/percorso.svg"); }
.tile[data-icon="famiglia"] .tile__icon { --icon: url("../assets/img/icons/famiglia.svg"); }
.tile[data-icon="impresa"]  .tile__icon { --icon: url("../assets/img/icons/impresa.svg"); }
.tile[data-icon="salute"]   .tile__icon { --icon: url("../assets/img/icons/salute.svg"); }
.tile h3 { font-size: var(--text-lg); }
.tile p { color: var(--ink-muted); font-size: .96rem; max-width: none; }
/* Il titolo della tessera E' il collegamento: un solo bersaglio, che porta il nome della famiglia.
   L'area cliccabile si estende a tutta la tessera con uno pseudo-elemento, senza aggiungere un secondo
   link nell'ordine di tabulazione. */
.tile h2 a, .tile h3 a { color: inherit; }
.tile h2 a::after, .tile h3 a::after { content: ""; position: absolute; inset: 0; }
.tile { position: relative; }
.tile:hover h2 a, .tile:hover h3 a { color: var(--accent-ink); }

/* ============================ Scheda che galleggia sulla foto (method) ============================ */
/* BeCorporation: una scheda bianca sovrapposta a una fascia fotografica che le passa DIETRO.
   ⭐ Il device perfetto per una griglia di voci brevi quando la fotografia non regge da sola. */
.floatcard { position: relative; background: var(--grad-tint); padding-block: var(--section-y); }
.floatcard__bg { position: absolute; inset: 0; overflow: hidden; }
.floatcard__bg img { width: 100%; height: 100%; object-fit: cover; }
.floatcard__bg::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.floatcard__card { position: relative; background: var(--paper); padding: clamp(var(--space-6), 4vw, var(--space-8));
  box-shadow: var(--shadow-md); }
.grid-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-6); }
.grid-item { display: flex; flex-direction: column; gap: var(--space-2);
  padding-left: var(--space-4); border-left: 2px solid var(--accent); }
.grid-item h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-mid); }
.grid-item p { color: var(--ink-muted); font-size: .94rem; max-width: none; }

/* ============================ Banda fotografica scura (trust) ============================ */
/* Nel riferimento e' la banda del testimonial. ⭐ Qui porta le CITAZIONI COSTITUZIONALI, che nel
   materiale del cliente sono testo vero e pesante: il device del template incontra il contenuto reale
   invece di un testimonial inventato — che la nota mette esplicitamente fra le cose da NON prendere. */
.band-dark { position: relative; background: var(--brand-dark); color: var(--on-dark);
  padding-block: calc(var(--section-y) * 1.1); overflow: hidden; }
.band-dark__bg { position: absolute; inset: 0; }
.band-dark__bg img { width: 100%; height: 100%; object-fit: cover; }
.band-dark__bg::after { content: ""; position: absolute; inset: 0; background: var(--scrim-deep); }
.band-dark > .container { position: relative; }
.band-dark h2 { color: var(--on-dark); font-size: var(--text-xl); }
.band-dark p { color: var(--on-dark-muted); }
.quote { font-size: var(--text-md); line-height: 1.6; color: var(--on-dark);
  border-left: 3px solid var(--accent-lt); padding-left: var(--space-5); margin-top: var(--space-5);
  max-width: 68ch; }
.quote cite { display: block; margin-top: var(--space-3); font-style: normal; font-size: .86rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }

/* ============================ Ritratti (team) ============================ */
/* ⚠ I ritratti del primo cliente sono 472x465 e NON esistono piu' grandi (il CDN d'origine cappa alla
   sorgente). Resi a ~236px sono 2x DPR: puliti. La misura del riquadro e' quindi un VINCOLO, non gusto. */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-7); }
.person { display: flex; flex-direction: column; gap: var(--space-4); }
.person__photo { width: 236px; max-width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.person h3 { font-size: var(--text-lg); }
.person__role { font-size: .84rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600; }
.person p { color: var(--ink-muted); font-size: .96rem; }

/* ============================ Fisarmonica (faq) ============================ */
/* <details>/<summary> NATIVO: senza JavaScript resta apribile, e la CSP dei progetti reali vieta gli
   script inline. Il segno di apertura e' decorativo e non sostituisce il testo della domanda. */
/* ⚠ La fisarmonica prende TUTTA la larghezza del contenitore, come ogni altro testo senza figura
   accanto: misurato, era 838px su 1200 e lasciava 362px di vuoto a destra su tutte e tre le pagine
   che la portano. Vale la stessa regola dei capoversi — se non c'e' nulla a fianco, si occupa la riga. */
.faq { display: grid; gap: 0; border-top: var(--border); max-width: none; }
.faq details { border-bottom: var(--border); }
.faq summary {
  display: flex; align-items: flex-start; gap: var(--space-4); cursor: pointer;
  padding-block: var(--space-5); font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg); color: var(--brand); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; margin-left: auto; margin-top: .55rem; width: .7rem; height: .7rem;
  border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__answer { padding-bottom: var(--space-5); color: var(--ink-muted); }
.faq__answer p { max-width: none; }
/* A riga piena l'interlinea si apre un poco, come per i capoversi a tutta area. */
.faq__answer p { line-height: 1.85; }
.faq__answer p + p { margin-top: var(--space-4); }

/* ============================ Banda di chiusura ============================ */
.cta-band { background: var(--grad-navy-x); color: var(--on-dark); padding-block: calc(var(--section-y) * .8); }
.cta-band__inner { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.cta-band h2 { color: var(--on-dark); font-size: var(--text-xl); }
.cta-band p { color: var(--on-dark-muted); margin-top: var(--space-3); max-width: 56ch; }
.cta-band .btn { margin-left: auto; background: var(--accent-ink); border-color: var(--accent-ink); }
.cta-band .btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
@media (max-width: 767.98px) { .cta-band .btn { margin-left: 0; } }

/* ============================ Testata di pagina ============================ */
/* ============================ Testata di pagina CINEMATOGRAFICA ============================ */
/* ⚠ Prima era una fascia piatta di colore: il vuoto in cima a OGNI pagina interna. Ora porta la
   fotografia della pagina sotto un gradiente navy, che e' l'unica cosa che rende leggibile un titolo
   sopra un'immagine senza dipendere dal fotogramma.
   ⚠ La misura del titolo resta un gradino sotto l'hero (regola 6): una testata di pagina non e' un hero. */
.page-head {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--brand-dark);
  padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  color: var(--on-dark);
}
.page-head__media { position: absolute; inset: 0; z-index: -2; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos); }
/* ⚠ Il velo e' un GRADIENTE, non un piatto: scurisce dove sta il testo e lascia respirare la foto a
   destra. La tappa a sinistra e' calcolata sul caso peggiore (foto bianca), come --scrim-deep. */
.page-head::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(15,29,54,.95) 0%, rgba(15,29,54,.92) 46%, rgba(15,29,54,.84) 72%, rgba(15,29,54,.70) 100%);
}
.page-head h1 { color: var(--on-dark); font-size: var(--text-2xl); max-width: 22ch; }
.page-head .eyebrow { color: var(--accent-lt); }
.page-head .lead { font-size: var(--text-md); color: var(--on-dark); margin-top: var(--space-5);
  max-width: 60ch; }
/* Filetto d'accento sotto l'occhiello: un segno che ricorre e tiene insieme le pagine. */
.page-head .eyebrow::after {
  content: ""; display: block; width: 2.5rem; height: 2px; background: var(--accent);
  margin-top: var(--space-3);
}
/* Senza fotografia la testata resta un campo navy pieno: nessuna foto finta, nessun buco. */
.page-head:not(:has(.page-head__media)) { background: linear-gradient(120deg, var(--brand-dark), var(--brand)); }

/* ============================ Contatti ============================ */
.contact-cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(var(--space-6), 4vw, var(--space-8)); }
.contact-info { background: var(--grad-tint); padding: clamp(var(--space-5), 3vw, var(--space-7)); }
.contact-info h3 { font-size: var(--text-lg); }
.contact-info dl { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.contact-info dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600; }
.contact-info dd { margin: 0; }
/* La mappa e' un LINK, non un embed: default zero-live/zero-cookie. */
/* La figura della scheda contatti: sotto i recapiti, non in una banda a fondo pagina (regola 13). */
.contact-fig { margin-top: var(--space-6); width: 100%; aspect-ratio: var(--fig-ratio); object-fit: cover; }
.map-link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5);
  color: var(--brand-mid); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-size: .84rem; font-weight: 600; color: var(--ink); }
.field input, .field textarea, .field select {
  font: inherit; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--field-radius); background: var(--paper); color: var(--ink);
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.form-note { font-size: .84rem; color: var(--ink-muted); margin-top: var(--space-4); }
@media (max-width: 899.98px) { .contact-cols { grid-template-columns: 1fr; } }

/* ============================ Pie' ============================ */
/* Pie' a 4 colonne di link, con i reparti elencati per esteso: e' la forma della categoria. */
.site-footer { background: var(--grad-navy); color: var(--on-dark); padding-block: var(--space-8); }
/* ⚠ `auto-fit` invece di quattro colonne fisse: questo cliente non dichiara gli orari, e la colonna
   corrispondente sparisce col suo slot — con una griglia fissa restava un quarto di riga vuoto a destra. */
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-7); }
.site-footer h2, .site-footer h3 { color: var(--on-dark); font-size: .84rem; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: var(--space-4); }
.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: var(--accent-lt); }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer p { color: var(--on-dark-muted); max-width: none; }
.site-footer__legal { margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid rgba(244,246,250,.14); display: flex; gap: var(--space-5); flex-wrap: wrap;
  align-items: center; font-size: .84rem; color: var(--on-dark-muted); }
.dgitaly { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); }
.dgitaly img { width: 20px; height: 20px; }
@media (max-width: 899.98px) { .site-footer__cols { grid-template-columns: var(--footer-cols-2); } }
@media (max-width: 599.98px) { .site-footer__cols { grid-template-columns: 1fr; }
  .dgitaly { margin-left: 0; } }

/* ============================ Barra CTA mobile ============================ */
.cta-bar { display: none; }
@media (max-width: 767.98px) {
  .cta-bar { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: var(--brand); border-top: 1px solid rgba(244,246,250,.16); }
  .cta-bar a { flex: 1; text-align: center; padding: var(--space-4); color: var(--on-dark);
    font-weight: 600; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; }
  .cta-bar a + a { border-left: 1px solid rgba(244,246,250,.16); }
  body { padding-bottom: 56px; }   /* la barra fissa non deve coprire il fondo del pie' */
}

/* ============================ Social pulsanti ============================ */
/* Riuso del segno gia' in casa (`fp-social-pulse` di pharmacy), con la sua guardia intatta:
   una pulsazione che non si puo' spegnere e' una barriera, non un ornamento. */
@keyframes fp-social-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(86,169,222,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(86,169,222,0); }
}
.social-pulse { animation: fp-social-pulse 2.8s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .social-pulse { animation: none; } }


/* ============================ Testo senza fotografia ============================ */
/* ⭐⭐ REGOLA DELL'OWNER, ripetuta: «quando in una sezione non ci sono foto, il testo deve prendere
   TUTTA l'area della pagina e andare a capo da solo», non restare confinato a sinistra con il vuoto a
   destra. Misurato prima della correzione: 770px di testo in un contenitore da 1200 = 430px di vuoto.

   ⚠ La discriminante NON e' una classe da ricordarsi di scrivere: e' la POSIZIONE nel DOM. Un paragrafo
   figlio DIRETTO del contenitore non ha nulla accanto — nessuna fotografia, nessuna colonna — quindi
   prende tutta la riga. Un paragrafo dentro `.featured__body`, `.tile`, `.contact-info` o `.faq` sta
   invece in una colonna che ha un vicino, e li' la misura di lettura resta. Cosi' la regola vale da
   sola su ogni pagina presente e futura, senza che nessuno debba marcarla a mano. */
.section > .container > p,
.section > .container > ul:not(.checks):not(.tiles) > li,
.section > .container > .checks > li,
.page-head > .container > .lead,
.band-dark > .container > p {
  max-width: none;
}
/* A riga piena l'interlinea si apre un poco: una riga lunga con l'interlinea stretta si perde. */
.section > .container > p { line-height: 1.85; }
/* Il titolo di sezione a riga piena non deve stirarsi oltre la sua misura naturale. */
.section > .container > .section-intro > h2 { max-width: 30ch; }

/* ============================ Figure di pagina ============================ */
/* Figure a riga piena nelle pagine di progetto: spezzano le lunghe distese di testo e danno ritmo.
   ⚠ Rapporto panoramico (non quadrato): il materiale e' tutto orizzontale, e una figura alta
   spingerebbe il testo troppo in basso. */
.page-fig {
  width: 100%; aspect-ratio: 21 / 8; object-fit: cover; object-position: var(--fig-object-pos);
  margin-block: var(--space-6) var(--space-7);
}
/* La figura dentro una scheda laterale segue la colonna, non la riga. */
.aside-fig { width: 100%; aspect-ratio: var(--fig-ratio); object-fit: cover; margin-bottom: var(--space-5); }
@media (max-width: 767.98px) { .page-fig { aspect-ratio: 16 / 10; } }

/* ============================ Dinamismo elegante ============================ */
/* ⚠ Tutto quello che segue e' governato dalla guardia `prefers-reduced-motion` di base.css e dal JS del
   tema, che su reduced-motion rivela senza animare e NON attiva la parallasse. Il movimento e' un
   accento, non il modo in cui si legge la pagina. */

/* La testata si CONTRAE allo scorrimento: la fascia di servizio si ritira e il cromo si stringe.
   ⚠ Il JS ha l'isteresi (80px per attivare, 30 per spegnere), quindi non sfarfalla. */
.site-header.fp-shrink { transition: box-shadow var(--dur) var(--ease); }
.site-header.fp-shrink .site-header__inner { transition: min-height var(--dur) var(--ease), padding-block var(--dur) var(--ease); }
.site-header.fp-shrink.is-scrolled { box-shadow: 0 10px 30px -22px rgba(15,29,54,.9); }
.site-header.fp-shrink.is-scrolled .site-header__inner { min-height: 62px; padding-block: var(--space-2); }
.topbar { transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease); max-height: 4rem; overflow: hidden; }
/* ⚠⚠ Ritirandola servono TRE cose, non una: `max-height:0` da solo perdeva contro il `min-height` del
   blocco (misurato: alta ancora 36px, invisibile ma presente). E una fascia FISSA invisibile sopra la
   testata ne intercetta i clic — un difetto che non si vede e si sente solo provando a cliccare.
   ⇒ si azzera anche il min-height e si toglie di mezzo ai puntatori. */
body:has(.fp-shrink.is-scrolled) .topbar {
  max-height: 0; min-height: 0; opacity: 0; pointer-events: none; visibility: hidden;
}

/* La parallasse ha bisogno di margine dentro il contenitore, se no scopre il bordo.
   ⚠ Lezione gia' pagata: una figura che scorre dentro un box ritagliato mostra il fondo agli estremi
   se non e' piu' ALTA del box. 118% con lo scarto ripartito sopra e sotto. */
.page-head__media, .band-dark__bg { overflow: hidden; }
.page-head__media img, .band-dark__bg img { height: 118%; margin-top: -9%; will-change: transform; }
.page-fig { will-change: transform; }

/* La fotografia apribile dichiara la propria affordance: ingrandisce appena al passaggio. */
a.zoom { display: block; overflow: hidden; cursor: zoom-in; }
a.zoom img { transition: transform 600ms var(--ease); }
a.zoom:hover img { transform: scale(1.03); }

/* Lightbox del tema: qui riceve i colori del verticale. */
.fp-lb { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(15,29,54,.94); padding: var(--space-6); }
.fp-lb.is-open { display: flex; }
.fp-lb__img { max-width: min(96vw, 1400px); max-height: 90vh; object-fit: contain; }
.fp-lb__x, .fp-lb__nav { position: absolute; background: transparent; border: 1px solid rgba(244,246,250,.4);
  color: var(--on-dark); width: 46px; height: 46px; font-size: 1.4rem; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center; }
.fp-lb__x { top: var(--space-5); right: var(--space-5); }
.fp-lb__nav { top: 50%; transform: translateY(-50%); }
.fp-lb__prev { left: var(--space-5); } .fp-lb__next { right: var(--space-5); }
.fp-lb__nav svg { width: 22px; height: 22px; }
.fp-lb__x:hover, .fp-lb__nav:hover { background: var(--brand-mid); border-color: var(--brand-mid); }

/* Il filetto dell'occhiello si DISEGNA quando la sezione entra: un segno che arriva, non che c'e' e basta. */
.reveal .eyebrow::after, .section-intro.reveal .eyebrow::after { transform: scaleX(0); transform-origin: left; }
.reveal.is-visible .eyebrow::after, .section-intro.reveal.is-visible .eyebrow::after {
  transform: scaleX(1); transition: transform 700ms var(--ease) 180ms;
}
@media (prefers-reduced-motion: reduce) {
  .reveal .eyebrow::after { transform: none !important; transition: none !important; }
  a.zoom:hover img { transform: none; }
  .page-head__media img, .band-dark__bg img { height: 100%; margin-top: 0; }
}

/* Velo di raccordo in fondo alle bande chiare: toglie lo stacco netto fra due sezioni e da' continuita'.
   ⚠ `pointer-events:none` e altezza contenuta: e' atmosfera, non una superficie che intercetta il clic. */
.section:not(.section--alt)::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: clamp(60px, 8vw, 140px);
  background: var(--grad-velo); pointer-events: none;
}
/* La tessera si solleva e si accende: un gradiente appena percettibile al passaggio. */
.tile { background: var(--grad-carta); }
.tile:hover { background: linear-gradient(180deg, #FFFFFF 0%, var(--sage-tint) 100%); }
/* La scheda che galleggia sulla foto prende una carta con profondita'. */
.floatcard__card { background: var(--grad-carta); }

/* ============================ Banda MANIFESTO ============================ */
/* ⭐ La tesi del sito in grande, sopra una fotografia velata. Non e' una galleria (il componente IR si
   chiama `gallery` perche' era lo slot libero del catalogo chiuso): e' un manifesto tipografico, ed e'
   il momento in cui la pagina cambia respiro invece di continuare a elencare.
   ⚠ Il claim e' un <p>, non un titolo: la gerarchia dei titoli della home resta intatta (un solo h1). */
.manifesto {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--brand-dark); color: var(--on-dark);
  padding-block: clamp(5rem, 4rem + 7vw, 11rem);
}
.manifesto__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.manifesto__media img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; will-change: transform; }
.manifesto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, rgba(15,29,54,.95) 0%, rgba(15,29,54,.88) 50%, rgba(15,29,54,.66) 100%);
}
.manifesto__inner { max-width: 62rem; }
.manifesto .eyebrow { color: var(--accent-lt); }
/* Il claim e' il testo piu' grande del sito dopo l'h1 della testata: e' il punto in cui il sito parla. */
.manifesto__claim {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem);
  line-height: 1.04; letter-spacing: -0.02em; color: var(--on-dark);
  max-width: 18ch; margin-block: var(--space-4) var(--space-6); text-wrap: balance;
}
/* Filetto d'accento che accompagna il claim. */
.manifesto__claim::after {
  content: ""; display: block; width: 4rem; height: 3px; background: var(--accent); margin-top: var(--space-6);
}
.manifesto__lead { font-size: var(--text-md); color: var(--on-dark); max-width: 62ch; line-height: 1.7; }
.manifesto__body { color: var(--on-dark); max-width: 62ch; margin-top: var(--space-5); }
@media (prefers-reduced-motion: reduce) { .manifesto__media img { height: 100%; margin-top: 0; } }

/* ============================ Reparti e recapiti ============================ */
/* Chi risponde, e per che cosa: era materiale del cliente che viveva solo nel pie'. */
.reparti { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--tile-gap); }
.reparto {
  background: var(--grad-carta); border: var(--border); border-top: 3px solid var(--accent);
  padding: var(--space-6) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.reparto:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.reparto h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-mid); }
.reparto p { color: var(--ink-muted); font-size: .96rem; max-width: none; }
.reparto__tel, .reparto .map-link { margin-top: auto; font-weight: 600; color: var(--accent-ink); }
/* La scheda del reparto E' il bersaglio della chiamata: il recapito del reparto e' un dato della VOCE
   (il materiale lo attribuisce al reparto, non al centralino), e le uniche leaf del vocabolario sono
   titolo/testo/destinazione. Cosi' il numero resta leggibile nel testo e la scheda intera e' toccabile. */
a.reparto { text-decoration: none; }
a.reparto .via { margin-top: auto; }
a.reparto:hover .via, a.reparto:focus-visible .via { border-color: var(--accent); }
.scrivici { margin-top: var(--space-8); background: var(--grad-tint); border-left: 3px solid var(--brand-mid);
  padding: var(--space-6) var(--space-7); }
.scrivici h3 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.scrivici .checks li { max-width: none; }

/* ============================ Micro-interazioni ============================ */
/* ⚠ Rispondono a un GESTO voluto (il passaggio del puntatore), non arrivano da sole: e' la differenza
   fra un sito che si muove con eleganza e uno che si agita. Tutte spente su reduced-motion. */

/* La voce di menu prende un filetto che cresce da sinistra. */
.site-header .wp-block-navigation a { position: relative; }
.site-header .wp-block-navigation a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--accent-lt); transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease);
}
.site-header .wp-block-navigation a:hover::after { transform: scaleX(1); }

/* Il bottone si riempie da sinistra invece di cambiare colore di scatto. */
.btn { position: relative; overflow: hidden; z-index: 0; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brand-dark);
  transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease);
}
.btn--accent::before, .site-header .btn::before, .cta-band .btn::before { background: var(--accent-dark); }
.btn:hover::before { transform: scaleX(1); }

/* La fotografia della tessera respira al passaggio. */
.tile__media { overflow: hidden; }
.tile__media img { transition: transform 700ms var(--ease); }
.tile:hover .tile__media img { transform: scale(1.05); }

/* La voce della fisarmonica si sposta appena quando la si apre. */
.faq summary { transition: padding-left 240ms var(--ease), color 240ms var(--ease); }
.faq summary:hover, .faq details[open] summary { padding-left: var(--space-3); color: var(--accent-ink); }

/* La scheda persona: il ritratto si scopre. */
.person__photo { overflow: hidden; }
.person__photo img { transition: transform 700ms var(--ease); }
.person:hover .person__photo img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .site-header .wp-block-navigation a::after,
  .btn::before { transition: none; }
  .tile:hover .tile__media img, .person:hover .person__photo img { transform: none; }
  .faq summary:hover, .faq details[open] summary { padding-left: 0; }
}

/* ============================ Rifinitura 2026 ============================ */
/* Le voci di sezione numerate: un indice discreto che da' ordine alla lettura senza aggiungere parole.
   ⚠ `aria-hidden` via CSS non esiste: il numerale e' un ::before decorativo, quindi lo screen reader
   non lo legge e l'ordine del contenuto resta quello del testo. */
.grid-items { counter-reset: voce; }
.grid-item { counter-increment: voce; position: relative; padding-top: var(--space-5); }
.grid-item::before {
  content: counter(voce, decimal-leading-zero);
  position: absolute; top: 0; left: var(--space-4);
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; color: var(--accent-ink); opacity: .55;
}

/* Filetto d'accento sull'occhiello di sezione: lo stesso segno della testata, che ricorre. */
.section-intro .eyebrow::after {
  content: ""; display: block; width: 2.5rem; height: 2px; background: var(--accent); margin-top: var(--space-3);
}

/* Titoli di sezione: un filo piu' stretti e con la misura giusta — a riga piena un titolo si sfilaccia. */
.section-intro h2 { letter-spacing: -0.018em; }

/* La scheda persona prende una linea d'accento che cresce al passaggio. */
.person__photo { position: relative; }
.person__photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease);
}
.person:hover .person__photo::after { transform: scaleX(1); }

/* La tessera: il filetto superiore d'accento appare al passaggio, come le schede reparto. */
.tile { border-top: 3px solid transparent; transition: border-color var(--dur) var(--ease),
        transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.tile:hover { border-top-color: var(--accent); box-shadow: var(--shadow-md); }

/* La citazione costituzionale: virgolette in grande come segno tipografico. */
.quote { position: relative; }
.quote::before {
  content: "\201C"; position: absolute; left: -.1em; top: -.42em;
  font-family: var(--font-display); font-size: 4.5rem; line-height: 1;
  color: var(--accent-lt); opacity: .28; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .person__photo::after { transform: scaleX(1); transition: none; }
}

/* ============================ Entrata della testata ============================ */
/* ⚠ La testata sta SOPRA la piega: l'osservatore di scorrimento non la rivelerebbe mai (regola 2 la
   esclude, giustamente). Qui l'ingresso e' un'animazione CSS al caricamento — nessun JavaScript, e
   fail-visible: se le animazioni non partono il contenuto e' comunque a schermo, perche' lo stato
   finale e' il default e l'animazione lavora `backwards`. */
@keyframes fp-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fp-entra-foto { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.hero__panel > * { animation: fp-entra 700ms var(--ease) backwards; }
.hero__panel > .eyebrow      { animation-delay: 80ms; }
.hero__panel > h1            { animation-delay: 180ms; }
.hero__panel > .hero__lead   { animation-delay: 300ms; }
.hero__panel > .hero__actions{ animation-delay: 420ms; }
.hero__media img { animation: fp-entra-foto 1100ms var(--ease) backwards; animation-delay: 60ms; }

/* La testata di pagina entra con lo stesso passo. */
.page-head .container > * { animation: fp-entra 640ms var(--ease) backwards; }
.page-head .container > .eyebrow { animation-delay: 60ms; }
.page-head .container > h1 { animation-delay: 150ms; }
.page-head .container > .lead { animation-delay: 260ms; }

/* Il claim del manifesto arriva RIGA PER RIGA: e' il momento in cui il sito parla, e vale un ingresso
   proprio. Il testo resta selezionabile e leggibile dall'assistiva (nessun contenuto viene rimosso). */
.manifesto__claim { overflow: hidden; }
.js .manifesto__inner.is-visible .manifesto__claim { animation: fp-entra 900ms var(--ease) 120ms backwards; }

@media (prefers-reduced-motion: reduce) {
  .hero__panel > *, .hero__media img, .page-head .container > *,
  .js .manifesto__inner.is-visible .manifesto__claim { animation: none !important; }
}

/* ============================ Social nel pie', in grande ============================ */
/* Nella fascia di servizio erano tre bersagli da 30px persi in un angolo. Qui hanno una colonna propria,
   il nome accanto al segno e un'area di tocco vera. */
.social-list { display: grid; gap: var(--space-3); }
.social-big {
  display: inline-flex; align-items: center; gap: var(--space-4);
  color: var(--on-dark-muted); min-height: 44px;
  transition: color var(--dur) var(--ease);
}
.social-big__ico {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(244,246,250,.24); border-radius: 999px;
  background: rgba(244,246,250,.05);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* ⚠ Il segno si dipinge con la MASCHERA: un SVG dentro <img> non eredita `currentColor` e ripiegherebbe
   sul nero, invisibile su un pie' navy. */
.social-big__ico::before {
  content: ""; width: 19px; height: 19px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.social-list li:nth-child(1) .social-big__ico { --ico: url("../assets/img/icons/facebook.svg"); }
.social-list li:nth-child(2) .social-big__ico { --ico: url("../assets/img/icons/instagram.svg"); }
.social-list li:nth-child(3) .social-big__ico { --ico: url("../assets/img/icons/linkedin.svg"); }
.social-big__txt { font-size: .94rem; font-weight: 600; letter-spacing: .02em; }
.social-big:hover { color: var(--on-dark); }
.social-big:hover .social-big__ico {
  background: var(--brand-mid); border-color: var(--brand-mid); transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .social-big:hover .social-big__ico { transform: none; } }

/* ============================ Scheda del REFERENTE ============================ */
/* ⚠ Prima era un elenco `<dl>`: sei righe etichetta/valore impilate, alte 287px per tre informazioni.
   Il nome — la sola cosa che si cerca — pesava quanto l'etichetta «Telefono», e i due recapiti, pur
   essendo gia' link `tel:`/`mailto:`, non sembravano toccabili.
   Ora e' una SCHEDA: chi e' a sinistra, come raggiungerlo a destra, con due bersagli veri. */
.referente {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(var(--space-5), 3vw, var(--space-8));
  align-items: center;
  background: var(--grad-carta);
  border: var(--border); border-left: 3px solid var(--accent);
  padding: clamp(var(--space-5), 2.6vw, var(--space-7));
  position: relative;
}
.referente__k {
  grid-column: 1 / -1;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-ink);
}
.referente__k::after {
  content: ""; display: block; width: 2.5rem; height: 2px; background: var(--accent);
  margin-top: var(--space-3); margin-bottom: calc(var(--space-2) * -1);
}
/* Chi e': il monogramma fa da ancoraggio umano dove non c'e' una fotografia — e non ce n'e', perche'
   il cliente non ha ritratti dei referenti e inventarne uno sarebbe una foto finta. */
.referente__chi { display: flex; align-items: center; gap: var(--space-5); }
.referente__sigla {
  width: 62px; height: 62px; flex: none;
  display: grid; place-items: center;
  background: var(--grad-navy); color: var(--on-dark);
  font-family: var(--font-display); font-weight: 700; font-size: 1.24rem; letter-spacing: .04em;
  border-radius: 999px;
  box-shadow: 0 10px 26px -16px rgba(15,29,54,.85);
}
/* Il nome e' la cosa che si cerca: prende la scala di un titolo. */
.referente__nome {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); line-height: 1.15; letter-spacing: -0.015em;
  color: var(--brand); max-width: none;
}
.referente__ruolo {
  margin-top: var(--space-2); color: var(--ink-muted); font-size: .94rem; max-width: none;
}

/* Le due VIE per raggiungerlo: bersagli, non righe di tabella. */
.referente__vie { display: grid; gap: var(--space-3); }
.via {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); min-height: 56px;
  background: var(--paper); border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.via__ico {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: var(--sage-tint); color: var(--brand-mid);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* ⚠ Maschera, non <img>: un SVG dentro <img> non eredita `currentColor`. */
.via__ico::before {
  content: ""; width: 17px; height: 17px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.via--tel  .via__ico { --ico: url("../assets/img/icons/tel.svg"); }
.via--mail .via__ico { --ico: url("../assets/img/icons/mail.svg"); }
.via__testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.via__testo small {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
}
/* ⚠ L'email e' lunga: a schermo stretto va spezzata invece di allargare la pagina. */
.via--mail .via__testo { overflow-wrap: anywhere; }
.via { color: var(--ink); font-weight: 600; font-size: .96rem; }
.via:hover {
  border-color: var(--brand-mid); transform: translateX(3px);
  box-shadow: 0 10px 24px -18px rgba(15,29,54,.75);
}
.via:hover .via__ico { background: var(--brand-mid); color: var(--on-dark); }
@media (max-width: 899.98px) {
  .referente { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .via:hover { transform: none; } }

/* Variante compatta della via, per le tre schede reparto affiancate. */
.via--sm { padding: var(--space-3) var(--space-4); min-height: 48px; gap: var(--space-3); margin-top: auto; }
.via--sm .via__ico { width: 28px; height: 28px; }
.via--sm .via__ico::before { width: 14px; height: 14px; }
.via--sm .via__testo { font-size: .9rem; }
.via--map .via__ico { --ico: url("../assets/img/icons/mappa.svg"); }

/* ============================ Raccordo fra due bande scure ============================ */
/* ⚠ Dove la banda di chiusura segue una banda fotografica scura, il passaggio era un GRADINO NETTO fra
   due blu: misurato rgb(15,28,50) → rgb(33,64,117) in una riga sola. Fra due toni cosi' vicini un
   gradino non legge come «due sezioni», legge come UNA RIGA disegnata — ed e' quello che si vedeva.
   La banda di chiusura riparte quindi dal tono con cui l'altra finisce e schiarisce scendendo: il
   confine sparisce e le due bande diventano un unico movimento.
   ⚠ Vale solo quando sono ADIACENTI: altrove la banda di chiusura tiene il proprio gradiente. */
.band-dark + .cta-band,
.manifesto + .cta-band {
  background: linear-gradient(180deg, var(--night) 0%, var(--brand-dark) 34%, var(--brand) 100%);
}