/* components.css — componenti di joinery_workshop (falegnameria che restaura e vernicia serramenti).
   Registro: struttura da BeEco3 (righe alternate mezza-foto/mezza-scheda), resa da BeArchitect6
   (indici numerati col filetto, freccia d'angolo, angoli vivi, aria).
   ⚠ Le linee decorative sono state RIMOSSE dopo la revisione dell'owner: prima quattro filetti verticali
   che attraversavano le tessere, poi una cornice a montanti ai bordi del contenitore. Nessuna delle due
   ha funzionato — su una pagina già ricca di fotografie una geometria in più è rumore, non registro.
   Il segno del verticale resta la CORNICE SFALSATA sulla singola fotografia, che è ancorata a un
   oggetto e non alla banda.
   I colori arrivano SOLO dai token di tokens.css.
   ⚠ --red e --red-ink NON sono ruoli della palette (il vocabolario dei ruoli è chiuso a 17 e non ha uno
   slot per una terza tinta): vivono come token di questo verticale, come già --night altrove. Il rosso
   non compare quindi fra i campioni dell'editor, ed è corretto — è l'enfasi del tema, non un colore che
   un redattore debba poter applicare a un blocco. */

/* ============================ Impalcatura ============================ */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }

/* ⭐ Le bande sono CAMPITURE, non tinte piatte: una superficie che vira leggermente ha profondità, e la
   pagina smette di leggersi come una pila di rettangoli. È anche ciò che separa due bande dello stesso
   ruolo ma di mestiere diverso (la banda alternata RESPIRA, la banda scura AGISCE). */
.section { padding-block: var(--section-y); background: var(--paper); position: relative; }
.section--alt { background: linear-gradient(172deg, var(--surface) 0%, var(--paper) 58%, var(--tint) 100%); }
.section--tint { background: linear-gradient(160deg, var(--tint) 0%, var(--surface) 100%); }
.section--dark {
  background: linear-gradient(146deg, var(--brand-dark) 0%, var(--brand) 46%, var(--brand-mid) 100%);
  color: var(--on-dark);
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-dark); }
.section--dark p, .section--dark li { color: var(--on-dark-muted); }
.section--tight { padding-block: calc(var(--section-y) * 0.64); }
/* Una quarta campitura: carta con un velo verde appena accennato. Serve a distinguere due bande chiare
   consecutive senza introdurre un colore nuovo. */
.section--velo { background: linear-gradient(200deg, var(--paper) 0%, var(--tint) 100%); }

/* ⭐ La fotografia che SCAVALCA il bordo inferiore della banda ed entra in quella dopo. Dà profondità e
   lega due sezioni che altrimenti sono due rettangoli impilati.
   ⚠ Serve `overflow:visible` sulla banda e un margine negativo misurato: senza, la foto viene tagliata. */
.overlap { position: relative; z-index: 2; margin-bottom: clamp(-7rem, -4rem - 5vw, -3rem); }
.section--spill { overflow: visible; padding-bottom: calc(var(--section-y) + clamp(3rem, 4rem + 5vw, 7rem)); }
@media (max-width: 860px) { .overlap { margin-bottom: 0; } .section--spill { padding-bottom: var(--section-y); } }

/* Intestazione di sezione: occhiello + titolo + sommario, allineati a sinistra come nel riferimento —
   il centrato è il registro dell'altro template, e qui la pagina si legge a bandiera. */
.section-intro { margin-bottom: var(--space-8); max-width: 52rem; }
/* ⚠ La misura di lettura vale sul PARAGRAFO, non sul contenitore: legarla all'intestazione capa anche
   il titolo, che è tre volte più grande, e lo manda a capo dove non serve. */
.section-intro > p { max-width: 62ch; color: var(--ink-muted); margin-top: var(--space-4); }
.section--dark .section-intro > p { color: var(--on-dark-muted); }
.section-intro h2 { margin: 0; }
.section-intro--center { margin-inline: auto; text-align: center; }
.section-intro--center > p { margin-inline: auto; }

/* Bottoni. ⚠ Il rosso regge il bianco (5,14) come SUPERFICIE: è così che si usa. Come TESTO non passa
   su --surface (4,33), e lì si usa --red-ink. Sul navy il rosso non ci va mai (2,16). */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--space-4) var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary { background: var(--brand); color: var(--on-dark); }
.btn--primary:hover { background: var(--brand-dark); }
/* «accent» nell'IR è la CTA primaria del verticale: qui è il rosso del marchio, l'unico punto d'enfasi. */
.btn--accent { background: var(--red); color: #FFFFFF; }
.btn--accent:hover { background: var(--red-ink); }
.btn--ghost { border-color: var(--brand); color: var(--brand); }
.btn--ghost:hover { background: var(--brand); color: var(--on-dark); }
.btn--on-dark { border-color: var(--accent); color: var(--on-dark); }
.btn--on-dark:hover { background: var(--accent); color: var(--ink); }
.btn--sm { padding: var(--space-3) var(--space-5); font-size: 0.82rem; }

/* Il link «Scopri di più» del sito del cliente, reso col filetto del registro. */
.more {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink);
}
.more::before {
  content: ""; width: 2.2rem; height: 1px; background: var(--accent);
  transition: width var(--dur) var(--ease);
}
.more:hover::before { width: 3.4rem; }
/* ⚠ `.more` nasce col ruolo «testo su chiaro» (--accent-ink): su navy misura 1,74. Ogni banda SCURA che
   lo ospita deve rimapparlo — l'elenco è chiuso e sta accanto alla regola, così non si dimentica.
   È il difetto pagato su furniture_showroom, dove la guardia guardava un verso solo. */
