/* components.css — agri_supplier. Istituzionale di campagna: testata SCURA full-bleed che può ospitare
   un video, campiture verdi piene che si incastrano, griglia 2×2 di comparti su banda scura, rullo dei
   marchi trattati, bande split per i servizi. Riferimento distillato: BeLogistics2 (categoria «Aziende»).
   Contrasti WCAG AA verificati su 23 coppie (ink/paper 17,44 · on_dark/brand 8,59 · accent/brand 5,14 ·
   accent_ink/paper 5,74 · on_dark_muted/brand 5,70). VINCOLI: mai bianco su --accent (1,67), mai
   --accent su fondo chiaro (1,67 su carta, 1,52 su superficie), mai --accent-ink su fondo scuro (1,50).
   Vedi tokens.css. */

/* ---------- Impianto ---------- */
.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
/* Colonna stretta: SOLO per le pagine legali, dove il testo è normativo e la riga lunga stanca.
   ⚠ Non è la misura di lettura delle pagine di contenuto: quelle prendono tutta la colonna. */
.container--narrow { width: min(76ch, 100% - var(--gutter) * 2); }
.section { padding-block: var(--section-y); background: var(--paper); }
/* ⚠ Una sfumatura si verifica sulla fermata PEGGIORE, non sul token piatto: qui l'inchiostro fa
   15,87 sull'osso e 17,44 sulla carta — il minimo è 15,87, largo. Il difetto da non ripetere è la
   sfumatura che resta «in palette» ma porta il testo sotto soglia a metà strada. */
.section--alt { background: linear-gradient(178deg, var(--surface) 0%, var(--paper) 100%); }
.section--tint { background: var(--sage-tint); }
/* Per le pagine con MOLTE sezioni il --section-y pieno fa scorrere troppo (regola 6). */
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--dark { background: var(--brand); color: var(--on-dark); }
.section--dark .lead { color: var(--on-dark-muted); }

.section-intro { max-width: none; margin-bottom: var(--space-8); }
.section-intro--center { text-align: center; }
/* ⚠ Su una testata di sezione centrata la misura torna utile, ma sul PARAGRAFO e generosa: senza,
   il titolo resta al centro e il testo si allarga fino ai bordi, che è peggio di entrambe. */
.section-intro--center p { margin-inline: auto; max-width: 74ch; }

/* Filetto d'accento sotto i titoli di sezione: il device che sostituisce «una parola nel colore
   accento», che dalla copy NON può passare perché la copy dall'IR è sempre escapata. */
.sec-rule { display: block; width: 56px; height: 4px; background: var(--accent); margin-bottom: var(--space-5); }
.section--dark .sec-rule, .comparti .sec-rule { background: var(--accent); }
.section-intro--center .sec-rule { margin-inline: auto; }

/* ---------- Bottoni: spigolo vivo, la categoria non arrotonda ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-base);
  padding: var(--space-3) var(--space-6); border: 2px solid transparent; border-radius: var(--radius);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* ⚠ Il bottone primario è ORO con inchiostro sopra (10,44). Il bianco sull'oro fa 1,67: mai. */
.btn--primary { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--solid { background: var(--brand); color: var(--on-dark); border-color: var(--brand); }
.btn--solid:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
/* Il fantasma su fondo scuro porta il bianco; su chiaro porta il verde. Sono due token diversi. */
.btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--hairline-on-dark); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: var(--on-dark); }
.btn--outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--outline:hover { background: var(--brand); color: var(--on-dark); }

/* ---------- Testata del sito ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--brand); color: var(--on-dark); }
.site-header.is-scrolled { background: var(--brand-dark); box-shadow: 0 10px 30px rgba(14,38,32,.34); }
/* ⚠ Niente backdrop-filter: crea un containing-block per il position:fixed e limiterebbe l'overlay del
   menu all'ALTEZZA DELL'HEADER. È il difetto ricorrente di ogni verticale con testata «a vetro». */
