/* ==================================================================
   Prometeo Stufe — foglio di stile unico
   Token da: HANDOFF SEZIONI SITO (homepage + template ad accumulo + B2B)
   ================================================================== */

:root {
  /* fondi scuri — 15191F unico per tutto il sito (decisione cliente 17/09/2026,
     prima era 23262B). Le quattro varianti restano come nomi per non riscrivere
     25 regole, ma puntano tutte allo stesso colore: lo stacco fra sezioni
     adiacenti lo fanno i filetti, non il fondo. */
  --dark:      #15191f;
  --dark-2:    #15191f;
  --dark-3:    #15191f;
  --dark-4:    #15191f;
  /* fondi chiari */
  --paper:     #f1ede5;
  --paper-2:   #f7f5f1;
  /* testo */
  --ink:       #23262b;
  --ink-warm:  #26221c;
  --ink-soft:  #6f6a61;
  --ink-soft-2:#6b6459;
  --ink-soft-3:#4a443b;
  --cream:     #ece7df;
  /* accenti */
  --bronze:    #9a8b75;
  --bronze-hi: #ab9d86;
  /* L'oro CF9D72 e' stato ritirato il 09/09/2026: troppo ripetitivo.
     L'accento e' ora la stessa crema del testo, che sui fondi scuri legge
     come un grigio-beige chiaro. Sui fondi chiari serve --accent-ink. */
  --gold:      #ece7df;
  --accent-ink:#5f5b54;
  /* gallery: due grigi, niente nero pieno */
  --gallery-hi:#1d222a;
  /* arancione del filtro: serve a farsi riconoscere fra le altre foto,
     non e' un colore del marchio */
  --evidenza:  #e2823c;
  --gallery-lo:#15191f;
  /* filetti */
  --rule-dark: color-mix(in srgb, var(--cream) 13%, transparent);
  --rule-light:rgba(38,34,28,.10);

  --wrap: 1180px;
  --pad-x: 48px;

  --serif: 'Marcellus', Georgia, 'Times New Roman', serif;
  --sans:  'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Prometeo Design (B2B): il suo handoff indica 64px di padding orizzontale,
   contro i 48px di homepage e sezione ad accumulo. Solo da tablet in su:
   sotto vale il padding ridotto comune a tutto il sito. */
@media (min-width: 961px) { body.page-b2b { --pad-x: 64px; } }

html { -webkit-text-size-adjust: 100%; }
html.preloader-seen .anniversary-loader { display: none; }

/* con la barra fissa gli ancoraggi devono fermarsi sotto di essa */
[id] { scroll-margin-top: 116px; }

body {
  margin: 0;
  /* Il fondo della pagina e' scuro come le sezioni: se per un qualsiasi motivo
     si aprisse un vuoto fra due blocchi, non comparirebbe una banda chiara. */
  background: var(--dark);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--gold); color: var(--dark); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: .012em; margin: 0; }

.wrap { max-width: calc(var(--wrap) + 2 * var(--pad-x)); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.wrap--flush { padding-left: 0; padding-right: 0; }

/* flow-root impedisce ai margini dei figli di sfuggire fuori dalla sezione:
   senza, l'ultimo blocco con margin-bottom apriva un buco fra una sezione e
   l'altra, e da quel buco si vedeva il fondo della pagina. */
.section { padding: 96px 0; display: flow-root; }
.page-hero, .split, .figure, .solutions { display: flow-root; }
.section--dark   { background: var(--dark);   color: var(--cream); }
.section--dark-2 { background: var(--dark-2); color: var(--cream); }
.section--dark-3 { background: var(--dark-3); color: var(--cream); }
.section--dark-4 { background: var(--dark-4); color: var(--cream); }
.section--paper  { background: var(--paper-2); color: var(--ink-warm); }
.section--paper .eyebrow { color: var(--accent-ink); }
.section--paper p { color: var(--ink-soft-3); }

/* ---------- tipografia di servizio ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; line-height: 1.7; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--gold); margin: 0 0 22px;
}
.eyebrow::before { content: none; }

/* La tessera di maiolica apre la descrizione, non il titolo (spostata il
   17/09/2026: davanti all'h1 mangiava la prima parola). Sta a sinistra del
   testo, che le gira intorno. Quale tessera, lo dice la variabile --tessera
   dichiarata sul <body> in base all'area: nessun markup da toccare nelle
   pagine, e il colore cambia da solo passando da una sezione all'altra.
   Due forme di descrizione in giro per il sito: un <p> subito dopo il titolo,
   oppure un <div> con dentro due <p>.
   In home non va (richiesta cliente 17/09/2026): li' il titolo sta sopra una
   fotografia a tutto schermo, e la tessera diventava una macchia. */
/* Ripiego senza JavaScript: stessa misura della tessera vera, cosi' quando
   il JS la sostituisce il testo non si ridispone. */
.page-hero__grid h1 + p::before,
.page-hero__grid h1 + div > p:first-child::before {
  content: '';
  float: left;
  width: 112px; height: 136px;
  margin: 4px 24px 8px 0;
  background-image: var(--tessera);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}
/* stessa struttura dei due selettori sopra piu' una classe: deve vincere su entrambi */
.page-hero__grid h1 + p.has-tessera::before,
.page-hero__grid h1 + div > p.has-tessera:first-child::before { content: none; }

/* ---- tessera di maiolica · variante C -------------------------------
   Si inclina verso il puntatore. --rx/--ry li scrive assets/js/site.js. */
.tessera { position: relative; display: block; perspective: 700px; }
.tessera__plate {
  position: relative; display: block;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), filter .5s ease;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.5));
  will-change: transform;
}
.tessera:hover .tessera__plate {
  transition-duration: .12s;
  filter: drop-shadow(0 20px 24px rgba(0,0,0,.62));
}
.tessera__img { display: block; width: 100%; height: auto; aspect-ratio: auto 4 / 5; } /* 4/5 finche' l'immagine non arriva: niente salto di impaginazione */
.tessera--hero { float: left; width: 112px; margin: 4px 24px 8px 0; }
@media (max-width: 600px) {
  .tessera--hero,
  .page-hero__grid h1 + p::before,
  .page-hero__grid h1 + div > p:first-child::before { width: 84px; height: 102px; margin-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tessera__plate { transition: none !important; transform: none !important; }
}
.eyebrow--plain::before { display: none; }
.eyebrow--light { color: color-mix(in srgb, var(--cream) 60%, transparent); }

.h-hero    { font-size: 55px; line-height: .98; }
.h-section { font-size: 42px; line-height: 1.06; }
.h-sub     { font-size: 36px; line-height: 1.15; }
.h-card    { font-size: 20px; }

.lead   { font-size: 16.5px; line-height: 1.7; }
.muted  { color: color-mix(in srgb, var(--cream) 78%, transparent); }
.muted-ink { color: var(--ink-soft-2); }
.rule   { height: 1px; background: var(--rule-dark); border: 0; margin: 0; }
.rule--light { background: var(--rule-light); }

/* ---------- bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 30px; border-radius: 0; border: 1px solid transparent;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
/* Un solo bottone in tutto il sito (decisione cliente 17/09/2026): quello
   trasparente con il filetto chiaro che stava sotto l'hero della home. Le
   vecchie varianti restano come nomi di classe — sono in venti pagine — ma
   rendono tutte allo stesso modo. */
.btn--outline,
.btn--bronze,
.btn--light   { background: transparent; color: var(--cream); border-color: color-mix(in srgb, var(--cream) 40%, transparent); }
.btn--outline:hover,
.btn--bronze:hover,
.btn--light:hover  { background: color-mix(in srgb, var(--cream) 10%, transparent); border-color: var(--cream); }
/* Sui fondi chiari la crema sparirebbe: stesso disegno, inchiostro scuro. */
.btn--outline-ink,
.section--paper .btn { background: transparent; color: var(--ink-warm); border-color: rgba(38,34,28,.35); }
.btn--outline-ink:hover,
.section--paper .btn:hover { background: rgba(38,34,28,.06); border-color: var(--ink-warm); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: var(--bronze); text-decoration: none;
  border-bottom: 1px solid rgba(154,139,117,.4); padding-bottom: 8px;
  transition: color .2s ease, border-color .2s ease;
}
.link-arrow:hover { color: var(--bronze-hi); border-color: var(--bronze-hi); }

.collection-back {
  display: inline-block; margin-top: 18px; padding-bottom: 7px;
  color: color-mix(in srgb, var(--cream) 72%, transparent); border-bottom: 1px solid var(--rule-dark);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; transition: color .2s ease, border-color .2s ease;
}
.collection-back:hover { color: var(--cream); border-color: color-mix(in srgb, var(--cream) 50%, transparent); }

/* ==================================================================
   HEADER + NAVIGAZIONE
   ================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--pad-x);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, padding .3s ease;
}
/* pagine interne: barra piena fin da subito */
.site-header--solid { background: var(--dark); border-bottom-color: var(--rule-dark); }
/* home: trasparente sull'hero, si riempie appena si scorre */
body.is-scrolled .site-header { background: var(--dark); border-bottom-color: var(--rule-dark); padding-top: 16px; padding-bottom: 16px; }
body.is-scrolled .site-header__logo img { height: 46px; }
.site-header__logo img { height: 58px; width: auto; }

/* preloader celebrativo: composizione ispirata al lockup del trentennale */
.anniversary-loader {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  /* nero pieno come quello del filmato, altrimenti si vede il bordo del riquadro */
  color: #fff; background: #000;
  transition: opacity .9s ease, visibility .9s ease;
}
body.is-preloading { overflow: hidden; }
.anniversary-loader.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.anniversary-loader__film,
.anniversary-loader__still {
  display: block;
  width: min(1216px, 100vw);
  max-width: 100%;
  height: auto;
  background: #050606;
}
.anniversary-loader__still { display: none; }

.anniversary-loader__skip {
  position: absolute; right: 24px; bottom: 20px;
  padding: 8px; border: 0; border-bottom: 1px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.65); background: transparent;
  font: 600 9px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
}
.nav { display: flex; align-items: center; gap: 24px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  color: color-mix(in srgb, var(--cream) 88%, transparent); text-decoration: none;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase; font-weight: 500;
  padding: 10px 0; transition: color .2s ease;
}
.nav__link:hover, .nav__item:hover > .nav__link, .nav__link[aria-current="page"] { color: var(--gold); }
.nav__caret { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); }