.on-dark .more, .section--dark .more, .cta-band .more, .site-footer .more, .page-head--dark .more { color: var(--accent-lt); }

/* ⭐ La freccia d'angolo del registro: sostituisce il «leggi tutto» sulle schede. È decoro, il testo
   accessibile lo porta l'ancora che la contiene. */
.arrow { display: inline-block; font-size: 1.5rem; line-height: 1; color: var(--accent-ink); transition: transform var(--dur) var(--ease); }
.on-dark .arrow, .section--dark .arrow { color: var(--accent-lt); }
a:hover > .arrow, .srv:hover .arrow, .card:hover .arrow { transform: translate(4px, -4px); }

/* ⭐ La cornice a filetto SFALSATA — il dettaglio fotografico del verticale.
   ⚠ Si ancora al contenitore della FOTOGRAFIA, mai alla tessera: la tessera è più alta perché contiene
   anche il testo, e una cornice in percentuale della tessera esce come un rettangolo di proporzioni
   diverse sospeso accanto all'immagine.
   ⚠ Niente overflow:hidden qui — taglierebbe via la cornice. Lo zoom della foto va sul FIGLIO. */
.framed { position: relative; }
.framed::before {
  content: ""; position: absolute; inset: 0;
  transform: translate(var(--frame-off), var(--frame-off));
  border: 1px solid var(--brand); pointer-events: none;
}
.framed--accent::before { border-color: var(--accent-ink); }
.section--dark .framed::before { border-color: var(--accent); }
/* Il ritaglio dello zoom sta sul figlio, così la cornice resta fuori dal taglio. */
.framed__clip { overflow: hidden; position: relative; }
.framed__clip img { transition: transform 480ms var(--ease); width: 100%; }
.framed:hover .framed__clip img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .framed:hover .framed__clip img { transform: none; } }

/* ⭐ Il medaglione circolare che scavalca la fotografia (registro BeArchitect6): qui porta la firma
   ecologica, che è il differenziale del mestiere. Testo --ink su --accent = 7,89. */
.medal {
  position: absolute; z-index: 2; display: grid; place-content: center; text-align: center;
  width: clamp(7rem, 12vw, 10rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--accent); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; padding: var(--space-3);
}
@media (max-width: 620px) { .medal { position: static; margin-block: var(--space-5); } }

/* ============================ Riga istituzionale ============================ */
/* La prima riga dell'hero attuale del cliente (indirizzo | orari) diventa una riga sopra la testata. */
.topbar { background: var(--brand-dark); color: var(--on-dark-muted); font-size: 0.82rem; }
.topbar__row {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: var(--topbar); flex-wrap: wrap;
}
.topbar__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar__item + .topbar__item::before { content: "·"; margin-right: var(--space-3); color: var(--accent); }
.topbar a:hover { color: var(--accent-lt); }
.topbar__phone { margin-left: auto; color: var(--on-dark); font-weight: 600; }
@media (max-width: 780px) { .topbar { display: none; } }

/* ============================ Testata ============================ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper); border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header__row {
  display: flex; align-items: center; gap: var(--space-6);
  min-height: var(--chrome);
  transition: min-height var(--dur) var(--ease);
}
/* ⚠ nav e CTA portano un margine di blocco proprio di WP che li spinge sotto il centro (regola 16). */
.site-header__row > * { align-self: center; margin-block: 0; }
/* ⚠ La classe è `is-scrolled`: è quella che reveal.js commuta DAVVERO su `.fp-shrink`. Con un nome
   inventato la regola resta scritta, valida e non applicata mai, e nessuna misura del CSS lo denuncia. */
.site-header.is-scrolled { box-shadow: 0 2px 18px rgba(14,33,56,.10); }
.site-header.is-scrolled .site-header__row { min-height: 66px; }
.site-header.is-scrolled .wordmark__mark { width: clamp(84px, 9vw, 108px); }

.wordmark { display: inline-flex; align-items: center; gap: var(--space-4); }
/* ⚠ Un marchio SVG si misura sulla LARGHEZZA, mai sull'altezza: con la sola `height` una riga contesa
   gli stringe il box e l'inchiostro rimpicciolisce senza che nessuna misura del box lo denunci.
   Qui la larghezza è dichiarata e scala col viewport; a cedere è la nav, che sotto i 900px va
   nell'overlay. */
/* ⚠⚠ In una riga contesa QUALCUNO deve cedere, e va DICHIARATO chi. Senza `flex:none` il marchio è
   l'anello debole: `img{max-width:100%}` del reset lo lascia stringere, la nav se lo mangia e il logo
   arriva a larghezza ZERO — misurato, e nessun controllo sul box lo denuncia perché l'altezza resta
   quella dichiarata. Qui a cedere è la NAV, che sotto i 900px va comunque nell'overlay. */