.site-header__row {
  display: flex; align-items: center; gap: var(--space-5);
  padding-block: var(--space-4); min-height: 76px;
}
/* ⚠ Regola 16: nav e CTA hanno un margine di blocco messo da WP che li spinge sotto il centro.
   L'allineamento è `center`, non `baseline`: con un marchio alto ~46px il baseline lascia più spazio
   sopra che sotto. */
.site-header__row > * { align-self: center; margin-block: 0; }

.wordmark { display: flex; align-items: center; gap: var(--space-3); }
.wordmark__mark { width: 46px; height: 46px; flex: 0 0 auto; }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark__name { font-family: var(--font-display); font-weight: 800; font-size: 1.32rem;
  letter-spacing: -0.02em; color: var(--on-dark); }
.wordmark__sub { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark-muted); }

/* La nav spinge a destra; il telefono e la CTA restano l'ultima zona. */
.site-nav { margin-left: auto; }
/* ⚠ A pari specificità vince il CSS dei BLOCCHI, iniettato dopo il tema: il colore delle voci si
   dichiara con un livello in più (.site-header .site-nav), non su .site-nav da solo. */
.site-header .site-nav .wp-block-navigation-item__content {
  font-family: var(--font-display); font-weight: 600; font-size: .97rem;
  color: var(--on-dark); padding-block: var(--space-2);
}
.site-header .site-nav .wp-block-navigation-item__content:hover { color: var(--accent); }
.site-header .site-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content { color: var(--accent); }
/* Il sotto-menu desktop: WP lo tiene BIANCO con un selettore che vince a pari specificità. */
.site-header .site-nav .wp-block-navigation__submenu-container {
  background: var(--brand-dark); border: 1px solid var(--hairline-on-dark); border-radius: var(--radius);
  padding-block: var(--space-2); min-width: 232px;
}
.site-header .site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--on-dark); padding: var(--space-2) var(--space-4);
}

.site-header__tel { display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; color: var(--on-dark); white-space: nowrap; }
.site-header__tel svg { width: 18px; height: 18px; flex: 0 0 auto; }
.site-header__tel:hover { color: var(--accent); }
/* Regola 4: la CTA non tocca il bordo. */
.site-header__cta { margin-left: var(--space-2); }

@media (max-width: 1023.98px) {
  .site-header__tel, .site-header__cta { display: none; }
  .wordmark__sub { display: none; }
}

/* ---------- Menu mobile: overlay wp:navigation ----------
   ⚠ Le media query NON aggiungono specificità: queste regole vivono fuori da @media apposta, e si
   qualificano con `.is-menu-open`, che esiste solo quando l'overlay è aperto.
   ⚠ Il colpevole dell'allineamento a destra è il PRIMO antenato largo quanto il viewport con
   l'allineamento contrario: si corregge lì, risalendo la catena. */
.wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* ⚠⚠ WP dipinge l'overlay di BIANCO con questa regola, iniettata DOPO il tema:
     `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)`
   che vale (0,5,0) — cinque classi, non quattro. La versione a quattro classi che si legge in giro
   (`.responsive-container.is-menu-open:not(.has-background):not(.disable-default-overlay)`) e' (0,4,0)
   e PERDE: il menu resta bianco, e con le voci bianche il contrasto misurato e' 1.00 — invisibile.
   Si vince ricopiando il SUO schema e aggiungendo un antenato nostro: (0,6,0). Misurato nel DOM
   calcolato, non dedotto dalla lettura: prima di questa riga il fondo reso era rgb(255,255,255). */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  background-color: var(--brand-dark); color: var(--on-dark);
}
/* ⚠ Il padding orizzontale va sul CONTENUTO, non sull'overlay: sull'overlay WP lo azzera. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%; align-items: stretch; justify-content: flex-start;
  padding-inline: var(--gutter); padding-bottom: 96px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
  width: 100%; align-items: stretch; gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
/* ⚠ L'<a> è display:block e si stringe al contenuto: senza width 100% il flex-column lo allinea a DESTRA. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width: 100%; text-align: left; font-family: var(--font-display); font-weight: 700;
  font-size: 1.28rem; color: var(--on-dark);
  padding-block: var(--space-4); border-bottom: 1px solid var(--hairline-on-dark);
}
/* Il sotto-menu su mobile è INLINE: il dropdown-card di WP è desktop e su mobile è illeggibile. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important; border: 0 !important; box-shadow: none !important;
  background: none !important; padding-left: var(--space-5); min-width: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 1.02rem; font-weight: 400; color: var(--on-dark-muted);
}
/* ⚠ Il bottone di chiusura di WP nasce sotto i 44px di bersaglio minimo e appiccicato al bordo. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
  top: var(--space-5); right: var(--gutter);
  width: 48px; height: 48px; padding: 10px; color: var(--on-dark); background: transparent;
}
.wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.wp-block-navigation__responsive-container-open { width: 48px; height: 48px; padding: 10px; color: var(--on-dark); }
.wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }

/* ---------- Testata di pagina (NON riusa la size dell'hero — regola 6) ---------- */
/* bianco su verde-livrea 8,59 · su verde profondo 12,46 — peggiore 8,59. */
.page-head { background: linear-gradient(100deg, var(--brand) 0%, var(--brand-dark) 100%); color: var(--on-dark); padding-block: var(--space-8) var(--space-7); }
.page-head h1 { font-size: var(--text-2xl); }
.page-head .lead { color: var(--on-dark-muted); margin-top: var(--space-4); }

/* ---------- Testata: campitura scura full-bleed, con o senza media ----------
   Il device della categoria (BeLogistics2): fondo scuro pieno, media dietro, titolo grande con una
   parola nell'accento, due azioni. È l'unico telaio della categoria che regge un VIDEO. */
.hero { position: relative; isolation: isolate; background: var(--brand-deep); color: var(--on-dark);
  padding-block: clamp(4.5rem, 3rem + 8vw, 9.5rem); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Velo a tre fermate: il titolo deve reggere sia su un fotogramma assolato sia su uno scuro.
   ⚠ Il velo si tara sul fotogramma PEGGIORE del filmato, non sul primo: un video cambia luminosità. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(102deg, rgb(var(--veil-rgb) / .92) 0%, rgb(var(--veil-rgb) / .78) 46%, rgb(var(--veil-rgb) / .42) 100%);
}
.hero__inner { max-width: 62ch; }
.hero h1 { margin-bottom: var(--space-5); }
/* «dal 1964» nell'accento: il device di BeLogistics2 («since 1990»). ⚠ Non può passare dalla copy —
   che dall'IR è sempre escapata — quindi è un elemento del pattern, non una parola marcata nel testo. */
.hero__accent { color: var(--accent); }
.hero .lead { color: var(--on-dark-muted); font-size: var(--text-md); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }

/* Variante design-only (D-O6): nessuna foto regge la testata → campitura piena e una texture di
   solchi, che è materia senza chiedere un'immagine. MAI una foto finta. */
/* Variante fotografica: la media riempie la banda dietro il velo. Nessuna regola in più — il telaio
   è lo stesso della variante video, cambia solo che cosa sta nel contenitore. */
.hero--photo .hero__media { display: block; }
.hero--design .hero__media { display: none; }
.hero--design::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: repeating-linear-gradient(102deg, transparent 0 26px, rgba(233,196,106,.07) 26px 28px);
}

/* Il video della testata. ⚠ `muted` è ciò che rende lecito l'autoplay; senza controlli non c'è nulla
   da comandare. Nessuna richiesta di rete esterna: niente YouTube, niente Vimeo (zero-live).
   ⚠ Il file è self-hosted e servito dal tema: il peso è una decisione di progetto, non del verticale. */