/* mega menu */
.mega {
  position: absolute; top: 100%; left: -28px; z-index: 70;
  min-width: 280px; padding: 26px 28px 24px;
  background: var(--dark-2); border: 1px solid var(--rule-dark);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mega--wide { min-width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px; }
.nav__item:hover > .mega, .nav__item:focus-within > .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__group { padding: 10px 0; border-top: 1px solid var(--rule-dark); }
.mega__group:first-child, .mega__group:nth-child(2) { border-top: 0; }
.mega__title {
  display: block; font-family: var(--serif); font-size: 17px; color: var(--cream);
  text-decoration: none; padding: 2px 0 8px; transition: color .2s ease;
}
.mega__title:hover { color: var(--gold); }
.mega__desc { font-size: 12px; line-height: 1.5; color: color-mix(in srgb, var(--cream) 55%, transparent); margin: 0 0 6px; max-width: 260px; }
.mega__pills { display: flex; flex-wrap: wrap; gap: 7px; }
.mega__pill {
  font-size: 11.5px; letter-spacing: .04em; text-decoration: none;
  color: color-mix(in srgb, var(--cream) 80%, transparent); border: 1px solid color-mix(in srgb, var(--cream) 28%, transparent);
  padding: 5px 11px; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mega__pill:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); }
.mega__flag { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 600; }

/* burger — sopra al pannello del menu, altrimenti non si riesce a richiudere */
.nav-toggle {
  display: none; background: none; border: 1px solid color-mix(in srgb, var(--cream) 40%, transparent);
  width: 42px; height: 42px; padding: 0; cursor: pointer;
  position: relative; z-index: 70;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block; width: 18px; height: 1px; background: var(--cream); margin: 0 auto; position: relative;
}
.nav-toggle span::before { position: absolute; top: -5px; }
.nav-toggle span::after  { position: absolute; top: 5px; }

/* ==================================================================
   HERO
   ================================================================== */
.hero { position: relative; min-height: 760px; display: flex; align-items: center; overflow: hidden; background: var(--dark); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
/* Luce riflessa dalla fiamma sulle superfici vicine. Il rettangolo viene
   ancorato da site.js al vetro del camino, come il video, ma e' molto piu'
   ampio. Due gradienti sovrapposti evitano l'aspetto di un filtro uniforme. */
.hero__firelight {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 64%;
  background:
    radial-gradient(ellipse at 50% 64%, rgba(245,148,66,.20) 0%, rgba(212,91,30,.10) 29%, rgba(178,61,20,.035) 50%, transparent 72%);
  mix-blend-mode: screen;
  will-change: opacity, transform;
}
.hero__firelight::after {
  content: '';
  position: absolute;
  inset: 23% 24% 9%;
  background: radial-gradient(ellipse at 50% 67%, rgba(255,178,89,.18), rgba(222,91,28,.055) 45%, transparent 72%);
}
.hero.fuoco-acceso .hero__firelight {
  animation: hero-firelight 7.2s ease-in-out infinite;
}
@keyframes hero-firelight {
  0%   { opacity: .24; transform: scale(.985, .98); }
  17%  { opacity: .34; transform: scale(1.012, 1.018); }
  39%  { opacity: .27; transform: scale(.994, 1.006); }
  58%  { opacity: .37; transform: scale(1.018, 1.025); }
  76%  { opacity: .29; transform: scale(1.002, .992); }
  100% { opacity: .24; transform: scale(.985, .98); }
}
/* Il fuoco animato: copre il solo vetro del focolare, sopra la fotografia e
   sotto la velatura scura, cosi' prende la stessa tinta del resto della hero.
   Lo piazza site.js, perche' la posizione dipende da come la fotografia viene
   ritagliata. Compare in dissolvenza: se la riproduzione non parte, non si
   vede nessun buco al posto suo. */
.hero__fuoco,
.media__fuoco {
  position: absolute; z-index: 1;
  object-fit: fill; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
  /* i bordi sfumano di un paio di punti: anche se il raccordo non fosse
     perfetto, non si vedrebbe una cucitura netta */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5%, #000 97.5%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 2.5%, #000 97.5%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-composite: intersect;
}
.hero.fuoco-acceso .hero__fuoco,
.fuoco-acceso .media__fuoco { opacity: 1; }
.hero.fuoco-spento .hero__fuoco,
.fuoco-spento .media__fuoco { opacity: 0; }

.hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,16,18,.85) 0%, rgba(15,16,18,.58) 38%, rgba(15,16,18,.18) 70%, rgba(15,16,18,.34) 100%); }
.hero__body { position: relative; z-index: 2; padding: 140px var(--pad-x) 80px; max-width: 700px; color: var(--cream); }
.hero__body .eyebrow { color: var(--cream); letter-spacing: .22em; font-size: 15px; }
.hero h1 { color: var(--cream); margin-bottom: 28px; }
.hero p { font-size: 17px; line-height: 1.65; color: var(--cream); max-width: 470px; margin: 0 0 38px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* hero interno di sezione (pagine sistema/collezione) */
.page-hero { background: var(--dark); color: var(--cream); padding: 150px 0 64px; }
.page-hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: end; }
.page-hero h1 { font-size: 52px; line-height: 1.08; color: var(--cream); }
.page-hero__grid p { font-size: 16px; line-height: 1.65; color: color-mix(in srgb, var(--cream) 72%, transparent); margin: 0; }

/* ==================================================================
   HOME — le nostre soluzioni (Sistemi | Collezioni)
   ================================================================== */
.solutions { position: relative; overflow: hidden; background: var(--dark-3); color: var(--cream); padding: 104px 0 96px; }
.solutions__bg { position: absolute; top: 0; right: 0; width: 58%; height: 100%; object-fit: cover; opacity: .2;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.5) 42%, #000 78%);
          mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.5) 42%, #000 78%);
  pointer-events: none; }
.solutions__glow { position: absolute; inset: 0; background: radial-gradient(135% 100% at 88% 22%, rgba(207,126,58,.2), transparent 52%); pointer-events: none; }
.solutions__veil { position: absolute; inset: 0; background: rgba(21,25,31,.92); pointer-events: none; }
.solutions__inner { position: relative; z-index: 2; }
.solutions__split { display: grid; grid-template-columns: 1fr 1fr; }
.solutions__col--a { padding-right: 60px; }
.solutions__col--b { padding-left: 60px; border-left: 1px solid var(--rule-dark); }
.solutions h3 { font-size: 34px; margin-bottom: 8px; }
.solutions__hint { font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--cream) 60%, transparent); margin: 0 0 22px; max-width: 380px; }

.syslist { border-top: 1px solid color-mix(in srgb, var(--cream) 15%, transparent); }
.sysrow {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-decoration: none; color: var(--cream); padding: 18px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 15%, transparent);
  transition: background .25s ease, padding .25s ease;
}
.sysrow:hover { background: color-mix(in srgb, var(--cream) 10%, transparent); padding-left: 14px; padding-right: 14px; }
.sysrow__flag { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--gold); margin-bottom: 6px; }
.sysrow__name { font-family: var(--serif); font-size: 20px; }
.sysrow__desc { font-size: 13.5px; color: color-mix(in srgb, var(--cream) 60%, transparent); margin-top: 4px; }

.famlist { display: flex; flex-direction: column; gap: 28px; }
.fam { border-top: 1px solid color-mix(in srgb, var(--cream) 15%, transparent); padding-top: 22px; }
.fam__name { font-family: var(--serif); font-size: 20px; color: var(--cream); text-decoration: none; transition: color .2s ease; }
.fam__name:hover { color: var(--gold); }
.fam__note { font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--cream) 74%, transparent); margin: 14px 0 0; max-width: 430px; }
.pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.pill {
  text-decoration: none; font-size: 12px; letter-spacing: .04em;
  color: color-mix(in srgb, var(--cream) 85%, transparent); border: 1px solid color-mix(in srgb, var(--cream) 34%, transparent);
  padding: 7px 14px; border-radius: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pill:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); }

/* ==================================================================
   FIGURA EDITORIALE
   ================================================================== */