.wordmark { flex: none; }
.wordmark__mark { width: clamp(96px, 11vw, 132px); height: auto; transition: width var(--dur) var(--ease); }
.wordmark__txt { display: flex; flex-direction: column; font-family: var(--font-display); }
.wordmark__name { font-size: 1.22rem; font-weight: 600; letter-spacing: 0.01em; color: var(--brand); }
.wordmark__tag {
  font-family: var(--font-body); font-size: 0.66rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink);
}

.site-nav { margin-left: auto; }
/* ⚠ A parità di specificità vince WP (il CSS dei blocchi è iniettato dopo il tema): serve un livello in
   più del suo, e il colore va sullo __label, non sull'ancora. */
.site-header .site-nav .wp-block-navigation-item__content { font-size: 0.92rem; letter-spacing: 0.09em; text-transform: uppercase; font-family: var(--font-display); font-weight: 500; }
.site-header .site-nav .wp-block-navigation-item__label { color: var(--ink); }
/* ⚠ `.item:hover .label` colpisce OGNI discendente: passando su «Servizi» si tingerebbero anche tutte
   le voci del sottomenu, come se fossero tutte selezionate. Il figlio DIRETTO è quello che va tinto. */
.site-header .site-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation-item__label,
.site-header .site-nav .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label { color: var(--red-ink); }
/* La tendina dei servizi: fondo carta, filetto verde in alto. WP la tiene bianca con (0,2,0). */
.site-header .site-nav .wp-block-navigation__submenu-container {
  background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--accent);
  box-shadow: var(--shadow-md); min-width: 15rem; padding-block: var(--space-2);
}
.site-header .site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  text-transform: none; letter-spacing: 0.02em; font-size: 1rem; padding: var(--space-3) var(--space-5);
}
/* ⚠ Una `ul` di wp:navigation nasce flex-wrap:wrap: con `margin-left:auto` una quinta voce andrebbe
   orfana su due righe. Sopra i 900px non si va a capo. */
@media (min-width: 901px) { .site-header .site-nav .wp-block-navigation__container { flex-wrap: nowrap; } }
.site-header__cta { margin-left: var(--space-2); }
@media (max-width: 1080px) { .site-header__cta { display: none; } }

/* ⚠⚠ MENU MOBILE. Tre difetti che il CSS «a lettura» non mostra:
   1. il fondo resta BIANCO — ricopiare lo schema di WP (0,4,0) non basta, perché A PARITÀ DI
      SPECIFICITÀ VINCE CHI È DICHIARATO DOPO e il CSS dei blocchi è iniettato dopo il tema: serve un
      livello in più, e `.site-header` ce l'ha già;
   2. le voci finiscono a DESTRA e fuori schermo: il contenitore eredita `align-items:flex-end` dal
      `justifyContent:right` della nav desktop — il colpevole è il primo antenato largo quanto lo
      schermo, non l'ancora;
   3. senza padding orizzontale il testo tocca il bordo. */
.site-header .wp-block-navigation__responsive-container.is-menu-open:not(.has-background):not(.disable-default-overlay),
.wp-block-navigation__responsive-container.is-menu-open:not(.has-background):not(.disable-default-overlay) {
  background: var(--brand-dark); color: var(--on-dark);
  height: 100vh; max-height: 100vh; overflow-y: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: stretch; justify-content: flex-start;
  width: 100%; padding: clamp(4.5rem, 12vw, 6rem) var(--gutter) 7rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open ul { width: 100%; align-items: stretch; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width: 100%; text-align: left; display: block;
  padding-block: var(--space-4); font-size: 1.12rem; letter-spacing: 0.07em;
  border-bottom: 1px solid rgba(241,244,247,.14);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label { color: var(--on-dark); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation-item__label { color: var(--accent-lt); }
/* Sotto-menu INLINE: il default WP lo rende come scheda flottante, illeggibile su mobile.
   ⚠ Anche il contenitore del sottomenu eredita l'allineamento a destra: senza distenderlo le voci
   figlie partirebbero da metà schermo. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important; background: none !important; border: 0 !important;
  box-shadow: none !important; padding-left: var(--space-6); width: 100% !important;
  align-items: stretch !important; min-width: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 1rem; letter-spacing: 0.02em; text-transform: none;
  border-bottom: 0; padding-block: var(--space-3); position: relative;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
  content: ""; position: absolute; left: calc(var(--space-5) * -1); top: 50%;
  width: var(--space-4); height: 1px; background: var(--accent); opacity: .75;
}
/* La X: il glifo nudo di WP è 24px e nero su fondo scuro. Diventa un pulsante col filetto verde. */
.wp-block-navigation__responsive-container-close {
  top: clamp(1.25rem, 4vw, 2rem) !important; right: var(--gutter) !important;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--accent); color: var(--on-dark);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.wp-block-navigation__responsive-container-close svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container-close:focus-visible { background: var(--accent); color: var(--brand-dark); transform: rotate(90deg); }
.wp-block-navigation__responsive-container-open { color: var(--brand); }
.wp-block-navigation__responsive-container-open svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }

/* ============================ Testata fotografica ============================ */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--brand-dark); }
.hero__inner {
  position: relative; z-index: 2;
  min-height: clamp(30rem, 76vh, 46rem);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--space-8);
}
/* Lo slideshow: crossfade e Ken Burns leggero. Le slide stanno DIETRO il velo (z-index negativo dentro
   il contesto isolato dell'hero). Con reduced-motion resta ferma la prima. */