.hero__video { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  /* Chi ha chiesto meno movimento vede il POSTER, non il filmato: il video si ferma e resta l'immagine. */
  .hero__media video { display: none; }
  .hero__media .hero__poster { display: block; }
}
.hero__poster { display: none; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Azienda: split testo + foto (il team) ---------- */
.azienda { background: var(--paper); padding-block: var(--section-y); }
.azienda__grid { display: grid; gap: var(--space-8); align-items: center;
  grid-template-columns: 1fr calc(var(--split-media-share) * 100%); }
.azienda__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-media); }
/* ⚠ Regola 21: il margine sopra la foto e quello sotto devono essere UGUALI. */
.azienda__media figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }
.azienda .prose p + p { margin-top: var(--space-4); }
/* Senza foto la sezione cambia TELAIO, non solo contenuto: due colonne di TESTO, non una colonna
   stretta con la metà destra vuota (regola owner). */
.azienda--nomedia .azienda__grid { grid-template-columns: 1fr; }
.azienda--nomedia .prose { columns: 2; column-gap: var(--space-8); }
@media (max-width: 899.98px) {
  .azienda__grid { grid-template-columns: 1fr; }
  .azienda--nomedia .prose { columns: 1; }
}

.checks { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.checks li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checks li::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: .55em;
  background: var(--accent); }

/* ---------- Colture: le card a icona della categoria (banda chiara) ---------- */
/* ink su osso 15,87 · su salvia-carta 14,92 — peggiore 14,92. */
.colture { background: linear-gradient(170deg, var(--surface) 0%, var(--sage-tint) 100%); padding-block: var(--section-y); }
.colture__grid { display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.coltura {
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--brand);
  padding: var(--space-6) var(--space-5); text-align: center;
  transition: border-top-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.coltura:hover { border-top-color: var(--accent); transform: translateY(-3px); }
.coltura__icon { width: 44px; height: 44px; margin: 0 auto var(--space-4); color: var(--brand); }
/* ⚠ Un SVG dentro <img> NON eredita currentColor: le icone sono inline nel pattern, non <img>. */
.coltura h3 { font-size: var(--text-base); font-weight: 700; }
.coltura p { font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--space-2); }

/* ---------- Comparti: la griglia 2×2 su banda scura (il device forte di BeLogistics2) ---------- */
/* bianco su verde profondo 12,46 · su verde quasi-nero 15,95 — peggiore 12,46. */
.comparti { background: linear-gradient(168deg, var(--brand-dark) 0%, var(--brand-deep) 100%); color: var(--on-dark); padding-block: var(--section-y); }
.comparti .lead { color: var(--on-dark-muted); }
.comparti__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 767.98px) { .comparti__grid { grid-template-columns: 1fr; } }
.comparto { background: var(--brand); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; }
.comparto__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--brand-deep); }
.comparto__media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur) var(--ease); }
.comparto:hover .comparto__media img { transform: scale(1.04); }
.comparto__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.comparto h3 { color: var(--accent); font-size: var(--text-lg); }
.comparto p { color: var(--on-dark-muted); margin-top: var(--space-3); flex: 1; }
.comparto__more { margin-top: var(--space-5); font-family: var(--font-display); font-weight: 700;
  color: var(--on-dark); display: inline-flex; gap: var(--space-2); align-items: center; }
.comparto__more:hover { color: var(--accent); }
/* Variante senza foto: la tessera resta piena e prende una campitura, mai un riquadro vuoto. */
.comparto--nomedia .comparto__media { display: none; }
.comparto--nomedia { border-left: 4px solid var(--accent); }

/* Coda della banda comparti: il capoverso che chiude la sezione, su fondo scuro. Prende TUTTA la
   larghezza e va a capo da solo — senza foto accanto, una colonna stretta lascerebbe metà banda vuota. */
.comparti__coda { margin-top: var(--space-8); }
.comparti__coda p { color: var(--on-dark-muted); max-width: none; }