.figure { position: relative; min-height: 620px; display: flex; align-items: flex-start; overflow: hidden; background: var(--dark); }
.figure__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; transition: transform 1.4s ease; }
.figure:hover .figure__img { transform: scale(1.03); }
.figure__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,16,18,.8) 0%, rgba(15,16,18,.52) 36%, rgba(15,16,18,.1) 68%, rgba(15,16,18,.28) 100%); }
.figure__body { position: relative; z-index: 2; padding: 96px var(--pad-x) 0; max-width: 720px; }
.figure h2 { color: var(--cream); font-size: 48px; line-height: 1.04; text-shadow: 0 2px 14px rgba(0,0,0,.55); }

/* ==================================================================
   STEP / GRIGLIE
   ================================================================== */
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(35,38,43,.12); }
.steps4 > * { background: var(--paper-2); display: flex; flex-direction: column; padding: 0 30px; }
.steps4 > *:first-child { padding-left: 0; }
.steps4 > *:last-child  { padding-right: 0; }
/* I quattro passaggi della home: una maiolica diversa per ciascuno, al posto
   delle iconcine disegnate. */
/* altezza fissa e mattonella appoggiata in basso: le quattro hanno proporzioni
   diverse, e senza questo i titoli dei passaggi finivano a quote diverse */
.step__tessera { width: 108px; height: 150px; display: flex; align-items: flex-end; margin-bottom: 30px; }
.step__tessera .tessera__plate { width: 100%; }
/* sul fondo chiaro del percorso l'ombra va piu' morbida */
.section--paper .tessera__plate { filter: drop-shadow(0 10px 14px rgba(40,36,30,.28)); }
.section--paper .tessera:hover .tessera__plate { filter: drop-shadow(0 20px 24px rgba(40,36,30,.38)); }
@media (max-width: 600px) { .step__tessera { width: 88px; height: 122px; } }
.step__num { display: none; }
.steps3 > .step, .steps4 > .step { position: relative; }
.steps3 > .step + .step::before,
.steps4 > .step + .step::before {
  content: none;
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, 0);
  font-size: 15px; line-height: 1; color: var(--bronze);
  pointer-events: none;
}
.steps4 > .step + .step::before {
  top: 50%; transform: translate(-50%, -50%);
  padding: 6px 0; background: var(--paper-2); color: var(--ink-soft);
}
.steps3 > .step + .step::before {
  top: 50%; transform: translate(-50%, -50%);
  padding: 6px 0; background: var(--dark); color: color-mix(in srgb, var(--cream) 55%, transparent);
}
/* Nessuna freccia decorativa fra i passaggi. */
.steps3 > .step + .step::before,
.steps4 > .step + .step::before { display: none; }
.step h3 { font-family: var(--sans); font-size: 13px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.step p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 24px; }
.step a { color: var(--ink); text-decoration: none; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; margin-top: auto; }
.step a:hover { color: var(--bronze); }

.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-dark); border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); }
.steps3 > * { background: var(--dark); padding: 38px 34px; }
.steps3 > *:first-child { padding-left: 0; }
.steps3 > *:last-child  { padding-right: 0; }
.steps3 .step h3, .steps3 h3 { margin-top: 0; }
.steps3 h3 { font-family: var(--sans); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; color: var(--cream); }
.steps3 p { font-size: 14.5px; line-height: 1.65; color: color-mix(in srgb, var(--cream) 66%, transparent); margin: 0; }

.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.stats4--2 { grid-template-columns: repeat(2, 1fr); }
.stats4--3 { grid-template-columns: repeat(3, 1fr); }
.stat__value { font-family: var(--serif); font-size: 48px; line-height: 1; color: var(--cream); }
.stat__label { margin-top: 10px; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 60%, transparent); font-weight: 600; }
.home-accumulo-scroll {
  --scrub-progress: 0;
  min-height: 220vh;
  position: relative;
  margin: 0 auto 56px;
}
.home-accumulo-motion {
  width: min(100%, 1080px);
  position: sticky;
  top: clamp(82px, 13vh, 132px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--rule-dark);
  background: #000;
}
.home-accumulo-motion video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}
.home-accumulo-motion__progress {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 18px;
  left: 22px;
  display: grid;
  grid-template-columns: auto minmax(80px, 180px) auto;
  align-items: center;
  justify-content: end;
  gap: 11px;
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.home-accumulo-scroll.is-ready .home-accumulo-motion__progress {
  opacity: 1;
  transform: none;
}
.home-accumulo-motion__rail {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: color-mix(in srgb, var(--cream) 30%, transparent);
}
.home-accumulo-motion__rail i {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--bronze);
  transform: scaleX(var(--scrub-progress));
  transform-origin: left center;
  will-change: transform;
}

/* ==================================================================
   GALLERIE
   ================================================================== */
.gal { display: grid; gap: 18px; }
.gal--2 { grid-template-columns: 1fr 1fr; }
.gal--3 { grid-template-columns: repeat(3, 1fr); }
.gal--3-hero { grid-template-columns: 1.25fr 1fr 1fr; }
.gal figure { margin: 0; overflow: hidden; background: var(--dark-2); }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
/* Banda di solo testo: titolo a sinistra, corpo a destra. */
.blocco-testo { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px 64px; align-items: start; }
.blocco-testo h2 { margin: 0; }
.blocco-testo p:first-child { margin-top: 0; }
.blocco-testo .link-arrow { margin-top: 10px; }

.process-grid { gap: 24px; align-items: stretch; }
.process-card { display: flex; flex-direction: column; color: var(--cream); }
.process-card > img { height: 300px; flex: 0 0 300px; }
.process-card__body { flex: 1; padding: 24px 26px 28px; }
.process-card__heading { display: flex; align-items: baseline; gap: 12px; }
.process-card__number { display: none; }
.process-card__title { color: var(--cream); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.process-card__body p { margin: 14px 0 0; color: color-mix(in srgb, var(--cream) 78%, transparent); font-size: 14px; line-height: 1.65; }
.gal figure:hover img { transform: scale(1.04); }
.gal--tall img   { height: 480px; }
/* linea del pavimento al ~92% dell'altezza: le due stufe poggiano sullo stesso piano */
.gal--ground img { object-position: 50% 92%; }
/* Foto verticali in cui il soggetto sta in basso: il ritaglio centrato lo
   taglierebbe. Usata sul caminetto bifrontale di Prometeo Design. */
.gal__basso img { object-position: 50% 85%; }
/* Due fotografie scattate a distanze molto diverse: in quella verticale il
   caminetto era grande il doppio. Qui la foto si vede intera e piu' piccola,
   appoggiata alla stessa linea di base dell'altra, cosi' i due focolari
   misurano uguale (misurato sull'apertura, 17/09/2026). */
.gal__pari { display: flex; align-items: flex-end; justify-content: center; }
.gal__pari img { height: 320px; width: auto; max-width: 100%; object-fit: contain; }
.gal--medium img { height: 420px; }
/* Foto da vedere intera: niente ritaglio. L'immagine sta alla sua misura
   naturale, centrata, senza mai essere ingrandita (a-legna-01 e' larga 884 px:
   stirata su tutta la fascia diventerebbe molle) e senza superare i 640 px di
   altezza, altrimenti una foto quasi quadrata si mangia mezza schermata. */
.gal__intera img, .gal--medium .gal__intera img {
  width: auto; height: auto;
  max-width: 100%; max-height: 640px;
  margin-inline: auto; object-fit: contain;
}

/* Reveal editoriale per righe. Il contenuto resta testo HTML normale: gli
   involucri vengono aggiunti da site.js soltanto quando il browser supporta
   IntersectionObserver e l'utente non ha chiesto di ridurre il movimento. */
.text-reveal__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.text-reveal__word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(115%) rotate(2.5deg);
  transform-origin: left top;
  transition:
    transform .9s cubic-bezier(.77, 0, .175, 1),
    opacity .45s ease;
  transition-delay: var(--text-reveal-delay, 0ms);
  will-change: transform, opacity;
}
.text-reveal.is-text-revealed .text-reveal__word-inner {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

/* Nella pagina A legna il pavimento occupava quasi un quinto della foto.
   Conserviamo interi stufa e arredi, ritagliando soltanto la fascia bassa. */
.page-a-legna .gal__intera {
  width: min(100%, 670px);
  aspect-ratio: 884 / 820;
  margin-inline: auto;
}
.page-a-legna .gal__intera img,
.page-a-legna .gal--medium .gal__intera img {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center top;
}

/* ---------- gallery cinetica ---------- */
/* ------------------------------------------------------------------
   GALLERY CINETICA — tre bande (decisione cliente 09/09/2026)
   Da computer scorrono in orizzontale, da telefono in verticale.
   Il passo dell'animazione (--shift-x / --shift-y) e la durata li calcola
   site.js sulla larghezza reale di una serie, cosi' il giro e' senza salti
   anche quando un filtro lascia in banda una foto sola.
   ------------------------------------------------------------------ */
/* Colonne che scorrono verso il basso, a ogni larghezza. Quante siano lo
   decide site.js sulla larghezza reale (cinque da computer, due da telefono) e
   lo scrive in --colonne: cambiando numero le foto vengono ridistribuite, non
   nascoste. La griglia si ferma a 1700px e si centra: a monitor larghissimi le
   foto diventerebbero enormi. */
.kinetic-gallery {
  position: relative;
  width: 100vw;
  height: min(860px, 82vh);
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--gallery-lo);
}
.kinetic-gallery__grid {
  position: absolute;
  inset: 0;
  max-width: 1700px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(var(--colonne, 5), minmax(0, 1fr));
  gap: 9px;
  padding: 9px;
}
.kinetic-gallery__band { min-width: 0; min-height: 0; overflow: hidden; }
.kinetic-gallery__track {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: max-content;
  will-change: transform;
  animation: kinetic-band-y var(--band-duration, 60s) linear infinite;
}
.kinetic-gallery__band:nth-child(even) .kinetic-gallery__track {
  animation-name: kinetic-band-y-reverse;
}
.kinetic-gallery__set {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  padding: 0 0 9px;
}
.kinetic-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  background: var(--gallery-hi);
  cursor: zoom-in;
}
/* Mix 4/5 e 1/1: le verticali restano intere, le orizzontali riempiono il quadrato. */
.kinetic-gallery__item--portrait,
.kinetic-gallery__item--tall { aspect-ratio: 4 / 5; }
.kinetic-gallery__item--landscape,
.kinetic-gallery__item--square { aspect-ratio: 1 / 1; }
.kinetic-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
/* Le verticali erano "contenute" nel riquadro 4:5, e siccome quasi nessuna ha
   esattamente quella forma restavano due bande nere ai lati: le colonne
   sembravano bucate. Ora riempiono come tutte le altre (18/09/2026). La piu'
   stretta e' 0,57 e perderebbe un terzo dell'altezza: a quella si da' un
   riquadro piu' alto, cosi' il taglio resta piccolo. */