.hero-media { position: absolute; inset: 0; z-index: -2; }
/* ⚠⚠ Le slide sono `<img>`, non sfondi: `background-size:cover` su un elemento immagine non fa NULLA.
   Senza `object-fit` e senza altezza piena l'immagine si disegna alla propria proporzione dentro un box
   assoluto — su desktop la testata è larga e sembra a posto, su mobile copre la sola fascia alta e sotto
   resta il campo navy nudo. Il difetto si vede SOLO alla larghezza stretta. */
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0; animation: fp-hero-fade 30s infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 10s; }
.hero-slide:nth-child(3) { animation-delay: 20s; }
@keyframes fp-hero-fade {
  0% { opacity: 0; transform: scale(1.02); }
  4%, 30% { opacity: 1; }
  36%, 100% { opacity: 0; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; opacity: 0; transform: none; }
  .hero-slide:nth-child(1) { opacity: 1; }
}
/* Il velo resta LEGGERO: il contrasto lo garantisce la targa, non lui. Così le case si vedono. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(92deg, var(--scrim-deep) 0%, var(--scrim) 58%, transparent 100%);
}

/* ⚠⚠ LA TARGA, non il velo. Sopra una fotografia axe non valuta il contrasto (risolve il fondo sugli
   antenati), quindi un titolo bianco su un riflesso chiaro passa il gate e va live. Alzare l'opacità
   del velo per far leggere il testo annega la foto su tutta la banda: è una resa. La targa risolve per
   STRUTTURA — copre la sola colonna del testo, garantisce il contrasto su QUALUNQUE fotogramma dello
   slideshow, e permette di tenere il velo leggero.
   Il numero: con .84 il peggior pixel bianco sotto la targa diventa .84·26 + .16·255 = 62,6, e il
   bianco ci sta sopra a 11,8. È per questo che l'occhiello dell'hero usa --accent-lt e non --accent. */
.hero__body {
  width: min(100%, 58ch); color: var(--on-dark);
  background: var(--plate);
  border-left: 3px solid var(--accent);
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem)
           clamp(1.75rem, 1.2rem + 2vw, 3rem) calc(clamp(1.5rem, 1rem + 2vw, 3rem) - 3px);
}
.hero__body h1 { color: var(--on-dark); font-size: var(--text-3xl); font-weight: 500; }
.hero__body p { color: var(--on-dark); max-width: 46ch; margin-top: var(--space-4); font-size: var(--text-md); }
.hero__cta { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Testata senza fotografie utilizzabili: campo navy pieno. Mai una foto finta, mai una sgranata. */
.hero--design { background: linear-gradient(150deg, var(--brand-dark) 0%, var(--brand) 62%, var(--brand-mid) 100%); }
.hero--design::after { display: none; }
.hero--design .hero__body { background: none; border-left-color: var(--accent); }

/* ============================ Testata di pagina ============================ */
/* ⚠ La page-head NON riusa la scala dell'hero: è una testata di pagina, non un hero, e col display
   grande occupa mezza schermata. È condivisa da tutte le pagine interne: si sistema UNA volta. */
.page-head {
  background: linear-gradient(158deg, var(--surface) 0%, var(--paper) 62%, var(--tint) 100%);
  padding-block: var(--space-8) var(--space-7); border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.page-head h1 { font-size: var(--text-2xl); }
.page-head p { color: var(--ink-muted); margin-top: var(--space-4); max-width: 66ch; }
.page-head--dark { background: linear-gradient(134deg, var(--brand-dark) 0%, var(--brand) 58%, var(--brand-mid) 100%); border-bottom: 0; }

/* ⭐ TESTATA FOTOGRAFICA di pagina: la fotografia corre a tutta larghezza dietro il titolo, con un velo
   navy e la targa sul testo — la stessa disciplina dell'hero, in scala ridotta. È ciò che toglie alle
   pagine interne l'aria di «pagina di testo con una foto accanto». */
.page-head--foto { background: var(--brand-dark); color: var(--on-dark); position: relative; isolation: isolate; padding-block: var(--space-9) var(--space-8); }
.page-head--foto .page-head__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.page-head--foto .page-head__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-head--foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg, rgba(18,44,72,.90) 0%, rgba(18,44,72,.72) 46%, rgba(26,61,99,.34) 100%);
}
.page-head--foto h1 { color: var(--on-dark); }
.page-head--foto .crumbs { color: var(--on-dark-muted); }
.page-head--foto .crumbs a:hover { color: var(--accent-lt); }
.page-head--foto p { color: var(--on-dark); }
/* Il filetto in accento che ancora il titolo alla banda: è la staffa della cornice, in scala. */
.page-head--foto .page-head__plate { border-left: 3px solid var(--accent); padding-left: var(--space-5); max-width: 62ch; }

/* ⭐ NASTRO: le parole del mestiere che scorrono. Dà movimento a una banda che altrimenti è tipografia
   ferma, e le parole sono quelle del cliente — non uno slogan nostro.
   ⚠ Si ferma con prefers-reduced-motion, e il testo resta leggibile perché non è informazione: è
   decoro tipografico, e chi legge con lo screen reader lo salta (aria-hidden). */