/* ---------- Rullo dei MARCHI trattati ----------
   Il documento del cliente pilota chiede «una stringa stretta con i loghi a rullo in movimento».
   ⚠ I loghi dei marchi sono asset di DESIGN (@design), non foto: come `type: photo` cadrebbero sulle
   soglie fotografiche (lato corto ≥800) e un marchio è largo e basso.
   ⚠ I loghi restano a COLORI: per un distributore sono l'argomento di vendita.
   ⚠ La striscia è decorativa e duplicata per il ciclo continuo: la seconda metà è aria-hidden, così
   uno screen reader non legge i marchi due volte. */
.marchi { background: var(--paper); padding-block: var(--space-7); border-block: 1px solid var(--line); }
.marchi--on-dark { background: var(--brand-deep); border-color: var(--hairline-on-dark); }
.marchi__label { text-align: center; font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: var(--space-5); }
.marchi--on-dark .marchi__label { color: var(--on-dark-muted); }
.marchi__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marchi__track { display: flex; width: max-content; align-items: center; gap: var(--space-7); }
.marchi__cell { flex: 0 0 auto; width: 132px; height: 62px; display: flex; align-items: center;
  justify-content: center; background: var(--paper); border-radius: var(--radius-media); padding: var(--space-2); }
/* ⚠ Su fondo scuro la cella resta CHIARA: i loghi dei marchi sono nati su bianco e molti hanno il
   fondo bianco cotto nei pixel. Una cella trasparente li mostrerebbe come rettangoli bianchi sfalsati. */
.marchi__cell img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
  .marchi__track { animation: fp-marquee var(--marquee-dur) linear infinite; }
  .marchi__viewport:hover .marchi__track { animation-play-state: paused; }
}
/* ⚠ Il rullo scorre di METÀ della pista, non del 100%: la pista contiene due copie della sequenza,
   quindi -50% riporta esattamente all'inizio e il ciclo non salta. */
@keyframes fp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Servizi: bande split alternate ---------- */
.servizi { background: var(--paper); padding-block: var(--section-y); }
.servizio { display: grid; gap: var(--space-8); align-items: center;
  grid-template-columns: 1fr calc(var(--split-media-share) * 100%); }
.servizio + .servizio { margin-top: var(--space-8); padding-top: var(--space-8);
  border-top: 1px solid var(--line); }
/* Le foto si alternano di lato: distribuite, non concentrate in fondo (regola 13). */
.servizio:nth-child(even) .servizio__media { order: -1; }
.servizio__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-media); }
.servizio__num { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl);
  color: var(--accent-ink); display: block; margin-bottom: var(--space-2); }
.servizio h3 { font-size: var(--text-lg); }
.servizio p { margin-top: var(--space-4); }
/* Alternanza ESPLICITA quando ogni banda è una sezione a sé: `:nth-child(even)` conta i fratelli
   DENTRO il proprio contenitore e in quel caso non alterna nulla — ogni sezione ha un figlio solo. */
.servizio--rovescio .servizio__media { order: -1; }
/* Senza foto il servizio prende TUTTA la larghezza e va a capo da solo (regola owner). */
.servizio--nomedia { grid-template-columns: 1fr; }
@media (max-width: 899.98px) {
  .servizio, .servizio--nomedia { grid-template-columns: 1fr; }
  .servizio:nth-child(even) .servizio__media { order: 0; }
}

/* ---------- Gallery: mosaico di tessere (device di BeCorporation2) ----------
   ⚠ Il mosaico è il telaio giusto quando le foto sono MOLTE e nessuna deve reggere da sola. */