.kinetic-gallery__item--tall { aspect-ratio: 2 / 3; }
.kinetic-gallery__item:hover img,
.kinetic-gallery__item:focus-visible img { transform: scale(1.045); }

/* Il codice prodotto non compare piu' sulle miniature: solo nel dettaglio. */
/* Le foto in catalogo si aprono a tutto schermo: li' il codice si legge, perche'
   e' impresso nell'immagine servita da foto.php. Sulla miniatura non compare. */
.catalog-media { position: relative; }
.catalog-media[data-foto-codice] { cursor: zoom-in; }
.catalog-media[data-foto-codice]:focus-visible { outline: 2px solid var(--evidenza); outline-offset: 3px; }
/* Il filtro non nasconde le altre foto: le sfoca e le scurisce, cosi' la
   selezione si stacca da sola. Il bordo arancione che c'era prima si leggeva
   male sulle foto chiare. */
.kinetic-gallery__item img { transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
.kinetic-gallery.ha-evidenza .kinetic-gallery__item:not(.is-evidenziata) img {
  filter: blur(3px) brightness(.45) saturate(.65);
}
.kinetic-gallery__item:focus-visible { outline: 2px solid var(--cream); outline-offset: -3px; }
.kinetic-gallery:not(.is-impulsing) .kinetic-gallery__band:hover .kinetic-gallery__track { animation-play-state: paused; }
.kinetic-gallery__item[hidden] { display: none; }

@keyframes kinetic-band-y {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, var(--shift-y, -50%), 0); }
}
@keyframes kinetic-band-y-reverse {
  from { transform: translate3d(0, var(--shift-y, -50%), 0); }
  to { transform: translate3d(0, 0, 0); }
}

.gallery-hero { padding-bottom: 52px; background: var(--gallery-hi); }
.gallery-page { min-height: 70vh; }
.gallery-filters { display: flex; flex-direction: column; gap: 14px; padding: 0 0 20px; border-bottom: 1px solid var(--rule-dark); }
.gallery-filters__riga { display: flex; flex-wrap: wrap; gap: 8px 22px; }
/* Secondo livello: le categorie del gruppo scelto, rientrate sotto di lui. */
.gallery-filters__riga--sotto { padding-left: 22px; }
.gallery-filters__riga--sotto[hidden] { display: none; }
.gallery-filter {
  padding: 8px 0; border: 0; border-bottom: 1px solid transparent;
  color: color-mix(in srgb, var(--cream) 58%, transparent); background: transparent;
  font: 500 15px/1.35 var(--sans); letter-spacing: .06em; text-align: left; cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.gallery-filter--sotto { font-size: 10.5px; }
.gallery-filter:hover, .gallery-filter:focus-visible { color: var(--cream); }
.gallery-filter.is-active { color: var(--cream); border-bottom-color: var(--cream); }
/* Passaggio fra carosello e catalogo. Il pulsante sta in fondo alla riga dei
   filtri e resta un filtro nell'aspetto, perche' li' vive. */
.vista {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto; padding: 7px 12px;
  border: 1px solid var(--rule-dark); background: transparent;
  color: color-mix(in srgb, var(--cream) 70%, transparent); cursor: pointer;
  font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.vista svg { width: 15px; height: 15px; display: block; }
.vista:hover { color: var(--cream); border-color: color-mix(in srgb, var(--cream) 40%, transparent); }
.vista[aria-pressed="true"] { color: var(--dark); background: var(--cream); border-color: var(--cream); }
.vista:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* La griglia del catalogo: statica, per categoria, codice sotto come titolo. */
.catalogo { background: var(--gallery-lo); padding: 8px 0 64px; }
.catalogo .wrap {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 26px 20px;
}
.catalogo__categoria {
  grid-column: 1 / -1; margin: 34px 0 2px;
  font: 600 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream); padding-bottom: 10px; border-bottom: 1px solid var(--rule-dark);
}
.catalogo__categoria:first-child { margin-top: 8px; }
.catalogo__scheda { margin: 0; cursor: zoom-in; }
.catalogo__scheda img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  background: var(--gallery-hi); transition: filter .45s ease, transform .5s ease;
}
.catalogo__scheda figcaption {
  margin-top: 9px; font: 600 11.5px/1.3 var(--sans); letter-spacing: .12em;
  color: color-mix(in srgb, var(--cream) 78%, transparent);
}
.catalogo__scheda:hover img { transform: scale(1.02); }
.catalogo__scheda:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
/* Nel catalogo il filtro nasconde, non sfoca: vedi evidenzia() in site.js. */
.catalogo__scheda[hidden], .catalogo__categoria[hidden] { display: none; }

.gallery-status { padding: 13px 0 22px; color: color-mix(in srgb, var(--cream) 42%, transparent); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.kinetic-gallery--page { height: min(900px, 84vh); min-height: 600px; }
.kinetic-gallery__item[hidden] { display: none; }
.gallery-lightbox {
  width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  color: #fff; background: #1b1e22;
}
.gallery-lightbox[open] { display: block; }
.gallery-lightbox::backdrop { background: rgba(0,0,0,.94); }
.gallery-lightbox__frame { position: absolute; inset: 0; margin: 0; }
.gallery-lightbox img {
  position: absolute; inset: 0;
  display: block; width: 100%; max-width: 100vw;
  height: 100%; max-height: 100dvh;
  padding: 42px; object-fit: contain; object-position: center;
}
/* Il watermark non e' piu' un elemento della pagina: e' impresso nel file
   servito da foto.php, cosi' resta anche in quello che il visitatore salva.
   Qui sotto restano solo la didascalia e il pulsante di scaricamento. */

/* Le frecce per scorrere le foto. Grandi abbastanza da prenderle col pollice
   (48px e' il minimo comodo), ferme ai lati, sopra l'immagine. */
.gallery-lightbox__passo {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  background: rgba(0,0,0,.35); color: #fff; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.gallery-lightbox__passo:hover { background: rgba(0,0,0,.7); border-color: rgba(255,255,255,.6); }
.gallery-lightbox__passo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gallery-lightbox__passo svg { width: 22px; height: 22px; display: block; }
.gallery-lightbox__passo[hidden] { display: none; }
.gallery-lightbox__passo--prima { left: 16px; }
.gallery-lightbox__passo--dopo { right: 16px; }
.gallery-lightbox__conta {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; margin: 0;
  text-align: center; font: 600 11px/1 var(--sans); letter-spacing: .16em;
  color: rgba(255,255,255,.62);
}
.gallery-lightbox__conta[hidden] { display: none; }
@media (max-width: 640px) {
  .gallery-lightbox__passo { width: 46px; height: 46px; }
  .gallery-lightbox__passo--prima { left: 8px; }
  .gallery-lightbox__passo--dopo { right: 8px; }
}

.gallery-lightbox__close {
  position: absolute; z-index: 2; top: 18px; right: 22px;
  width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.35);
  color: #fff; background: rgba(0,0,0,.28); font: 300 29px/1 var(--sans); cursor: pointer;
}

/* griglia prodotti di collezione: formato unico, spazio bianco quando serve */
.grid-prod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-prod--2 { grid-template-columns: repeat(2, 1fr); }
.grid-prod--3 { grid-template-columns: repeat(3, 1fr); }
.card {
  display: flex; flex-direction: column; text-decoration: none;
  background: color-mix(in srgb, var(--cream) 4%, transparent); border: 1px solid var(--rule-dark);
  transition: border-color .25s ease, background .25s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--cream) 42%, transparent); background: color-mix(in srgb, var(--cream) 6%, transparent); }