/* ⚠⚠ `marquee()` di reveal.js CLONA la traccia e appende il clone come FRATELLO: se il clone finisce
   direttamente nella banda, le due tracce si impilano e il nastro esce a DUE RIGHE identiche. Serve un
   binario (`__viewport`) che le tenga in fila — ed è LUI a scorrere, non la traccia. Le parole si
   scrivono UNA volta sola: la seconda copia la fa il clone, e duplicarle a mano ne produce quattro. */
.ribbon { background: var(--brand); color: var(--on-dark); padding-block: var(--space-5); overflow: hidden; position: relative; }
.ribbon__viewport { display: flex; flex-wrap: nowrap; width: max-content; animation: fp-ribbon 38s linear infinite; }
.ribbon__track { display: flex; flex-wrap: nowrap; gap: var(--space-7); white-space: nowrap; padding-right: var(--space-7); }
.ribbon__track span {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 0.8rem + 1.1vw, 1.7rem);
  letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: var(--space-7);
}
.ribbon__track span::after { content: ""; width: 0.5rem; height: 0.5rem; background: var(--accent); flex: none; }
@keyframes fp-ribbon { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ribbon__viewport { animation: none; } }
.page-head--dark h1 { color: var(--on-dark); }
.page-head--dark p { color: var(--on-dark-muted); }
/* Briciole: dicono dove si è senza rubare spazio al titolo. */
.crumbs { font-size: 0.82rem; color: var(--ink-muted); margin-bottom: var(--space-4); }
.crumbs a:hover { color: var(--accent-ink); }
.page-head--dark .crumbs { color: var(--on-dark-muted); }
.page-head--dark .crumbs a:hover { color: var(--accent-lt); }

/* ============================ L'azienda ============================ */
.azienda__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.azienda__media { position: relative; }
/* ⚠ La targa è una fotografia VERTICALE (800×1338): al naturale, dentro una colonna da 570px, diventa
   alta 950px contro un testo che ne misura 400 — la colonna sinistra finisce a metà e resta un vuoto.
   Lo si misura PRIMA, non lo si scopre dallo screenshot: qui il ritaglio è 4/5, che tiene la targa
   intera (è centrata nel fotogramma) e riporta l'altezza a ~710px. */
.azienda__media .framed__clip img { aspect-ratio: 4 / 5; object-fit: cover; }
.azienda__media .medal { right: calc(var(--space-6) * -1); bottom: calc(var(--space-6) * -1); }
@media (max-width: 860px) { .azienda__grid { grid-template-columns: 1fr; } }

/* ============================ I servizi, a righe alternate ============================ */
/* La struttura di BeEco3: metà fotografia, metà scheda, e la riga si specchia a ogni giro.
   ⚠ L'alternanza si indovina dalla seconda riga: a distinguerle non è lo schema ma l'INDICE numerato
   che ogni riga porta, e il filetto su cui si appoggia. */
.srv-list { display: flex; flex-direction: column; gap: var(--space-6); }
.srv {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--paper); border: 1px solid var(--line);
}
.srv:nth-child(even) .srv__media { order: 2; }
.srv__media { position: relative; overflow: hidden; min-height: clamp(15rem, 26vw, 21rem); }
.srv__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 520ms var(--ease); }
.srv:hover .srv__media img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) { .srv:hover .srv__media img { transform: none; } }
.srv__body {
  padding: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);
}
/* L'indice numerato, appoggiato a un filetto: è il marchio del registro. */
.srv__n, .step__n {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-num);
  line-height: 1; color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: var(--space-4);
}
/* ⚠ Il trattino dopo il numero vale SOLO per le righe di servizio. Nella banda dei passi le
   linee ORIZZONTALI sono state rimosse su indicazione dell'owner: lì i divisori verticali fra
   le colonne bastano da soli a scandire la sequenza. */
.srv__n::after { content: ""; width: clamp(1.5rem, 4vw, 3rem); height: 1px; background: var(--accent); }
.srv__body h3 { margin: 0; }
.srv__body p { color: var(--ink-muted); max-width: 46ch; }
.srv__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-2); }
@media (max-width: 860px) {
  .srv { grid-template-columns: 1fr; }
  .srv:nth-child(even) .srv__media { order: 0; }
}

/* ============================ Il ciclo di lavorazione ============================ */
/* Passi numerati su banda navy: è il momento in cui la pagina si scurisce, e i numerali verdi su navy
   sono il punto in cui il mestiere si racconta meglio. */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
/* ⚠ I divisori VERTICALI fra le colonne restano: sono loro a scandire la sequenza. Le linee
   ORIZZONTALI di questa banda — il trattino dopo il numero e il filetto di collegamento — sono state
   rimosse su indicazione dell'owner. */