.gallery { background: var(--surface); padding-block: var(--section-y); }
.gallery__grid { display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); grid-auto-rows: 320px; }
.gallery__item { overflow: hidden; border-radius: var(--radius-media); background: var(--surface-2); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.gallery__item:hover img { transform: scale(1.05); }
/* Le tessere alte spezzano la griglia e le tolgono l'aria da provino a contatto. ⚠ Lo sfalsamento a
   nth-child CONOSCE il numero di colonne: qui vale solo dove le colonne sono almeno 3. */
@media (min-width: 900px) {
  .gallery__item:nth-child(6n + 1) { grid-row: span 2; }
  .gallery__item:nth-child(6n + 4) { grid-row: span 2; }
}
.gallery__group + .gallery__group { margin-top: var(--space-8); }
.gallery__group h3 { margin-bottom: var(--space-5); }

/* ---------- News: le schede video (device della video-card di BeCompany5) ---------- */
.news { background: var(--paper); padding-block: var(--section-y); }
.news__grid { display: grid; gap: var(--space-7); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* ⚠ Con UNA sola scheda la griglia lascerebbe metà banda vuota: la scheda unica prende tutta la
   larghezza e il filmato diventa il contenuto della pagina, che è quello che è. */
.news__grid:has(> .news__item:only-child) { grid-template-columns: 1fr; }
.news__item:only-child .news__frame { max-height: 70vh; }
.news__item { display: flex; flex-direction: column; }
.news__frame { position: relative; background: var(--brand-deep); border-radius: var(--radius-media);
  overflow: hidden; aspect-ratio: 16 / 9; }
.news__frame video, .news__frame img { width: 100%; height: 100%; object-fit: cover; }
.news__item h3 { margin-top: var(--space-5); }
.news__item p { margin-top: var(--space-3); color: var(--ink-muted); }
.news__meta { font-size: var(--text-sm); color: var(--accent-ink); font-family: var(--font-display);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-top: var(--space-4); }

/* ---------- Fascia di contatto ---------- */
/* bianco su verde-livrea 8,59 · su verde profondo 12,46 — peggiore 8,59. */
.cta-band { background: linear-gradient(100deg, var(--brand) 0%, var(--brand-dark) 100%); color: var(--on-dark); padding-block: var(--space-8); }
.cta-band__grid { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: 1.4fr auto; }
.cta-band .lead { color: var(--on-dark-muted); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
@media (max-width: 767.98px) { .cta-band__grid { grid-template-columns: 1fr; } }

/* Banda fotografica di testa per le pagine che altrimenti non porterebbero immagini: una pagina di
   soli campi e recapiti legge come un modulo, non come un sito. Alta, a tutta larghezza, con il velo
   di marca sopra perché il testo che ci passa davanti resti leggibile. */
.page-photo { position: relative; height: clamp(220px, 26vw, 380px); overflow: hidden; background: var(--brand-deep); }
.page-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--veil-rgb) / .55) 0%, rgb(var(--veil-rgb) / .12) 45%, rgb(var(--veil-rgb) / .55) 100%); }

/* ---------- Pagina Contatti: due colonne (regola 19) ---------- */
.contact-cols { display: grid; gap: var(--space-8); grid-template-columns: 1.1fr .9fr; align-items: start; }
@media (max-width: 899.98px) { .contact-cols { grid-template-columns: 1fr; } }
.contact-form .field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.contact-form label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.contact-form input, .contact-form textarea {
  font: inherit; padding: var(--space-3) var(--space-4); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
.contact-form input:focus-visible, .contact-form textarea:focus-visible { border-color: var(--brand); }
.contact-form .row { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 599.98px) { .contact-form .row { grid-template-columns: 1fr; } }
/* ⚠ `.consent` è un flex: se il testo contiene un <a> si spezza in più flex-item. Il testo — link
   incluso — sta dentro UN solo <span>. */
.consent { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-5); }
.consent input { margin-top: .3em; }
.consent label { font-size: var(--text-sm); color: var(--ink-muted); }
.consent a { color: var(--accent-ink); text-decoration: underline; }

/* ⚠ L'aside dei recapiti sta su fondo CHIARO: non riusa la fascia scura dell'home, che invertirebbe
   i colori e li porterebbe sotto soglia. */
.contact-info { background: var(--sage-tint); border-left: 4px solid var(--brand); padding: var(--space-6); }
.contact-info dt { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brand); margin-top: var(--space-5); }
.contact-info dt:first-of-type { margin-top: 0; }
.contact-info dd { margin: var(--space-1) 0 0; }
.contact-info a { color: var(--accent-ink); }
.contact-info a:hover { text-decoration: underline; }
/* I reparti: molte voci brevi → griglia a 2 colonne, non fasce a tutta larghezza (regola 5). */
.reparti-titolo { margin-top: var(--space-8); margin-bottom: var(--space-5); }
.reparti-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.reparto { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--brand);
  padding: var(--space-5); }