.card__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); display: flex; align-items: center; justify-content: center; }
.card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 1s ease; }
.card__media--cover img { object-fit: cover; }
.card:hover .card__media img { transform: scale(1.03); }
.card__body { padding: 18px 20px 22px; }
.card__title { font-family: var(--serif); font-size: 18px; color: var(--cream); }
.card__meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 50%, transparent); margin-top: 6px; }
.magazine-grid .card,
.magazine-grid .card:hover { background: var(--dark); }

/* prima / dopo */
.beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.beforeafter figure { margin: 0; }
.beforeafter img { width: 100%; height: 520px; object-fit: contain; background: var(--paper-2); }
.beforeafter figcaption { margin-top: 14px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--bronze); }

/* ==================================================================
   BLOCCHI SPLIT (immagine + testo)
   ================================================================== */
.split { display: grid; grid-template-columns: 1fr 1.1fr; align-items: stretch; }
.split--reverse { grid-template-columns: 1.1fr 1fr; }
.split__media { min-height: 400px; }
.split--fixed .split__media { height: 400px; min-height: 0; }
.split--fixed { align-items: stretch; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; }
.split__body > p { font-size: 15px; line-height: 1.7; margin: 0 0 16px; }

/* Elenco delle collezioni: senza respiro fra un blocco e l'altro le foto di
   categorie diverse si toccano e sembrano una sola fascia continua. */
.collezioni-elenco .split { padding-block: 44px; }
.collezioni-elenco .split:first-child { padding-top: 0; }

/* Ritratto del fondatore: la foto con la frase sovrimpressa.
   La foto e' gia' in bianco e nero, quindi nessun viraggio da applicare;
   object-position tiene la testa lontana dal taglio: la colonna e' piu' bassa
   della foto e con object-fit cover si perde sopra e sotto in parti uguali. */
/* Il ritratto del fondatore non riempie piu' mezza pagina: e' una fotografia
   piccola, centrata nella sua meta' (richiesta cliente 17/09/2026). */
.ritratto { display: flex; align-items: center; justify-content: center; padding: 64px 24px; }
/* aspect-ratio tiene il posto prima che la foto arrivi: senza, il riquadro
   nasceva alto zero e il caricamento pigro non partiva mai. */
.ritratto img { width: min(380px, 78%); height: auto; aspect-ratio: 624 / 754; object-fit: cover; }

/* confronto 2 colonne su chiaro */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-light); }
.compare > * { background: var(--paper-2); padding: 48px 44px; }
/* Variante scura: il confronto vive anche dentro le sezioni nere, e li' il fondo
   chiaro dei due riquadri spezzava la banda. */
.compare--scuro { background: var(--rule-dark); }
.compare--scuro > * { background: var(--dark-2); }
.compare--scuro .compare__lead { color: var(--cream); }
.compare--scuro li { color: color-mix(in srgb, var(--cream) 74%, transparent); }
.compare__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 24px; }
.compare__lead { font-family: var(--serif); font-size: 24px; color: var(--ink-warm); line-height: 1.25; margin-bottom: 26px; }
.compare li { list-style: none; display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; margin-bottom: 14px; }
.compare ul { margin: 0; padding: 0; }
.compare li::before { content: '—'; color: var(--bronze); }

/* tabella efficienza */
.efftable { display: grid; grid-template-columns: minmax(150px,1fr) repeat(3, minmax(140px,1fr)) minmax(160px,1.15fr); }
.efftable__head { padding: 22px 14px; display: flex; align-items: flex-start; justify-content: center; text-align: center; border-bottom: 1px solid var(--rule-light); }
.efftable__head span { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.efftable__rowlabel { padding: 26px 18px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8a8378; font-weight: 600; display: flex; align-items: center; border-bottom: 1px solid rgba(38,34,28,.08); }
.efftable__cell { padding: 26px 14px; display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid rgba(38,34,28,.08); }
.efftable__cell span.v { margin-top: 12px; font-size: 12.5px; text-align: center; line-height: 1.35; }
.efftable__cell span.n { margin-top: 12px; font-family: var(--serif); font-size: 26px; }
.efftable__scroll { overflow-x: auto; }

@media (max-width: 700px) {
  .effintro { margin-bottom: 38px !important; }
  .efftable__scroll { overflow: visible; }
  .efftable__scroll .efftable {
    min-width: 0;
    grid-template-columns: 1fr 1fr;
  }

  /* Su mobile la stessa tabella desktop diventa una sequenza di schede:
     contenuti, icone e colori restano quindi identici in entrambe le viste. */
  .efftable > :nth-child(1),
  .efftable > :nth-child(6),
  .efftable > :nth-child(11),
  .efftable > :nth-child(16),
  .efftable > :nth-child(21) { display: none; }

  .efftable > :nth-child(2)  { order: 1; }
  .efftable > :nth-child(7)  { order: 2; }
  .efftable > :nth-child(12) { order: 3; }
  .efftable > :nth-child(17) { order: 4; }
  .efftable > :nth-child(22) { order: 5; }
  .efftable > :nth-child(3)  { order: 6; }
  .efftable > :nth-child(8)  { order: 7; }
  .efftable > :nth-child(13) { order: 8; }
  .efftable > :nth-child(18) { order: 9; }
  .efftable > :nth-child(23) { order: 10; }
  .efftable > :nth-child(4)  { order: 11; }
  .efftable > :nth-child(9)  { order: 12; }
  .efftable > :nth-child(14) { order: 13; }
  .efftable > :nth-child(19) { order: 14; }
  .efftable > :nth-child(24) { order: 15; }
  .efftable > :nth-child(5)  { order: 16; }
  .efftable > :nth-child(10) { order: 17; }
  .efftable > :nth-child(15) { order: 18; }
  .efftable > :nth-child(20) { order: 19; }
  .efftable > :nth-child(25) { order: 20; }

  .efftable__head {
    grid-column: 1 / -1;
    min-height: 0;
    margin-top: 14px;
    padding: 23px 20px 17px;
    justify-content: flex-start;
    text-align: left;
    border: 1px solid rgba(38,34,28,.14);
    background: rgba(255,255,255,.2);
  }
  .efftable > :nth-child(2) { margin-top: 0; }
  .efftable__head span {
    max-width: 290px;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.18;
    text-transform: none;
  }
  .efftable__cell {
    min-height: 132px;
    padding: 17px 12px 20px;
    justify-content: flex-start;
    border: 0;
    background: rgba(255,255,255,.2);
  }
  .efftable__cell::before {
    min-height: 24px;
    margin-bottom: 9px;
    color: #8a8378;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
  }
  .efftable > :is(:nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10))::before { content: 'Emissioni'; }
  .efftable > :is(:nth-child(12), :nth-child(13), :nth-child(14), :nth-child(15))::before { content: 'Consumo di legna'; }
  .efftable > :is(:nth-child(17), :nth-child(18), :nth-child(19), :nth-child(20))::before { content: 'Efficienza energetica'; }
  .efftable > :is(:nth-child(22), :nth-child(23), :nth-child(24), :nth-child(25))::before { content: 'Comfort termico'; }

  .efftable > :is(:nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10),
                   :nth-child(17), :nth-child(18), :nth-child(19), :nth-child(20)) {
    border-left: 1px solid rgba(38,34,28,.14);
    border-right: 1px solid rgba(38,34,28,.08);
  }
  .efftable > :is(:nth-child(12), :nth-child(13), :nth-child(14), :nth-child(15),
                   :nth-child(22), :nth-child(23), :nth-child(24), :nth-child(25)) {
    border-right: 1px solid rgba(38,34,28,.14);
  }
  .efftable > :is(:nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10),
                   :nth-child(12), :nth-child(13), :nth-child(14), :nth-child(15)) {
    border-bottom: 1px solid rgba(38,34,28,.08);
  }
  .efftable > :is(:nth-child(17), :nth-child(18), :nth-child(19), :nth-child(20),
                   :nth-child(22), :nth-child(23), :nth-child(24), :nth-child(25)) {
    border-bottom: 1px solid rgba(38,34,28,.14);
  }
  .efftable > :is(:nth-child(5), :nth-child(10), :nth-child(15), :nth-child(20), :nth-child(25)) {
    background: rgba(68,58,43,.055);
  }
}

/* ==================================================================
   PARTNER
   ================================================================== */
.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.partner-card { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--rule-dark); background: color-mix(in srgb, var(--cream) 3%, transparent); transition: border-color .25s ease; }
.partner-card:hover { border-color: color-mix(in srgb, var(--cream) 45%, transparent); }
.partner-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.partner-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.partner-card:hover .partner-card__media img { transform: scale(1.04); }
.partner-card__media--empty { display: flex; align-items: center; justify-content: center; background: var(--dark-2); font-family: var(--serif); font-size: 30px; color: color-mix(in srgb, var(--cream) 35%, transparent); }
.partner-card__body { padding: 20px 22px 24px; }
.partner-card__name { font-family: var(--serif); font-size: 21px; color: var(--cream); }
.partner-card__country { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); margin: 6px 0 10px; }
.partner-card__claim { font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--cream) 60%, transparent); margin: 0 0 14px; }
.partner-card__link { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--gold); }

/* ==================================================================
   RESPONSABILITA' SOCIALE — il contatore della CO2 risparmiata
   ================================================================== */
/* Un respiro fra il testo e il numero: due fotografie affiancate, tagliate
   basse perche' restino una fascia e non diventino immagini da catalogo. */