.step { padding: var(--space-6) var(--space-5); border-left: 1px solid rgba(241,244,247,.18); }
.step:first-child { border-left: 0; padding-left: 0; }
.step__n { color: var(--accent-lt); margin-bottom: var(--space-4); }
.step h3 { font-size: 1.06rem; margin-bottom: var(--space-3); color: var(--on-dark); }
.step p { color: var(--on-dark-muted); font-size: 0.95rem; max-width: none; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } .step { border-left: 0; padding-left: 0; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ============================ Perché affidarsi a noi ============================ */
/* Tre voci con l'indice, separate da filetti verticali — il dispositivo del registro. */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
/* ⭐ Le tre ragioni erano tre colonne di testo piatte. Ora ognuna è una TESSERA con un campo in accento
   che sale all'hover: il movimento c'è ma è sobrio, e la forma dà alla banda una geometria propria.
   ⚠ Il campo cresce da 0 in altezza, quindi non sposta nulla: nessun salto di layout. */
.reason {
  padding: var(--space-6); border-left: 1px solid var(--line);
  position: relative; overflow: hidden; isolation: isolate;
  transition: color var(--dur) var(--ease);
}
.reason::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: -1;
  background: var(--accent); transition: height 420ms var(--ease);
}
.reason:hover::before { height: 100%; opacity: .16; }
.reason:first-child { border-left: 0; }
.reason h3 { font-size: 1.1rem; margin-bottom: var(--space-3); }
.reason p { color: var(--ink-muted); font-size: 0.98rem; }
.reason__n {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--accent-ink); letter-spacing: 0.1em; display: block; margin-bottom: var(--space-4);
}
@media (max-width: 860px) { .reasons { grid-template-columns: 1fr; } .reason { border-left: 0; padding-left: 0; padding-block: var(--space-5); border-top: 1px solid var(--line); } .reason:first-child { border-top: 0; } }

/* ============================ Fascia dei lavori e galleria ============================ */
/* Griglia regolare: regge scatti di taglia media, che è quanto un laboratorio ha di solito.
   ⚠ Tutte le tessere hanno LA STESSA misura: senza `aspect-ratio` ognuna prende il rapporto nativo
   della sua foto e i titoli si sfalsano riga per riga. */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tile-gap); }
.gal--4 { grid-template-columns: repeat(4, 1fr); }
.gal__cell { position: relative; overflow: hidden; }
.gal__cell img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 520ms var(--ease); }
.gal__cell:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .gal__cell:hover img { transform: none; } }
.gal--tall .gal__cell img { aspect-ratio: 3 / 4; }
@media (max-width: 860px) { .gal, .gal--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gal, .gal--4 { grid-template-columns: 1fr; } }

/* La fascia dei lavori in home: due colonne, testo e mosaico. */
/* ⚠ Con tre colonne in questa metà pagina le tessere scendevano a 204px: a quella misura una
   fotografia non si guarda più, si intuisce. Due colonne, e la colonna del testo si stringe. */
.lavori__grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.lavori__grid .gal { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .lavori__grid { grid-template-columns: 1fr; } }

/* ⭐ I NUMERI DEL MESTIERE: cinque passaggi, quattro lavorazioni, sei zone, verniciatura all'acqua.
   ⚠ Sono tutti FATTUALI e presi dai testi del cliente. Il dispositivo «numeri grandi» del template di
   riferimento si riusa SOLO con numeri tecnici: anni di attività e numero di clienti sono esattamente
   ciò che il claim-linter blocca, e a ragione. */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.figure { padding: var(--space-5) var(--space-6); border-left: 1px solid var(--line); }
.figure:first-child { border-left: 0; padding-left: 0; }
.figure b {
  display: block; font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); color: var(--brand); letter-spacing: -0.02em;
}
.figure span { display: block; margin-top: var(--space-3); color: var(--ink-muted); font-size: 0.94rem; }
@media (max-width: 860px) { .figures { grid-template-columns: 1fr 1fr; } .figure:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 480px) { .figures { grid-template-columns: 1fr; } .figure { border-left: 0; padding-left: 0; } }

/* ============================ Schede generiche ============================ */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.cards--two { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.card__media { overflow: hidden; }
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 520ms var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .card:hover .card__media img { transform: none; } }
.card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.card__body h3 { font-size: 1.12rem; }
.card__body p { color: var(--ink-muted); font-size: 0.97rem; }
.card__foot { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards, .cards--two { grid-template-columns: 1fr; } }

/* ============================ Prosa delle pagine interne ============================ */
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose p, .prose li { color: var(--ink); }
/* Elenchi puntati col segno del verticale: un filetto verde, non un pallino. */
.prose ul { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.prose ul li { position: relative; padding-left: var(--space-6); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: var(--space-4); height: 2px; background: var(--accent);
}
/* Un elenco lungo (i passaggi del restauro, le forniture) sta meglio su due colonne. */
.prose ul.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); }
@media (max-width: 720px) { .prose ul.cols-2 { grid-template-columns: 1fr; } }

/* Impaginato a due colonne delle pagine servizio: prosa a sinistra, colonna di appoggio a destra. */
.split { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .split, .split--even { grid-template-columns: 1fr; } }

/* Scheda d'appoggio (aside): chiara, per fondo chiaro. ⚠ Non riusare qui una scheda pensata per fondo
   scuro: i colori si invertono e il testo sparisce. */