.reparto h3 { font-size: var(--text-base); color: var(--brand); }
.reparto ul { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.reparto a { color: var(--accent-ink); }
.reparto a:hover { text-decoration: underline; }

/* ---------- Piè di pagina: 4 colonne di link (device della categoria) ---------- */
.site-footer { background: linear-gradient(180deg, var(--brand-dark) 0%, var(--footer-deep) 100%);
  color: var(--on-dark); padding-block: var(--space-8) var(--space-6); }
.site-footer__grid { display: grid; gap: var(--space-7);
  grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 899.98px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px) { .site-footer__grid { grid-template-columns: 1fr; } }
/* ⚠ Le intestazioni di colonna sono h2 (l'ordine dei titoli non deve saltare un livello su una pagina
   il cui unico titolo è l'h1). Il selettore che le stila deve seguirle: rimasto su h3, il piè le
   mostrava a 33,6px in bianco invece della piccola etichetta oro — misurato nel DOM, non letto. */
.site-footer h2, .site-footer h3 { font-size: var(--text-sm); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-4); }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer a:hover { color: var(--accent); }
.site-footer p, .site-footer li { color: var(--on-dark-muted); }
.site-footer__bottom { margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--hairline-on-dark); display: flex; flex-wrap: wrap;
  gap: var(--space-4); align-items: center; justify-content: space-between;
  font-size: var(--text-sm); color: var(--on-dark-muted); }
.powered { display: inline-flex; align-items: center; gap: var(--space-2); }
.powered img { width: 20px; height: 20px; }

/* ---------- Barra CTA fissa su mobile ---------- */
.cta-bar { display: none; }
@media (max-width: 767.98px) {
  .cta-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: var(--hairline-on-dark); box-shadow: var(--shadow-bar);
  }
  .cta-bar a { display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 56px; font-family: var(--font-display); font-weight: 700; }
  .cta-bar__tel { background: var(--brand); color: var(--on-dark); }
  /* ⚠ Il tasto WhatsApp porta l'INCHIOSTRO sull'oro (10,44), mai il bianco (1,67). */
  .cta-bar__wa { background: var(--accent); color: var(--ink); position: relative; }
  .cta-bar a svg { width: 20px; height: 20px; }
  /* La barra non deve coprire l'ultima riga del piè. */
  .site-footer { padding-bottom: calc(var(--space-6) + 56px); }
}
/* Pulsazione del tasto WhatsApp: richiesta esplicita del cliente pilota. ⚠ Sta dentro
   `no-preference`, quindi chi ha chiesto meno movimento vede il tasto FERMO — non è polish opzionale. */
@media (prefers-reduced-motion: no-preference) {
  .cta-bar__wa::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(233,196,106,.85);
    animation: fp-wa-pulse 2.6s ease-in-out infinite;
  }
  .site-header__wa { animation: fp-wa-pulse 2.8s ease-in-out infinite; border-radius: var(--radius); }
}
@keyframes fp-wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(233,196,106,.7); }
  70% { box-shadow: 0 0 0 14px rgba(233,196,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(233,196,106,0); }
}

/* ---------- Prosa delle pagine legali ---------- */
.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-4); }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose p + p, .prose ul { margin-top: var(--space-4); }
.prose ul li { position: relative; padding-left: var(--space-5); }
.prose ul li + li { margin-top: var(--space-2); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--accent); }
.prose a { color: var(--accent-ink); text-decoration: underline; }

/* ---------- 404 ---------- */
.notfound { background: var(--brand-deep); color: var(--on-dark); padding-block: var(--space-10); text-align: center; }
.notfound .lead { color: var(--on-dark-muted); }
.notfound .btn { margin-top: var(--space-6); }