.co2__immagini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 48px; }
.co2__immagini figure { margin: 0; overflow: hidden; }
.co2__immagini img { width: 100%; height: 300px; object-fit: cover; display: block; }
.co2__immagini figure:first-child img { object-position: center 60%; }
.co2__immagini figure:last-child img { object-position: center 35%; }
/* Rimasto il solo bosco: una fascia sola, piu' bassa. */
.co2__immagini--una { grid-template-columns: 1fr; }
.co2__immagini--una img { height: 260px; }
/* La bambina accompagna la nota sotto cui e' stata spostata. */
.co2__nota-foto { margin: 18px 0 0; overflow: hidden; }
.co2__nota-foto img { width: 100%; height: 190px; object-fit: cover; object-position: center 35%; display: block; }

/* Il contatore e la mappa stanno affiancati: il numero dice quanto, la mappa
   dice dove. La mappa e' un disegno, non una fotografia — vedi
   assets/img/valori/italia-punti.svg — e le sue luci respirano ognuna con il
   suo ritmo, definito dentro il file stesso. */
.co2__figure {
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  padding: 44px 0 40px;
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px 56px;
  align-items: center;
}
.co2__mappa { margin: 0; justify-self: end; max-width: 340px; }
.co2__mappa img { width: 100%; height: auto; display: block; }
.co2__mappa figcaption {
  margin-top: 14px; font-size: 12px; line-height: 1.55;
  color: color-mix(in srgb, var(--cream) 50%, transparent);
}
@media (max-width: 860px) {
  .co2__figure { grid-template-columns: 1fr; gap: 32px; }
  .co2__mappa { justify-self: start; max-width: 230px; }
}
.co2__value {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 7vw, 76px); line-height: 1;
  color: var(--cream); font-variant-numeric: tabular-nums;
}
.co2__unita {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bronze);
}
.co2__label {
  margin: 18px 0 0; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--cream) 60%, transparent);
}
/* Come e' fatto il numero: sta sotto il contatore, non in una pagina a parte. */
.co2__nota {
  margin: 22px 0 0; max-width: 68ch;
  font-size: 14.5px; line-height: 1.7; color: color-mix(in srgb, var(--cream) 64%, transparent);
}
.co2__notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.co2__notes h3 {
  font-family: var(--serif); font-weight: 400; font-size: 26px;
  color: var(--cream); margin: 0 0 12px; padding-top: 22px;
  border-top: 1px solid var(--rule-dark);
}
.co2__notes p { margin: 0; font-size: 15.5px; line-height: 1.7; color: color-mix(in srgb, var(--cream) 70%, transparent); }

/* I partner del B2B occupano tutta la banda invece di stare in pillole
   piccole allineate a sinistra. */
.partner-riga {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule-dark); margin: 0 0 56px;
  border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark);
}
.partner-riga a {
  background: var(--dark); padding: 26px 18px; text-align: center;
  color: var(--cream); text-decoration: none;
  font-size: 15.5px; letter-spacing: .04em;
  transition: background .2s ease, color .2s ease;
}
.partner-riga a:hover { background: color-mix(in srgb, var(--cream) 7%, transparent); }

/* ==================================================================
   TIMELINE (Chi siamo)
   ================================================================== */
.timeline { display: flex; flex-direction: column; }
.timeline__row {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px;
  padding: 26px 0; border-top: 1px solid var(--rule-dark);
}
.timeline__row:last-child { border-bottom: 1px solid var(--rule-dark); }
.timeline__mark { font-family: var(--serif); font-size: 26px; color: var(--bronze); line-height: 1.2; }
.timeline__body { font-size: 15px; line-height: 1.75; color: color-mix(in srgb, var(--cream) 66%, transparent); margin: 0; max-width: 760px; }

/* citazione in evidenza */
blockquote { border-left: 1px solid rgba(154,139,117,.5); padding-left: 28px; }

/* citazioni clienti */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-light); }
.quote { margin: 0; background: var(--paper-2); padding: 34px 30px; display: flex; flex-direction: column; justify-content: space-between; }

/* ==================================================================
   CTA / BANDE
   ================================================================== */
.cta-center { text-align: center; }
.cta-center h2 { font-size: 32px; line-height: 1.2; color: var(--cream); margin-bottom: 32px; }
.cta-center__btns { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* ==================================================================
   FOOTER
   ================================================================== */

.site-footer { background: var(--dark); color: var(--cream); padding: 72px 0 40px; border-top: 1px solid var(--rule-dark); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.site-footer h4 { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); margin: 0 0 18px; font-weight: 600; font-family: var(--sans); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: color-mix(in srgb, var(--cream) 80%, transparent); text-decoration: none; font-size: 14px; transition: color .2s ease; }
.site-footer a:hover { color: var(--gold); }
.site-footer__logo img { height: 44px; margin-bottom: 0; }
/* Il guizzo del fuoco: dove un video non si puo' fare — vedi la pagina a legna,
   dove la rete neurale rimodellava l'esca — la luce della fiamma si puo'
   comunque far respirare. Non si tocca la forma della fiamma: si aggiunge luce
   sopra la fotografia, e la luce pulsa.
   Due aloni con durate diverse e mai multiple fra loro (3,7 e 5,3 secondi):
   la loro somma non si ripete mai uguale, quindi il tremolio non ha un ritmo
   riconoscibile. Con un alone solo si sentirebbe il battito. */
.media__guizzo {
  position: absolute; z-index: 1; pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 64%,
      rgba(255,190,105,.52) 0%, rgba(255,146,48,.26) 36%, rgba(255,120,30,0) 70%);
  animation: guizzo 3.7s ease-in-out infinite;
  will-change: opacity, transform;
}
/* il secondo alone e' piu' largo e piu' lento: e' il riverbero sul legno */
.media__guizzo::after {
  content: ''; position: absolute; inset: -55% -70%;
  background: radial-gradient(ellipse at 50% 58%,
      rgba(255,168,80,.3) 0%, rgba(255,132,40,.13) 42%, rgba(255,120,30,0) 74%);
  animation: guizzo-largo 5.3s ease-in-out infinite;
}
@keyframes guizzo {
  0%   { opacity: .58; transform: scale(1)    translateY(0); }
  9%   { opacity: .86; transform: scale(1.06) translateY(-1.5%); }
  17%  { opacity: .64; transform: scale(.98); }
  28%  { opacity: 1;   transform: scale(1.11) translateY(-2.5%); }
  36%  { opacity: .72; transform: scale(1.02); }
  47%  { opacity: .92; transform: scale(1.07) translateY(-1%); }
  58%  { opacity: .6;  transform: scale(.97); }
  69%  { opacity: .97; transform: scale(1.09) translateY(-2%); }
  81%  { opacity: .68; transform: scale(1.01); }
  92%  { opacity: .89; transform: scale(1.05); }
  100% { opacity: .58; transform: scale(1)    translateY(0); }
}
@keyframes guizzo-largo {
  0%   { opacity: .5;  transform: scale(1); }
  23%  { opacity: .84; transform: scale(1.05); }
  41%  { opacity: .62; transform: scale(.99); }
  64%  { opacity: .95; transform: scale(1.07); }
  83%  { opacity: .68; transform: scale(1.02); }
  100% { opacity: .5;  transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .media__guizzo, .media__guizzo::after { animation: none; opacity: .7; }
}

/* La mappa nella pagina della consulenza. Il riquadro tiene le proporzioni da
   solo: cosi' la pagina non sussulta quando Google finisce di caricare. */
.mappa-testa { display: flex; justify-content: center; margin-bottom: 34px; }
/* I due pulsanti delle sedi: stesso disegno dei filtri della gallery, cosi'
   chi ha gia' visto quelli sa cosa aspettarsi. */
.mappa-scelta { display: flex; gap: 8px; }
.mappa-scelta__voce {
  padding: 9px 18px; border: 1px solid var(--rule-dark); background: transparent;
  color: color-mix(in srgb, var(--cream) 70%, transparent); cursor: pointer;
  font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.mappa-scelta__voce:hover { color: var(--cream); border-color: color-mix(in srgb, var(--cream) 40%, transparent); }
.mappa-scelta__voce.is-active { color: var(--dark); background: var(--cream); border-color: var(--cream); }
.mappa-scelta__voce:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.mappa { border: 1px solid var(--rule-dark); overflow: hidden; background: var(--gallery-hi); }
.mappa iframe { display: block; width: 100%; aspect-ratio: 21 / 8; border: 0; }
@media (max-width: 960px) {
  .mappa iframe { aspect-ratio: 4 / 3; }
}

/* I social, nel footer sotto i recapiti. Il segno e' un tracciato disegnato:
   resta nitido a ogni misura e non fa scaricare niente. */
.social { display: flex; gap: 14px; list-style: none; margin: 22px 0 0; padding: 0; }
.social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--rule-dark); border-radius: 50%;
  color: color-mix(in srgb, var(--cream) 62%, transparent); transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.social svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.social a:hover { color: var(--dark); background: var(--cream); border-color: var(--cream); }
.social a:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

.site-footer__blurb { font-size: 14px; line-height: 1.7; color: color-mix(in srgb, var(--cream) 72%, transparent); max-width: 320px; }
.site-footer .site-footer__map {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--cream) 28%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.site-footer .site-footer__map:hover { text-decoration-color: currentColor; }
.site-footer__bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule-dark); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12px; color: color-mix(in srgb, var(--cream) 64%, transparent); }
/* Alcune versioni di iOS trasformano la build numerica in un falso numero di
   telefono. Il meta format-detection lo impedisce; questa regola copre anche
   i WebKit meno recenti che avessero gia' creato il collegamento. */