.aside-card { background: var(--tint); border: 1px solid var(--line); padding: var(--space-6); }
.aside-card h3 { font-size: 1.05rem; margin-bottom: var(--space-4); }
.aside-card dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); }
.aside-card dt { font-size: 0.74rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.aside-card dd { color: var(--ink); }
.aside-card a:hover { color: var(--accent-ink); }

/* ============================ Contatti e modulo ============================ */
.cta-band {
  background: linear-gradient(122deg, var(--brand-dark) 0%, var(--brand) 52%, var(--brand-mid) 100%);
  color: var(--on-dark); padding-block: var(--section-y); position: relative; overflow: hidden;
}
.cta-band h2 { color: var(--on-dark); }
.cta-band p { color: var(--on-dark-muted); }
.cta-band__row { display: flex; align-items: center; justify-content: space-between; gap: clamp(2rem, 5vw, 4rem); flex-wrap: wrap; }
/* Il telefono a corpo grande: è il gesto del piè operativo della categoria. */
.bigphone {
  display: inline-block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.8rem); line-height: 1.1; color: var(--on-dark);
  letter-spacing: -0.01em;
}
.bigphone:hover { color: var(--accent-lt); }
.bigphone--ink { color: var(--brand); }
.bigphone--ink:hover { color: var(--red-ink); }

.contact-cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .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-size: 0.74rem; font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-muted);
}
/* ⚠ `input` senza qualificatore prenderebbe anche la casella di consenso, che diventerebbe larga quanto
   la riga spingendo il suo testo a cento pixel di distanza. Le caselle non sono campi di testo. */
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"],
.contact-form textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4);
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent-ink); outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.contact-form textarea { min-height: 8rem; resize: vertical; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 560px) { .contact-form .row { grid-template-columns: 1fr; } }
/* ⚠ `.consent` è un flex: un `<a>` dentro il testo diventerebbe un flex-item a sé e il testo si
   spezzerebbe in due. Tutto il testo, link incluso, sta in un solo <span>. */
.consent { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5); }
.consent input { margin-top: 0.35rem; flex: none; }
.consent span, .consent label { font-size: 0.92rem; color: var(--ink-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
.consent a { color: var(--accent-ink); text-decoration: underline; }
.form-note { font-size: 0.85rem; color: var(--ink-muted); margin-top: var(--space-4); }

/* ⭐ Le zone servite come tessere cliccabili: portano alle landing e danno alla pagina Contatti la
   ricchezza che le mancava, senza inventare contenuto — sono le stesse zone dei dieci testi SEO. */
.zones { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.zone {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border: 1px solid var(--line); background: var(--paper);
  font-family: var(--font-display); font-weight: 500; font-size: 0.92rem; color: var(--brand);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.zone::before { content: ""; width: 0.4rem; height: 0.4rem; background: var(--accent); flex: none; }
.zone:hover { background: var(--brand); color: var(--on-dark); border-color: var(--brand); }

/* L'informativa del cliente sotto il modulo: c'è tutta, ma non fa da muro sopra il bottone d'invio.
   ⚠ `<details>` è nativo: un accordion in JS sarebbe bloccato dalla CSP nonce-based. */
.informativa { margin-top: var(--space-6); border-top: 1px solid var(--line); padding-top: var(--space-5); }
.informativa summary {
  cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink);
  list-style: none; display: flex; align-items: center; gap: var(--space-3);
}
.informativa summary::-webkit-details-marker { display: none; }
.informativa summary::before { content: ""; width: 1.6rem; height: 1px; background: var(--accent); flex: none; }
.informativa[open] summary { margin-bottom: var(--space-4); }
.informativa p { font-size: 0.86rem; line-height: 1.7; color: var(--ink-muted); max-width: none; }

.contact-info { background: var(--surface); border: 1px solid var(--line); padding: var(--space-6); }
.contact-info dl { display: grid; gap: var(--space-2) var(--space-5); grid-template-columns: auto 1fr; }
.contact-info dt { font-size: 0.74rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.contact-info dd { color: var(--ink); }
.contact-info a:hover { color: var(--accent-ink); }
/* La scala del ciclo nella scheda d'appoggio: il numero PRECEDE la voce, non le sta all'altro capo
   della riga — «01 …………… Carteggiatura» si legge come un listino, non come una sequenza. */
.ciclo-mini { counter-reset: passo; display: flex; flex-direction: column; gap: var(--space-3); }
.ciclo-mini li { display: flex; align-items: baseline; gap: var(--space-4); color: var(--ink); }
.ciclo-mini li::before {
  counter-increment: passo; content: "0" counter(passo);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--accent-ink);
  flex: none; min-width: 1.6rem;
}

.hours-list li { display: flex; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-2); border-bottom: 1px solid var(--line); }
.hours-list li:last-child { border-bottom: 0; }
.site-footer .hours-list li { border-bottom-color: rgba(241,244,247,.14); }

/* ============================ Piè di pagina ============================ */
.site-footer {
  background: linear-gradient(196deg, var(--brand) 0%, var(--brand-dark) 44%, var(--night) 100%);
  color: var(--on-dark); padding-block: var(--space-8) var(--space-6); position: relative; overflow: hidden;
}
.site-footer__cols { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); }
.site-footer h4 {
  font-family: var(--font-display); font-size: 0.76rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-lt);
  margin-bottom: var(--space-5);
}
.site-footer ul li + li { margin-top: var(--space-3); }
.site-footer a:hover { color: var(--accent-lt); }
.site-footer p, .site-footer li, .site-footer dd { color: var(--on-dark-muted); font-size: 0.94rem; }
.site-footer .fmark { width: clamp(140px, 15vw, 180px); height: auto; margin-bottom: var(--space-5); }
.site-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border: 1px solid rgba(159,193,108,.5); color: var(--accent-lt);
}
.site-footer__social a:hover { background: var(--accent); color: var(--ink); }
.site-footer__legal {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid rgba(241,244,247,.16);
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center;
  font-size: .86rem; color: var(--on-dark-muted);
}
.site-footer__legal .powered { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); }
.site-footer__legal .powered img { width: 20px; height: 20px; }
@media (max-width: 1000px) { .site-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__legal .powered { margin-left: 0; }
}