.site-footer__bottom a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  border: 0 !important;
}

/* ==================================================================
   FORM (canale riservato Prometeo Design / consulenza)
   ================================================================== */
.formcard { background: var(--dark-2); border: 1px solid var(--rule-dark); padding: 36px 34px; }
.formcard h3 { font-size: 24px; color: var(--cream); margin-bottom: 8px; }
.formcard > p { font-size: 14px; color: color-mix(in srgb, var(--cream) 74%, transparent); margin: 0 0 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 72%, transparent); font-weight: 600; margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; background: color-mix(in srgb, var(--cream) 5%, transparent); border: 1px solid color-mix(in srgb, var(--cream) 20%, transparent);
  color: var(--cream); font-family: var(--sans); font-size: 14.5px; padding: 13px 14px; border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bronze); }
/* La tendina del menu la disegna il sistema operativo, non la pagina: senza
   queste due righe apriva un riquadro bianco con sopra il testo crema del
   campo, illeggibile. color-scheme la fa nascere scura, i colori sulle option
   valgono dove il browser li rispetta. */
.field select { color-scheme: dark; }
.field select option { background: #1d222a; color: #ece7df; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formcard button { width: 100%; justify-content: center; margin-top: 8px; }
.form-note { font-size: 12px; line-height: 1.6; color: color-mix(in srgb, var(--cream) 68%, transparent); margin-top: 16px; }

/* Consenso privacy: la casella sta accanto al testo, non sopra come i campi.
   Il link all'informativa sta dentro la label ma resta un link: per la
   specifica HTML un click su contenuto interattivo non attiva la label. */
.field--consenso { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 20px; }
.field--consenso label {
  display: block; margin: 0; font-size: 12.5px; line-height: 1.5;
  letter-spacing: 0; text-transform: none; font-weight: 400; color: color-mix(in srgb, var(--cream) 72%, transparent);
}
.field--consenso label a { color: var(--gold); }
.field--consenso input[type="checkbox"] {
  flex: 0 0 auto; width: 15px; height: 15px; margin: 2px 0 0; padding: 0;
  accent-color: var(--bronze); cursor: pointer;
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
/* fascia intermedia: la nav a 7 voci va stretta ma non deve andare a capo */
@media (min-width: 1361px) and (max-width: 1540px) {
  .site-header { padding: 20px 28px; }
  .nav { gap: 20px; }
  .nav__link { font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
  .nav .btn { padding: 12px 16px; font-size: 10px; letter-spacing: .1em; white-space: nowrap; }
  .site-header__logo img { height: 50px; }
}

@media (max-width: 1080px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .grid-prod, .grid-prod--3, .partner-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  :root { --pad-x: 28px; }
  /* In cima alla home il menu deve lasciare vedere la fotografia anche da
     telefono. Le pagine interne, marcate --solid, mantengono la barra piena. */
  body:not(.is-scrolled) .site-header:not(.site-header--solid) {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header__logo img, body.is-scrolled .site-header__logo img { height: 40px; }
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(420px, 100%);
    background: var(--dark); flex-direction: column; align-items: stretch;
    gap: 0; padding: 96px 28px 40px; overflow-y: auto;
    transform: translateX(100%); transition: transform .3s ease; z-index: 65;
  }
  body.nav-open .nav { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  .nav__item { border-bottom: 1px solid var(--rule-dark); }
  .nav__link { padding: 16px 0; font-size: 13px; justify-content: space-between; width: 100%; }
  .mega, .mega--wide {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; display: none; grid-template-columns: 1fr;
    background: transparent; border: 0; padding: 0 0 18px;
  }
  .nav__item.is-open > .mega, .nav__item.is-open > .mega--wide { display: block; }
  .nav .btn { margin-top: 24px; justify-content: center; }

  .h-hero { font-size: 38px; }
  .h-section { font-size: 32px; }
  .h-sub { font-size: 27px; }
  .hero { min-height: 600px; }
  .hero__body { padding-top: 120px; }
  /* su schermi stretti il gradiente orizzontale non copre il testo: verticale */
  .hero__veil   { background: linear-gradient(180deg, rgba(15,16,18,.78) 0%, rgba(15,16,18,.58) 45%, rgba(15,16,18,.82) 100%); }
  .figure__veil { background: linear-gradient(180deg, rgba(15,16,18,.80) 0%, rgba(15,16,18,.34) 62%, rgba(15,16,18,.50) 100%); }
  .figure { min-height: 420px; }
  .figure h2 { font-size: 30px; }
  .page-hero { padding-top: 120px; }
  .page-hero h1 { font-size: 34px; }
  .page-hero__grid { grid-template-columns: 1fr; gap: 26px; }
  .page-hero__grid h1 + p::before,
  .page-hero__grid h1 + div > p:first-child::before { width: 54px; height: 54px; margin-right: 14px; }

  .solutions__split { grid-template-columns: 1fr; }
  .duo, .acc-intro, .split-flat { grid-template-columns: 1fr !important; gap: 32px !important; }
  .timeline__row { grid-template-columns: 1fr; gap: 12px; }
  .quotes { grid-template-columns: 1fr; }
  blockquote { padding-left: 18px; }
  .solutions__col--a { padding-right: 0; padding-bottom: 48px; }
  .solutions__col--b { padding-left: 0; padding-top: 40px; border-left: 0; border-top: 1px solid var(--rule-dark); }
  .solutions__bg { width: 100%; opacity: .12; }

  .section { padding: 64px 0; }
  .steps4, .steps3, .stats4, .stats4--3 { grid-template-columns: 1fr 1fr; }
  .steps4 > *, .steps3 > * { padding: 28px 0; }
  .steps3 > .step + .step::before,
  .steps4 > .step + .step::before { content: none; left: 0; top: 6px; transform: none; }
  .split, .split--reverse, .compare, .beforeafter { grid-template-columns: 1fr; }
  /* I padding laterali dichiarati inline servono al desktop; su mobile ogni
     blocco split torna alla stessa colonna di lettura del resto del sito. */
  .split__body { padding: 40px var(--pad-x) !important; }
  .split__media { min-height: 280px; }
  .ritratto { padding: 48px 24px; }
  .compare > * { padding: 32px 0; }
  .blocco-testo { grid-template-columns: 1fr; gap: 22px; }
  .gal--2, .gal--3, .gal--3-hero { grid-template-columns: 1fr; }
  .gal--tall img, .gal--medium img { height: 340px; }
  .beforeafter img { height: 380px; }
  .efftable { min-width: 760px; }
  .co2__notes { grid-template-columns: 1fr 1fr; gap: 28px; }
  .partner-riga { grid-template-columns: repeat(2, 1fr); }
  .kinetic-gallery { height: 86vh; min-height: 440px; }
  .kinetic-gallery__grid { gap: 7px; padding: 7px; }
  .kinetic-gallery__set { gap: 7px; padding-bottom: 7px; }
}

/* Con il lockup del trentennale e la voce Gallery il menu passa prima al pannello. */
@media (min-width: 961px) and (max-width: 1360px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(420px, 100%);
    background: var(--dark); flex-direction: column; align-items: stretch;
    gap: 0; padding: 96px 28px 40px; overflow-y: auto;
    transform: translateX(100%); transition: transform .3s ease; z-index: 65;
  }
  body.nav-open .nav { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  .nav__item { border-bottom: 1px solid var(--rule-dark); }
  .nav__link { padding: 16px 0; font-size: 13px; justify-content: space-between; width: 100%; }
  .mega, .mega--wide {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; display: none; grid-template-columns: 1fr;
    background: transparent; border: 0; padding: 0 0 18px;
  }
  .nav__item.is-open > .mega, .nav__item.is-open > .mega--wide { display: block; }
  .nav .btn { margin-top: 24px; justify-content: center; }
}

@media (max-width: 600px) {
  /* Il lockup del trentennale non entra a 390px: logo e cifra piu' piccoli,
     il filetto verticale del marchio sparisce per recuperare larghezza. */
  .site-header__logo img, body.is-scrolled .site-header__logo img { height: 24px; }
  /* Stesso problema nel footer: li' la colonna e' stretta e il lockup va a capo. */
  .site-footer__logo img { height: 28px; }
  .grid-prod, .grid-prod--2, .grid-prod--3, .partner-grid,
  .stats4, .stats4--2, .stats4--3,
  .steps4, .steps3, .site-footer__grid { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .h-hero { font-size: 32px; }
  .hero p { font-size: 15.5px; }
  /* La presentazione resta in alto, descrizione e azioni stanno in fondo, e
     in mezzo passa la fiamma. Fra i due c'era troppo vuoto (segnalato il
     25/09/2026): la fotografia viene tirata su di --hero-alza, cosi' il
     camino sale, e il testo puo' salire con lui.
     Le descrizioni piu' lunghe crescono verso l'alto invece di sfondare il
     fondo della sezione: per questo sono ancorate in basso e non a una
     percentuale. */
  .hero--home { min-height: 800px; align-items: stretch; --hero-alza: 340px; }
  .hero--home .hero__body { width: 100%; max-width: none; }
  .hero--home .hero__img {
    height: calc(100% + var(--hero-alza));
    top: calc(-1 * var(--hero-alza));
    bottom: auto;
  }
  .hero--home .hero__details {
    position: absolute;
    z-index: 2;
    top: auto;
    bottom: 32px;
    right: var(--pad-x);
    left: var(--pad-x);
  }
  .hero--home .hero__details > p { margin-bottom: 28px; }
  .btn { padding: 15px 22px; font-size: 11px; }
  /* Da telefono le colonne scendono a due, e le decide site.js: qui resta
     solo la misura del riquadro e la fittezza. */
  .kinetic-gallery { height: 150vw; min-height: 520px; max-height: 760px; }
  .kinetic-gallery__grid { gap: 7px; padding: 7px; }
  .kinetic-gallery__set { gap: 7px; padding-bottom: 7px; }
  .kinetic-gallery.ha-evidenza .kinetic-gallery__item:not(.is-evidenziata) img { filter: blur(2px) brightness(.45); }
  .co2__notes { grid-template-columns: 1fr; gap: 24px; }
  .co2__immagini { grid-template-columns: 1fr; gap: 8px; }
  .co2__immagini img { height: 200px; }
  .catalogo .wrap { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px 14px; }
  .vista { margin-left: 0; }
  .gallery-filters { gap: 6px 16px; }
  .gallery-filter { font-size: 10px; }
  .gallery-lightbox img { padding: 54px 12px 46px; }
  .home-accumulo-scroll {
    min-height: 0;
    margin-bottom: 40px;
  }
  /* Da telefono torna a essere un filmato normale: nessun tratto sticky e
     nessuna altezza legata allo scroll. Il video completo gira da solo. */
  .home-accumulo-motion {
    position: relative;
    top: auto;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-left: 0; border-right: 0;
  }
  .home-accumulo-motion__progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__fuoco, .media__fuoco { display: none; }
  .hero__firelight { display: none; }
  .home-accumulo-scroll { min-height: 0; }
  .home-accumulo-motion { position: relative; top: auto; }
  .home-accumulo-motion__progress { display: none; }
  .kinetic-gallery__track, .kinetic-gallery__grid { animation-play-state: paused; }
  .kinetic-gallery__item img { transition: none; }
  .anniversary-loader__film { display: none; }
  .anniversary-loader__still { display: block; }
  .text-reveal__word-inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Link alla scheda Google sotto la mappa della pagina consulenza */
.mappa-apri { margin: 18px 0 0; }

/* I link legali in fondo. Stanno sulla stessa riga del colophon da computer e
   vanno a capo da telefono, come gia' fa il resto della barra. */
.site-footer__legale { display: inline-flex; flex-wrap: wrap; gap: 18px; }
.site-footer__legale a {
  color: color-mix(in srgb, var(--cream) 58%, transparent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  padding-bottom: 2px;
  cursor: pointer;
}
.site-footer__legale a:hover { color: var(--cream); border-bottom-color: currentColor; }

/* ============ ARTICOLO DEL MAGAZINE ============
   Il testo arriva da WordPress e porta con se' il suo marcatura: paragrafi,
   figure, citazioni, elenchi, video incorporati. Invece di riscrivere 101
   articoli si veste qui quello che gia' c'e'.
   La colonna e' piu' stretta del resto del sito perche' e' testo da leggere:
   oltre i 70 caratteri per riga l'occhio perde il capo quando va a capo. */
.wrap--stretto { max-width: calc(760px + 2 * var(--pad-x)); }

/* L'articolo e' una fascia scura come le altre. Va detto qui: i titoli del
   sito non portano un colore proprio, lo ereditano, e fuori da una
   .section--dark ereditavano l'inchiostro scuro pensato per le fasce chiare.
   Il titolo veniva rgb(35,38,43) su sfondo rgb(21,25,31): praticamente
   invisibile. Visto a schermo il 25/09/2026. */
.articolo { background: var(--dark); color: var(--cream); display: block; }
.articolo h1, .articolo h2, .articolo h3, .articolo h4 { color: var(--cream); }

.articolo__testa { padding: 128px 0 32px; }
.articolo__testa .eyebrow a { color: inherit; text-decoration: none; }
.articolo__testa .eyebrow a:hover { color: var(--gold); }
.articolo__testa h1 {
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.12;
  margin: 0 0 18px;
  max-width: 20ch;
}
.articolo__meta {
  font-size: 13px;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--cream) 52%, transparent);
  margin: 0;
}

.articolo__copertina { margin: 0 0 clamp(32px, 5vw, 56px); }
.articolo__copertina img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 2px;
}

.articolo__testo {
  font-size: 17px;
  line-height: 1.75;
  color: color-mix(in srgb, var(--cream) 82%, transparent);
}
.articolo__testo > *:first-child { margin-top: 0; }
.articolo__testo p { margin: 0 0 1.35em; }
.articolo__testo h2, .articolo__testo h3, .articolo__testo h4 {
  font-family: 'Marcellus', Georgia, serif;
  font-weight: 400;
  color: var(--cream);
  line-height: 1.25;
  margin: 2em 0 .6em;
}
.articolo__testo h2 { font-size: clamp(24px, 3vw, 31px); }
.articolo__testo h3 { font-size: clamp(20px, 2.4vw, 24px); }
.articolo__testo h4 { font-size: 19px; }
.articolo__testo strong, .articolo__testo b { color: var(--cream); font-weight: 600; }
.articolo__testo a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.articolo__testo a:hover { color: var(--cream); }
.articolo__testo ul, .articolo__testo ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.articolo__testo li { margin-bottom: .5em; }
.articolo__testo blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--bronze);
  font-family: 'Marcellus', Georgia, serif;
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.45;
  color: var(--cream);
}
.articolo__testo blockquote p:last-child { margin-bottom: 0; }

/* Le immagini dentro al testo: WordPress le lascia con dimensioni fisse e
   allineamenti suoi. Qui si adattano alla colonna, sempre. */
.articolo__testo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em auto;
  border-radius: 2px;
}
.articolo__testo figure { margin: 2em 0; }
.articolo__testo figure img { margin: 0; }
.articolo__testo figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--cream) 48%, transparent);
  text-align: center;
}
.articolo__testo .alignleft, .articolo__testo .alignright,
.articolo__testo .aligncenter, .articolo__testo .alignnone { float: none; margin: 2em auto; }

/* I video incorporati: si allargano alla colonna e tengono le proporzioni. */
.articolo__testo iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 2em 0;
  border: 0;
}
/* I riquadri con cui WordPress avvolge i video */
.articolo__testo .wp-block-embed__wrapper,
.articolo__testo .wp-block-embed { margin: 2em 0; }

.articolo__etichette {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 56px 0 0; padding-top: 28px;
  border-top: 1px solid var(--rule-dark);
}
.articolo__etichette span {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  color: color-mix(in srgb, var(--cream) 58%, transparent);
}

.articolo__seguito { margin-top: clamp(64px, 9vw, 112px); }

@media (max-width: 760px) {
  .articolo__testa { padding: 104px 0 26px; }
  .articolo__testo { font-size: 16.5px; }
}

/* Archivio del Magazine: i titoli piu' vecchi, per anno. Elenco e non schede,
   perche' 92 schede con foto farebbero una pagina che non finisce piu'. */
.archivio__anno { margin-bottom: 44px; }
.archivio__titolo {
  font-family: 'Marcellus', Georgia, serif;
  font-weight: 400; font-size: 26px;
  color: color-mix(in srgb, var(--cream) 42%, transparent);
  margin: 0 0 14px;
}
.archivio__elenco { list-style: none; margin: 0; padding: 0; }
.archivio__elenco li { border-top: 1px solid var(--rule-dark); }
.archivio__elenco a {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  padding: 15px 0;
  text-decoration: none;
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  transition: color .18s ease;
}
.archivio__elenco a:hover { color: var(--cream); }
.archivio__data {
  font-size: 12.5px; letter-spacing: .06em;
  color: color-mix(in srgb, var(--cream) 42%, transparent);
  padding-top: 3px;
}
.archivio__voce { font-size: 16px; line-height: 1.45; }
@media (max-width: 700px) {
  .archivio__elenco a { grid-template-columns: 1fr; gap: 4px; }
  .archivio__data { padding-top: 0; }
}

/* Moduli collegati al CRM: nota "facoltativo" sulle etichette, spazio per il
   widget anti-bot e il suo messaggio d'errore. */
.field__opz { font-weight: 400; opacity: .55; font-size: .85em; }
.dem-recaptcha { margin: 4px 0 20px; }
.dem-recaptcha .g-recaptcha { transform-origin: 0 0; }
.dem-recaptcha__err {
  color: #e0a07a; font-size: 13px; margin: 10px 0 0;
}
/* Su schermi molto stretti il widget (302px) sfora: si rimpicciolisce quel
   tanto che basta a stare nella colonna. */
@media (max-width: 360px) {
  .dem-recaptcha .g-recaptcha { transform: scale(.92); }
}