/* Icone social: maschere SVG risolte rispetto al FOGLIO.
   ⚠ Una `mask-image: url(../assets/…)` in uno style INLINE non risolve nel post_content: lì il PHP non
   gira e `../assets/` non viene riscritto. Deve stare qui, nel CSS del verticale. */
.ico { width: 1.05rem; height: 1.05rem; background: currentColor; display: block; }
.ico--facebook { -webkit-mask: url("../assets/img/icons/social-facebook.svg") center/contain no-repeat; mask: url("../assets/img/icons/social-facebook.svg") center/contain no-repeat; }
.ico--instagram { -webkit-mask: url("../assets/img/icons/social-instagram.svg") center/contain no-repeat; mask: url("../assets/img/icons/social-instagram.svg") center/contain no-repeat; }

/* ============================ Barra CTA mobile ============================ */
.cta-bar { display: none; }
@media (max-width: 780px) {
  .cta-bar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--brand-dark); border-top: 1px solid rgba(159,193,108,.4);
  }
  .cta-bar a {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-4); color: var(--on-dark);
    font-family: var(--font-display); font-size: 0.86rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .cta-bar a + a { border-left: 1px solid rgba(159,193,108,.4); background: var(--red); color: #FFFFFF; }
  /* La barra è fissa: senza questo copre le ultime righe del piè. */
  .site-footer { padding-bottom: calc(var(--space-6) + 3.5rem); }
}

/* ============================ Pagina 404 ============================ */
.notfound { padding-block: var(--section-y); text-align: center; }
/* ⚠ Il codice è grande ma resta TESTO: col verde pieno starebbe a 1,90, sotto anche la soglia dei
   caratteri grandi. Va sul ruolo scurito, che su carta fa 5,64. */
.notfound__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 12vw, 8rem); line-height: 1; color: var(--accent-ink); }
.notfound h1 { margin-top: var(--space-4); }
.notfound p { margin: var(--space-4) auto 0; color: var(--ink-muted); }
.notfound .btn { margin-top: var(--space-6); }

/* ============================ Lightbox della galleria ============================ */
/* ⚠⚠ Lo stato NASCOSTO è obbligatorio: reveal.js crea il contenitore al caricamento e lo apre con
   `is-open`. Dichiarare `display:flex` senza stato chiuso lascia l'overlay sempre in scena, dove
   INTERCETTA OGNI CLICK — e un crawl «tutte 200» resta verde su un sito dove non si può cliccare nulla. */
.fp-lb { display: none; }
.fp-lb.is-open {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 60; background: rgba(14,33,56,.92); padding: var(--gutter);
}
/* ⚠ I nomi sono quelli che reveal.js CREA DAVVERO — `fp-lb__x`, `fp-lb__img`, `fp-lb__nav` — non nomi
   inventati: una regola su una classe che il JS non genera è scritta, valida e non applicata mai, e
   nessuna misura del CSS lo denuncia. È la stessa famiglia della testata che non si contraeva. */
.fp-lb__img { max-width: min(96vw, 1400px); max-height: 88vh; width: auto; height: auto; }
.fp-lb__x {
  position: absolute; top: var(--gutter); right: var(--gutter);
  width: 2.75rem; height: 2.75rem; background: none;
  border: 1px solid var(--accent); color: var(--on-dark); font-size: 1.2rem;
}
.fp-lb__x:hover { background: var(--accent); color: var(--ink); }
/* ⚠⚠ Le frecce di scorrimento: reveal.js le CREA sempre (e le nasconde con uno style inline solo se la
   galleria ha una foto sola), ma non dà loro né posizione né misura — quel lavoro è del tema. Senza,
   restano due bottoni senza dimensione dentro un flex, con l'SVG collassato a zero: la galleria si apre
   e sembra che le frecce non ci siano. Il cliente lo ha visto prima di me. */
.fp-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 3.25rem; height: 3.25rem; display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-dark); border: 1px solid var(--accent); background: rgba(18,44,72,.55);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fp-lb__prev { left: clamp(0.5rem, 3vw, 2.5rem); }
.fp-lb__next { right: clamp(0.5rem, 3vw, 2.5rem); }
.fp-lb__nav svg { width: 1.4rem; height: 1.4rem; }
.fp-lb__nav:hover { background: var(--accent); color: var(--ink); }
/* La foto apribile: il cursore lo dice, perché il click non si indovina. */
a.zoom { cursor: zoom-in; }

/* ============================ Movimento ============================ */
@media (prefers-reduced-motion: reduce) {
  .more::before, .arrow, .framed__clip img { transition: none; }
}