/* ============================================================
   SAVOIA MARMI — "QUARRY CUT"
   Sezioni a lastre alternate (nero / bianco marmo caldo), tipografia
   enorme, spigoli tagliati in diagonale, testo che si "spacca"
   on-scroll, cursore a filo che rivela immagini alternative.
   ============================================================ */

/* FONT TITOLI (scelta definitiva): Jost per tutti i titoli, Inter resta per il corpo. Il blocco che lo applica e' in fondo al file ("FONT TITOLI — BLOCCO"). Jost e' ospitato in locale, vedi assets/css/fonts.css collegato nell'head di ogni pagina. */

:root {
  --bg-dark: #1a1a1a;
  --bg-dark-alt: #242424;
  --bg-light: #ffffff;
  --bg-light-alt: #f2f2f2;

  --accent: #d82337;
  --accent-dark: #a91a29;

  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.16,.84,.44,1);
  /* curva dedicata alle comparse allo scroll (.reveal e affini): decelerazione morbida e distribuita
     per tutta la durata, invece della curva --ease sopra (usata per l'UI) che concentra il movimento
     nei primi istanti e per questo, su schermi piccoli, si percepiva come uno scatto/lampo. */
  --ease-reveal: cubic-bezier(.33,1,.68,1);
  --notch: 18px;

  /* superficie di default: sezioni scure */
  --surface-bg: var(--bg-dark);
  --surface-bg-alt: var(--bg-dark-alt);
  --surface-text: rgba(255,255,255,0.92); /* mai bianco pieno: lascia respirare la gerarchia coi toni sotto */
  --surface-text-dim: #c9c9c9;
  --surface-text-mute: #8c8c8c;
  --surface-border: rgba(255,255,255,0.14);

  /* ============ SISTEMA TIPOGRAFICO (design tokens) ============ */
  /* tracking: negativo sui pesi alti (compatta, evita che sembrino pesanti),
     positivo sui pesi regular/medium (da respiro), deciso sul maiuscolo */
  --tracking-tight: -0.025em;     /* numeri/titoli a peso 800 */
  --tracking-tight-sm: -0.02em;   /* titoli/parole a peso 700 */
  --tracking-open: 0.02em;        /* titoli a peso regular/medium */
  --tracking-caps: 0.12em;        /* ogni testo maiuscolo: eyebrow, tag, nav, footer, form */

  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* scala modulare (rapporto ~1.25) per sottotitoli, lead, citazioni */
  --fs-body-lg: 1.125rem;
  --fs-h4: 1.25rem;
  --fs-h3: 1.5625rem;
}

/* ============ RESET ============ */
* { margin:0; padding:0; box-sizing:border-box; }
/* (regole Lenis rimosse: lo scroll fluido ora e' GSAP ScrollSmoother, vedi main.js) */
body {
  background:var(--bg-dark);
  color:var(--surface-text-dim);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"liga" 1, "kern" 1;
}
img { max-width:100%; display:block; }
/* Nessun pulsante play sopra i video. Tutti i video del sito partono da soli:
   l'icona nativa che iOS (e in certe condizioni Android) disegna sopra un video
   ancora fermo e' solo un invito fuorviante a toccare qualcosa che sta gia' per
   partire da se'. Nessun video del sito ha l'attributo controls, quindi qui non
   si sta nascondendo nulla di utile. */
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button {
  display:none !important;
  -webkit-appearance:none;
  opacity:0;
}
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
h1,h2,h3,h4 { font-family:var(--font-heading); color:var(--surface-text); font-weight:400; line-height:1.05; letter-spacing:var(--tracking-open); text-wrap:balance; }
h1 { font-weight:500; }
button { font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }

/* ============ PRELOADER (tenda che si apre al caricamento) ============ */
.loader-wrap {
  position:fixed; z-index:999999; inset:0;
  display:flex; overflow:hidden; align-items:center; justify-content:center;
  background:var(--bg-dark);
}
.loader-wrap svg { position:absolute; top:-2px; left:0; width:100%; height:calc(100% + 4px); fill:var(--bg-dark); }
.loader-wrap-heading .load-text {
  font-size:20px; font-weight:200; letter-spacing:15px; text-transform:uppercase; z-index:20; color:#fff;
}
.load-text span { animation:loader-blink 1s infinite alternate; }
.load-text span:nth-child(1) { animation-delay:0s; }
.load-text span:nth-child(2) { animation-delay:0.1s; }
.load-text span:nth-child(3) { animation-delay:0.2s; }
.load-text span:nth-child(4) { animation-delay:0.3s; }
.load-text span:nth-child(5) { animation-delay:0.4s; }
.load-text span:nth-child(6) { animation-delay:0.5s; }
.load-text span:nth-child(7) { animation-delay:0.6s; }
@keyframes loader-blink { 0% { opacity:1; } 100% { opacity:0; } }
@media (max-width:768px) {
  .loader-wrap-heading .load-text { font-size:15px; letter-spacing:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .loader-wrap { display:none !important; }
}

.container { max-width:1280px; margin:0 auto; padding:0 24px; }

section { position:relative; padding:100px 0; background:var(--surface-bg); color:var(--surface-text-dim); transition:background .3s ease; }
.section-light {
  --surface-bg: var(--bg-light);
  --surface-bg-alt: var(--bg-light-alt);
  --surface-text: #141414;
  --surface-text-dim: #3d3d3d;
  --surface-text-mute: #737373;
  --surface-border: rgba(20,20,20,0.12);
}

.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-size:0.78rem; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--accent); font-weight:500; margin-bottom:20px;
}
.eyebrow::before { content:''; width:22px; height:2px; background:var(--accent); display:inline-block; }

h2 { font-size:clamp(2.2rem, 6vw, 4.6rem); margin-bottom:24px; }
.section-lead { font-size:var(--fs-body-lg); font-weight:var(--weight-medium); max-width:560px; color:var(--surface-text-dim); text-wrap:pretty; }

/* ============ EDITORIAL COPY (testo lungo, articoli tecnici) ============ */
.editorial-copy { max-width:680px; }
.editorial-copy p { margin-bottom:20px; font-size:1.02rem; line-height:1.7; color:var(--surface-text-dim); font-feature-settings:"onum" 1, "liga" 1, "kern" 1; text-wrap:pretty; }
.editorial-copy p:last-child { margin-bottom:0; }
.editorial-copy h3 { font-size:var(--fs-h3); margin:46px 0 18px; color:var(--surface-text); }
.editorial-copy strong, .hero-split-text strong, .split-feature-text strong {
  color:var(--surface-text); font-weight:var(--weight-bold); letter-spacing:var(--tracking-tight-sm);
}
.editorial-pullquote {
  position:relative;
  font-family:var(--font-heading); font-size:var(--fs-h4); font-weight:600; font-style:italic; line-height:1.4;
  letter-spacing:var(--tracking-tight-sm);
  color:var(--surface-text); border-left:2px solid var(--accent); padding-left:22px;
  margin:38px 0 22px !important;
}
.editorial-pullquote::before {
  content:'\201C'; position:absolute; left:10px; top:-0.62em;
  font-family:var(--font-heading); font-style:normal; font-weight:700;
  font-size:2.6em; line-height:1; color:var(--accent); opacity:0.22;
  pointer-events:none;
}

/* ============ PAGE HEADER FLEX (titolo a sinistra, lead paragraph come aside a destra) ============ */
.page-header-flex { display:flex; flex-direction:column; gap:20px; }
.page-header-aside { margin:0; }

@media (min-width:1024px) {
  .page-header-flex { flex-direction:row; align-items:flex-end; justify-content:space-between; gap:48px; }
  .page-header-heading { flex:1; }
  .page-header-aside { flex:0 0 300px; padding-bottom:8px; }
}

/* ============ HERO SPLIT (video ridimensionato + testo, non più il video a piena larghezza) ============ */
.hero-split { display:flex; flex-direction:column; gap:36px; }
.hero-split-media, .hero-split-text { width:100%; }
.hero-split-text p { margin-bottom:20px; font-size:1.02rem; line-height:1.7; color:var(--surface-text-dim); font-feature-settings:"onum" 1, "liga" 1, "kern" 1; text-wrap:pretty; }
.hero-split-text p:last-child { margin-bottom:0; }

@media (min-width:1024px) {
  .hero-split { flex-direction:row; align-items:center; gap:64px; }
  .hero-split-media { flex:0 0 44%; }
  .hero-split-text { flex:1; padding-top:6px; }
}

/* ============ SPLIT FEATURE (testo/immagine alternati; il testo sconfina sull'immagine) ============ */
.split-feature { display:flex; flex-direction:column; gap:28px; }
.split-feature-text { width:100%; }
.split-feature-text h3 { font-size:clamp(1.7rem, 3vw, 2.1rem); font-weight:700; letter-spacing:var(--tracking-tight-sm); margin-bottom:20px; }

/* linea rossa tra titolo e paragrafo: stessa animazione di reveal-line/reveal-tail, applicata a due blocchi invece che a due span */
.split-feature-text .title-shift-up, .split-feature-text .title-shift-down {
  opacity:0.3; filter:blur(2.5px);
  transition:transform 1s var(--ease-reveal), opacity 1s var(--ease-reveal), filter 1s var(--ease-reveal);
}
.split-feature-text .title-shift-up.in-view { transform:translateY(-0.16em); opacity:1; filter:none; }
.split-feature-text .title-shift-down.in-view { transform:translateY(0.16em); opacity:1; filter:none; }
.split-feature-text .title-rule {
  display:block; height:2px; width:0%; background:var(--accent);
  margin-bottom:20px; transition:width .7s var(--ease) .35s;
}
.split-feature-text .title-rule.in-view { width:100%; }
.split-feature-text p { margin-bottom:18px; font-size:1.02rem; line-height:1.7; color:var(--surface-text-dim); font-feature-settings:"onum" 1, "liga" 1, "kern" 1; text-wrap:pretty; }
.split-feature-text p:last-child { margin-bottom:0; }
.split-feature-media { width:100%; aspect-ratio:4/3; overflow:hidden; }
.split-feature-media .cut-media { height:100%; }
.split-feature-media img { width:100%; height:100%; object-fit:cover; display:block; }
/* ammorbidisce il bordo della foto "a sanguinare" così non si veda lo stacco netto col fondo della pagina */
.split-feature-media-bleed { position:relative; }
.split-feature-media-bleed::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 70px 45px var(--surface-bg);
}
@media (min-width:1024px) {
  .split-feature { flex-direction:row; align-items:center; gap:0; }
  .split-feature-text {
    flex:0 0 44%; position:relative; z-index:2;
    background:var(--surface-bg); padding:36px 40px 36px 0; margin-right:-56px;
  }
  .split-feature-media { flex:1; }
  .split-feature-media-bleed { margin-right:-24px; }
  .split-feature-reverse { flex-direction:row-reverse; }
  .split-feature-reverse .split-feature-text { padding:36px 0 36px 40px; margin-right:0; margin-left:-56px; }
  .split-feature-reverse .split-feature-media-bleed { margin-right:0; margin-left:-24px; }
}

/* ============ MANIFESTO BLOCK (frase isolata e centrata, non a piena larghezza) ============ */
.manifesto-block { max-width:480px; margin:0 auto; text-align:center; }
.manifesto-block .editorial-pullquote { border-left:none; padding-left:0; font-size:var(--fs-h3); }
.manifesto-block .editorial-pullquote::before {
  content:''; display:block; width:36px; height:2px; background:var(--accent); margin:0 auto 22px;
}
.manifesto-block p:not(.editorial-pullquote) { color:var(--surface-text-dim); font-size:1rem; }

/* reveal on scroll (testi secondari): ingresso "a fuoco" — da sfocato a nitido,
   stessa animazione di .lit-text (pagina retroilluminazione) */
.reveal { opacity:0.3; filter:blur(2.5px); transition:opacity .8s var(--ease-reveal), filter .8s var(--ease-reveal); }
.reveal.in-view { opacity:1; filter:none; }

/* chi preferisce ridurre le animazioni vede subito tutto il contenuto, senza spostamenti né attese */
@media (prefers-reduced-motion:reduce) {
  .reveal, .reveal-line, .reveal-tail, .split-half, .title-shift-up, .title-shift-down,
  .split-heading, .underline-reveal, .lit-text {
    opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;
  }
  .underline-reveal::after, .split-heading::after, .title-rule {
    transition:none !important; width:100% !important;
  }
}

/* ============ SPLIT HEADING (segno distintivo: la lastra che si spacca) ============ */
.split-heading { position:relative; display:inline-block; width:fit-content; max-width:100%; }
.split-half { display:block; transition:transform 1s var(--ease-reveal), opacity 1s var(--ease-reveal); }
.split-top { clip-path:inset(0 0 52% 0); }
.split-bottom { position:absolute; inset:0; clip-path:inset(48% 0 0 0); }
.split-heading::after {
  content:''; position:absolute; left:0; top:50%; height:2px; width:0%;
  background:var(--accent); transition:width .7s var(--ease) .35s;
}
.split-heading.in-view .split-top { transform:translateY(-0.16em); }
.split-heading.in-view .split-bottom { transform:translateY(0.16em); }
.split-heading.in-view::after { width:100%; }

/* underline che segna solo la parola/frase avvolta (non l'intero blocco multi-riga) */
.underline-reveal { position:relative; display:inline-block; font-weight:700; letter-spacing:var(--tracking-tight-sm); }
.underline-reveal::after {
  content:''; position:absolute; left:0; bottom:-0.257em; height:2px; width:0%;
  background:var(--accent); transition:width .7s var(--ease) .35s;
}

/* La parola che si spaccava in due meta' e' stata tolta il 27/08: i due titoli
   che la usavano (lavorazioni e progetti) ora seguono il pattern di tutti gli
   altri, underline-reveal sulla prima riga e reveal-tail sulla seconda.
   Le classi split-half/split-top/split-bottom restano: le usa split-heading. */

/* riga sopra/sotto la sottolineatura: si allontanano come una lastra che si spacca, in ogni titolo con questo pattern */
.reveal-line, .reveal-tail { display:inline-block; transition:transform 1s var(--ease-reveal); }
.reveal-line.in-view { transform:translateY(-0.16em); }
.reveal-tail.in-view { transform:translateY(0.16em); }
.underline-reveal.in-view::after { width:100%; }

/* ingresso "a fuoco": stessa identica animazione di .lit-text (pagina retroilluminazione) applicata a tutti i titoli del sito */
.split-heading, .underline-reveal, .reveal-line, .reveal-tail {
  opacity:0.3; filter:blur(2.5px);
  transition:transform 1s var(--ease-reveal), opacity 1s var(--ease-reveal), filter 1s var(--ease-reveal);
}
.split-heading.in-view, .underline-reveal.in-view, .reveal-line.in-view, .reveal-tail.in-view {
  opacity:1; filter:none;
}

@media (max-width:760px) {
  /* più respiro tra la sottolineatura rossa e le righe di testo sopra/sotto nei titoli spezzati */
  .underline-reveal { margin-bottom:0.1em; }
  .underline-reveal::after { bottom:-0.31em; }
  .team-text h2, .intro-grid h2 { line-height:1.24; }
}

/* ============ SQUARED shape language ============ */
/* Angoli vivi, nessun arrotondamento. Il taglio in diagonale e' stato tolto da
   immagini e pulsanti: sopravvive solo sul player della sezione "Chi lavora la
   pietra" (.video-player-frame), dove resta un segno voluto. */
.btn, .project-card, .masonry-tile, .related-card, .compare-slider,
.cut-media, .claim-item, .process-step, .spec-table, .story-visual,
.form-field input, .form-field textarea, .form-field select, .lightbox img {
  border-radius:0 !important;
}

/* ============ NAV ============ */
.site-nav { position:fixed; top:0; left:0; right:0; z-index:600; }
.nav-bar {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding:16px 32px;
  background:rgba(26,26,26,0.55);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
/* logo fuori dal flusso: può crescere senza mai alterare l'altezza della barra */
.nav-logo { position:absolute; left:32px; top:50%; transform:translateY(-50%); z-index:3; }
.nav-logo img { height:60px; width:auto; }

.nav-links { position:relative; display:none; align-items:center; gap:22px; }
.nav-links a {
  position:relative; z-index:2;
  padding:9px 0; font-family:var(--font-body); font-size:0.85rem; font-weight:400;
  letter-spacing:var(--tracking-caps); line-height:1.6;
  color:rgba(255,255,255,0.75);
  transition:color .3s ease; white-space:nowrap;
}
.nav-links a:hover { color:#fff; }
.nav-item.has-dropdown { display:flex; }
.nav-item.has-dropdown > a { display:inline-flex; align-items:center; gap:6px; }
.nav-item.has-dropdown > a::after {
  content:''; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); opacity:0.7; transition:transform .3s ease;
}
.nav-item.has-dropdown:hover > a::after { transform:rotate(225deg) translateY(1px); }

.nav-burger {
  width:40px; height:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:50%;
}
.nav-burger span { width:18px; height:2px; background:#fff; transition:transform .3s ease, opacity .3s ease; }
.nav-burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---- Flyout full-width, meccanica Apple ---- */
.nav-flyout {
  position:absolute; top:100%; left:0; right:0; z-index:1;
  max-height:0; overflow:hidden;
  background:rgba(26,26,26,0.55);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:max-height .5s var(--ease);
}
.nav-flyout-panel { display:none; padding:48px 40px 52px; max-width:1240px; margin:0 auto; }
.nav-flyout-panel.active { display:block; }
.nav-flyout-head { display:flex; align-items:baseline; gap:18px; margin-bottom:28px; flex-wrap:wrap; }
.nav-flyout-eyebrow {
  font-family:var(--font-heading); font-size:1.3rem; font-weight:700;
  text-transform:none; letter-spacing:var(--tracking-tight-sm); color:#fff; display:block;
}
.nav-flyout-desc { font-family:var(--font-body); font-size:0.9rem; color:rgba(255,255,255,0.48); }

.nav-flyout-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:1024px) { .nav-flyout-grid { grid-template-columns:repeat(4,1fr); gap:18px; } }

.nav-flyout-card {
  position:relative; display:block; overflow:hidden; aspect-ratio:3/4;
  background:var(--bg-dark-alt);
}
.nav-flyout-card img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.nav-flyout-card:hover img { transform:scale(1.08); }
.nav-flyout-card-label {
  position:absolute; left:0; right:0; bottom:0; padding:16px 14px 14px;
  background:linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.4) 65%, rgba(0,0,0,0) 100%);
  display:flex; flex-direction:column; gap:4px;
}
.nav-flyout-card .dd-index { font-family:var(--font-mono); font-size:0.66rem; color:var(--accent); letter-spacing:0.04em; }
.nav-flyout-card .dd-title { font-family:var(--font-heading); font-size:0.98rem; font-weight:600; color:#fff; }

.nav-flyout-all {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 4px; margin-top:24px; border-top:1px solid rgba(255,255,255,0.1);
  color:var(--accent); font-family:var(--font-mono); font-size:0.85rem; letter-spacing:0.03em;
  transition:opacity .25s ease;
}
.nav-flyout-all:hover { opacity:0.75; }

.nav-curtain {
  position:fixed; inset:0; z-index:550;
  background:rgba(0,0,0,0.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease, visibility .4s ease;
}
.nav-curtain.active { opacity:1; visibility:visible; pointer-events:auto; }

/* ---- mobile menu: overlay fullscreen stile Apple, drill-down a schermate ---- */
.nav-mobile-panel {
  position:fixed; inset:0;
  background:rgba(26,26,26,0.96);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  z-index:590;
  overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(1.04);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.nav-mobile-panel.open { opacity:1; visibility:visible; pointer-events:auto; transform:scale(1); }

.nav-mobile-screen {
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:100px 32px 60px; overflow-y:auto;
  transition:transform .45s var(--ease), opacity .35s var(--ease);
}
.nav-mobile-screen[data-mobile-screen="root"] { transform:translateX(0); opacity:1; }
.nav-mobile-screen-sub { transform:translateX(28px); opacity:0; pointer-events:none; }
.nav-mobile-panel[data-active-screen="lavorazioni"] [data-mobile-screen="root"],
.nav-mobile-panel[data-active-screen="spazi"] [data-mobile-screen="root"] {
  transform:translateX(-28px); opacity:0; pointer-events:none;
}
.nav-mobile-panel[data-active-screen="lavorazioni"] [data-mobile-screen="lavorazioni"],
.nav-mobile-panel[data-active-screen="spazi"] [data-mobile-screen="spazi"] {
  transform:translateX(0); opacity:1; pointer-events:auto;
}

/* Peso 300 e maiuscolo spaziato: stessa voce leggera dei titoli del sito (Jost),
   al posto del 600 compatto che appesantiva il menu. */
.nav-mobile-panel a, .nav-mobile-toggle {
  padding:18px 6px; font-size:1.55rem; font-weight:300; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.82); font-family:var(--font-heading);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav-mobile-panel a:hover { color:#fff; }
.nav-mobile-toggle {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  text-align:left; background:none;
}
.nav-mobile-toggle svg { flex-shrink:0; opacity:0.6; }
.nav-mobile-toggle:hover { color:#fff; }
/* Schiarita al tocco, uguale per voci e tendine.
   Toccando una voce normale il dito lascia acceso il :hover finche' la pagina
   cambia, e si vede bene. LAVORAZIONI invece apre la seconda schermata: la
   prima svanisce nello stesso istante, e lo schiarimento non faceva in tempo a
   leggersi. Qui la voce resta bianca per tutto il tempo in cui la sua
   schermata e' aperta, quindi la si vede accendersi mentre il menu scorre. */
.nav-mobile-panel a:active,
.nav-mobile-panel .nav-mobile-toggle:active,
.nav-mobile-panel[data-active-screen="lavorazioni"] .nav-mobile-toggle[data-mobile-open="lavorazioni"],
.nav-mobile-panel[data-active-screen="spazi"] .nav-mobile-toggle[data-mobile-open="spazi"] { color:#fff; }
.nav-mobile-panel .nav-mobile-toggle:active svg,
.nav-mobile-panel[data-active-screen="lavorazioni"] .nav-mobile-toggle[data-mobile-open="lavorazioni"] svg { opacity:1; }

.nav-mobile-back {
  display:flex; align-items:center; gap:10px;
  padding:14px 6px; margin-bottom:10px;
  font-family:var(--font-mono); font-size:0.85rem; font-weight:600;
  text-transform:uppercase; letter-spacing:var(--tracking-caps);
  color:var(--accent); border-bottom:none;
}

/* Contatto diretto in fondo al menu mobile: la telefonata e' il canale che
   converte meglio e da mobile deve restare a due tocchi da qualsiasi pagina. */
/* Niente border-top: la voce CONTATTI sopra ha gia' il suo bordo inferiore,
   e le due righe ravvicinate si leggevano come un doppio filo. */
.nav-mobile-contact { margin-top:26px; }
/* Trasparente con contorno chiaro: stesso registro delle voci di menu, senza
   il blocco pieno che pesava sulla colonna. */
.nav-mobile-panel .nav-mobile-contact a.is-call {
  display:flex; align-items:center; justify-content:center; gap:13px;
  width:100%; height:56px; padding:0 20px;
  border:1px solid rgba(255,255,255,0.32); border-radius:2px;
  background:transparent; color:rgba(255,255,255,0.92);
  font-family:var(--font-mono); font-size:0.86rem; font-weight:400;
  text-transform:none; letter-spacing:0.14em; white-space:nowrap;
  transition:width .6s var(--ease), border-radius .6s var(--ease), gap .6s var(--ease),
             border-color .3s ease, color .3s ease;
}
.nav-mobile-panel .nav-mobile-contact a.is-call:active { border-color:rgba(255,255,255,0.6); color:#fff; }
.nav-mobile-contact a.is-call span {
  overflow:hidden; max-width:14em; opacity:1;
  transition:max-width .55s var(--ease), opacity .3s ease;
}
.nav-mobile-contact a svg { flex-shrink:0; width:18px; height:18px; }

/* Soglia alzata da 860 a 1024: con le voci per esteso ("Trattamento Defender",
   "Deposito Lastre") sotto i ~1000px la nav centrata collideva col logo. */
@media (min-width:1024px) { .nav-links { display:flex; } .nav-burger { display:none; } .nav-bar { justify-content:center; } }
@media (max-width:1023px) { .nav-links, .nav-flyout, .nav-curtain { display:none !important; } .nav-bar { justify-content:flex-end; } }

.cut-media, .cut-compare { position:relative; overflow:hidden; }
.cut-media img { width:100%; height:100%; object-fit:cover; }

/* ============ CHROMA KEY VIDEO (sfondo pieno reso trasparente via canvas) ============ */
.chroma-video-wrap { background:var(--bg-dark); }
.chroma-source-video { position:absolute; width:2px; height:2px; opacity:0; pointer-events:none; overflow:hidden; }
.chroma-video-wrap canvas { position:relative; z-index:2; width:100%; height:100%; display:block; opacity:0; transition:opacity .6s ease; }
.chroma-video-wrap canvas.ready { opacity:1; }
.chroma-fallback { transition:opacity .4s ease; }
.chroma-video-wrap.chroma-active .chroma-fallback { opacity:0; position:absolute; inset:0; }

/* ============ GLOW MEDIA (retroilluminazione: le immagini sembrano emergere dal buio come fossero la fonte di luce) ============ */
/* palette del bagliore: solo toni già del brand — ottone/oro (#B8873F, il tono reale della luce nelle foto di onice)
   e rosso Savoia Marmi (#8B2E22) per gli elementi interattivi. Niente giallo ocra. */
.glow-media { position:relative; --glow-tint: rgba(184,135,63,0.5); }
.glow-halo {
  position:absolute; inset:-14%; z-index:0;
  background:radial-gradient(ellipse at center, var(--glow-tint) 0%, transparent 70%);
  filter:blur(46px);
  opacity:0;
  transition:opacity 1.3s var(--ease);
  pointer-events:none;
}
.glow-media.in-view .glow-halo { opacity:1; }
/* "Accensione" della foto: prima animava brightness/saturate sull'immagine
   (ri-filtraggio dell'intera foto per 1.3s durante lo scroll); ora e' un velo
   scuro sopra che si dissolve in opacita' — compositor-only, stesso effetto. */
.glow-frame { position:relative; z-index:1; }
.glow-frame::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(8,6,5,0.55);
  transition:opacity 1.3s var(--ease);
}
.glow-media.in-view .glow-frame::after { opacity:0; }
@media (max-width:767px) {
  .glow-halo { filter:blur(24px); }
}
@media (prefers-reduced-motion:reduce) {
  .glow-halo, .glow-frame::after { transition:none; }
}

/* callout numerico luminoso (es. "3mm"), segno distintivo di questa pagina */
.glow-callout-block { position:relative; display:flex; align-items:baseline; gap:16px; margin-bottom:24px; }
.glow-callout-block::before {
  content:''; position:absolute; left:-36px; top:-36px; width:150px; height:150px; z-index:-1;
  background:radial-gradient(circle, rgba(216,35,55,0.4) 0%, transparent 72%);
  filter:blur(22px); pointer-events:none;
}
/* La pulsazione NON anima piu' text-shadow (bagliori fino a 96px ridisegnati a
   ogni frame, per sempre: era questo a rendere faticoso lo scroll della pagina).
   L'ombra del testo ora e' statica (dipinta una volta) e a "respirare" e' l'alone
   radiale gia' sfocato del blocco, animato solo in opacita' e scala: lavoro da
   compositor, costo per frame nullo. Effetto visivo equivalente. */
.glow-callout {
  display:inline-block; font-family:var(--font-heading); font-weight:800; line-height:1;
  font-size:clamp(3.4rem, 8vw, 5.2rem); letter-spacing:var(--tracking-tight);
  color:#c23a2c;
  text-shadow:0 0 32px rgba(216,35,55,0.8), 0 0 8px rgba(216,35,55,0.5), 0 0 80px rgba(216,35,55,0.35);
}
.glow-callout-block::before { animation:glow-halo-pulse 2.6s ease-in-out infinite; will-change:opacity, transform; }
@keyframes glow-halo-pulse {
  0%, 100% { opacity:0.55; transform:scale(1); }
  50% { opacity:1; transform:scale(1.18); }
}
.glow-callout small { font-size:0.34em; font-weight:700; margin-left:3px; }
.glow-callout-label { max-width:220px; font-size:0.85rem; color:var(--surface-text-mute); }
@media (prefers-reduced-motion:reduce) { .glow-callout-block::before { animation:none; } }

/* citazione manifesto: bagliore statico + respiro affidato a un alone sfocato
   dietro al testo, animato solo in opacita' (stesso principio del callout) */
.manifesto-glow {
  position:relative;
  text-shadow:0 0 22px rgba(184,135,63,0.38), 0 0 4px rgba(184,135,63,0.22);
}
.manifesto-glow::before {
  content:''; position:absolute; inset:-18% -6%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(184,135,63,0.16) 0%, transparent 70%);
  filter:blur(18px);
  animation:manifesto-halo-pulse 4s ease-in-out infinite;
  will-change:opacity;
}
@keyframes manifesto-halo-pulse {
  0%, 100% { opacity:0.5; }
  50% { opacity:1; }
}
@media (prefers-reduced-motion:reduce) { .manifesto-glow::before { animation:none; } }

/* ============ LIT TEXT (il testo si "accende" entrando in viewport, come se qualcuno accendesse la luce dietro le parole) ============ */
.lit-text {
  opacity:0.3; filter:blur(2.5px);
  transition:opacity 1.1s var(--ease), filter 1.1s var(--ease), text-shadow 1.1s var(--ease);
}
.lit-text.in-view {
  opacity:1; filter:none;
  text-shadow:0 0 20px rgba(184,135,63,0.16);
}
@media (prefers-reduced-motion:reduce) { .lit-text { opacity:1; filter:none; transition:none; } }

/* ============ SPOTLIGHT MEDIA (il cursore agisce come sorgente di luce, rivela la venatura sotto di sé) ============ */
.spotlight-media { position:relative; overflow:hidden; }
.spotlight-base { display:block; width:100%; height:100%; object-fit:cover; filter:brightness(0.34) saturate(0.8); }
.spotlight-reveal {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(1.12) saturate(1.08);
  -webkit-mask-image:radial-gradient(circle 280px at var(--mx,50%) var(--my,50%), #000 0%, transparent 100%);
  mask-image:radial-gradient(circle 280px at var(--mx,50%) var(--my,50%), #000 0%, transparent 100%);
  opacity:0; transition:opacity .4s ease;
  pointer-events:none;
}
.spotlight-hint {
  position:absolute; left:20px; bottom:18px; z-index:2;
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:rgba(255,255,255,0.55); opacity:0; transition:opacity .4s ease; pointer-events:none;
}
@media (hover:hover) and (pointer:fine) {
  .spotlight-media:hover .spotlight-reveal { opacity:1; }
  .spotlight-media:hover .spotlight-hint { opacity:0; }
  .spotlight-media .spotlight-hint { opacity:1; }
}
/* touch/no-hover: si accende gradualmente entrando in viewport, come le altre immagini della pagina */
.spotlight-media.spotlight-static .spotlight-base { transition:filter 1.3s var(--ease); }
.spotlight-media.spotlight-static.in-view .spotlight-base { filter:brightness(1) saturate(1.02); }

/* ============ LIGHT SWITCH (interruttore reale: l'utente accende e spegne la retroilluminazione della lastra) ============ */
.light-switch-block { display:flex; justify-content:center; margin-bottom:32px; }
.light-switch { display:inline-flex; align-items:center; gap:14px; background:none; padding:6px; cursor:pointer; }
.light-switch-track {
  position:relative; width:56px; height:30px; border-radius:100px; flex-shrink:0;
  background:rgba(255,255,255,0.08); border:1px solid var(--surface-border);
  transition:background .35s ease, border-color .35s ease;
}
.light-switch-knob {
  position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  background:#8B2E22; transition:transform .35s var(--ease), background .35s ease, box-shadow .35s ease;
}
.light-switch[aria-checked="true"] .light-switch-track { background:rgba(184,135,63,0.22); border-color:#B8873F; }
.light-switch[aria-checked="true"] .light-switch-knob {
  transform:translateX(26px); background:#B8873F;
  box-shadow:0 0 14px rgba(184,135,63,0.7), 0 0 30px rgba(184,135,63,0.4);
}
.light-switch-label {
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--surface-text-mute);
}
.light-switch-label em { font-style:normal; color:var(--surface-text); }

.glow-media-switch .glow-halo { transition:opacity .5s ease; }
.glow-media-switch.is-on .glow-halo { opacity:1; }
/* la lastra "spenta"/"accesa" sono due immagini distinte che si dissolvono l'una nell'altra: nessuna delle due va scurita, cambia solo l'immagine */
.glow-media-switch .glow-frame img { filter:none; }
.glow-media-switch .glow-frame::after { display:none; }
.switch-frame { position:relative; width:100%; height:100%; }
.switch-img { width:100%; height:100%; object-fit:cover; display:block; transition:opacity .6s ease; }
.switch-img-on { position:absolute; inset:0; opacity:0; }
.glow-media-switch.is-on .switch-img-off { opacity:0; }
.glow-media-switch.is-on .switch-img-on { opacity:1; }

/* ============ FLOAT MEDIA (lastre alleggerite: le immagini entrano "fluttuando", non si accendono) ============ */
.float-media { opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease-reveal), transform 1s var(--ease-reveal); }
.float-media.in-view { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { .float-media { opacity:1; transform:none; transition:none; } }

/* Su mobile lo spostamento verticale di 24-28px è quasi impercettibile su un blocco grande (soprattutto
   immagini): l'occhio percepisce "già apparso" nei primi istanti della transizione, anche con la curva
   morbida. Più spazio da percorrere e qualche istante in più, solo su schermi piccoli. */
@media (max-width:767px) {
  .reveal { transition:opacity 1.3s var(--ease-reveal), filter 1.3s var(--ease-reveal); }
  .float-media { transform:translateY(58px); transition:opacity 1.7s var(--ease-reveal), transform 1.7s var(--ease-reveal); }
}

/* ============ THICKNESS COMPARE (il "numero centrale": la lastra si assottiglia sotto i tuoi occhi mentre scrolli) ============ */
.thickness-stage { display:flex; flex-direction:column; align-items:center; gap:44px; text-align:center; padding:10px 0; }
.thickness-compare { display:flex; align-items:flex-end; gap:56px; }
.thickness-col { display:flex; flex-direction:column; align-items:center; gap:16px; }
.thickness-block {
  width:64px; background:linear-gradient(135deg, var(--surface-bg-alt) 0%, rgba(255,255,255,0.05) 100%);
  border:1px solid var(--surface-border); border-top:2px solid #8B2E22;
}
.thickness-block-before { height:180px; }
/* parte spessa come la lastra tradizionale e si comprime a 3mm (rapporto 3:30) quando la sezione entra in vista */
.thickness-block-after { height:180px; border-top-color:#B8873F; transition:height 1.5s var(--ease) 0.4s; will-change:height; }
.thickness-stage.in-view .thickness-block-after { height:27px; }
@media (prefers-reduced-motion:reduce) { .thickness-block-after { transition:none; height:27px; } }
.thickness-label {
  font-family:var(--font-mono); font-size:0.76rem; color:var(--surface-text-mute);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; line-height:1.5;
}
.thickness-label strong {
  display:block; font-family:var(--font-heading); font-size:1.3rem; font-weight:700;
  letter-spacing:0; text-transform:none; color:var(--surface-text); margin-top:4px;
}
.thickness-number { color:#8B2E22 !important; }
.thickness-copy { max-width:520px; color:var(--surface-text-dim); font-size:1.02rem; line-height:1.7; }

/* ============ WEIGHTLESS CARDS (Applicazioni: card che sembrano fluttuare e non pesare nulla) ============ */
.weightless-grid { display:grid; grid-template-columns:1fr; gap:18px; margin-top:20px; }
@media (min-width:768px) { .weightless-grid { grid-template-columns:repeat(2,1fr); } }
.weightless-card {
  animation:card-float 6s ease-in-out infinite;
}
.weightless-card:nth-child(2) { animation-delay:-1.5s; }
.weightless-card:nth-child(3) { animation-delay:-3s; }
.weightless-card:nth-child(4) { animation-delay:-4.5s; }
@keyframes card-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@media (prefers-reduced-motion:reduce) { .weightless-card { animation:none; } }
.weightless-card-tilt {
  position:relative; min-height:280px; overflow:hidden;
  background:var(--surface-bg-alt); border:1px solid var(--surface-border);
  transition:transform .25s ease-out, border-color .3s ease;
}
.weightless-card:hover .weightless-card-tilt { border-color:#8B2E22; }
.weightless-card-bg { position:absolute; inset:0; }
.weightless-card-bg img { width:100%; height:100%; object-fit:cover; filter:brightness(0.5) saturate(0.9); transition:filter .5s ease; }
.weightless-card:hover .weightless-card-bg img { filter:brightness(0.72) saturate(1.05); }
.weightless-card-scrim { position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,8,6,0.92) 0%, rgba(10,8,6,0.2) 60%, transparent 100%); }
.weightless-card-content { position:absolute; left:0; right:0; bottom:0; padding:26px; }
.weightless-card:not(.weightless-card-media) .weightless-card-content { position:static; padding:28px; }
.weightless-index { font-family:var(--font-mono); font-size:0.78rem; color:#8B2E22; letter-spacing:var(--tracking-caps); }
.weightless-card h3 { font-size:1.25rem; margin:10px 0 8px; color:#fff; }
.weightless-card:not(.weightless-card-media) h3 { color:var(--surface-text); }
.weightless-card p { font-size:0.92rem; color:rgba(255,255,255,0.78); max-width:320px; }
.weightless-card:not(.weightless-card-media) p { color:var(--surface-text-dim); }

/* ============ TECH TAGS (sezione tecnica: materiale, spessore, rinforzo, applicazione) ============ */
.tech-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.tech-tag {
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--surface-text-dim); border:1px solid var(--surface-border); padding:10px 18px;
}

/* ============ ROUTE LINE (referenza: Verona -> New York) ============ */
.route-line {
  display:flex; align-items:center; gap:14px; font-family:var(--font-mono); font-size:0.85rem;
  letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); margin-bottom:14px;
}
.route-line span:first-child, .route-line span:last-child { color:var(--surface-text); }
.route-arrow { color:#8B2E22; }

/* video che riempiono i contenitori immagine come le foto */
.cut-media video { width:100%; height:100%; object-fit:cover; display:block; }
.split-feature-media video { width:100%; height:100%; object-fit:cover; display:block; }

/* titolo e sottotitolo dell'hero curvatura (riusati dal nuovo hero "tavola tecnica") */
.curve-hero-title {
  font-family:var(--font-heading); font-weight:300 !important; letter-spacing:0.01em !important;
  font-size:clamp(2rem, 4.2vw, 3rem); line-height:1.08; color:#fff; margin:0 0 14px;
}
.curve-hero-desc { color:rgba(255,255,255,0.84); font-size:1.05rem; line-height:1.5; max-width:440px; margin:0; }
@media (max-width:767px) { .curve-hero-desc { max-width:340px; } }

/* ---- HERO "tavola tecnica viva": disegno che si traccia sul pannello scuro e
   prosegue sopra la fotografia reale. Da mobile la foto fa da fondale intero. ---- */
.cvh { position:relative; min-height:100vh; display:flex; align-items:center; background:var(--bg-dark); overflow:hidden; }
.cvh-media { position:absolute; top:0; right:0; bottom:0; width:44%; overflow:hidden; z-index:0; }
.cvh-media img {
  width:100%; height:112%; object-fit:cover; object-position:center 40%; display:block;
  animation:cvh-zoom 26s ease-in-out infinite alternate; will-change:transform;
}
@keyframes cvh-zoom { from { transform:scale(1); } to { transform:scale(1.07); } }
/* velo di raccordo tra pannello scuro e fotografia */
.cvh-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--bg-dark) 52%, rgba(26,26,26,0.45) 66%, rgba(26,26,26,0.05) 82%, rgba(26,26,26,0.3) 100%); }
.cvh-draw { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.cvh-ghost { fill:none; stroke:rgba(255,255,255,0.14); stroke-width:1; stroke-dasharray:6 7; }
.cvh-curve { fill:none; stroke:#8B2E22; stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1; }
.cvh-joint { stroke:rgba(255,255,255,0.55); stroke-width:1.4; opacity:0; }
.cvh-note { opacity:0; }
.cvh-note-dot { fill:#8B2E22; }
.cvh-note-dash { fill:none; stroke:rgba(255,255,255,0.4); stroke-width:1; stroke-dasharray:4 5; }
.cvh-note-r { fill:rgba(255,255,255,0.75); font-family:var(--font-mono); font-size:15px; letter-spacing:0.1em; }
/* il disegno parte quando la tenda di caricamento si alza (classe dal JS di pagina) */
.cvh.in-scena .cvh-curve { transition:stroke-dashoffset 1.7s var(--ease-reveal) .15s; stroke-dashoffset:0; }
.cvh.in-scena .cvh-joint { transition:opacity .5s var(--ease) var(--ritardo, 1.2s); opacity:1; }
.cvh.in-scena .cvh-note { transition:opacity .8s var(--ease) 2.2s; opacity:1; }
.cvh-inner { position:relative; z-index:3; width:100%; }
.cvh-content { max-width:560px; padding:140px 0 90px; }
.cvh-chip { display:flex; gap:10px; flex-wrap:wrap; margin-top:34px; }
.cvh-chip span {
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--surface-text-mute); border:1px solid var(--surface-border); padding:7px 12px;
}
@media (prefers-reduced-motion:reduce){
  .cvh-media img { animation:none; }
  .cvh-curve { stroke-dashoffset:0; }
  .cvh-joint, .cvh-note { opacity:1; }
}
@media (max-width:767px){
  .cvh { min-height:94vh; align-items:flex-end; }
  .cvh-note { display:none; }
  .cvh-media { width:100%; }
  .cvh-media img { animation:none; } /* da mobile il movimento lo da' il parallax */
  .cvh-scrim { background:linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.12) 38%, rgba(8,8,8,0.82) 74%, rgba(8,8,8,0.95) 100%); }
  .cvh-content { max-width:none; padding:130px 0 46px; }
  .cvh-chip { margin-top:26px; }
}

/* ---- interruttore riusabile (confronto massello/lastra, giunzioni): due voci,
   il cursore rosso scivola sotto quella attiva ---- */
.cv-switch { display:inline-flex; position:relative; border:1px solid var(--surface-border); margin-top:34px; }
.cv-switch button {
  position:relative; z-index:1; background:none; border:none; cursor:pointer;
  padding:13px 20px; min-width:140px;
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--surface-text-mute); transition:color .3s var(--ease);
}
.cv-switch button[aria-pressed="true"] { color:#fff; }
.cv-switch button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.cv-switch-cursore {
  position:absolute; top:0; bottom:0; left:0; width:50%; background:rgba(216,35,55,0.18);
  border-bottom:2px solid var(--accent);
  transition:transform .38s var(--ease); pointer-events:none;
}
.cv-switch[data-attivo="1"] .cv-switch-cursore { transform:translateX(100%); }

/* ============ VEIN LINE (curvatura: la venatura stilizzata che si piega mentre si scorre — "la geometria cambia, la vena continua") ============ */
.vein-line { position:fixed; top:0; left:1.5%; width:110px; height:100vh; z-index:1; pointer-events:none; opacity:0.55; }
@media (max-width:900px) { .vein-line { display:none; } }
.vein-line path { stroke:#8B2E22; stroke-width:1.4; fill:none; }

/* ============ RIDUZIONE / MENO MATERIA (confronto tipografico pulito: cosa riduce la curvatura da lastra) ============ */
.reduce-row { display:flex; margin-top:42px; border-top:1px solid var(--surface-border); }
.reduce-cell { flex:1; display:flex; align-items:baseline; gap:14px; padding:26px 28px 6px 0; border-right:1px solid var(--surface-border); }
.reduce-cell:last-child { border-right:none; }
.reduce-cell:not(:first-child) { padding-left:28px; }
.reduce-mark { font-family:var(--font-heading); font-size:1.9rem; line-height:0.8; color:#8B2E22; font-weight:600; flex:0 0 auto; }
.reduce-text { font-size:1.05rem; color:var(--surface-text); line-height:1.42; }
@media (max-width:760px) {
  .reduce-row { flex-direction:column; border-top:none; margin-top:28px; }
  .reduce-cell { border-right:none; border-bottom:1px solid var(--surface-border); padding:16px 0; }
  .reduce-cell:last-child { border-bottom:none; }
  .reduce-cell:not(:first-child) { padding-left:0; }
}

/* ============================================================
   CURVATURA — sistema editoriale (indici grandi, morph della lastra,
   barre di confronto materia, step del metodo). Solo vettoriale + video reali.
   ============================================================ */
.curv-sec { padding:96px 0; position:relative; }
@media (max-width:767px){ .curv-sec { padding:64px 0; } }

/* intestazione con indice grande a lato */
.curv-head { display:flex; align-items:flex-start; gap:32px; }
.sec-index {
  font-family:var(--font-mono); font-size:clamp(2.4rem,5vw,3.6rem); font-weight:500;
  line-height:0.8; color:transparent; -webkit-text-stroke:1px rgba(139,46,34,0.55);
  letter-spacing:-0.02em; flex:0 0 auto; padding-top:6px;
}
.curv-head .eyebrow { margin-bottom:14px; }
.curv-h { font-size:clamp(1.9rem,4.2vw,3rem); line-height:1.04; letter-spacing:var(--tracking-tight); margin:0; max-width:16ch; }
.curv-note { max-width:640px; color:var(--surface-text-dim); font-size:1.08rem; line-height:1.6; margin:34px 0 0; }
.curv-head + .curv-note, .curv-head + .curv-lead { margin-left:64px; }
@media (max-width:640px){ .curv-head { gap:18px; } .curv-head + .curv-note, .curv-head + .curv-lead { margin-left:0; } }

/* ---- SIGNATURE: la lastra piatta che si curva mentre scorri (vena continua) ---- */
.morph-wrap { margin:52px 0 8px; position:relative; }
.morph-slab { width:100%; height:auto; display:block; filter:drop-shadow(0 30px 60px rgba(0,0,0,0.4)); }
.morph-fill { fill:url(#morphGrad); stroke:rgba(255,255,255,0.14); stroke-width:1; }
.morph-top, .morph-bot { fill:none; stroke:rgba(255,255,255,0.5); stroke-width:1.4; }
.morph-vein { fill:none; stroke:rgba(255,255,255,0.45); stroke-width:1.3; opacity:0.75; }
.morph-vein.v-red { stroke:#8B2E22; opacity:0.9; stroke-width:1.8; }
.morph-legend {
  display:flex; justify-content:space-between; margin-top:18px;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--surface-text-mute);
}
.morph-legend span:last-child { color:#8B2E22; text-align:right; }
@media (max-width:640px){ .morph-legend { gap:24px; } .morph-legend span { max-width:46%; } }

/* ---- confronto materia: barre animate massello vs lastra ---- */
.matbar { margin:44px 0 8px; display:flex; flex-direction:column; gap:26px; }
.matbar-row { display:grid; grid-template-columns:180px 1fr auto; align-items:center; gap:22px; }
.matbar-label { font-size:1.05rem; color:var(--surface-text); font-weight:500; }
.matbar-track { height:26px; background:rgba(255,255,255,0.05); position:relative; overflow:hidden; }
.matbar-fill { position:absolute; inset:0 auto 0 0; width:0; transition:width 1.2s cubic-bezier(0.16,1,0.3,1); }
.matbar-fill-full { background:repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 9px, rgba(255,255,255,0.07) 9px 18px); }
.matbar-fill-thin { background:#8B2E22; }
.reveal.in-view .matbar-fill-full { width:100%; }
.reveal.in-view .matbar-fill-thin { width:24%; }
.matbar-note { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); white-space:nowrap; }
@media (max-width:640px){
  .matbar-row { grid-template-columns:1fr; gap:8px; }
  .matbar-note { justify-self:start; }
}

/* ============================================================
   CURVATURA DI LASTRE — pagina lavorazioni/curvatura-lastre.html
   Linguaggio visivo della pagina: linee di taglio, raggi, segmenti,
   continuita' della vena. Diagrammi in SVG inline (line art), rosso
   #8B2E22 come colore delle linee tecniche, --accent per le CTA.
   ============================================================ */

/* ---- hero: coppia di azioni sotto il testo ---- */
.cv-hero-actions { display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:30px; }
.cv-hero-secondary {
  display:inline-flex; align-items:center; gap:12px;
  color:#fff; font-family:var(--font-heading); font-weight:300; letter-spacing:0.08em;
  font-size:0.95rem; opacity:0.85; transition:opacity .3s ease, color .3s ease;
}
.cv-hero-secondary:hover { opacity:1; color:var(--accent); }
.cv-hero-secondary svg { animation:bob 1.8s ease-in-out infinite; }
.cv-hero-secondary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

/* nota di onesta' (usata in piu' sezioni): il massello resta valido, i limiti si dicono */
.cv-fair-note { margin-top:34px; max-width:640px; color:var(--surface-text-mute); font-size:0.95rem; line-height:1.6; padding-left:18px; border-left:2px solid #8B2E22; }
.cv-fair-note a { color:var(--surface-text-dim); }
.cv-fair-note a:hover { color:var(--accent); }

/* ---- 02 · morph: giunti dei segmenti (linee lungo la normale alla curva) ---- */
.morph-joint { stroke:rgba(255,255,255,0.35); stroke-width:1.2; }

/* ---- 02 · i sei passi, ognuno col suo schema line-art ---- */
.cv-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:54px 0 0; border-top:1px solid var(--surface-border); list-style:none; padding:0; }
.cv-step { padding:30px 26px 32px 0; border-right:1px solid var(--surface-border); border-bottom:1px solid var(--surface-border); }
.cv-step:nth-child(3n) { border-right:none; }
.cv-step:nth-child(n+4) { border-bottom:none; }
.cv-step:nth-child(3n+2), .cv-step:nth-child(3n) { padding-left:26px; }
.cv-diag { margin:0 0 18px; max-width:150px; }
.cv-diag svg { width:100%; height:auto; display:block; }
.cvd-frame { fill:none; stroke:rgba(255,255,255,0.4); stroke-width:1.4; }
.cvd-frame-line { fill:none; stroke:rgba(255,255,255,0.4); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.cvd-vein { fill:none; stroke:rgba(255,255,255,0.32); stroke-width:1.1; }
.cvd-vein.cvd-red, .cvd-red-line { stroke:#8B2E22; stroke-width:1.5; fill:none; }
.cvd-dot { fill:#8B2E22; }
.cvd-dash { fill:none; stroke:rgba(255,255,255,0.45); stroke-width:1.1; stroke-dasharray:4 4; }
.cvd-label { fill:rgba(255,255,255,0.7); font-family:var(--font-mono); font-size:11px; }
.cvd-rib { stroke:#8B2E22; stroke-width:1.3; opacity:0.85; }
.cvd-base { stroke:rgba(255,255,255,0.4); stroke-width:1.4; stroke-linecap:round; }
.cv-step-num { font-family:var(--font-mono); font-size:0.72rem; color:#c4574a; letter-spacing:var(--tracking-caps); }
.cv-step h3 { font-size:1.18rem; margin:10px 0 8px; color:var(--surface-text); }
.cv-step p { font-size:0.93rem; color:var(--surface-text-dim); line-height:1.5; }

/* ---- 03 · continuita' della venatura: testo + fotografia reale ---- */
.cv-vena-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,420px); gap:56px; align-items:start; margin-top:10px; }
.cv-vena-media { margin:0; }
.cv-vena-media img { width:100%; height:auto; display:block; }
.cv-vena-media figcaption, .cv-apps-media figcaption {
  margin-top:12px; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--surface-text-mute); line-height:1.7;
}

/* I tratti dei diagrammi (giunzioni e resina) si disegnano da soli quando la
   sezione entra in vista: dasharray/dashoffset normalizzati con pathLength=1.
   Prima le vene, poi la linea di giunzione/resina — l'ordine racconta il gesto. */
.cvs-vein, .cvs-cut, .cvr-vein, .cvr-cut-flat, .cvr-cut-fondo, .cvr-cut-vena {
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.5s var(--ease-reveal);
}
.reveal.in-view .cvs-vein, .reveal.in-view .cvr-vein { stroke-dashoffset:0; }
.reveal.in-view .cvs-cut, .reveal.in-view .cvr-cut-flat,
.reveal.in-view .cvr-cut-fondo, .reveal.in-view .cvr-cut-vena { stroke-dashoffset:0; transition-delay:.55s; }
@media (prefers-reduced-motion: reduce){
  .cvs-vein, .cvs-cut, .cvr-vein, .cvr-cut-flat, .cvr-cut-fondo, .cvr-cut-vena { transition:none; stroke-dashoffset:0; }
  .cv-entra, .cv-compare.cv-cambio .cv-compare-row span { animation:none; }
}

/* ---- 03 · giunzioni progettate: confronto A/B (la sezione-firma della pagina) ---- */
.cv-seams { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:48px; }
.cv-seam { margin:0; }
.cv-seam svg { width:100%; height:auto; display:block; }
.cvs-body { fill:rgba(255,255,255,0.05); stroke:rgba(255,255,255,0.16); stroke-width:1; }
.cvs-vein { fill:none; stroke:rgba(255,255,255,0.42); stroke-width:1.4; }
.cvs-cut { fill:none; stroke:#cfcfcf; stroke-width:2; }
.cv-seam figcaption { margin-top:14px; font-size:0.92rem; color:var(--surface-text-dim); line-height:1.55; max-width:40ch; }
.cv-seam-tag { display:block; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); margin-bottom:8px; }
.cv-seam-tag.is-red { color:#c4574a; }

/* ---- 05 · resina punto per punto: due schemi, il testo tace ---- */
.cv-resin { display:flex; flex-direction:column; gap:34px; margin-top:48px; max-width:760px; }
.cv-resin-row { margin:0; }
.cv-resin-row svg { width:100%; height:auto; display:block; }
.cvr-vein { fill:none; stroke:#b99a63; stroke-width:9; opacity:0.55; stroke-linecap:round; }
.cvr-cut-flat { fill:none; stroke:#9a9a9a; stroke-width:4; }
.cvr-cut-fondo { fill:none; stroke:#39332c; stroke-width:4; }
.cvr-cut-vena { fill:none; stroke:#b99a63; stroke-width:4; }
.cv-resin-row figcaption { margin-top:12px; font-size:0.92rem; color:var(--surface-text-dim); line-height:1.55; }

/* ---- 06 · massello o curvatura da lastra: tavola di confronto onesta ---- */
.cv-compare { margin-top:50px; border-top:1px solid var(--surface-border); }
.cv-compare-head, .cv-compare-row { display:grid; grid-template-columns:200px 1fr 1fr; gap:24px; padding:16px 0; border-bottom:1px solid var(--surface-border); }
.cv-compare-head { padding:12px 0; }
.cv-compare-head span { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); }
.cv-compare-row .cv-c-crit { font-family:var(--font-mono); font-size:0.76rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:#c4574a; padding-top:3px; }
.cv-compare-row span { font-size:0.95rem; color:var(--surface-text-dim); line-height:1.5; }
.cv-when { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:48px; }
.cv-when-col h3 { font-size:1.25rem; margin-bottom:12px; }
.cv-when-col p { color:var(--surface-text-dim); font-size:0.97rem; line-height:1.6; }
.cv-when-col a { color:var(--surface-text); }
.cv-when-col a:hover { color:var(--accent); }
.cv-cta-inline { margin-top:44px; }
.btn-outline-light { border:1px solid rgba(255,255,255,0.45); color:#fff; background:transparent; }
.btn-outline-light:hover { background:#fff; color:#161616; border-color:#fff; }

/* ---- 07 · applicazioni: indice editoriale + fotografia ---- */
.cv-apps { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,380px); gap:56px; align-items:start; margin-top:48px; }
.cv-apps-index { display:flex; flex-direction:column; }
.cv-apps-group { padding:22px 0 26px; border-top:1px solid var(--surface-border); }
.cv-apps-group:last-child { border-bottom:1px solid var(--surface-border); }
.cv-apps-group h3 { font-size:1.05rem; margin-bottom:12px; color:var(--surface-text); }
.cv-apps-group ul { display:flex; flex-direction:column; gap:8px; }
.cv-apps-group li { color:var(--surface-text-dim); font-size:0.97rem; line-height:1.5; padding-left:20px; position:relative; }
.cv-apps-group li::before { content:''; position:absolute; left:0; top:0.62em; width:10px; height:1.5px; background:#8B2E22; }
.cv-apps-media { margin:0; }
.cv-apps-media img { width:100%; height:auto; display:block; }

/* ---- 08 · dall'officina: due prove reali ---- */
.cv-officina { display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:48px; }
.cv-officina-item { margin:0; }
.cv-officina-media { aspect-ratio:3/4; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,0.4); }
.cv-officina-media video, .cv-officina-media img { width:100%; height:100%; object-fit:cover; display:block; }
.cv-officina-tag { display:block; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); margin:16px 0 8px; }
.cv-officina-item figcaption p { font-size:0.95rem; color:var(--surface-text-dim); line-height:1.55; max-width:44ch; }

/* ---- cornice per il parallax mobile delle fotografie ---- */
.cv-media-frame { position:relative; }

/* ---- i sei passi su mobile: linea del tempo con filo rosso (vedi JS di pagina) ---- */
.cv-steps-wrap { position:relative; }
.cv-steps-line-track, .cv-steps-line-fill { display:none; }

/* scivolata d'ingresso per i blocchi che cambiano con gli interruttori mobile */
@keyframes cv-scivola { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
.cv-nascosta { display:none; }
.cv-entra { animation:cv-scivola .5s var(--ease-reveal) both; }

/* ---- CTA finale: alternativa testuale sotto il bottone ---- */
.cta-alt-link { font-size:0.92rem; color:var(--surface-text-mute); }
.cta-alt-link:hover { color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  .matbar-fill { transition:none; }
  .matbar-fill-full { width:100%; } .matbar-fill-thin { width:24%; }
  .cv-hero-secondary svg { animation:none; }
}

/* ---- responsive ---- */
@media (min-width:768px) and (max-width:1023px){
  .cv-steps { grid-template-columns:1fr 1fr; }
  .cv-step { padding-left:0 !important; }
  .cv-step:nth-child(odd){ border-right:1px solid var(--surface-border); padding-right:26px; }
  .cv-step:nth-child(even){ border-right:none; padding-left:26px !important; }
  .cv-step:nth-child(n+4){ border-bottom:1px solid var(--surface-border); }
  .cv-step:nth-child(n+5){ border-bottom:none; }
}
@media (max-width:767px){
  .cv-hero-actions { gap:20px; margin-top:26px; }
  .cv-issues li { grid-template-columns:1fr; gap:4px; padding:14px 0; }
  /* passi come linea del tempo: pallini, numeri a filo (contorno rosso) e il
     filo che si colora scendendo — lo stile dei tre punti di "Oltre la
     lavorazione" in homepage, chiesto esplicitamente per questa versione. */
  .cv-steps-wrap { margin-top:40px; }
  .cv-steps { grid-template-columns:1fr; margin-top:0; border-top:none; padding-left:34px; }
  .cv-step { display:flex; flex-direction:column; position:relative; border:none !important; padding:0 0 44px !important; }
  .cv-step:last-child { padding-bottom:6px !important; }
  .cv-step::before { content:''; position:absolute; left:-33px; top:0.55em; width:9px; height:9px; border-radius:50%; background:var(--surface-bg); border:1px solid var(--accent); }
  .cv-steps-line-track, .cv-steps-line-fill { display:block; position:absolute; left:5px; top:8px; bottom:8px; width:1px; }
  .cv-steps-line-track { background:var(--surface-border); }
  .cv-steps-line-fill { background:var(--accent); transform:scaleY(0); transform-origin:top center; will-change:transform; }
  .cv-step-num { order:-2; font-weight:700; font-size:2.1rem; letter-spacing:-0.02em; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(216,35,55,0.6); margin-bottom:10px; }
  .cv-step h3 { order:-1; margin:0 0 6px; }
  .cv-diag { order:0; max-width:118px; margin:8px 0 10px; }

  /* fotografie con parallax leggero (vedi data-parallax-mobile in main.js):
     la cornice ritaglia, l'immagine e' piu' alta e scorre piano */
  .cv-vena-media .cv-media-frame { overflow:hidden; aspect-ratio:5/7; }
  .cv-apps-media .cv-media-frame { overflow:hidden; aspect-ratio:3/4; }
  .cv-media-frame img { height:118%; width:100%; object-fit:cover; position:relative; top:-9%; }
  .cv-officina-media img { height:118%; top:-9%; position:relative; }

  /* confronto a interruttore: un lato alla volta, cursore rosso, swipe attivo.
     Senza JS (nessun data-lato) restano visibili entrambe le colonne, con le
     etichette qui sotto a distinguerle. */
  .cv-compare { margin-top:10px; }
  .cv-compare[data-lato] .cv-compare-row span:nth-child(2),
  .cv-compare[data-lato] .cv-compare-row span:nth-child(3) { display:none; }
  .cv-compare[data-lato="massello"] .cv-compare-row span:nth-child(2) { display:block; }
  .cv-compare[data-lato="lastra"] .cv-compare-row span:nth-child(3) { display:block; }
  .cv-compare.cv-cambio .cv-compare-row span:nth-child(2),
  .cv-compare.cv-cambio .cv-compare-row span:nth-child(3) { animation:cv-scivola .45s var(--ease-reveal) both; }
  .cv-vena-grid, .cv-apps, .cv-officina, .cv-when { grid-template-columns:1fr; gap:36px; }
  .cv-seams { grid-template-columns:1fr; gap:0; margin-top:26px; }
  .cv-compare-head { display:none; }
  .cv-compare-row { grid-template-columns:1fr; gap:10px; padding:20px 0; }
  .cv-compare:not([data-lato]) .cv-compare-row span:nth-child(2)::before { content:'Massello — '; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); display:block; margin-bottom:2px; }
  .cv-compare:not([data-lato]) .cv-compare-row span:nth-child(3)::before { content:'Curvatura da lastra — '; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); display:block; margin-bottom:2px; }
  .cv-cta-inline .btn { width:100%; text-align:center; }
}

/* ============ HERO ============ */
.hero { height:130vh; padding:0; background:var(--bg-dark); }
.hero-pin { position:sticky; top:0; height:100vh; min-height:560px; overflow:hidden; }
.hero-image { position:absolute; inset:0; }
.hero-image img, .hero-image video { width:100%; height:100%; object-fit:cover; transform-origin:50% 50%; will-change:transform; }
/* Due velature sovrapposte: una verticale come prima, piu' una orizzontale che
   scurisce solo la fascia sinistra dove sta il testo e sfuma prima di meta'
   schermo, cosi' il titolo si legge senza coprire la foto. */
.hero-scrim {
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,8,8,0.80) 0%, rgba(8,8,8,0.52) 32%, rgba(8,8,8,0) 60%),
    linear-gradient(180deg, rgba(10,10,10,0.32) 0%, rgba(10,10,10,0.20) 34%, rgba(8,8,8,0.78) 78%, rgba(8,8,8,0.92) 100%);
}
.hero-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:130px 32px 70px; will-change:opacity, transform; }
.hero-content .eyebrow { color:#fff; opacity:0.85; }
.hero-content .eyebrow::before { background:#fff; }
/* Su tre righe il titolo pesa piu' di un h1 su due: il corpo resta contenuto
   per non sovrastare la foto ne' gli h2 di sezione. */
.hero-content h1 { font-size:clamp(1.6rem, 3.4vw, 3.4rem); max-width:760px; color:#fff; line-height:1.1; }
/* La parola centrale del titolo e' l'unico accento cromatico dell'hero */
.hero-title-accent { color:var(--accent); }
/* Stesso trattamento dei paragrafi introduttivi degli altri hero del sito
   (.curve-hero-desc, .lastre-cinema-tagline): font di testo, non monospace. */
.hero-tagline { margin-top:18px; font-family:var(--font-body); font-size:1.05rem; color:rgba(255,255,255,0.84); max-width:440px; }
.hero-actions { margin-top:30px; display:flex; align-items:center; flex-wrap:wrap; gap:24px; }
.hero-actions .btn { padding:14px 26px; }
/* Invito a scendere nell'angolo in basso a destra, con la scritta in verticale:
   stesso trattamento di .ma-hero-scopri nell'hero di macchia aperta. Esce dal
   flusso, cosi' non spinge in basso titolo e sottotitolo e lascia libero
   l'angolo dove prima non c'era niente. */
.hero-scroll-cue {
  position:absolute; right:clamp(24px, 4.4vw, 64px); bottom:54px; z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--surface-text); text-decoration:none;
  padding:10px 6px; transition:color .3s var(--ease);
}
.hero-scroll-cue span { writing-mode:vertical-rl; }
.hero-scroll-cue svg { width:14px; height:26px; overflow:visible; }
.hero-scroll-cue svg path { transition:transform .45s var(--ease); }
.hero-scroll-cue:hover { color:var(--accent); }
.hero-scroll-cue:hover svg path { transform:translateY(5px); }
.hero-scroll-cue:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){ .hero-scroll-cue svg path { transition:none; } }
.hero-belts { display:none; }

@media (max-width:767px) {
  .hero-content { padding:110px 22px 40px; }
  .hero-content h1 { font-size:clamp(1.1rem, 6.2vw, 2.4rem); line-height:1.14; }
  .hero-content .eyebrow { display:none; }
  .hero-tagline { margin-top:14px; font-size:0.94rem; max-width:none; }
  /* Da mobile l'hero resta su titolo, testo e invito a scorrere: il pulsante e'
     tolto perche' appesantiva la schermata di apertura. La chiamata all'azione
     resta comunque a portata di mano nel menu (pulsante telefono) e in fondo a
     ogni pagina. */
  .hero-actions { display:none; }
  /* Anche da telefono l'invito resta verticale nell'angolo, solo piu' piccolo:
     stessi valori di .ma-hero-scopri su macchia aperta. Titolo e sottotitolo si
     stringono di quel tanto che basta a non finirgli sotto. */
  .hero-content .hero-scroll-cue {
    right:14px; bottom:calc(22px + env(safe-area-inset-bottom, 0px));
    font-size:0.62rem; gap:10px; padding:8px 4px;
  }
  .hero-content .hero-scroll-cue svg { width:12px; height:22px; }
  .hero-content h1, .hero-content .hero-tagline { padding-right:52px; }

  /* ---- Alleggerimento della velatura (vedi main.js) ----
     Dopo qualche secondo di lettura la velatura si alza nella fascia alta, cosi'
     i nastri di foto si vedono davvero. Prima questo avveniva insieme al rientro
     del pulsante, che da mobile non c'e' piu': resta solo l'effetto sulla luce. */
  .hero-scrim { transition:background .9s var(--ease-reveal) .4s; }
  .hero-folded .hero-scrim {
    background:linear-gradient(180deg,
      rgba(10,10,10,0.20) 0%,
      rgba(10,10,10,0.14) 28%,
      rgba(8,8,8,0.72) 62%,
      rgba(8,8,8,0.94) 100%);
  }

  /* Verticale soltanto: da mobile il testo occupa tutta la larghezza, quindi la
     velatura laterale non serve. Scurisce da meta' in giu', dove cade il testo,
     lasciando leggibili i nastri di foto nella parte alta. */
  .hero-scrim {
    background:linear-gradient(180deg,
      rgba(10,10,10,0.38) 0%,
      rgba(10,10,10,0.28) 28%,
      rgba(8,8,8,0.78) 56%,
      rgba(8,8,8,0.93) 100%);
  }

  #hero-video { display:none; }
  .hero-belts {
    display:flex; flex-direction:column; gap:3px;
    position:absolute; inset:0;
    background:var(--bg-dark);
    touch-action:pan-y;
  }
  .hero-belt-row { flex:1 1 0; overflow:hidden; position:relative; touch-action:pan-y; }
  .hero-belt-track { display:flex; align-items:stretch; height:100%; width:max-content; will-change:transform; backface-visibility:hidden; }
  .hero-belt-track img { flex:0 0 auto; width:68vw; height:100%; object-fit:cover; margin-right:3px; pointer-events:none; touch-action:pan-y; }
  .row-a .hero-belt-track { animation:heroBeltLeft 34s linear infinite; }
  .row-b .hero-belt-track { animation:heroBeltRight 30s linear infinite; }
}

@keyframes heroBeltLeft { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes heroBeltRight { from { transform:translateX(-50%); } to { transform:translateX(0); } }
/* .hero-scroll-cue non usa piu' bob: la freccia scende al passaggio del mouse
   (vedi il blocco sopra). I fotogrammi restano per .def-hero-scroll-cue. */
@keyframes bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }

/* ============ INTRO ============ */
.intro-grid { display:grid; grid-template-columns:1fr; gap:40px; }
.intro-body p { margin-bottom:18px; max-width:560px; }
.intro-lead { font-size:var(--fs-h4); font-weight:var(--weight-medium); color:var(--surface-text); text-wrap:pretty; }
.claim-list { margin-top:30px; display:flex; flex-direction:column; gap:14px; }
.claim-item { background:var(--surface-bg-alt); border:1px solid var(--surface-border); transition:border-color .25s ease; }
.claim-item.open { border-color:var(--accent); }
.claim-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 22px; background:none; text-align:left;
  font-size:0.96rem; font-weight:var(--weight-medium); font-family:var(--font-body); color:var(--surface-text); cursor:pointer;
}
.claim-chevron { flex-shrink:0; color:var(--accent); transition:transform .3s var(--ease); }
.claim-item.open .claim-chevron { transform:rotate(45deg); }
.claim-panel { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.claim-panel p { padding:0 22px 20px; font-size:0.9rem; color:var(--surface-text-mute); max-width:none; }

.full-service-note { margin-top:34px; padding-top:28px; border-top:1px solid var(--surface-border); }
.full-service-note .eyebrow { margin-bottom:10px; }
.full-service-note p:last-child { font-family:var(--font-heading); font-size:1.3rem; font-weight:600; color:var(--surface-text); }

/* ============ FILIERA (timeline interattiva a lastre) ============ */
.filiera-strip { display:flex; flex-direction:column; gap:3px; margin-top:50px; touch-action:pan-y; }
.filiera-stage {
  position:relative; overflow:hidden; cursor:pointer; touch-action:pan-y;
  background:var(--bg-dark-alt); border:1px solid var(--surface-border); border-left:3px solid transparent;
  padding:28px 24px;
  transition:background .4s ease, border-color .4s ease;
}
.filiera-stage.active { background:var(--bg-dark); border-left-color:var(--accent); }
.filiera-stage-bg { position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .8s var(--ease); }
.filiera-stage-bg img { width:100%; height:100%; object-fit:cover; display:block; }
.filiera-stage-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,8,6,0.94) 0%, rgba(10,8,6,0.68) 50%, rgba(10,8,6,0.35) 100%);
}
.filiera-stage.active .filiera-stage-bg { opacity:1; }
.filiera-num {
  position:relative; z-index:1; display:block; font-family:var(--font-heading); font-weight:800; line-height:1;
  letter-spacing:var(--tracking-tight);
  font-size:clamp(2.5rem, 6vw, 4rem); color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.16);
  margin-bottom:10px; transition:-webkit-text-stroke-color .4s ease;
}
.filiera-stage.active .filiera-num { -webkit-text-stroke-color:rgba(255,255,255,0.32); }
.filiera-title { position:relative; z-index:1; font-size:1.5rem; margin-bottom:0; transition:margin-bottom .5s var(--ease); }
.filiera-stage.active .filiera-title { margin-bottom:14px; }
.filiera-text {
  position:relative; z-index:1;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .6s var(--ease), opacity .45s ease;
  color:var(--surface-text-dim); font-size:0.96rem; max-width:520px;
}
.filiera-stage.active .filiera-text { max-height:220px; opacity:1; }

.filiera-note { margin-top:40px; padding-top:26px; border-top:1px solid var(--surface-border); }
.filiera-note .eyebrow { margin-bottom:10px; }
/* :last-of-type e non :last-child, cosi' la regola regge anche con il link sotto */
.filiera-note p:last-of-type { max-width:640px; color:var(--surface-text-dim); }

@media (max-width:1023px) {
  /* più lenta: da mobile l'espansione della voce attiva risultava troppo brusca */
  .filiera-title { transition:margin-bottom 1s var(--ease); }
  .filiera-text { transition:max-height 1.1s var(--ease), opacity .9s ease; }
}

@media (min-width:1024px) {
  .filiera-strip { flex-direction:row; align-items:stretch; height:480px; gap:4px; }
  .filiera-stage {
    flex:0.58; display:flex; flex-direction:column; justify-content:flex-end;
    padding:40px 30px; border-left:none; border-bottom:3px solid transparent;
    transition:flex .8s var(--ease), background .4s ease, border-color .4s ease;
  }
  .filiera-stage.active { flex:2.4; border-bottom-color:var(--accent); }
  .filiera-stage .filiera-num { position:absolute; top:34px; left:30px; margin-bottom:0; font-size:clamp(3.5rem,7vw,5.5rem); }
  .filiera-title {
    position:relative; z-index:2; writing-mode:vertical-rl; transform:rotate(180deg);
    white-space:nowrap; font-size:1.15rem;
  }
  .filiera-stage.active .filiera-title { writing-mode:horizontal-tb; transform:none; font-size:1.7rem; margin-bottom:16px; }
  .filiera-text { position:relative; z-index:2; max-height:none; }
  .filiera-stage:not(.active) .filiera-text { opacity:0; max-height:0; }
}

/* ============ PARALLAX FEATURE (immagine che scorre più lenta dello scroll, larghezza mai tagliata) ============ */
.parallax-feature { position:relative; padding:0; }
.parallax-feature-media {
  position:relative; width:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 1.667; /* più "bassa" dell'immagine mobile: dà margine verticale al parallax senza mai toccare la larghezza */
}
.parallax-feature-scale { width:100%; will-change:transform; }
.parallax-feature-scale img { width:100%; height:auto; display:block; }

@media (min-width:1024px) {
  .parallax-feature-media { aspect-ratio: 3.75; }
}

/* ============ TESTI LUNGHI SU MOBILE ============
   Da telefono un blocco di 3-4 paragrafi diventa un muro che nessuno legge.
   Qui i primi paragrafi restano visibili e il resto va dietro un "Continua a
   leggere". Il testo resta sempre nel DOM — quindi indicizzato e accessibile —
   cambia solo come viene presentato. Struttura e pulsante li crea main.js,
   perche' su desktop non serve nulla di tutto questo. */
@media (max-width:767px) {
  .testo-extra { max-height:0; overflow:hidden; transition:max-height .55s var(--ease); }
  .testo-extra-toggle {
    display:inline-flex; align-items:center; gap:9px; margin-top:14px;
    background:none; cursor:pointer;
    font-family:var(--font-mono); font-size:0.76rem; font-weight:600;
    text-transform:uppercase; letter-spacing:var(--tracking-caps);
    color:var(--accent); border-bottom:1px solid transparent;
  }
  .testo-extra-toggle::after {
    content:''; width:7px; height:7px; margin-bottom:2px;
    border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
    transform:rotate(45deg); transition:transform .3s var(--ease);
  }
  .aperto > .testo-extra-toggle::after { transform:rotate(-135deg); margin-bottom:-2px; }
}

/* ============ SCROLL STORY ============ */
/* clip e non hidden (non crea un contenitore di scroll: lo sticky del visual
   continua a funzionare): gli stati iniziali delle animazioni dei blocchi
   sporgevano di qualche px oltre il bordo destro creando scroll orizzontale */
.scroll-story { overflow-x:clip; }
.story-head h2 { max-width:760px; }
.story-layout { display:flex; flex-direction:column; gap:40px; margin-top:60px; }
.story-visual { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,0.4); }
.story-visual-inner { position:relative; width:100%; height:100%; }
.story-visual-inner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s var(--ease), transform 8s linear; transform:scale(1.01); }
.story-visual-inner img.active { opacity:1; transform:scale(1.04); }
.story-text { display:flex; flex-direction:column; }
.story-block { padding:50px 0; border-top:1px solid var(--surface-border); opacity:0.35; transition:opacity .4s ease; }
.story-text .story-block:last-child { border-bottom:1px solid var(--surface-border); }
.story-block.active { opacity:1; }
.story-index { font-family:var(--font-mono); color:var(--accent); font-size:0.85rem; font-weight:500; letter-spacing:0.05em; }
.story-block h3 { font-size:var(--fs-h3); margin:10px 0 14px; }
.story-block p { max-width:480px; }
.story-block-img { display:none; }
.story-tabs { display:none; }
.story-link { display:inline-block; margin-top:16px; font-family:var(--font-mono); font-size:0.82rem; color:var(--accent); border-bottom:1px solid transparent; transition:border-color .25s ease; }
.story-link:hover { border-color:var(--accent); }
.story-ruler { display:none; }

.projects-head { display:flex; flex-direction:column; gap:24px; align-items:flex-start; }

/* ============ COMPARE (cut-compare) ============ */
.compare-slider { position:relative; max-width:960px; margin:60px auto 0; aspect-ratio:16/11; box-shadow:0 30px 70px rgba(0,0,0,0.45); user-select:none; }
.compare-before, .compare-after { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.compare-after-wrap { position:absolute; inset:0; width:50%; overflow:hidden; }
.compare-after-wrap .compare-after { width:var(--compare-w, 100vw); max-width:none; }
.compare-handle { position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--accent); transform:translateX(-50%); }
.compare-handle::before, .compare-handle::after { content:''; position:absolute; left:50%; width:9px; height:9px; background:var(--accent); transform:translateX(-50%); }
.compare-handle::before { top:-5px; } .compare-handle::after { bottom:-5px; }
.compare-label { position:absolute; bottom:18px; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; font-weight:500; color:#fff; background:rgba(0,0,0,0.55); padding:8px 16px; pointer-events:none; }
.compare-label-left { left:18px; } .compare-label-right { right:18px; }

/* ============ PROJECTS ============ */
.projects-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-top:50px; }
.project-card { display:block; position:relative; overflow:hidden; background:var(--surface-bg-alt); border:1px solid var(--surface-border); cursor:pointer; transform-style:preserve-3d; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.project-card:hover { box-shadow:0 24px 50px rgba(0,0,0,0.4); }
.project-card-media { aspect-ratio:1/1; overflow:hidden; }
.project-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.project-card:hover .project-card-media img { transform:scale(1.06); }
.project-card-info { padding:24px; }
.project-tag { display:inline-block; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--accent); font-weight:500; margin-bottom:10px; }
.project-card-info h3 { font-size:var(--fs-h4); margin-bottom:8px; color:var(--surface-text); }
.project-card-info p { font-size:0.9rem; color:var(--surface-text-mute); }

/* ============ TEAM ============ */
/* "Chi lavora la pietra" e il blocco che segue sono un unico discorso: lo stacco
   standard fra sezioni (100px, 140px da 768px in su) lasciava un vuoto eccessivo. */
.team { padding-bottom:72px; }
.intro { padding-top:72px; }
@media (min-width:768px) {
  .team { padding-bottom:104px; }
  .intro { padding-top:104px; }
}
.team-grid { display:grid; grid-template-columns:1fr; gap:50px; align-items:center; }
.team-text p { max-width:480px; margin-bottom:30px; }
.since-badge { display:flex; align-items:center; gap:16px; }
.since-year { font-family:var(--font-heading); font-size:3.4rem; font-weight:800; letter-spacing:var(--tracking-tight); color:var(--accent); line-height:1; }
.since-label { font-size:0.8rem; color:var(--surface-text-mute); line-height:1.3; }
.team-media { position:relative; }
.team-img-main { width:100%; aspect-ratio:4/3; object-fit:cover; }
.team-img-sub { display:none; position:absolute; bottom:-30px; left:-30px; width:52%; aspect-ratio:4/3; object-fit:cover; border:5px solid var(--surface-bg); box-shadow:0 20px 40px rgba(0,0,0,0.4); }

/* ============ CTA ============ */
.cta { text-align:center; }
.cta-inner { display:flex; flex-direction:column; align-items:center; }
.cta h2 { max-width:800px; }
.cta-inner > p { max-width:480px; margin-bottom:36px; color:var(--surface-text-dim); font-size:1.05rem; }
.cta-actions { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-bottom:34px; }

/* Testo dei pulsanti con la stessa voce dei titoli del sito: Jost, peso 300 e
   spaziatura 0.08em. Prima era Inter semibold, che accanto ai titoli sottili
   risultava pesante. Corpo un filo piu' grande per compensare il peso leggero. */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:17px 34px 17px 30px;
  font-family:var(--font-heading); font-size:0.98rem; font-weight:300; letter-spacing:0.08em;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-dark); }
.btn-outline { border:1px solid var(--surface-border); color:var(--surface-text); font-weight:var(--weight-medium); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
/* Pulsante con freccia: stessa identita' di .btn-primary usata in tutto il
   sito, con in piu' la freccia direzionale. */
.btn-arrow { gap:18px; }
.btn-arrow svg { flex-shrink:0; }
.cta-contact p { font-size:0.9rem; color:var(--surface-text-mute); }

/* Azione in linea dentro una sezione di contenuto: da' uno sbocco a chi si
   convince a meta' pagina, senza spezzare il ritmo con un blocco CTA pieno. */
.inline-cta {
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  font-family:var(--font-mono); font-size:0.82rem; font-weight:600;
  text-transform:uppercase; letter-spacing:var(--tracking-caps);
  color:var(--accent); border-bottom:1px solid transparent;
}
.inline-cta:hover { border-bottom-color:var(--accent); }

/* Alternativa diretta al modulo, per chi preferisce chiamare. */
.cta-direct {
  margin-top:-14px; font-family:var(--font-mono); font-size:0.82rem;
  color:var(--surface-text-mute);
}
.cta-direct a { color:var(--surface-text); border-bottom:1px solid var(--accent); }
.cta-direct a:hover { color:var(--accent); }
.magnetic-btn { will-change:transform; }

/* ============ FOOTER ============ */
.site-footer { padding:80px 0 30px; border-top:1px solid rgba(255,255,255,0.1); background:var(--bg-dark); color:var(--surface-text-dim); }
.footer-grid { display:grid; grid-template-columns:1fr; gap:40px; margin-bottom:60px; }
/* width:auto obbligatorio: le img hanno width/height espliciti nell'HTML (anti
   layout-shift) e senza auto la larghezza dell'attributo stirava il logo */
.footer-brand img { height:24px; width:auto; margin-bottom:16px; }
.footer-brand p { font-size:0.85rem; color:#8c8c8c; }
.footer-col h4 { font-size:0.85rem; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:#8c8c8c; margin-bottom:16px; }
.footer-col a, .footer-col span { display:block; font-size:0.9rem; margin-bottom:10px; color:#c9c9c9; }
.footer-col a:hover { color:var(--accent); }
.footer-social { display:flex; gap:16px; }
.footer-contact-line { display:flex; flex-wrap:wrap; gap:8px 20px; font-family:var(--font-mono); font-size:0.82rem; margin-bottom:18px; color:#c9c9c9; }
.footer-contact-line a:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; font-size:0.8rem; color:#8c8c8c; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }

/* ============ LIGHTBOX ============ */
.lightbox { position:fixed; inset:0; z-index:1000; background:rgba(8,8,8,0.94); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s ease; padding:40px 20px; }
.lightbox.active { opacity:1; pointer-events:auto; }
.lightbox-body { display:flex; flex-direction:column; align-items:center; max-width:1100px; width:100%; }
.lightbox-media { width:100%; display:flex; align-items:center; justify-content:center; }
.lightbox img { max-width:100%; max-height:68vh; object-fit:contain; }
.lightbox-meta { margin-top:22px; text-align:center; }
.lightbox-cat { display:block; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.lightbox-meta h3 { font-size:var(--fs-h3); margin-bottom:6px; }
.lightbox-material { font-family:var(--font-mono); font-size:0.82rem; color:rgba(255,255,255,0.6); }
.lightbox-close { position:absolute; top:24px; right:28px; font-size:2rem; color:#fff; line-height:1; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.lightbox-close:hover { background:rgba(255,255,255,0.1); }
.lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  transition:background .25s ease, border-color .25s ease;
}
.lightbox-nav:hover { background:var(--accent); border-color:var(--accent); }
.lightbox-prev { left:16px; }
.lightbox-next { right:16px; }
@media (max-width:640px) {
  .lightbox-nav { width:42px; height:42px; }
  .lightbox-prev { left:6px; }
  .lightbox-next { right:6px; }
}

/* ============ PAGE HEADER / BREADCRUMB ============ */
.page-header { padding:160px 0 50px; }
.page-header-slim { padding:150px 0 20px; }
.breadcrumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--font-mono); font-size:0.76rem; color:var(--surface-text-mute); margin-bottom:24px; }
.breadcrumb a { color:var(--surface-text-mute); } .breadcrumb a:hover { color:var(--accent); }
.breadcrumb span { opacity:0.5; }

/* ============ SPEC / CUT-SHEET TABLE ============ */
.spec-table { border-top:1px solid var(--surface-border); margin-top:36px; max-width:640px; padding:0; }
.spec-row { display:flex; justify-content:space-between; gap:20px; padding:16px 2px; border-bottom:1px solid var(--surface-border); font-family:var(--font-mono); font-size:0.84rem; }
.spec-row dt { color:var(--surface-text-mute); text-transform:uppercase; letter-spacing:var(--tracking-caps); }
.spec-row dd { color:var(--surface-text); text-align:right; font-feature-settings:"tnum" 1, "lnum" 1; }

/* ============ PROCESS STRIP ============ */
.process-strip { display:flex; gap:20px; overflow-x:auto; padding:6px 4px 26px; margin-top:20px; scroll-snap-type:x proximity; scrollbar-width:thin; }
.process-step { flex:0 0 260px; scroll-snap-align:start; background:var(--surface-bg-alt); border:1px solid var(--surface-border); padding:28px; }
.process-step .step-index { font-family:var(--font-mono); color:var(--accent); font-size:0.78rem; }
.process-step h4 { font-size:1.02rem; margin:12px 0 8px; color:var(--surface-text); }
.process-step p { font-size:0.85rem; color:var(--surface-text-mute); }

/* ============ RELATED PROJECTS STRIP ============ */
.related-strip { display:grid; grid-template-columns:1fr; gap:20px; margin-top:40px; }
.related-card { overflow:hidden; position:relative; aspect-ratio:4/3; }
.related-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.related-card:hover img { transform:scale(1.06); }
.related-card-label { position:absolute; bottom:0; left:0; right:0; padding:16px; background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent); font-size:0.85rem; color:#fff; font-weight:500; }

/* ============ FILTER TABS ============ */
.filter-tabs { display:flex; flex-wrap:wrap; gap:10px; margin:44px 0 10px; }
.filter-tab { padding:11px 22px; border:1px solid var(--surface-border); font-family:var(--font-mono); font-size:0.76rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-dim); transition:all .25s ease; }
.filter-tab.active, .filter-tab:hover { border-color:var(--accent); color:var(--surface-text); background:rgba(216,35,55,0.14); }
.project-card.is-hidden { display:none; }

/* ============ GALLERY WALL (pagina Progetti: mosaico a piena larghezza) ============ */
/* Spazio sufficiente a liberare la nav fissa: prima il titolo della pagina
   finiva sotto la barra. Allineato alla spaziatura di .page-header. */
.gallery-wall { padding-top:150px; }
@media (max-width:859px) { .gallery-wall { padding-top:120px; } }
.gallery-head { display:flex; flex-direction:column; gap:22px; margin-bottom:26px; }
/* La pagina prima aveva solo l'etichetta "Portfolio" come h1: ora un titolo
   vero (gerarchia + motori di ricerca) e una riga di contesto. */
.gallery-title { font-size:clamp(1.9rem, 4.2vw, 3.4rem); margin:-6px 0 0; }
.gallery-lead { max-width:560px; color:var(--surface-text-dim); margin-top:-8px; }
.gallery-filters { display:flex; flex-wrap:wrap; gap:10px 26px; }
.gallery-filter {
  position:relative; padding:6px 0; font-family:var(--font-mono); font-size:0.8rem;
  letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute);
  transition:color .3s ease;
}
.gallery-filter::after {
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0%;
  background:var(--accent); transition:width .4s var(--ease);
}
.gallery-filter.active, .gallery-filter:hover { color:var(--surface-text); }
.gallery-filter.active::after { width:100%; }

.gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; grid-auto-flow:dense; gap:3px; }
.gallery-tile { position:relative; overflow:hidden; cursor:pointer; }
.gallery-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease); }
.gallery-tile:hover img { transform:scale(1.06); }
.gallery-tile-info {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:16px;
  background:linear-gradient(0deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.25) 60%, transparent 100%);
  opacity:1; transition:opacity .4s ease;
}
.gallery-tile-cat { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--accent); margin-bottom:5px; }
.gallery-tile-name { font-size:0.98rem; font-weight:600; color:#fff; margin-bottom:3px; line-height:1.2; }
.gallery-tile-material { font-family:var(--font-mono); font-size:0.7rem; color:rgba(255,255,255,0.65); }
.gallery-tile.is-hidden { display:none; }

/* Su mobile solo il titolo: più peso alla foto, meno testo sopra */
@media (max-width:1023px) {
  .gallery-tile-cat, .gallery-tile-material { display:none; }
}

.gallery-tile.span-2x2, .gallery-tile.span-2x1 { grid-column:span 2; }
.gallery-tile.span-2x2 { grid-row:span 2; }

@media (min-width:1024px) {
  .gallery-grid { grid-template-columns:repeat(4,1fr); grid-auto-rows:230px; gap:4px; }
  .gallery-tile.span-2x2 { grid-column:span 2; grid-row:span 2; }
  .gallery-tile.span-2x1 { grid-column:span 2; grid-row:auto; }
  .gallery-tile.span-1x2 { grid-row:span 2; grid-column:auto; }
  .gallery-tile-info { opacity:0; padding:24px; }
  .gallery-tile:hover .gallery-tile-info { opacity:1; }
  .gallery-tile-name { font-size:1.2rem; }
  .gallery-tile-material { font-size:0.78rem; }
}

/* ============ MASONRY GRID ============ */
.masonry-grid { display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; gap:14px; margin-top:20px; }
.masonry-tile { position:relative; overflow:hidden; }
.masonry-tile img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.masonry-tile:hover img { transform:scale(1.05); }
.masonry-tile.text-tile { background:var(--surface-bg-alt); border:1px solid var(--surface-border); display:flex; flex-direction:column; justify-content:center; padding:28px; }
.masonry-tile.text-tile h3 { font-size:var(--fs-h3); margin-bottom:10px; color:var(--surface-text); }
.masonry-tile.text-tile p { font-size:0.88rem; color:var(--surface-text-mute); }
.masonry-tile .masonry-caption { position:absolute; bottom:0; left:0; right:0; padding:16px; background:linear-gradient(0deg, rgba(0,0,0,0.7), transparent); font-family:var(--font-mono); font-size:0.72rem; color:#fff; letter-spacing:0.03em; }
@media (min-width:640px) {
  .masonry-grid { grid-template-columns:repeat(4,1fr); grid-auto-rows:160px; }
  .masonry-tile.span-2x2 { grid-column:span 2; grid-row:span 2; }
  .masonry-tile.span-2x1 { grid-column:span 2; }
  .masonry-tile.span-1x2 { grid-row:span 2; }
}

/* ============ CONTACT FORM ============ */
.contact-layout { display:grid; grid-template-columns:1fr; gap:60px; }
.contact-data-block { font-family:var(--font-mono); }
.contact-data-block .big-line { display:block; font-family:var(--font-heading); font-size:clamp(2rem,5vw,3.2rem); color:var(--surface-text); margin:6px 0 24px; font-weight:700; letter-spacing:var(--tracking-tight-sm); }
.contact-data-block dl { display:flex; flex-direction:column; gap:20px; margin-top:30px; }
.contact-data-block dt { font-size:0.72rem; color:var(--surface-text-mute); text-transform:uppercase; letter-spacing:var(--tracking-caps); margin-bottom:6px; }
.contact-data-block dd a, .contact-data-block dd { font-size:0.95rem; color:var(--surface-text); }
.contact-data-block dd a:hover { color:var(--accent); }
.contact-form { display:flex; flex-direction:column; gap:20px; }
.form-row { display:grid; grid-template-columns:1fr; gap:20px; }
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-field label { font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--surface-text-mute); }
.form-field input, .form-field textarea, .form-field select { background:var(--surface-bg-alt); border:1px solid var(--surface-border); padding:14px 16px; color:var(--surface-text); font-family:var(--font-body); font-size:0.95rem; resize:vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline:none; border-color:var(--accent); }
.form-note { font-size:0.78rem; color:var(--surface-text-mute); margin-top:-6px; }
@media (min-width:860px) { .contact-layout { grid-template-columns:0.9fr 1fr; } .form-row.two-col { grid-template-columns:1fr 1fr; } }

/* ============ RESPONSIVE ============ */
@media (min-width:768px) {
  section { padding:140px 0; }
  .intro-grid { grid-template-columns:0.8fr 1fr; gap:60px; }
  .projects-head { flex-direction:row; align-items:flex-end; justify-content:space-between; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .team-img-sub { display:block; }
  .projects-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr 1fr; }
}
/* ---- scroll-story su mobile: carosello di schede a piena immagine con righello di avanzamento ---- */
@media (max-width:1023px) {
  .story-visual, .story-tabs { display:none; }
  .story-text {
    display:flex; flex-direction:row; flex-wrap:nowrap; margin:0 -24px; padding:0 24px 8px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .story-text::-webkit-scrollbar { display:none; }
  .story-block {
    display:flex !important; flex-direction:column; justify-content:flex-end;
    flex:0 0 84vw; max-width:400px; aspect-ratio:3/4; position:relative; overflow:hidden;
    margin-right:14px; padding:24px 22px 26px; scroll-snap-align:center;
    opacity:1 !important; border-top:none;
  }
  .story-block:last-child { margin-right:0; border-bottom:none; }
  .story-block-img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  /* crop mirati: di default il centro immagine taglia via il pezzo/dettaglio che deve restare leggibile */
  .story-block[data-story-target="1"] .story-block-img { object-position:center 15%; }
  .story-block[data-story-target="2"] .story-block-img { object-position:15% center; }
  .story-block::before {
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(11,9,8,0.05) 32%, rgba(11,9,8,0.6) 66%, rgba(11,9,8,0.94) 100%);
  }
  .story-block .story-index {
    position:relative; z-index:2; align-self:flex-start; margin-bottom:auto;
    font-family:var(--font-mono); font-size:4.4rem; font-weight:700; line-height:1; letter-spacing:-0.03em;
    color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,0.75);
  }
  .story-block h3 { position:relative; z-index:2; font-size:1.28rem; margin:0; color:#fff; }
  .story-block p { display:none; }
  .story-block .story-link { position:relative; z-index:2; margin-top:10px; }

  .story-ruler { display:flex; align-items:center; gap:16px; margin-top:22px; padding:0 24px; }
  .story-ruler-count { flex:none; font-family:var(--font-mono); font-size:0.8rem; color:var(--surface-text-mute); letter-spacing:0.04em; white-space:nowrap; }
  .story-ruler-count [data-story-current] { color:var(--accent); font-weight:600; }
  .story-ruler-track { flex:1; height:1px; background:var(--surface-border); position:relative; }
  .story-ruler-fill { position:absolute; left:0; top:0; height:1px; width:16.6667%; background:var(--accent); transition:width .2s var(--ease); }

  /* ---- progetti su mobile: carosello orizzontale con "peek" ---- */
  .projects-grid {
    display:flex; flex-wrap:nowrap; gap:16px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding:4px 24px 14px;
    -webkit-overflow-scrolling:touch;
  }
  /* peek più generoso e a larghezza costante (non proporzionale al viewport): sul primo progetto deve
     essere inequivocabile che ce ne sono altri accanto, senza doverlo scoprire trascinando col dito */
  .project-card { flex:0 0 auto; width:calc(100vw - 120px); max-width:380px; scroll-snap-align:center; }
}
@media (min-width:1024px) {
  .story-layout { flex-direction:row; align-items:flex-start; }
  /* cornice verticale, non piu' 4:3 orizzontale: 5 foto su 6 sono verticali e
     nel taglio orizzontale se ne vedeva solo una fascia centrale */
  /* L'immagine respira in alto e in basso della stessa misura: si ferma a 110px
     dal bordo (37px sotto la barra del menu, alta 73px) e lascia sotto quegli
     stessi 37px — da cui 110 + 37 = 147px tolti all'altezza dello schermo.
     Prima c'era un tetto fisso di 680px: su uno schermo alto (un tablet in
     verticale, un monitor grande) l'immagine restava piccola e sotto si apriva
     un vuoto largo il triplo del margine superiore. */
  .story-visual { position:sticky; top:110px; width:46%; flex-shrink:0; aspect-ratio:auto; height:calc(100vh - 147px); }
  /* soggetti non centrati: stessi accorgimenti del layout mobile */
  .story-visual-inner img[data-story-img="1"] { object-position:center 15%; }
  .story-visual-inner img[data-story-img="2"] { object-position:15% center; }
  .story-text { flex:1; padding-left:60px; }
  .projects-grid { grid-template-columns:repeat(4,1fr); }
  .process-strip { overflow-x:visible; flex-wrap:wrap; }
  .process-step { flex:1 1 220px; }
  .related-strip { grid-template-columns:repeat(3,1fr); }

  /* ---- "Alcuni progetti" in homepage: griglia irregolare, come spazi/bagno.html ---- */
  #progetti .projects-grid {
    grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; grid-auto-flow:dense; gap:10px;
  }
  #progetti .project-card-media { position:absolute; inset:0; aspect-ratio:auto; }
  #progetti .project-card.span-2x2 { grid-column:span 2; grid-row:span 2; }
  #progetti .project-card.span-2x1 { grid-column:span 2; }
  #progetti .project-card.span-1x2 { grid-row:span 2; }
  /* testo visibile solo al passaggio del mouse, come le gallery-tile di progetti.html; niente tilt 3D (data-tilt rimosso in HTML) */
  #progetti .project-card-info {
    position:absolute; left:0; right:0; bottom:0; padding:20px;
    background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 65%, transparent 100%);
    opacity:0; transition:opacity .4s ease;
  }
  #progetti .project-card:hover .project-card-info { opacity:1; }
  #progetti .project-card-info h3 { color:#fff; }
  #progetti .project-card-info p { color:rgba(255,255,255,0.75); }
}
/* Unica eccezione alla regola dei margini uguali: tablet tenuto in verticale.
   Li' la colonna e' stretta (46% di 1024px) e lo schermo altissimo, quindi
   "stesso spazio sopra e sotto" darebbe una feritoia 1:2,6 che taglierebbe via
   mezza fotografia. L'altezza si ferma prima, al limite di un ritratto ancora
   leggibile. In orizzontale — e su qualsiasi scrivania — i due spazi restano
   identici. */
@media (min-width:1024px) and (orientation:portrait) {
  .story-visual { height:min(calc(100vh - 147px), 78vw); }
}
@media (max-width:520px) {
  .cta-actions { flex-direction:column; width:100%; }
  .btn { width:100%; }
}

/* ============================================================
   PAGINA PROGETTO (template riusabile: hero, intro+firma, video,
   gallery, slider "collezione", progetti simili, nav prev/next)
   ============================================================ */
.pj-hero { position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden; }
.pj-hero-media { position:absolute; inset:0; z-index:0; }
.pj-hero-media img, .pj-hero-media video { width:100%; height:100%; object-fit:cover; display:block; }
/* Parallax dell'hero: l'immagine e' piu' alta del riquadro e sborda verso
   l'alto, cosi' mentre scorre piu' lenta della pagina non lascia mai spazi.
   Su desktop il movimento lo da' ScrollSmoother (data-speed), su mobile il
   ciclo a fotogrammi in main.js: entrambi restano dentro lo sbordo. */
.pj-hero-media img { position:relative; top:-14%; height:118%; }
@media (min-width:992px) {
  .pj-hero-media img { top:-26%; height:132%; }
}
.pj-hero-scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(15,12,10,0.30) 0%, rgba(15,12,10,0) 38%, rgba(15,12,10,0.55) 72%, rgba(15,12,10,0.92) 100%); }
.pj-hero .container { position:relative; z-index:2; padding-bottom:64px; width:100%; }
.pj-hero .breadcrumb { color:rgba(255,255,255,0.75); }
.pj-hero .breadcrumb a { color:rgba(255,255,255,0.75); }
.pj-hero-title { font-size:clamp(2.6rem, 8.5vw, 6.2rem); line-height:0.96; letter-spacing:var(--tracking-tight); color:#fff; margin:10px 0 0; text-wrap:balance; }
.pj-share { display:flex; align-items:center; gap:14px; margin-top:28px; }
.pj-share-label { font-family:var(--font-mono); font-size:0.74rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:rgba(255,255,255,0.68); }
.pj-share a, .pj-share button { width:44px; height:44px; padding:0; border:1px solid rgba(255,255,255,0.28); border-radius:50%; display:inline-grid; place-items:center; color:#fff; background:rgba(255,255,255,0.05); cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.pj-share a:hover, .pj-share button:hover { background:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.pj-share svg { width:18px; height:18px; fill:currentColor; }
.pj-copy-toast { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:#fff; opacity:0; transition:opacity .3s var(--ease); }
.pj-copy-toast.show { opacity:0.85; }

/* intro + firma */
.pj-intro { padding:110px 0 30px; }
.pj-intro-grid { display:grid; grid-template-columns:1fr minmax(200px, 300px); gap:64px; align-items:start; }
.pj-lead { font-size:clamp(1.5rem, 2.8vw, 2.15rem); line-height:1.28; letter-spacing:var(--tracking-tight-sm); color:var(--surface-text); margin:16px 0 0; max-width:22ch; text-wrap:balance; }
.pj-intro .pj-sub { color:var(--surface-text-dim); font-size:1.05rem; line-height:1.6; margin:22px 0 0; max-width:40ch; }
.pj-firma { display:flex; flex-direction:column; align-items:flex-end; gap:12px; padding-top:8px; }
.pj-firma img { width:220px; max-width:100%; height:auto; opacity:0.95; }
.pj-firma span { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); }
@media (max-width:820px) {
  .pj-intro { padding:70px 0 20px; }
  .pj-intro-grid { grid-template-columns:1fr; gap:40px; }
  .pj-firma { align-items:flex-start; }
}

/* video feature a piena larghezza */
.pj-feature { padding:40px 0; }
.pj-feature-video { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#000; }
.pj-feature-video video, .pj-feature-video img { width:100%; height:100%; object-fit:cover; display:block; }

/* gallery editoriale */
.pj-gallery { padding:20px 0 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pj-gallery figure { margin:0; overflow:hidden; background:#000; }
.pj-gallery img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.pj-gallery figure:hover img { transform:scale(1.04); }
.pj-portrait { aspect-ratio:3/4; }
.pj-land { aspect-ratio:4/3; }
.pj-span2 { grid-column:span 2; }
@media (max-width:720px) { .pj-gallery { grid-template-columns:1fr 1fr; } .pj-span2 { grid-column:span 2; } }

/* slider "THE STONE WEAVERS" */
.pj-weavers { padding:74px 0 90px; }
.pj-weavers-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px; }
.pj-weavers-title { font-family:var(--font-mono); font-size:clamp(1rem,2.4vw,1.5rem); letter-spacing:0.2em; text-transform:uppercase; color:var(--surface-text); margin:0; }
/* Frecce leggere: cerchio sottile appena accennato, chevron a tratto fine,
   hover che colora il bordo senza riempire — niente blocchi pieni. */
.pj-slider-nav { display:flex; gap:12px; flex:0 0 auto; }
.pj-slider-nav button { width:40px; height:40px; border:1px solid rgba(255,255,255,0.16); border-radius:50%; background:transparent; color:var(--surface-text-dim); cursor:pointer; display:inline-grid; place-items:center; transition:border-color .25s var(--ease), color .25s var(--ease); }
.pj-slider-nav button:hover { border-color:var(--accent); color:var(--surface-text); }
.pj-slider-nav svg { width:17px; height:17px; fill:none; }
.pj-slider { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:4px; }
.pj-slider::-webkit-scrollbar { display:none; }
.pj-slide { flex:0 0 auto; width:min(70vw, 720px); aspect-ratio:4/3; scroll-snap-align:center; overflow:hidden; background:#000; }
.pj-slide.is-portrait { width:min(44vw, 400px); aspect-ratio:3/4; }
.pj-slide img, .pj-slide video { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){ .pj-slide { width:84vw; } .pj-slide.is-portrait { width:66vw; } }

/* progetti simili + nav prev/next */
.pj-related { padding:20px 0 40px; }
.pj-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px; }
.pj-related-card { display:block; overflow:hidden; background:var(--bg-dark-alt); text-decoration:none; }
.pj-related-card figure { margin:0; aspect-ratio:4/3; overflow:hidden; }
.pj-related-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease); }
.pj-related-card:hover img { transform:scale(1.05); }
.pj-related-card .pj-rc-body { padding:16px 18px 20px; }
.pj-related-card h3 { font-size:1.15rem; margin:0; letter-spacing:var(--tracking-tight-sm); }
.pj-related-card .pj-rc-cat { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); }
@media (max-width:720px){ .pj-related-grid { grid-template-columns:1fr; } }
.pj-projnav { display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid var(--surface-border); border-bottom:1px solid var(--surface-border); padding:30px 0; margin-top:20px; }
.pj-projnav a { text-decoration:none; color:var(--surface-text); }
.pj-projnav .pj-pn-eyebrow { display:block; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); margin-bottom:6px; }
.pj-projnav .pj-pn-title { font-size:1.05rem; letter-spacing:var(--tracking-tight-sm); }
.pj-projnav .pj-pn-next { text-align:right; }
.pj-projnav .pj-pn-all { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); }
.pj-projnav .pj-pn-all:hover { color:var(--accent); }
@media (max-width:560px){ .pj-projnav .pj-pn-all { display:none; } }

/* ============================================================
   FONT TITOLI — BLOCCO (scelta definitiva, non piu' una prova)
   Jost per i titoli (geometrico sottile e spaziato, simile a Century
   Gothic / Futura), Inter per il corpo: e' il contrasto tipografico del
   sito. L'@import di Jost sta in cima al file.
   ============================================================ */
:root { --font-heading: 'Jost', 'Inter', sans-serif; }
h1, h2, h3, h4,
.hero-headline, .split-heading, .curv-h, .pj-hero-title, .pj-hero-title,
.cv-step h3, .nav-flyout-card .dd-title,
.pj-related-card h3, .full-service-note p:last-child, .weightless-card h3,
.footer-col h4, .pj-weavers-title {
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
}
/* titoli molto grandi: un filo meno spaziatura, così le parole restano compatte */
.hero-headline, .pj-hero-title, .curv-h, .since-year, .macchia-index {
  letter-spacing: 0.02em !important;
}
/* parole evidenziate nei titoli: niente grassetto pesante — peso leggero,
   coerente con lo stile sottile (l'evidenza resta data dalla linea rossa) */
.underline-reveal,
h1 strong, h2 strong, h3 strong, h4 strong,
h1 b, h2 b, h3 b, h4 b {
  font-weight: 400 !important;
}
/* grandi numeri/parole display: alleggeriti per non stonare col resto */
.since-year, .macchia-index, .contact-data-block .big-line {
  font-weight: 400 !important;
}
/* PROVA FONT — FINE */

/* ============================================================
   VIDEO PLAYER (immagine con angolo tagliato + pulsante play) e
   POP-UP YOUTUBE (modale, non porta su una nuova pagina)
   ============================================================ */
.video-player {
  position:relative; display:block; width:100%; aspect-ratio:16/10;
  padding:0; border:none; background:transparent; cursor:pointer;
}
/* immagine "tagliata" con il linguaggio angolare del sito: notch in alto a destra
   (firma del sito) + angolo tagliato in basso a sinistra dove si incastra il player */
.video-player-frame {
  position:absolute; inset:0; overflow:hidden;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 116px 100%, 0 calc(100% - 116px));
}
.video-player-frame img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .8s var(--ease); }
.video-player-frame::after { content:''; position:absolute; inset:0; background:rgba(15,12,10,0.20); transition:background .4s var(--ease); }
.video-player:hover .video-player-frame img { transform:scale(1.045); }
.video-player:hover .video-player-frame::after { background:rgba(15,12,10,0.08); }
.video-player-ring {
  position:absolute; left:0; bottom:0; z-index:2;
  width:84px; height:84px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff; box-shadow:0 12px 34px rgba(0,0,0,0.45);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.video-player:hover .video-player-ring { background:var(--accent-dark); transform:scale(1.06); }
.video-player-ring svg { width:30px; height:30px; fill:currentColor; margin-left:4px; }
@media (max-width:600px){
  .video-player-frame { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 84px 100%, 0 calc(100% - 84px)); }
  .video-player-ring { width:62px; height:62px; }
  .video-player-ring svg { width:24px; height:24px; }
}

.yt-modal { position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:24px; }
.yt-modal.open { display:flex; }
.yt-modal-backdrop { position:absolute; inset:0; background:rgba(8,6,5,0.88); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:yt-fade .3s var(--ease); }
.yt-modal-dialog { position:relative; z-index:1; width:min(820px, 100%); }
.yt-modal-frame {
  position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,0.65);
  animation:yt-pop .35s var(--ease);
}
.yt-modal-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-modal-close {
  position:absolute; top:-52px; right:0; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.06); color:#fff;
  display:grid; place-items:center; cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease);
}
.yt-modal-close:hover { background:var(--accent); border-color:var(--accent); }
.yt-modal-close svg { width:20px; height:20px; }
@keyframes yt-fade { from { opacity:0; } to { opacity:1; } }
@keyframes yt-pop { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }

/* ============ OLTRE LA LAVORAZIONE ============ */
.oltre {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 68px);
  padding-bottom:150px;
}
.oltre-head { max-width:620px; margin-bottom:76px; }
.oltre-title { font-size:clamp(2.6rem, 6.4vw, 5rem); font-weight:600; letter-spacing:var(--tracking-tight); margin-bottom:26px; }
.oltre-intro { font-size:var(--fs-body-lg); font-weight:var(--weight-medium); color:var(--surface-text-dim); max-width:460px; text-wrap:pretty; }

/* ---- il disegno che si costruisce ----
   A sinistra la sezione della parete, a destra i cinque passi. Leggendo, ogni
   passo accende il proprio strato e lascia accesi i precedenti: il disegno
   CRESCE invece di cambiare, e alla fine la parete e' completa. Cosi' il
   messaggio ("in superficie la pietra, dietro tutto il resto") si vede, non si
   legge soltanto — ed e' anche il motivo per cui non servono numeri di
   richiamo da mettere in relazione con l'elenco. */
/* Stessa impaginazione di "Cosa sappiamo fare": riga di flex con la parte che
   scorre e la parte che resta ferma. Nel codice i passi vengono prima del
   disegno — sono il contenuto vero — e da telefono l'ordine si inverte con
   order, cosi' il disegno resta comunque in apertura. */
.oltre-griglia { display:flex; flex-direction:column; gap:34px; }
/* Senza striscia (per ora tutte le lingue tranne l'italiano) da telefono il
   disegno in piedi resta sopra l'elenco, completo. */
.oltre-colonna-dis { order:-1; }

/* ---- la striscia da telefono e tablet ----
   In verticale, alta 150px, del disegno non si vedrebbe niente: la stessa
   parete in sezione si corica, diventa larga quanto lo schermo e si ferma sotto
   la barra del menu (73px) mentre i passi le scorrono sotto. Il disegno in
   piedi torna dai 1000px in su. */
.oltre-con-striscia { gap:8px; }
.oltre-con-striscia .oltre-colonna-dis { display:none; }
.oltre-striscia {
  position:sticky; top:73px; z-index:20;
  margin:0 -24px; padding:11px 24px 13px;
  background:var(--surface-bg); border-bottom:1px solid var(--surface-border);
}
.oltre-nome {
  display:flex; justify-content:space-between; align-items:baseline; margin:0 0 8px;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
}
.oltre-nome b { color:var(--accent); font-weight:400; }
.oltre-nome span { color:var(--surface-text-dim); }
.oltre-dis-oriz { display:block; width:100%; height:auto; }
/* la striscia ha gia' la sua riga di chiusura: quella del primo passo farebbe due */
.oltre-con-striscia .oltre-passo:first-child { border-top:0; padding-top:22px; }
.oltre-dis { display:block; width:100%; height:auto; max-width:340px; margin:0 auto 8px; }
@media (min-width:1000px){
  .oltre-griglia { flex-direction:row; align-items:flex-start; gap:56px; }
  .oltre-passi { flex:1; min-width:0; }
  /* Il disegno si ferma a 120px dal bordo mentre i passi gli scorrono accanto.
     Su desktop con lo scorrimento morbido questo sticky non basta e diventa un
     pin di ScrollTrigger (vedi main.js): dentro #smooth-content, che viene
     spostato con un transform, il browser non ha piu' nulla rispetto a cui
     incollare l'elemento. */
  .oltre-striscia { display:none; }
  .oltre-colonna-dis { order:0; width:40%; flex-shrink:0; position:sticky; top:120px; }
  .oltre-con-striscia .oltre-colonna-dis { display:block; }
  .oltre-con-striscia .oltre-passo:first-child { border-top:1px solid var(--surface-border); padding-top:26px; }
  /* Su una finestra bassa il disegno intero non ci starebbe e verrebbe tagliato
     in fondo: il rapporto del disegno e' 300x330, quindi la larghezza massima
     che ne garantisce l'altezza disponibile e' quell'altezza per 300/330. */
  .oltre-dis { max-width:min(100%, calc((100vh - 170px) * 0.909)); margin:0 auto; }
  /* Coda sotto l'ultimo passo: il disegno resta agganciato finche' la colonna
     del testo non e' finita, quindi senza questa coda gli ultimi due strati si
     accendevano proprio mentre il disegno stava gia' uscendo dallo schermo.
     La riga di chiusura si avvicina di conseguenza, cosi' il vuoto resta quello
     di prima. */
  .oltre-passi { padding-bottom:180px; }
  .oltre-close { margin-top:24px; }
}
/* Il gioco degli strati che si accendono vale solo dove il disegno resta
   fermo accanto al testo, cioe' da 1000px in su: vedi il blocco piu' sotto. */
.oltre-strato { opacity:1; }
.oltre-linea { fill:none; stroke:rgba(255,255,255,0.5); stroke-width:1.5; }
.oltre-piano { fill:rgba(255,255,255,0.05); stroke:rgba(255,255,255,0.5); stroke-width:1.5; }
.oltre-rossa { fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; }
.oltre-punto { fill:var(--accent); }
.oltre-tag { font-family:var(--font-mono); font-size:9px; letter-spacing:0.08em; fill:var(--surface-text-mute); }

.oltre-passo { padding:26px 0 30px; border-top:1px solid var(--surface-border); }
.oltre-passo span { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; color:var(--accent); }
.oltre-passo h3 { font-size:clamp(1.12rem, 2.1vw, 1.42rem); font-weight:600; margin:11px 0 11px; letter-spacing:var(--tracking-tight-sm); line-height:1.3; }
.oltre-passo p { color:var(--surface-text-dim); line-height:1.68; margin:0; font-size:1rem; text-wrap:pretty; }

/* La parete parte spenta e si accende leggendo. Da telefono succede sulla
   striscia coricata, da computer sul disegno in piedi: due regole separate
   perche' le lingue senza striscia, da telefono, il disegno ce l'hanno sopra
   l'elenco e devono continuare a vederlo gia' completo. Chi ha "riduci le
   animazioni" attivo (sui telefoni lo accende anche il risparmio energetico) la
   vede completa comunque: il codice non aggiunge le classi e restano validi i
   valori pieni qui sopra. */
@media (prefers-reduced-motion:no-preference){
  .oltre-striscia .oltre-strato { opacity:0.12; transition:opacity .6s var(--ease); }
  .oltre-striscia .oltre-strato.acceso { opacity:1; }
}
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .oltre-colonna-dis .oltre-strato { opacity:0.12; transition:opacity .6s var(--ease); }
  .oltre-colonna-dis .oltre-strato.acceso { opacity:1; }
  /* I passi in ombra solo da computer: da telefono si legge uno schermo alla
     volta, e lasciare il testo al 45% vorrebbe dire renderlo poco leggibile. */
  .oltre-passo { opacity:0.45; transition:opacity .45s var(--ease); }
  .oltre-passo.attivo { opacity:1; }
}

.oltre-close { margin-top:96px; border-top:1px solid var(--surface-border); padding-top:56px; }
.oltre-close p { font-size:clamp(1.5rem, 3.6vw, 2.4rem); font-weight:500; color:var(--surface-text); letter-spacing:var(--tracking-open); max-width:900px; text-wrap:pretty; }
.oltre-close .accent { color:var(--accent); }

@media (max-width:760px) {
  .oltre { padding-bottom:100px; }
  .oltre-head { margin-bottom:52px; }
  .oltre-griglia { gap:26px; }
  .oltre-con-striscia { gap:6px; }
  .oltre-striscia { margin:0 -20px; padding:10px 20px 12px; }
  .oltre-passo { padding:20px 0 24px; }
  .oltre-close { margin-top:72px; padding-top:40px; }
}
@media (max-width:560px){ .yt-modal { padding:16px; } .yt-modal-close { top:-46px; } }

/* ============================================================
   DEFENDER — pagina trattamento
   ============================================================ */

/* ---- Hero video: video verticale mostrato per intero, mai ritagliato ---- */
.def-hero {
  position:relative; margin-top:73px; height:calc(100svh - 73px);
  display:flex; align-items:stretch; overflow:hidden; padding:0; background:#0b0908;
}
.def-hero-media-col { position:relative; flex:0 0 auto; height:100%; aspect-ratio:9/16; overflow:hidden; background:#000; }
.def-hero-media-col video { width:100%; height:100%; object-fit:cover; display:block; }
.def-hero-content-col {
  position:relative; z-index:2; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center;
  padding:60px clamp(28px,5vw,72px);
}
.def-hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono);
  font-size:0.76rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:#fff; opacity:0.9; margin-bottom:18px;
}
.def-hero-eyebrow::before { content:''; width:22px; height:2px; background:var(--accent); display:inline-block; }
.def-hero-title { font-size:clamp(2.2rem, 4.6vw, 4.2rem); font-weight:600; color:#fff; letter-spacing:var(--tracking-tight); line-height:1.06; margin-bottom:22px; text-wrap:balance; }
.def-hero-lead { font-size:clamp(1rem,1.5vw,1.12rem); color:rgba(255,255,255,0.82); max-width:420px; text-wrap:pretty; font-weight:500; }
.def-hero-scroll-cue { display:none; }
@media (max-width:900px){
  .def-hero { margin-top:64px; height:auto; flex-direction:column; }
  .def-hero-media-col { flex:none; width:100%; height:auto; aspect-ratio:9/16; }
  .def-hero-content-col { padding:44px 24px 56px; }
  .def-hero-scroll-cue {
    display:inline-flex; align-items:center; gap:10px;
    position:absolute; z-index:3; left:50%; transform:translateX(-50%);
    color:#fff; font-size:0.85rem; font-weight:500; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5));
    /* ancorata più in basso, vicino al fondo del primo schermo visibile (non al fondo del video, che su
       mobile è più alto della viewport) */
    top:calc(100vh - 64px - 52px);
    top:calc(100svh - 64px - 52px - env(safe-area-inset-bottom, 0px));
  }
  .def-hero-scroll-cue svg { animation:bob 1.8s ease-in-out infinite; }
}

/* ---- 72H: sezione centrale, timeline tecnica ---- */
.def-72h { position:relative; overflow:hidden; padding:130px 0 120px; background:#0b0908; }
.def-72h-bg-num {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-mono); font-weight:700; font-size:clamp(9rem, 34vw, 26rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.06); letter-spacing:-0.04em; white-space:nowrap;
  pointer-events:none; user-select:none; z-index:0;
}
.def-72h-head { position:relative; z-index:1; max-width:640px; margin-bottom:90px; }
.def-72h-eyebrow { color:var(--accent); }
.def-72h-num { display:block; font-family:var(--font-mono); font-weight:700; font-size:clamp(3.2rem,7vw,5.6rem); color:#fff; letter-spacing:-0.02em; line-height:1; margin-bottom:22px; }
.def-72h-num span { color:var(--accent); }
.def-72h-title { font-size:clamp(1.5rem, 2.6vw, 2rem); font-weight:600; color:#fff; margin-bottom:18px; letter-spacing:var(--tracking-tight-sm); }
.def-72h-text { color:rgba(255,255,255,0.68); font-size:1.02rem; line-height:1.7; max-width:520px; text-wrap:pretty; }

.def-phases { position:relative; z-index:1; display:flex; flex-direction:column; gap:56px; }
.def-phase-track { position:relative; height:1px; background:rgba(255,255,255,0.14); margin:0 0 8px; }
.def-phase-fill { position:absolute; left:0; top:0; height:1px; width:0%; background:var(--accent); }
.def-phase-grid { display:flex; flex-direction:column; gap:52px; }
.def-phase {
  position:relative; padding-top:26px; max-width:360px;
}
.def-phase::before {
  content:''; position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:50%;
  background:#0b0908; border:1px solid rgba(255,255,255,0.35); transition:background .4s var(--ease), border-color .4s var(--ease);
}
.def-phase.is-active::before { background:var(--accent); border-color:var(--accent); }
.def-phase-num { display:block; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:var(--tracking-caps); color:var(--accent); margin-bottom:10px; }
.def-phase h4 { font-size:1.2rem; font-weight:600; color:#fff; margin-bottom:10px; letter-spacing:var(--tracking-tight-sm); }
.def-phase p { color:rgba(255,255,255,0.62); font-size:0.96rem; line-height:1.6; }

@media (min-width:860px){
  .def-phase-grid { flex-direction:row; justify-content:space-between; gap:40px; }
  .def-phase { flex:1; max-width:320px; }
}
@media (max-width:760px){
  .def-72h { padding:90px 0 84px; }
  .def-72h-head { margin-bottom:64px; }
  .def-phases { gap:40px; }
}

/* ---- Performance: sequenza "prove" ---- */
.def-perf { padding:130px 0; background:var(--bg-dark); }
.def-perf-head { max-width:620px; margin-bottom:80px; }
.def-perf-row {
  display:flex; flex-direction:column; gap:28px; padding:56px 0; border-top:1px solid var(--surface-border);
}
.def-perf-row:last-child { border-bottom:1px solid var(--surface-border); }
.def-perf-media { width:100%; aspect-ratio:4/3; overflow:hidden; position:relative; }
.def-perf-media img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.08); transition:transform 1.1s var(--ease); }
.def-perf-row.in-view .def-perf-media img { transform:scale(1); }
.def-perf-text { display:flex; flex-direction:column; justify-content:center; }
.def-perf-tags { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.def-perf-tag {
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(216,35,55,0.4); padding:6px 12px;
}
.def-perf-word { font-size:clamp(2rem,4.4vw,3.2rem); font-weight:600; color:var(--surface-text); letter-spacing:var(--tracking-tight); margin-bottom:16px; line-height:1.05; }
.def-perf-text p { color:var(--surface-text-dim); font-size:1rem; line-height:1.7; max-width:440px; text-wrap:pretty; }

@media (min-width:860px){
  .def-perf-row { flex-direction:row; align-items:center; gap:64px; }
  .def-perf-media { flex:0 0 46%; }
  .def-perf-text { flex:1; }
  .def-perf-row:nth-child(even) { flex-direction:row-reverse; }
}
@media (max-width:760px){
  .def-perf { padding:90px 0; }
  .def-perf-head { margin-bottom:56px; }
  .def-perf-row { padding:40px 0; }
}

/* ---- Secondo video: composizione editoriale, video verticale intero ---- */
.def-video2 { padding:130px 0; background:#0b0908; }
.def-video2-inner { display:flex; flex-direction:column; gap:48px; align-items:center; }
.def-video2-media { position:relative; width:min(420px, 82vw); aspect-ratio:9/16; overflow:hidden; flex:none; background:#000; }
.def-video2-media video { width:100%; height:100%; object-fit:cover; display:block; }
.def-video2-text { max-width:460px; text-align:center; }
.def-video2-text .eyebrow { justify-content:center; }
.def-video2-text h2 { margin-bottom:16px; }
.def-video2-text p { color:var(--surface-text-dim); font-size:1.02rem; line-height:1.7; text-wrap:pretty; }
@media (min-width:900px){
  .def-video2-inner { flex-direction:row; align-items:center; justify-content:center; gap:80px; }
  .def-video2-text { text-align:left; max-width:400px; }
  .def-video2-text .eyebrow { justify-content:flex-start; }
}
@media (max-width:760px){ .def-video2 { padding:90px 0; } }

/* ---- Applicazioni ---- */
.def-app { padding:130px 0; background:var(--bg-dark); }
.def-app-grid { display:flex; flex-direction:column; gap:70px; }
.def-app-media { width:100%; aspect-ratio:4/3; overflow:hidden; }
.def-app-media img { width:100%; height:100%; object-fit:cover; display:block; }
.def-app-list { display:flex; flex-direction:column; }
.def-app-list-item { padding:22px 0; border-top:1px solid var(--surface-border); display:flex; align-items:baseline; gap:20px; }
.def-app-list-item:last-child { border-bottom:1px solid var(--surface-border); }
.def-app-list-item span:first-child { font-family:var(--font-mono); font-size:0.78rem; color:var(--accent); letter-spacing:var(--tracking-caps); }
.def-app-list-item span:last-child { font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:600; color:var(--surface-text); letter-spacing:var(--tracking-tight-sm); }
@media (min-width:860px){
  .def-app-grid { flex-direction:row; align-items:center; gap:60px; }
  .def-app-media { flex:0 0 48%; }
  .def-app-list { flex:1; }
}
@media (max-width:760px){ .def-app { padding:90px 0; } }

/* ---- Chiusura ---- */
.def-close { padding:130px 0 150px; background:#0b0908; text-align:left; }
.def-close-title { font-size:clamp(2.2rem,5.6vw,3.8rem); font-weight:600; color:#fff; letter-spacing:var(--tracking-tight); margin-bottom:28px; }
.def-close-text { color:rgba(255,255,255,0.68); font-size:1.05rem; max-width:520px; margin-bottom:44px; text-wrap:pretty; }
@media (max-width:760px){ .def-close { padding:90px 0 100px; } }

.def-logo-badge { display:inline-block; margin-bottom:28px; }
.def-logo-badge img { display:block; height:30px; width:auto; }

/* ============================================================
   DEPOSITO LASTRE
   ============================================================ */

/* ---- Hero "cinema": il video del deposito visibile per intero, mai ritagliato, e molto più grande ---- */
.lastre-cinema { padding:150px 0 80px; text-align:center; background:var(--bg-dark); overflow:hidden; }
.lastre-cinema-head { max-width:760px; margin:0 auto 44px; }
.lastre-cinema-head .eyebrow { justify-content:center; }
.lastre-cinema-head h1 { font-size:clamp(2.4rem, 6.8vw, 5.6rem); margin-bottom:36px; }
.lastre-cinema-tagline { font-size:1.05rem; color:var(--surface-text-dim); max-width:540px; margin:0 auto; text-wrap:pretty; }
@media (max-width:640px) { .lastre-cinema-head h1 { margin-bottom:26px; } }
.lastre-cinema-frame-wrap { width:100%; padding:0 16px; }
.lastre-cinema-frame {
  position:relative; max-width:1760px; margin:0 auto; aspect-ratio:16/9;
  background:#000; overflow:hidden;
}
.lastre-cinema-frame video { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.lastre-cinema-mark { position:absolute; width:26px; height:26px; border:1.5px solid rgba(255,255,255,0.55); z-index:2; pointer-events:none; }
.lastre-cinema-mark-tl { top:16px; left:16px; border-right:none; border-bottom:none; }
.lastre-cinema-mark-br { bottom:16px; right:16px; border-left:none; border-top:none; }
.lastre-cinema-tag {
  position:absolute; left:18px; bottom:18px; z-index:2;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:rgba(255,255,255,0.85);
  display:flex; align-items:center; gap:10px;
}
.lastre-cinema-tag::before { content:''; width:18px; height:2px; background:var(--accent); display:inline-block; }
.lastre-cinema-cue { margin-top:40px; }
.lastre-cinema-text-cue { margin-top:32px; }
@media (max-width:640px) {
  .lastre-cinema { padding:126px 0 56px; display:flex; flex-direction:column; }
  .lastre-cinema-frame-wrap { padding:0 12px; order:-1; margin-bottom:36px; }
  .lastre-cinema-tag { left:12px; bottom:12px; font-size:0.6rem; }
  /* Da mobile il video e' gia' sopra al testo: l'invito "Scroll" con la freccia
     punterebbe a un elemento che sta piu' in alto, quindi non serve. */
  .lastre-cinema-text-cue { display:none; }
}
@media (prefers-reduced-motion:reduce) { .lastre-cinema-frame video { animation:none; } }

/* ---- I numeri del deposito: banda editoriale a schermo intero ---- */
.deposito-stats { position:relative; padding:0; overflow:hidden; }
.deposito-stats-bg { position:absolute; inset:0; z-index:0; }
.deposito-stats-bg img { width:100%; height:100%; object-fit:cover; display:block; }
.deposito-stats-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,8,7,0.72) 0%, rgba(10,8,7,0.88) 100%); }
.deposito-stats-inner { position:relative; z-index:1; padding-top:110px; padding-bottom:110px; }
.deposito-stats-head { max-width:640px; margin-bottom:60px; }
.deposito-stats-head .eyebrow { color:#fff; } .deposito-stats-head .eyebrow::before { background:#fff; }
.deposito-stats-head h2 { color:#fff; }
.deposito-stats-row { display:grid; grid-template-columns:1fr; gap:40px; }
.deposito-stat { border-top:1px solid rgba(255,255,255,0.16); padding-top:22px; }
.deposito-stat-num { font-family:var(--font-heading); font-size:clamp(2.6rem, 6vw, 4.2rem); font-weight:800; letter-spacing:var(--tracking-tight); color:var(--accent); line-height:1; margin-bottom:12px; }
.deposito-stat-label { font-size:0.98rem; color:rgba(255,255,255,0.78); max-width:280px; text-wrap:pretty; }
.deposito-stats-note { margin-top:56px; padding-top:32px; border-top:1px solid rgba(255,255,255,0.16); display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.deposito-stats-note span:first-child { font-family:var(--font-mono); font-size:0.78rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--accent); }
.deposito-stats-note span:last-child { font-size:1.05rem; color:rgba(255,255,255,0.88); }
@media (min-width:640px) { .deposito-stats-row { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .deposito-stats-row { grid-template-columns:repeat(4,1fr); gap:32px; } }

/* ---- Ogni lastra è diversa: griglia fotografica asimmetrica ---- */
.slab-gallery { display:grid; grid-template-columns:1fr; gap:14px; margin-top:50px; }
.slab-gallery-item { position:relative; overflow:hidden; aspect-ratio:4/3; }
.slab-gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.slab-gallery-item:hover img { transform:scale(1.05); }
.slab-gallery-cap {
  position:absolute; left:16px; bottom:16px; z-index:2;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:#fff; padding:6px 10px; background:rgba(10,8,7,0.55); backdrop-filter:blur(6px);
}
@media (min-width:640px) {
  .slab-gallery { grid-template-columns:repeat(2,1fr); }
  .slab-gallery-item.span-wide { grid-column:span 2; aspect-ratio:16/9; }
}

/* ---- Un unico interlocutore: riusa .filiera-strip/.filiera-stage ---- */
.deposito-steps-note { margin-top:40px; max-width:600px; }

/* ---- Magazzino online: sezione distinta, non un link in footer ---- */
.magazzino-section { position:relative; padding:0; overflow:hidden; background:#0b0908; }
.magazzino-inner { position:relative; z-index:1; padding:120px 0; text-align:center; }
.magazzino-bg { position:absolute; inset:0; z-index:0; opacity:0.22; }
.magazzino-bg img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(0.3); }
.magazzino-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, #0b0908 0%, rgba(11,9,8,0.55) 50%, #0b0908 100%); }
.magazzino-eyebrow { justify-content:center; }
.magazzino-inner h2 { color:#fff; max-width:760px; margin:0 auto 24px; }
.magazzino-lead { max-width:520px; margin:0 auto 44px; font-size:1.05rem; color:rgba(255,255,255,0.75); text-wrap:pretty; }
.magazzino-actions { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
@media (max-width:760px) { .magazzino-inner { padding:90px 0; } }

/* ============ SFOCATURA D'INGRESSO: SOLO TOUCH ============
   Su dispositivi con mouse o trackpad l'animazione di blur mandava in crisi lo
   scrolling (ri-rasterizzazioni continue mentre le sezioni entrano in vista),
   quindi qui resta la sola dissolvenza con movimento. Su touch (telefoni,
   tablet) la sfocatura originale rimane intatta. In fondo al file per vincere
   sulle regole base e sugli override mobile a parita' di specificita'. */
@media (hover: hover) and (pointer: fine) {
  .reveal, .split-heading, .underline-reveal, .reveal-line, .reveal-tail,
  .split-feature-text .title-shift-up, .split-feature-text .title-shift-down, .lit-text {
    filter:none;
  }
  .reveal { transition:opacity .8s var(--ease-reveal); }
  .split-heading, .underline-reveal, .reveal-line, .reveal-tail,
  .split-feature-text .title-shift-up, .split-feature-text .title-shift-down {
    transition:transform 1s var(--ease-reveal), opacity 1s var(--ease-reveal);
  }
  .lit-text { transition:opacity 1.1s var(--ease), text-shadow 1.1s var(--ease); }
}

/* ============================================================
   RETROILLUMINAZIONE — pagina lavorazioni/retroilluminazione.html
   La luce e' il linguaggio della pagina: l'hero si accende con due
   fotografie reali, gli schemi sono line-art dove il bianco caldo
   (#B8873F e derivati) rappresenta la luce e il rosso resta accento.
   Riusa: light-switch, glow-media, cv-steps, cv-apps, claim-list.
   ============================================================ */

/* ---- hero "la pagina si accende" ---- */
.rth { position:relative; min-height:100vh; display:flex; align-items:center; background:var(--bg-dark); overflow:hidden; padding:130px 0 70px; }
.rth-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,480px); gap:64px; align-items:center; }
.rth-text { max-width:560px; }
.rth-media-col { position:relative; }
.rth-media { position:relative; }
.rth-frame { aspect-ratio:4/5; }
.rth-switch { justify-content:flex-start; align-items:center; gap:18px; margin:34px 0 0; flex-wrap:wrap; }
.rth-switch-nota { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); }

/* ---- schemi: colori condivisi ---- */
.rtd-led { fill:#B8873F; opacity:0.9; }
.rtd-luce { fill:rgba(184,135,63,0.35); }
.rtd-zona { fill:rgba(245,222,179,0.28); stroke:rgba(245,222,179,0.4); stroke-width:0.8; }
.rtd-acceso { fill:rgba(184,135,63,0.22); }

/* ---- 01 · la lastra in controluce: testo a sinistra, fotografia a destra;
   da mobile la foto diventa una banda a tutta larghezza con parallax, come
   la fotografia dopo "Un pensiero in meno" in homepage ---- */
.rt-lastra-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,440px); gap:56px; align-items:center; margin-top:10px; }
.rt-lastra-foto { margin:0; }
@media (max-width:767px){
  .rt-lastra-grid { grid-template-columns:1fr; gap:30px; }
  /* banda piena: esce dal padding del container (24px), a prova di scrollbar */
  .rt-app-media.rt-lastra-foto { margin:0 -24px; width:auto; }
  .rt-lastra-foto .cv-media-frame { aspect-ratio:1.667; overflow:hidden; display:flex; align-items:center; clip-path:none; }
  .rt-lastra-foto .cv-media-frame img { width:100%; height:auto; position:static; top:auto; }
  .rt-lastra-foto figcaption { display:none; }
}

/* ---- 03 · laboratorio della luce ---- */
.rtl { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:48px; align-items:center; margin-top:50px; --rtl-int:0.8; --rtl-colore:#f2c07a; }
.rtl[data-temperatura="neutra"] { --rtl-colore:#f3e9d8; }
.rtl[data-temperatura="fredda"] { --rtl-colore:#cfe0f2; }
.rtl-scena { position:relative; max-width:640px; }
.rtl-glow {
  position:absolute; inset:4% 2%; z-index:0;
  background:radial-gradient(ellipse 70% 60% at 50% 45%, var(--rtl-colore) 0%, rgba(0,0,0,0) 75%);
  opacity:var(--rtl-int); filter:blur(18px);
  transition:opacity .4s ease, background .6s ease;
}
.rtl[data-temperatura="rgb"] .rtl-glow { animation:rtl-rgb 9s linear infinite; }
@keyframes rtl-rgb {
  0% { background:radial-gradient(ellipse 70% 60% at 50% 45%, #e08a8a 0%, rgba(0,0,0,0) 75%); }
  33% { background:radial-gradient(ellipse 70% 60% at 50% 45%, #8ab7e0 0%, rgba(0,0,0,0) 75%); }
  66% { background:radial-gradient(ellipse 70% 60% at 50% 45%, #9fe0a8 0%, rgba(0,0,0,0) 75%); }
  100% { background:radial-gradient(ellipse 70% 60% at 50% 45%, #e08a8a 0%, rgba(0,0,0,0) 75%); }
}
.rtl-lastra { position:relative; z-index:1; width:100%; height:auto; display:block; }
.rtl-corpo { fill:rgba(20,18,15,0.55); stroke:rgba(255,255,255,0.22); stroke-width:1; }
.rtl-vein { fill:none; stroke:rgba(255,255,255,0.5); stroke-width:1.6; }
.rtl-vein-fine { stroke-width:0.9; opacity:0.6; }
.rtl-leds { position:relative; z-index:1; display:flex; justify-content:space-between; padding:10px 4px 0; }
.rtl-leds i { width:3px; height:3px; border-radius:50%; background:var(--rtl-colore); opacity:calc(var(--rtl-int) * 0.9 + 0.1); transition:background .6s ease, opacity .4s ease; }
.rtl[data-temperatura="rgb"] .rtl-leds i { animation:rtl-rgb-led 9s linear infinite; }
@keyframes rtl-rgb-led { 0%{background:#e08a8a} 33%{background:#8ab7e0} 66%{background:#9fe0a8} 100%{background:#e08a8a} }
.rtl-controlli { display:flex; flex-direction:column; gap:26px; }
.rtl-etichetta { display:block; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); margin-bottom:12px; }
.rtl-chips { display:flex; flex-wrap:wrap; gap:8px; }
.rtl-chip {
  background:none; border:1px solid var(--surface-border); color:var(--surface-text-dim);
  padding:9px 16px; cursor:pointer; font-family:var(--font-mono); font-size:0.7rem;
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.rtl-chip[aria-pressed="true"] { border-color:#B8873F; color:#fff; background:rgba(184,135,63,0.14); }
.rtl-chip:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.rtl-range { width:100%; accent-color:#B8873F; cursor:pointer; }
.rtl-nota { font-size:0.85rem; color:var(--surface-text-mute); line-height:1.5; max-width:26ch; }
@media (prefers-reduced-motion:reduce){
  .rtl[data-temperatura="rgb"] .rtl-glow, .rtl[data-temperatura="rgb"] .rtl-leds i { animation:none; }
  .rtl[data-temperatura="rgb"] { --rtl-colore:#c9a3d8; }
}

/* ---- 04 · fino a 3 mm: sezione degli spessori ---- */
.rt3-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,440px); gap:56px; align-items:center; margin-top:10px; }
.rt3-schema { margin:0; }
.rt3-schema svg { width:100%; height:auto; display:block; }
.rt3-sez { fill:rgba(255,255,255,0.1); stroke:rgba(255,255,255,0.35); stroke-width:1.2; }
.rt3-luce { opacity:0; transition:opacity 1s var(--ease-reveal); }
.rt3-luce-20 { fill:rgba(245,222,179,0.12); }
.rt3-luce-10 { fill:rgba(245,222,179,0.38); }
.rt3-luce-3 { fill:rgba(245,222,179,0.85); filter:drop-shadow(0 4px 14px rgba(245,222,179,0.5)); }
.reveal.in-view .rt3-luce-20 { opacity:1; transition-delay:.2s; }
.reveal.in-view .rt3-luce-10 { opacity:1; transition-delay:.55s; }
.reveal.in-view .rt3-luce-3 { opacity:1; transition-delay:.9s; }
.rt3-label { fill:rgba(255,255,255,0.6); font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; }
.rt3-label-forte { fill:#e9c99a; }
.rt3-schema figcaption { margin-top:12px; font-size:0.92rem; color:var(--surface-text-dim); line-height:1.55; }

/* ---- 05 · accessibilita': sezione a strati ---- */
.rta-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,440px); gap:56px; align-items:center; margin-top:10px; }
.rta-schema { margin:0; }
.rta-schema svg { width:100%; height:auto; display:block; }
.rta-freccia { fill:none; stroke:rgba(255,255,255,0.65); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.rta-schema figcaption { margin-top:12px; font-size:0.92rem; color:var(--surface-text-dim); line-height:1.55; }

/* ---- 06 · applicazioni: blocchi editoriali con fotografia ---- */
.rt-app { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,440px); gap:56px; align-items:center; margin-top:52px; }
.rt-app-inversa { grid-template-columns:minmax(300px,440px) minmax(0,1fr); }
.rt-app-inversa .rt-app-testo { order:2; }
.rt-app-inversa .rt-app-media { order:1; }
.rt-app-testo h3 { font-size:1.45rem; margin-bottom:14px; max-width:24ch; }
.rt-app-testo p { color:var(--surface-text-dim); font-size:1rem; line-height:1.65; max-width:54ch; }
.rt-app-cta { margin-top:16px; }
.rt-app-cta a { color:var(--surface-text); }
.rt-app-cta a:hover { color:var(--accent); }
.rt-app-media { margin:0; }
.rt-app-media img { width:100%; height:auto; display:block; }
.rt-app-media figcaption { margin-top:12px; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); line-height:1.7; }

/* ---- applicazioni a fisarmonica: solo da telefono (vedi JS di pagina).
   L'elenco completo entra in una schermata, il dettaglio si apre al tocco. ---- */
.la-app-occhiello { color:var(--surface-text); font-size:1.05rem; line-height:1.5; margin-bottom:14px; }
@media (max-width:767px){
  .la-app-fisarmonica .rt-app { display:block; margin-top:0; border-bottom:1px solid var(--surface-border); }
  .la-app-fisarmonica .rt-app:first-of-type { border-top:1px solid var(--surface-border); }
  .la-app-fisarmonica .rt-app-testo { padding:0; }
  .la-app-trigger {
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    width:100%; padding:20px 0; background:none; border:none; cursor:pointer; text-align:left;
    font-family:var(--font-heading); font-weight:300; letter-spacing:0.04em;
    font-size:1.2rem; color:var(--surface-text);
  }
  .la-app-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
  .la-app-trigger .claim-chevron { flex:0 0 auto; color:var(--accent); transition:transform .35s var(--ease); }
  .rt-app.aperto .la-app-trigger .claim-chevron { transform:rotate(45deg); }
  /* Apertura in due tempi: prima il pannello fa spazio, poi il contenuto ci
     entra dentro sfumando e salendo di poco. L'altezza la misura il JS sul
     contenuto reale, cosi' la curva e' tutta "utile" e non c'e' lo scatto. */
  .la-app-pannello { max-height:0; overflow:hidden; transition:max-height .6s cubic-bezier(.33,1,.68,1); }
  .la-app-pannello > * {
    opacity:0; transform:translateY(14px);
    transition:opacity .1s linear, transform .1s linear;
  }
  .rt-app.aperto .la-app-pannello > * {
    opacity:1; transform:none;
    transition:opacity .5s var(--ease-reveal) .14s, transform .6s var(--ease-reveal) .14s;
  }
  /* la fotografia segue il testo di un soffio: due tempi, non un blocco unico */
  .rt-app.aperto .la-app-pannello > .rt-app-media {
    transition-delay:.26s;
  }
  .la-app-pannello .rt-app-media { margin-top:20px; padding-bottom:24px; }
  /* la voce aperta si distingue dal titolo che si accende e dal segno che
     ruota: niente fondo colorato, la riga resta pulita come le altre */
  .la-app-trigger { transition:color .3s var(--ease); }
  .rt-app.aperto .la-app-trigger { color:#fff; }
  .la-app-fisarmonica .rt-app-inversa .rt-app-testo,
  .la-app-fisarmonica .rt-app-inversa .rt-app-media { order:unset; }
}

/* ---- 07 · caso studio ---- */
.rt-case { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr); gap:52px; align-items:center; margin-top:48px; }
.rt-case-media { margin:0; }
.rt-case-media img { width:100%; height:auto; display:block; }
.rt-case-testo p { color:var(--surface-text-dim); font-size:1rem; line-height:1.65; max-width:48ch; }

/* ---- responsive ---- */
@media (max-width:1023px){
  .rth-grid { gap:44px; grid-template-columns:minmax(0,1fr) minmax(280px,380px); }
}
@media (max-width:767px){
  .rth { min-height:auto; padding:120px 0 54px; }
  .rth-grid { grid-template-columns:1fr; gap:38px; }
  .rth-media-col { order:-1; }
  .rth-frame { aspect-ratio:4/5; }
  .rth-switch { margin-top:26px; }
  .rtl { grid-template-columns:1fr; gap:30px; }
  .rt3-grid, .rta-grid, .rt-app, .rt-case { grid-template-columns:1fr; gap:34px; }
  .rt-app-inversa .rt-app-testo { order:1; }
  .rt-app-inversa .rt-app-media { order:2; }
  .rt-case-media { order:-1; }
}

/* ---- pagina retroilluminazione: il filo della linea del tempo dei passi
   (mobile) resta rosso come nel resto del sito, ma emette una luce discreta —
   e' la pagina della luce, il filo si accende. ----*/
.pagina-luce .cv-steps-line-fill { box-shadow:0 0 8px rgba(216,35,55,0.55), 0 0 18px rgba(255,235,205,0.14); }

/* ---- interruttore: da desktop sotto le CTA (com'era in origine); da mobile
   il JS della pagina lo sposta sotto la fotografia ---- */
.rth-switch { justify-content:flex-start; align-items:center; gap:18px; margin:34px 0 0; flex-wrap:wrap; }
@media (max-width:767px){ .rth-switch { justify-content:space-between; gap:14px; margin:16px 0 0; } }

/* ---- schema accesso: la parete con il pannello che si sfila ---- */
.rta-lastra { fill:rgba(255,255,255,0.06); stroke:rgba(255,255,255,0.3); stroke-width:1.1; }
.rta-vano { fill:rgba(184,135,63,0.1); stroke:rgba(184,135,63,0.5); stroke-width:1.1; stroke-dasharray:5 4; }
.rta-pannello rect { fill:#232323; stroke:var(--accent); stroke-width:1.6; }
.rta-leds .rtd-led { filter:drop-shadow(0 0 4px rgba(184,135,63,0.8)); }

/* ============================================================
   LASTRE ALLEGGERITE — pagina lavorazioni/lastre-alleggerite.html
   Linguaggio della pagina: peso, spessore, stratificazione. La sezione
   del pannello (pietra / collegamento / honeycomb) e' il motivo ricorrente;
   il rosso quota lo spessore e i punti di contatto. Riusa: cv-steps,
   cv-compare + interruttore, rt-app, cv-apps, thickness-stage, claim-list.
   ============================================================ */

/* ---- hero editoriale: titolo a tutta larghezza, poi la banda fotografica
   piena. Volutamente diverso dagli hero a due colonne delle altre pagine. ---- */
.lah { position:relative; background:var(--bg-dark); overflow:hidden; padding:150px 0 0; }
.lah-titolo { font-size:clamp(2.3rem, 5.4vw, 4.4rem); line-height:1.06; max-width:20ch; margin:0 0 34px; }
.lah-riga { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:end; margin-bottom:54px; }
.lah-sotto { color:rgba(255,255,255,0.84); font-size:1.08rem; line-height:1.6; max-width:56ch; }
.lah-azioni { margin-top:0; }
.lah-banda { margin:0; position:relative; }
.lah-banda figcaption { padding-top:12px; padding-bottom:0; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--surface-text-mute); line-height:1.7; }

/* ---- 01 · la scoppiatura: testo col processo numerato a sinistra, animazione
   e macro reale a destra ---- */
.la-sezione { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,560px); gap:56px; align-items:center; margin-top:40px; }
.la-sez-visual { display:flex; flex-direction:column; gap:36px; }
.la-processo { margin-top:30px; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--surface-border); }
.la-processo li { display:grid; grid-template-columns:44px 1fr; gap:14px; padding:14px 0; border-bottom:1px solid var(--surface-border); align-items:baseline; }
.la-proc-num { font-family:var(--font-mono); font-weight:700; font-size:1.3rem; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(216,35,55,0.65); letter-spacing:-0.02em; }
.la-processo p { color:var(--surface-text-dim); font-size:0.98rem; line-height:1.55; }
.la-processo a { color:var(--surface-text); }
.la-processo a:hover { color:var(--accent); }
.la-esploso { margin:0; }
.la-esploso svg { width:100%; height:auto; display:block; }
.la-pietra { fill:#e8e0d0; stroke:rgba(255,255,255,0.3); stroke-width:1; }
.la-venatura { fill:none; stroke:rgba(140,120,90,0.55); stroke-width:1.2; }
.la-hc { fill:rgba(255,255,255,0.06); stroke:rgba(255,255,255,0.3); stroke-width:1; }
.la-hc-celle path { fill:none; stroke:rgba(255,255,255,0.4); stroke-width:0.9; }
/* filo sottile che porta l'occhio dal disegno all'etichetta, cosi' la parola
   non resta appiccicata al pannello */
.la-guida { fill:none; stroke:rgba(255,255,255,0.28); stroke-width:1; }
.la-guida-lastra { stroke:rgba(216,35,55,0.5); }
/* la sequenza raccontata, quando la sezione entra in vista. Volutamente lenta:
   ogni passaggio deve avere il tempo di essere letto prima del successivo.
    0,5s  compare la lastra              2,6s  compare la scritta "lastra"
    4,2s  compaiono gli honeycomb, lontani     5,8s  le scritte "honeycomb"
    7,4s  gli honeycomb si avvicinano fino a combaciare con la pietra
   10,4s  si disegna il filo sagomatore       12,2s  la lastra si scoppia */
.la-lastra-parte { opacity:0; transition:opacity 1.3s var(--ease-reveal) .5s; }
.reveal.in-view .la-lastra-parte { opacity:1; }
.la-lastra-label { opacity:0; transition:opacity .9s var(--ease-reveal) 2.6s; }
.reveal.in-view .la-lastra-label { opacity:1; }
.la-hc-arrivo { opacity:0; transition:opacity 1.2s var(--ease-reveal) 4.2s, transform 2.2s var(--ease-reveal) 7.4s; }
.la-hc-arrivo-sup { transform:translateY(-54px); }
.la-hc-arrivo-inf { transform:translateY(54px); }
.reveal.in-view .la-hc-arrivo { opacity:1; transform:translateY(0); }
.la-hc-label, .la-hc-arrivo .la-guida { opacity:0; transition:opacity .9s var(--ease-reveal) 5.8s; }
.reveal.in-view .la-hc-label, .reveal.in-view .la-hc-arrivo .la-guida { opacity:1; }
.la-meta { transition:transform 1.5s var(--ease-reveal) 12.2s; }
.reveal.in-view .la-meta-sup { transform:translateY(-24px); }
.reveal.in-view .la-meta-inf { transform:translateY(24px); }
.la-filo { fill:none; stroke:var(--accent); stroke-width:2.4; stroke-dasharray:1; stroke-dashoffset:1; }
.reveal.in-view .la-filo { transition:stroke-dashoffset 1.2s var(--ease-reveal) 10.4s; stroke-dashoffset:0; }
@media (prefers-reduced-motion:reduce){
  .la-meta, .la-hc-arrivo, .la-lastra-parte, .la-lastra-label, .la-hc-label { transition:none; }
  .la-hc-arrivo, .la-lastra-parte, .la-lastra-label, .la-hc-label, .la-guida { opacity:1; }
  .la-hc-arrivo { transform:none; }
  .la-meta-sup { transform:translateY(-22px) !important; }
  .la-meta-inf { transform:translateY(22px) !important; }
  .la-filo { stroke-dashoffset:0; transition:none; }
}
.la-esploso figcaption, .la-macro figcaption { margin-top:14px; font-size:0.92rem; color:var(--surface-text-dim); line-height:1.55; max-width:46ch; }
.la-macro { margin:0; }
.la-macro .cv-media-frame { aspect-ratio:4/3; overflow:hidden; }
.la-macro img { width:100%; height:100%; object-fit:cover; display:block; }


/* ---- il confronto degli spessori (thickness-stage) vive nella sezione confronto ---- */
.curv-sec .thickness-stage { margin:48px auto 8px; max-width:560px; }

/* ---- vantaggi: card leggere che galleggiano (riusa weightless-card).
   Desktop: griglia 3x2 con tilt al cursore. Mobile: binario orizzontale a
   scatti, una card per volta con la successiva che fa capolino. ---- */
.la-van-rail { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
.la-van .weightless-card-tilt { min-height:0; padding:26px 24px 28px; }
/* schemino nudo, senza cornice: tratti marcati e dimensione generosa bastano a
   renderlo leggibile sul fondo scuro della card. */
.la-van-diag { height:68px; max-width:110px; margin:0 0 14px; }
.la-van-diag svg { height:100%; width:auto; display:block; overflow:visible; }
.la-van-diag .cvd-frame, .la-van-diag .cvd-frame-line { stroke:rgba(255,255,255,0.88); stroke-width:1.7; }
.la-van-diag .cvd-vein { stroke:rgba(255,255,255,0.62); stroke-width:1.5; }
.la-van-diag .cvd-dash { stroke:rgba(255,255,255,0.6); stroke-width:1.3; }
.la-van-diag .cvd-dash-rect { stroke:rgba(255,255,255,0.55); stroke-width:1.4; }
.la-van-diag .cvd-red-line { stroke:var(--accent); stroke-width:1.9; }
.la-van-diag .cvd-dot { fill:var(--accent); }
.la-van-diag .cvd-label { fill:rgba(255,255,255,0.92); font-size:13px; letter-spacing:0.04em; }
/* dove esiste un cursore, lo schemino e' il premio dell'esplorazione: appare al
   passaggio del mouse. Sul touch resta sempre visibile. */
@media (hover:hover) and (pointer:fine){
  .la-van-diag { opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
  .weightless-card:hover .la-van-diag { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .la-van-diag { opacity:1 !important; transform:none !important; transition:none; } }
.la-van-num { font-family:var(--font-mono); font-size:0.72rem; color:#c4574a; letter-spacing:var(--tracking-caps); }
.la-van h3 { font-size:1.5rem; margin:12px 0 10px; color:var(--surface-text); }
.la-van p { font-size:0.95rem; color:var(--surface-text-dim); line-height:1.5; max-width:30ch; }
/* ingresso a scalare quando la sezione entra in vista */
.la-van { opacity:0; }
.reveal.in-view .la-van { animation:cv-scivola .6s var(--ease-reveal) both; }
.reveal.in-view .la-van:nth-child(2) { animation-delay:.08s; }
.reveal.in-view .la-van:nth-child(3) { animation-delay:.16s; }
.reveal.in-view .la-van:nth-child(4) { animation-delay:.24s; }
.reveal.in-view .la-van:nth-child(5) { animation-delay:.32s; }
.reveal.in-view .la-van:nth-child(6) { animation-delay:.4s; }
@media (prefers-reduced-motion:reduce){ .la-van { opacity:1; animation:none !important; } }
.la-van-extra { margin-top:26px; font-size:0.95rem; color:var(--surface-text-mute); }
.la-van-extra a { color:var(--surface-text-dim); }
.la-van-extra a:hover { color:var(--accent); }

/* ---- schemi: tratteggio riusato dai diagrammi ---- */
.cvd-dash-rect { fill:none; stroke:rgba(255,255,255,0.35); stroke-width:1.1; stroke-dasharray:4 4; }

/* ---- responsive ---- */
@media (max-width:767px){
  /* Hero mobile ridisegnato: la fotografia dei pannelli non e' piu' una fascia
     in coda al testo ma il fondale della prima schermata, con il testo appoggiato
     in basso come negli altri hero del sito. Il soggetto forte (l'anima
     honeycomb a vista) apre la pagina invece di arrivare dopo cinque righe. */
  .lah { position:relative; overflow:hidden; padding:0; min-height:92svh;
    display:flex; flex-direction:column; justify-content:flex-end; }
  .lah > .container { position:relative; z-index:2; padding-bottom:46px; }
  .lah-banda { position:absolute; inset:0; z-index:0; margin:0; }
  .lah-banda .parallax-feature-media { height:100%; aspect-ratio:auto; }
  .lah-banda .parallax-feature-scale { height:100%; }
  /* immagine piu' alta della cornice e ricentrata: cosi' la corsa del parallax
     (26%) non scopre mai i bordi */
  .lah-banda .parallax-feature-scale img { height:152%; width:100%; object-fit:cover; object-position:64% center; position:relative; top:-26%; }
  .lah-banda figcaption { display:none; }
  .lah-banda::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg,
      rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.18) 26%,
      rgba(12,12,12,0.72) 62%, rgba(20,20,20,0.94) 84%, var(--bg-dark) 100%);
  }
  .lah-titolo { font-size:clamp(1.95rem, 8.2vw, 2.5rem); line-height:1.1; margin-bottom:20px; }
  .lah-riga { grid-template-columns:1fr; gap:22px; margin-bottom:0; }
  .lah-sotto { font-size:0.99rem; line-height:1.55; }
  /* la coda del paragrafo ripete il titolo della sezione 01: sullo schermo
     piccolo toglie spazio alla fotografia, quindi resta solo nel DOM */
  .lah-extra { display:none; }
  .lah .eyebrow { margin-bottom:16px; }
  .lah-azioni { gap:18px; }
  .lah .btn-primary { width:100%; text-align:center; }
  /* Da telefono la sequenza va vista subito dopo la frase d'apertura, prima di
     leggere i passaggi: i due contenitori si sciolgono (display:contents) e i
     figli vengono riordinati come item della stessa griglia. */
  .la-sezione { grid-template-columns:1fr; gap:30px; margin-top:30px; }
  .la-sez-testo, .la-sez-visual { display:contents; }
  .la-sez-testo > p:first-child { order:1; }
  .la-sez-visual > .la-esploso { order:2; }
  .la-processo { order:3; margin-top:0; }
  .la-sez-testo > p:last-child { order:4; margin-top:0 !important; }
  .la-sez-visual > .la-macro { order:5; }
  .thickness-compare { gap:36px; }
  /* binario orizzontale: una card ben visibile, la prossima che sbircia */
  .la-van-rail { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px;
    margin-left:-24px; margin-right:-24px; padding:4px 24px 14px; scrollbar-width:none; }
  .la-van-rail::-webkit-scrollbar { display:none; }
  .la-van { flex:0 0 76%; scroll-snap-align:center; }
}


/* ============================================================
   LINK NEL TESTO — la linea rossa che compare
   ============================================================
   Il rosso Savoia della linea iconica dei titoli passa ai link nel
   testo: 2px, staccati dalla base delle lettere, che compaiono con
   la stessa curva e lo stesso ritardo di .underline-reveal quando
   il blocco entra in vista.

   La linea e' text-decoration, non un gradiente di sfondo: e'
   l'unica tecnica che resta corretta quando il link va a capo. Un
   background-image con larghezza in percentuale, su un inline
   spezzato su piu' righe, Chrome lo dipinge solo sul primo
   frammento — il secondo rigo resterebbe senza linea. Qui si anima
   quindi il colore della sottolineatura, da trasparente a rosso.

   Lo stato di partenza sta sul contenitore .reveal non ancora in
   vista: un link fuori da un blocco .reveal resta comunque
   sottolineato, invece di restare senza linea per sempre. */
.cv-fair-note a,
.cv-when-col a,
.cta-alt-link,
.rt-app-cta a,
.la-processo a,
.la-van-extra a,
.la-v-desc a,
.curv-note a,
.claim-panel a,
.cv-step p a,
.cv-apps-group li a,
.rt-app-testo p a,
.rt-case-testo p a,
.rtl-nota a,
.la-app-occhiello a,
.ma-tappa-link,
.ma-nota a,
.ma-nota-vena a,
.ma-cos-testo p a,
.ma-amb-intro p a,
.ma-tappa-testo p a,
.ma-drylay-testo p a,
.ma-mat-grid p a,
.ma-vm-testo p a,
.manifesto-block p a,
.editorial-copy p a {
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:2px;
  text-underline-offset:0.22em;
  text-decoration-skip-ink:auto;
  transition:text-decoration-color .7s var(--ease) .35s,
             text-underline-offset .3s var(--ease),
             text-decoration-thickness .3s var(--ease),
             color .3s var(--ease);
}

/* prima che il blocco entri in vista la linea non si vede */
.reveal:not(.in-view) .cv-fair-note a,
.reveal:not(.in-view) .cv-when-col a,
.reveal:not(.in-view) .cta-alt-link,
.reveal:not(.in-view) .rt-app-cta a,
.reveal:not(.in-view) .la-processo a,
.reveal:not(.in-view) .la-van-extra a,
.reveal:not(.in-view) .la-v-desc a,
.reveal:not(.in-view) .curv-note a,
.reveal:not(.in-view) .claim-panel a,
.reveal:not(.in-view) .cv-step p a,
.reveal:not(.in-view) .cv-apps-group li a,
.reveal:not(.in-view) .rt-app-testo p a,
.reveal:not(.in-view) .rt-case-testo p a,
.reveal:not(.in-view) .rtl-nota a,
.reveal:not(.in-view) .la-app-occhiello a,
.reveal:not(.in-view) .ma-tappa-link,
.reveal:not(.in-view) .ma-nota a,
.reveal:not(.in-view) .ma-nota-vena a,
.reveal:not(.in-view) .ma-cos-testo p a,
.reveal:not(.in-view) .ma-amb-intro p a,
.reveal:not(.in-view) .ma-tappa-testo p a,
.reveal:not(.in-view) .ma-drylay-testo p a,
.reveal:not(.in-view) .ma-mat-grid p a,
.reveal:not(.in-view) .ma-vm-testo p a,
.reveal:not(.in-view) .manifesto-block p a,
.reveal:not(.in-view) .editorial-copy p a {
  text-decoration-color:transparent;
}

/* al passaggio del mouse la linea si ispessisce e il testo si schiarisce: il
   rosso resta alla linea, non passa al testo (due rossi sovrapposti si
   annullerebbero a vicenda) */
.cv-fair-note a:hover,
.cv-when-col a:hover,
.cta-alt-link:hover,
.rt-app-cta a:hover,
.la-processo a:hover,
.la-van-extra a:hover,
.la-v-desc a:hover,
.curv-note a:hover,
.claim-panel a:hover,
.cv-step p a:hover,
.cv-apps-group li a:hover,
.rt-app-testo p a:hover,
.rt-case-testo p a:hover,
.rtl-nota a:hover,
.la-app-occhiello a:hover,
.ma-tappa-link:hover,
.ma-nota a:hover,
.ma-nota-vena a:hover,
.ma-cos-testo p a:hover,
.ma-amb-intro p a:hover,
.ma-tappa-testo p a:hover,
.ma-drylay-testo p a:hover,
.ma-mat-grid p a:hover,
.ma-vm-testo p a:hover,
.manifesto-block p a:hover,
.editorial-copy p a:hover {
  color:#fff;
  text-decoration-color:var(--accent);
  text-decoration-thickness:3px;
  text-underline-offset:0.12em;
  /* la linea si avvicina alla parola con un accenno di rimbalzo: e' il
     movimento che si nota, non il cambio di colore. Curva elastica corta,
     appena oltre il punto d'arrivo e ritorno. */
  transition:text-underline-offset .32s cubic-bezier(.34,1.56,.64,1),
             text-decoration-thickness .32s cubic-bezier(.34,1.56,.64,1),
             text-decoration-color .18s var(--ease),
             color .22s var(--ease);
}

/* la tastiera deve vedere dove si trova */
.cv-fair-note a:focus-visible,
.cv-when-col a:focus-visible,
.cta-alt-link:focus-visible,
.rt-app-cta a:focus-visible,
.la-processo a:focus-visible,
.la-van-extra a:focus-visible,
.la-v-desc a:focus-visible,
.curv-note a:focus-visible,
.claim-panel a:focus-visible,
.cv-step p a:focus-visible,
.cv-apps-group li a:focus-visible,
.rt-app-testo p a:focus-visible,
.rt-case-testo p a:focus-visible,
.rtl-nota a:focus-visible,
.la-app-occhiello a:focus-visible,
.ma-tappa-link:focus-visible,
.ma-nota a:focus-visible,
.ma-nota-vena a:focus-visible,
.ma-cos-testo p a:focus-visible,
.ma-amb-intro p a:focus-visible,
.ma-tappa-testo p a:focus-visible,
.ma-drylay-testo p a:focus-visible,
.ma-mat-grid p a:focus-visible,
.ma-vm-testo p a:focus-visible,
.manifesto-block p a:focus-visible,
.editorial-copy p a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  /* niente linea che si muove: resta il solo schiarirsi del testo */
  .cv-fair-note a:hover, .cv-when-col a:hover, .cta-alt-link:hover, .rt-app-cta a:hover,
  .la-processo a:hover, .la-van-extra a:hover, .curv-note a:hover, .claim-panel a:hover,
  .cv-step p a:hover, .cv-apps-group li a:hover, .rt-app-testo p a:hover,
  .rt-case-testo p a:hover { text-underline-offset:0.22em; text-decoration-thickness:2px; }
  .cv-fair-note a, .cv-when-col a, .cta-alt-link, .rt-app-cta a, .la-processo a, .la-van-extra a, .la-v-desc a, .curv-note a, .claim-panel a, .cv-step p a, .cv-apps-group li a, .rt-app-testo p a, .rt-case-testo p a, .rtl-nota a, .la-app-occhiello a, .ma-tappa-link, .ma-nota a, .ma-nota-vena a, .ma-cos-testo p a, .ma-amb-intro p a, .ma-tappa-testo p a, .ma-drylay-testo p a, .ma-mat-grid p a, .ma-vm-testo p a, .manifesto-block p a, .editorial-copy p a { transition:color .3s var(--ease); }
  .reveal:not(.in-view) .cv-fair-note a, .cv-when-col a, .cta-alt-link, .rt-app-cta a, .la-processo a, .la-van-extra a, .la-v-desc a, .curv-note a, .claim-panel a, .cv-step p a, .cv-apps-group li a, .rt-app-testo p a, .rt-case-testo p a, .rtl-nota a, .la-app-occhiello a, .ma-tappa-link, .ma-nota a, .ma-nota-vena a, .ma-cos-testo p a, .ma-amb-intro p a, .ma-tappa-testo p a, .ma-drylay-testo p a, .ma-mat-grid p a, .ma-vm-testo p a, .manifesto-block p a, .editorial-copy p a { text-decoration-color:var(--accent); }
}

/* ============================================================
   PAGINA MACCHIA APERTA — l'apertura come interfaccia
   ============================================================
   L'elemento identitario della pagina è l'ASSE: la sottile linea
   rossa attorno a cui la pietra si specchia. Compare nell'hero
   (le due ante che si aprono), negli schemi SVG e nella spina
   dorsale della sezione "dalla coppia all'ambiente". */

/* ---- testa ---- */
.ma-titolo { font-size:clamp(2.2rem, 6vw, 4.6rem); margin-bottom:28px; }
.ma-testa-riga { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:40px; align-items:end; }
.ma-sotto { max-width:56ch; color:var(--surface-text-dim); font-size:1.08rem; line-height:1.62; margin:0; }
.ma-azioni { display:flex; flex-direction:column; align-items:flex-start; gap:16px; justify-self:end; }

/* ---- hero a quattro lastre (quadmatch) ----
   Le quattro meta' arrivano dagli angoli e si chiudono sui due assi: e' la
   stessa lastra, specchiata sull'asse verticale e su quello orizzontale, come
   in una composizione a farfalla. Il testo sta in basso su una velatura, cosi'
   non copre mai il punto d'incontro. */
.ma-hero { position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; padding:0; }
.ma-hero-griglia { position:absolute; inset:0; z-index:0;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.ma-q { overflow:hidden; transition:transform 1.7s cubic-bezier(.62,0,.18,1) .35s; }
.ma-q img { width:100%; height:100%; object-fit:cover; display:block; }
.ma-q1 { transform:translate(-101%,-101%); }
.ma-q2 { transform:translate(101%,-101%); }
.ma-q3 { transform:translate(-101%,101%); }
.ma-q4 { transform:translate(101%,101%); }
.reveal.in-view .ma-q, .ma-hero.in-view .ma-q { transform:none; }
/* le specchiature: verticale, orizzontale, entrambe */
.ma-q2 img { transform:scaleX(-1); }
.ma-q3 img { transform:scaleY(-1); }
.ma-q4 img { transform:scale(-1,-1); }

.ma-hero-assev, .ma-hero-asseo { position:absolute; background:var(--accent); z-index:3;
  transition:transform 1s var(--ease) 1.8s; }
.ma-hero-assev { top:0; bottom:0; left:50%; width:2px; margin-left:-1px; transform:scaleY(0); }
.ma-hero-asseo { left:0; right:0; top:50%; height:2px; margin-top:-1px; transform:scaleX(0); }
.ma-hero.in-view .ma-hero-assev { transform:scaleY(1); }
.ma-hero.in-view .ma-hero-asseo { transform:scaleX(1); }
.ma-hero-rombo { position:absolute; left:50%; top:50%; width:30px; height:30px; margin:-15px 0 0 -15px;
  border:1.6px solid var(--accent); z-index:4; transform:rotate(45deg) scale(0);
  transition:transform .9s var(--ease) 2.5s; }
.ma-hero.in-view .ma-hero-rombo { transform:rotate(45deg) scale(1); }

.ma-hero-velo { position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,10,0.58) 0%, rgba(10,10,10,0.12) 22%,
    rgba(12,12,12,0.55) 52%, rgba(18,18,18,0.90) 80%, var(--bg-dark) 100%); }
.ma-hero-briciole { position:absolute; top:0; left:0; right:0; z-index:5; padding-top:112px; }
/* invito a scendere, nell'angolo in basso a destra: e' il quadrante libero,
   quindi non tocca ne' gli assi ne' il testo */
.ma-hero-scopri {
  position:absolute; right:clamp(24px, 4.4vw, 64px); bottom:54px; z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--surface-text); text-decoration:none;
  padding:10px 6px; transition:color .3s var(--ease);
}
.ma-hero-scopri span { writing-mode:vertical-rl; }
.ma-hero-scopri svg { width:14px; height:26px; overflow:visible; }
.ma-hero-scopri svg path { transition:transform .45s var(--ease); }
.ma-hero-scopri:hover { color:var(--accent); }
.ma-hero-scopri:hover svg path { transform:translateY(5px); }
.ma-hero-scopri:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){ .ma-hero-scopri svg path { transition:none; } }

/* il testo resta ancorato in basso: il titolo non deve mai coprire il rombo,
   che e' il punto in cui i due assi si incontrano */
/* Il testo vive nel quadrante in basso a sinistra: non deve mai passare
   sopra i due assi rossi, che sono il segno della composizione. La colonna
   si ferma prima dell'asse verticale, il blocco resta sotto quello
   orizzontale. */
.ma-hero-testo { position:relative; z-index:5; padding-bottom:58px;
  min-height:50%; display:flex; flex-direction:column; justify-content:flex-end; }
.ma-hero-colonna { max-width:calc(50% - 52px); }
.ma-hero .ma-titolo { font-size:clamp(2rem, 3.9vw, 3.25rem); margin-bottom:24px; }
.ma-hero .ma-sotto { font-size:0.99rem; line-height:1.6; max-width:none; }
/* schermi bassi: il blocco deve restare sotto l'asse orizzontale, quindi
   titolo e paragrafo si stringono invece di salire */
@media (min-width:768px) and (max-height:860px) {
  .ma-hero .ma-titolo { font-size:clamp(1.85rem, 3.5vw, 2.8rem); margin-bottom:18px; }
  .ma-hero .ma-sotto { font-size:0.92rem; }
  .ma-hero-testo { padding-bottom:44px; }
}



/* ---- impianto sezioni ---- */
.ma-sec { padding:96px 0 0; }
.ma-head { display:flex; align-items:flex-start; gap:32px; }
.ma-head .eyebrow { margin-bottom:14px; }
.ma-h { font-size:clamp(1.9rem,4.2vw,2.9rem); line-height:1.06; letter-spacing:var(--tracking-tight); margin:0; max-width:22ch; }
.ma-nota { max-width:660px; color:var(--surface-text-dim); font-size:1.06rem; line-height:1.62; margin:30px 0 0; }
.ma-nota-vena { color:var(--surface-text-mute); font-size:0.95rem; line-height:1.6; }

/* ---- schemi SVG (linguaggio comune) ---- */
.ma-lastra { fill:rgba(255,255,255,0.03); stroke:rgba(255,255,255,0.5); stroke-width:1.6; }
.ma-vena { fill:none; stroke:rgba(255,255,255,0.72); stroke-width:2; stroke-linecap:round; }
.ma-vena-2 { stroke:rgba(255,255,255,0.34); stroke-width:1.4; }
.ma-schema-asse { stroke:var(--accent); stroke-width:2; }
.ma-figura { fill:none; stroke:var(--accent); stroke-width:1.6; }
.ma-num { font-family:var(--font-mono); font-size:15px; font-weight:600; fill:rgba(26,26,26,0.72); }
.ma-tag { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; fill:var(--surface-text-mute); }
.ma-vm-giunto { stroke:rgba(255,255,255,0.35); stroke-width:1.4; stroke-dasharray:5 5; }

/* ---- 01 · che cos'è ---- */
.ma-cos-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center; margin-top:44px; }
.ma-cos-testo p { color:var(--surface-text-dim); line-height:1.66; margin:0 0 18px; }
.ma-cos-visual .cv-switch { margin:0 auto 22px; }
.ma-schema-pila { position:relative; }
.ma-schema { display:block; width:100%; height:auto; }
/* i due schemi (2 e 4 lastre) si scambiano in dissolvenza */
.ma-schema-quattro { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .6s var(--ease); }
.ma-schema-due { transition:opacity .6s var(--ease); }
.ma-quattro .ma-schema-quattro { opacity:1; }
.ma-quattro .ma-schema-due { opacity:0; }
/* comparsa raccontata: lastra 1 → lastra 2 che si apre → asse → etichette → figura */
/* L'avvio e' agganciato allo SCHEMA, non al blocco di testo che lo contiene:
   il blocco e' alto e da telefono entrava in vista molto prima del disegno,
   cosi' quando si arrivava a guardarlo la sequenza era gia' a meta' e la
   mappatura rossa era gia' lì mentre le lastre si stavano ancora aprendo. */
.ma-fase { transition:opacity .9s var(--ease-reveal), transform 1.3s var(--ease-reveal); }
.ma-schema-avvio:not(.in-view) .ma-f1,
.ma-schema-avvio:not(.in-view) .ma-f2,
.ma-schema-avvio:not(.in-view) .ma-f3,
.ma-schema-avvio:not(.in-view) .ma-f4 { opacity:0; }
/* La mappatura rossa NON dipende dal cronometro come le altre fasi: dipende da
   una condizione. Finche' manca la classe foto-pronte resta invisibile, e quella
   classe main.js la mette solo quando le fotografie delle lastre sono davvero
   dipinte. E' l'unico modo per rendere impossibile — in qualunque modalita', su
   qualunque rete, anche se scatta una rete di sicurezza — il difetto visto piu'
   volte dal cliente: le vene rosse tracciate sopra una lastra ancora vuota.
   Prima bastava che il tempo passasse; ora deve esserci la pietra sotto. */
.ma-schema-avvio:not(.foto-pronte) .ma-f5 { opacity:0; }
/* 1) lastra 1 · 2) lastra 2 che si apre (finisce a 2,15s) · 3) asse ·
   4) etichette · 5) mappatura delle vene, buon ultimo a 3,5s */
.ma-f1 { transition-delay:.15s; }
.ma-f2 { transition-delay:.85s; transform-box:fill-box; transform-origin:left center; }
.ma-schema-avvio:not(.in-view) .ma-f2 { transform:scaleX(0.04); }
.ma-f3 { transition-delay:2.4s; }
.ma-f4 { transition-delay:2.95s; }
.ma-f5 { transition-delay:3.5s; }

/* ---- 02 · dalla coppia all'ambiente: la spina ---- */
.ma-amb-intro { max-width:660px; margin-top:34px; }
.ma-amb-intro p { color:var(--surface-text-dim); line-height:1.66; margin:0 0 18px; }
.ma-scala { list-style:none; margin:64px 0 0; padding:0; position:relative; }
/* la spina: lo stesso asse rosso dell'hero, qui come filo del racconto */
.ma-scala::before {
  content:''; position:absolute; top:8px; bottom:8px; left:50%; width:1px; margin-left:-0.5px;
  background:linear-gradient(180deg, transparent, rgba(216,35,55,0.55) 6%, rgba(216,35,55,0.55) 94%, transparent);
}
.ma-tappa { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:34px 0; position:relative; }
.ma-tappa-punto {
  position:absolute; left:50%; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  background:var(--bg-dark); border:2px solid var(--accent); transform:rotate(45deg);
}
.ma-tappa:nth-child(even) .ma-tappa-media { order:2; }
.ma-tappa:nth-child(even) .ma-tappa-testo { order:1; text-align:right; }
.ma-tappa:nth-child(even) .ma-tappa-testo .ma-tappa-link { justify-content:flex-end; }
.ma-tappa-media { margin:0; }
.ma-tappa-media img { display:block; width:100%; height:auto; }
.ma-tappa-media figcaption { padding-top:10px; font-size:0.82rem; color:var(--surface-text-mute); line-height:1.5; }
.ma-tappa-tag {
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:12px;
}
.ma-tappa-testo h3 { font-size:1.35rem; margin:0 0 12px; }
.ma-tappa-testo p { color:var(--surface-text-dim); line-height:1.6; margin:0; max-width:44ch; }
.ma-tappa:nth-child(even) .ma-tappa-testo p { margin-left:auto; }
.ma-tappa-link { display:inline-flex; margin-top:14px; color:var(--surface-text); font-size:0.95rem; }

/* ---- 03 · le stesse lastre, più disegni ---- */
.ma-cmp { margin-top:40px; }
.ma-cmp-scelte { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.ma-cmp-btn {
  appearance:none; background:none; border:1px solid var(--surface-border); color:var(--surface-text-dim);
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:12px 18px; cursor:pointer; display:flex; flex-direction:column; gap:4px; text-align:left;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.ma-cmp-btn small { font-size:0.68rem; color:var(--surface-text-mute); text-transform:none; letter-spacing:0.02em; }
.ma-cmp-btn[aria-pressed="true"] { border-color:var(--accent); color:#fff; background:rgba(216,35,55,0.08); }
.ma-cmp-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* Le tre composizioni: fotografie reali dello stesso materiale, studiate sulle
   scansioni delle lastre. Sono sovrapposte e si scambiano in dissolvenza, cosi'
   il confronto avviene senza che la pagina si muova sotto agli occhi. */
.ma-cmp-pila { position:relative; max-width:900px; aspect-ratio:1200/734; }
.ma-cmp-versione {
  position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity .7s var(--ease);
}
.ma-cmp-versione.is-attiva { opacity:1; }
.ma-cmp-versione img { width:100%; height:100%; object-fit:cover; display:block; }


.ma-cmp-nota { padding-top:12px; font-size:0.82rem; color:var(--surface-text-mute); line-height:1.55; max-width:64ch; }
.ma-cmp-dida { font-family:var(--font-mono); font-size:0.82rem; color:var(--surface-text-dim); max-width:56ch; line-height:1.6; margin:18px 0 0; min-height:2.6em; }
.ma-nota-onesta { margin-top:34px; }

/* ---- 05 · dal progetto alla parete ---- */
.ma-prova-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; margin-top:44px; }
.ma-prova-testo p { color:var(--surface-text-dim); line-height:1.66; margin:0 0 18px; }
.ma-prova-visual .cv-switch { margin:0 0 18px; }
.ma-prova-media { position:relative; aspect-ratio:3/4; max-width:520px; }
.ma-prova-strato { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .7s var(--ease); }
.ma-prova-strato.is-attivo { opacity:1; }
.ma-prova-strato img { width:100%; height:100%; object-fit:cover; display:block; }
.ma-prova-strato figcaption {
  position:absolute; left:0; right:0; bottom:0; padding:40px 16px 12px;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; color:rgba(255,255,255,0.85);
  background:linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,0.8) 80%);
}

/* ---- 06 · dry lay ---- */
.ma-drylay-video { margin:44px 0 0; }
.ma-drylay-video video { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.ma-drylay-video figcaption { padding-top:12px; font-size:0.85rem; color:var(--surface-text-mute); line-height:1.5; }
.ma-drylay-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; align-items:center; margin-top:56px; }
.ma-drylay-testo p { color:var(--surface-text-dim); line-height:1.66; margin:0 0 18px; }
.ma-verifiche { list-style:none; margin:24px 0 26px; padding:0; }
.ma-verifiche li {
  font-family:var(--font-mono); font-size:0.85rem; color:var(--surface-text-dim);
  padding:11px 0 11px 26px; border-bottom:1px solid var(--surface-border); position:relative;
}
.ma-verifiche li:first-child { border-top:1px solid var(--surface-border); }
.ma-verifiche li::before {
  content:''; position:absolute; left:4px; top:50%; width:8px; height:8px; margin-top:-4px;
  border:1.6px solid var(--accent); transform:rotate(45deg);
}
.ma-drylay-foto { margin:0; }
.ma-drylay-foto img { display:block; width:100%; height:auto; }
.ma-drylay-foto figcaption { padding-top:10px; font-size:0.82rem; color:var(--surface-text-mute); line-height:1.5; }

/* ---- 07 · materiali ---- */
.ma-mat-grid { max-width:720px; margin-top:36px; }
.ma-mat-grid p { color:var(--surface-text-dim); line-height:1.66; margin:0 0 18px; }
.ma-materiali { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:26px 0; padding:0; }
.ma-materiali li {
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--surface-text); border:1px solid var(--surface-border); padding:9px 16px;
}

/* ---- 08 · bookmatch vs vein match ---- */
.ma-vm-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; align-items:center; margin-top:44px; }
.ma-vm-schema { display:block; width:100%; height:auto; margin-bottom:26px; }
.ma-vm-testo p { color:var(--surface-text-dim); line-height:1.66; margin:0; }
.ma-vm-foto { margin:0; }
.ma-vm-foto img { display:block; width:100%; height:auto; }
.ma-vm-foto figcaption { padding-top:10px; font-size:0.82rem; color:var(--surface-text-mute); line-height:1.5; }

/* l'ultima sezione prima delle correlate chiude il proprio respiro */
.pagina-macchia #faq { padding-bottom:20px; }

/* ---- meno movimento ----
   Chi ha "riduci le animazioni" attivo (sui telefoni lo accende il risparmio
   energetico, non una scelta consapevole) non deve perdere l'ORDINE del
   racconto: prima la pietra, la mappatura rossa per ultima. Prima qui c'era
   `.ma-fase { transition:none }`, e la forma abbreviata azzera anche il
   transition-delay: le cinque fasi arrivavano tutte nello stesso istante, cioe'
   la mappatura sopra lastre appena comparse. Ecco perche' si tocca solo la
   durata e la proprieta', MAI il ritardo: il ritardo e' proprio cio' che tiene
   la mappatura dietro alla pietra (vedi .ma-f1...f5 sopra: la mappatura a
   3,5s da quando si arriva sullo schema, non dal caricamento della pagina —
   l'innesco e' in main.js e guarda l'ingresso in vista).
   Il "meno movimento" resta rispettato: nessuno scorrimento, la lastra 2 non
   si apre piu' scorrendo e le fasi si limitano a una dissolvenza brevissima.
   Gli scambi comandati a mano (2/4 lastre, versioni A/B/C, progetto/posato)
   restano invece istantanei: non sono un'apertura di pagina. */
@media (prefers-reduced-motion:reduce){
  /* HERO: fermo. I quattro quadranti sono gia' al loro posto, niente scivolata
     dagli angoli, niente assi che si allungano, niente rombo che cresce. La
     composizione a farfalla si vede da subito, come una fotografia. */
  .ma-q { transition:none; transform:none; }
  .ma-hero-assev, .ma-hero-asseo { transition:none; transform:none; }
  .ma-hero-rombo { transition:none; transform:rotate(45deg) scale(1); }

  /* SCHEMA 2/4 LASTRE: nessun racconto a fasi. Le cinque fasi perdono i propri
     ritardi e compaiono tutte nello stesso istante — cosi' e' impossibile che
     la mappatura rossa preceda la pietra, qualunque cosa succeda al
     caricamento. QUANDO comparire lo decide main.js: al quarto secondo da
     quando si arriva sullo schema, e comunque non prima che le fotografie
     siano pronte. */
  .ma-fase { transition:none; }
  .ma-schema-avvio:not(.in-view) .ma-f2 { transform:none; }
  .ma-schema-due, .ma-schema-quattro { transition:none; }
  .ma-cmp-versione, .ma-prova-strato { transition:none; }
}

/* ---- tablet e mobile ---- */
@media (max-width:991px){
  .ma-testa-riga { grid-template-columns:1fr; gap:26px; }
  .ma-azioni { justify-self:start; }
  .ma-cos-grid, .ma-prova-grid, .ma-drylay-grid, .ma-vm-grid { grid-template-columns:1fr; gap:40px; }
  .ma-prova-media { max-width:none; }
}
@media (max-width:767px){
  .ma-sec { padding:72px 0 0; }
  .ma-head { gap:18px; }
  /* su schermo piccolo la composizione diventa una fascia in alto e il testo
     scende sotto, sul fondo scuro: cosi' il punto d'incontro resta sempre libero */
  .ma-hero { min-height:100svh; }
  .ma-hero-briciole { padding-top:92px; }
  /* il blocco arriva a filo schermo, rispettando la tacca dei telefoni recenti */
  .ma-hero-testo { padding-bottom:calc(26px + env(safe-area-inset-bottom, 0px)); }
  .ma-hero-velo { background:linear-gradient(180deg,
    rgba(10,10,10,0.52) 0%, rgba(10,10,10,0.08) 20%, rgba(12,12,12,0.36) 46%,
    rgba(16,16,16,0.84) 72%, var(--bg-dark) 94%); }
  .ma-hero .ma-titolo { font-size:clamp(1.75rem, 7.4vw, 2.3rem); margin-bottom:18px; }
  .ma-hero .ma-sotto { font-size:0.94rem; }
  .ma-hero-extra { display:none; }
  .ma-hero-colonna { max-width:none; }
  .ma-hero-testo { min-height:0; }
  /* la freccia resta anche su telefono, nell.angolo in basso a destra: il
     paragrafo si stringe di quel tanto che basta a non finirci sotto */
  .ma-hero-scopri { right:14px; bottom:calc(22px + env(safe-area-inset-bottom, 0px));
    font-size:0.62rem; gap:10px; padding:8px 4px; }
  .ma-hero-scopri svg { width:12px; height:22px; }
  .ma-hero-colonna { padding-right:52px; }

  /* su schermo piccolo la composizione parla da sola: niente assi ne' rombo,
     restano solo la pietra e il testo */
  .ma-hero-assev, .ma-hero-asseo, .ma-hero-rombo { display:none; }
  .ma-azioni { width:100%; }
  .ma-azioni .btn-primary { width:100%; text-align:center; }
  /* lo schema sotto il testo, con lo switch centrato */
  .ma-cos-grid { gap:30px; }
  /* la spina passa a sinistra e le tappe si impilano */
  .ma-scala { margin-top:40px; }
  .ma-scala::before { left:5px; }
  .ma-tappa { grid-template-columns:1fr; gap:18px; padding:26px 0 26px 28px; }
  .ma-tappa-punto { left:5px; top:34px; }
  .ma-tappa:nth-child(even) .ma-tappa-media { order:0; }
  .ma-tappa:nth-child(even) .ma-tappa-testo { order:0; text-align:left; }
  .ma-tappa:nth-child(even) .ma-tappa-testo p { margin-left:0; }
  .ma-tappa-media { overflow:hidden; }
  .ma-cmp-scelte { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
  .ma-cmp-btn { padding:10px 10px; font-size:0.7rem; }
  .ma-cmp-btn small { font-size:0.62rem; }
  .ma-drylay-video { margin-top:34px; }
  .ma-drylay-video video { aspect-ratio:16/10; }
}

/* Schema con la lastra reale: la fotografia sta dentro il perimetro tecnico
   e la mappatura rossa delle venature arriva per ultima, come un'annotazione
   di studio sopra la pietra (stessa logica dei punti di lettura in officina) */
.ma-lastra-foto { fill:none; stroke:rgba(255,255,255,0.30); stroke-width:1.2; }
.ma-vena-mappa { fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; opacity:0.9; }
.ma-vena-mappa-2 { fill:none; stroke:var(--accent); stroke-width:1.1; stroke-linecap:round; opacity:0.55; }
.ma-punto-mappa { fill:var(--accent); }

/* ============================================================
   CONTATTI — i tre reparti
   ============================================================
   Chi scrive deve capire in un colpo d'occhio a chi sta parlando:
   un riquadro per reparto, con nome e cognome in evidenza. */
.contact-reparti { display:grid; gap:14px; margin:34px 0 30px; padding:0; list-style:none; }
.reparto {
  border:1px solid var(--surface-border); border-left:2px solid var(--accent);
  padding:18px 20px; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.reparto:hover { background:rgba(255,255,255,0.022); }
.reparto-tag {
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:8px;
}
.reparto-nome { font-size:1.06rem; color:var(--surface-text); margin:0 0 10px; }
.reparto-link {
  display:block; font-size:0.94rem; color:var(--surface-text-dim); line-height:1.6;
  transition:color .25s var(--ease);
}
.reparto-link:hover { color:#fff; }
.reparto-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.contact-sede dt { color:var(--surface-text-mute); }

/* il campo esca per i robot: fuori dallo schermo, non nascosto con display,
   perche' i robot saltano quello che e' display:none */
.form-esca { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-privacy { display:flex; align-items:flex-start; gap:10px; margin:4px 0 6px; }
.form-privacy input { margin-top:3px; accent-color:var(--accent); flex:0 0 auto; }
.form-privacy label { font-size:0.86rem; color:var(--surface-text-mute); line-height:1.5; }

.form-note[data-esito="ok"] { color:#7bd39a; }
.form-note[data-esito="errore"] { color:var(--accent); }

@media (min-width:768px){
  .contact-reparti { grid-template-columns:1fr 1fr; }
  .contact-reparti .reparto:first-child { grid-column:1 / -1; }
}

/* ============ HOME: COPY 2026-08 ============ */
/* I numeri sotto il badge 1964: la tabella della home in forma di righe. */
.team-numeri { margin-top:28px; }
.numeri-righe { margin-top:18px; display:flex; flex-direction:column; }
.numeri-righe > div { display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:9px 0; border-top:1px solid var(--surface-border); }
.numeri-righe dt { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--surface-text-mute); }
.numeri-righe dd { margin:0; font-size:0.92rem; color:var(--surface-text); text-align:right; }
/* Le capsule di risposta sotto gli H2 di lavorazioni e filiera. */
.story-lead { margin-top:20px; max-width:620px; color:var(--surface-text-dim); }
.filiera-lead { margin-top:20px; max-width:640px; color:var(--surface-text-dim); }
/* La riga degli ambienti sotto il titolo dei progetti. */
.projects-lead { max-width:560px; color:var(--surface-text-dim); }
.projects-lead a { text-decoration:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:2px; text-underline-offset:0.22em; text-decoration-skip-ink:auto;
  color:inherit; transition:color .3s var(--ease); }
.projects-lead a:hover, .projects-lead a:focus-visible { color:var(--accent); }
/* FAQ della home: la claim-list esistente, contenuta in una misura leggibile. */
.faq-home .claim-list { max-width:820px; }

/* ============ SELETTORE LINGUA (IT/EN, pronto per RU/NL) ============ */
.nav-lang { display:flex; align-items:center; gap:7px; margin-left:10px;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.14em; }
.nav-lang a { color:rgba(255,255,255,0.5); text-decoration:none; padding:6px 2px;
  transition:color .3s var(--ease); }
.nav-lang a:hover, .nav-lang a:focus-visible { color:#fff; }
.nav-lang .lang-attiva { color:#fff; }
.nav-lang .lang-sep { color:rgba(255,255,255,0.28); }
/* nel pannello telefono il selettore sta sopra il numero, un poco piu grande */
.nav-lang-mobile { margin:26px 0 0 0; font-size:0.8rem; gap:12px; }

/* ============ MENU MOBILE: TUTTO IN UNA SCHERMATA ============ */
/* Con sei voci piu' lingua e telefono, su schermi bassi il pannello scorreva.
   Le misure ora seguono l'altezza reale dello schermo (vh): su un telefono
   piccolo il menu si compatta, su uno grande respira — mai lo scorrimento. */
.nav-mobile-screen {
  padding:clamp(64px, 11vh, 100px) 32px clamp(24px, 5vh, 60px);
  gap:0;
}
.nav-mobile-panel a, .nav-mobile-toggle {
  padding:clamp(9px, 1.9vh, 18px) 6px;
  font-size:clamp(1.05rem, 2.7vh, 1.55rem);
}
.nav-mobile-back { padding:clamp(8px, 1.6vh, 14px) 6px; }
.nav-lang-mobile { margin-top:clamp(12px, 2.4vh, 26px); }
.nav-mobile-contact { margin-top:clamp(12px, 2.2vh, 26px); }
.nav-mobile-panel .nav-mobile-contact a.is-call { padding-top:clamp(10px, 1.8vh, 16px); padding-bottom:clamp(10px, 1.8vh, 16px); }

/* ============ SELETTORE LINGUA A TENDINA ============ */
/* Stesso registro delle voci di menu: font, colori e freccetta a squadra di
   LAVORAZIONI. Da computer si apre al passaggio del mouse; da telefono il
   pulsante IT apre al tocco la fila delle altre sigle. */
.nav-lang-menu { position:relative; margin-left:10px; display:flex; }
.nav-lang-btn {
  display:inline-flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer;
  padding:9px 0; font-family:var(--font-body); font-size:0.85rem; font-weight:400;
  letter-spacing:var(--tracking-caps); line-height:1.6; color:rgba(255,255,255,0.75);
  transition:color .3s ease;
}
.nav-lang-btn::after {
  content:''; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); opacity:0.7; transition:transform .3s ease;
}
.nav-lang-menu:hover .nav-lang-btn, .nav-lang-menu.open .nav-lang-btn { color:#fff; }
.nav-lang-menu:hover .nav-lang-btn::after,
.nav-lang-menu.open .nav-lang-btn::after { transform:rotate(225deg) translateY(1px); }
.nav-lang-tendina {
  position:absolute; top:100%; right:0; min-width:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:0; padding:8px 16px 10px;
  background:rgba(24,24,24,0.97); border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index:610;
}
/* L'apertura al passaggio del mouse vale SOLO dove un mouse c'e' davvero: sul
   telefono il "passaggio" resta appiccicato dopo il tocco e faceva litigare
   hover e tocco, con la tendina che sembrava ignorare il primo tocco. */
@media (hover:hover) and (pointer:fine) {
  .nav-lang-menu:hover .nav-lang-tendina { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
}
.nav-lang-menu.open .nav-lang-tendina { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.nav-lang-tendina a {
  padding:6px 0; font-family:var(--font-body); font-size:0.85rem; font-weight:400;
  letter-spacing:var(--tracking-caps); line-height:1.6;
  color:rgba(255,255,255,0.75); text-decoration:none; white-space:nowrap;
  transition:color .3s ease;
}
.nav-lang-tendina a:hover, .nav-lang-tendina a:focus-visible { color:#fff; }

/* telefono: il pulsante sta nel pannello del menu e le sigle si aprono di
   fianco, sulla stessa riga — l'altezza del menu non cambia mai */
.nav-lang-mobile { margin-top:clamp(12px, 2.4vh, 26px); flex-direction:row; align-items:center; margin-left:0; }
.nav-lang-mobile .nav-lang-btn { font-size:0.95rem; padding:6px 0; flex-shrink:0; }
.nav-lang-mobile .nav-lang-tendina {
  position:static; flex-direction:row; align-items:center; gap:18px; padding:0;
  background:none; border:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  max-width:0; overflow:hidden; transform:none; white-space:nowrap;
  transition:max-width .4s var(--ease), opacity .3s var(--ease), margin-left .4s var(--ease);
}
.nav-lang-mobile.open .nav-lang-tendina {
  max-width:280px; opacity:1; visibility:visible; pointer-events:auto; margin-left:22px;
}
.nav-lang-mobile .nav-lang-tendina a { font-size:0.95rem; }

/* ---- pagina legale (privacy.html): prosa semplice, niente reveal pesanti ---- */
.legal-page { padding:60px 0 100px; }
.legal-page-inner { max-width:760px; }
.legal-page-inner h2 { font-size:1.4rem; margin:44px 0 14px; }
.legal-page-inner h2:first-of-type { margin-top:0; }
.legal-page-inner p { margin:0 0 16px; line-height:1.7; }
.legal-page-inner a { color:var(--accent); }
.legal-page-inner a:hover { text-decoration:underline; }
.legal-intro { font-size:1.05rem; color:var(--surface-text); margin-bottom:34px; }
.legal-list { margin:0 0 16px; padding-left:20px; line-height:1.7; }
.legal-list li { margin-bottom:10px; }
.legal-page-inner code { font-family:var(--font-mono); font-size:0.88em; background:rgba(255,255,255,0.08); padding:1px 6px; border-radius:3px; }
.legal-data { font-size:0.85rem; color:var(--surface-text-mute); }

/* ---- banner cookie: iniettato da main.js, nessun markup nelle pagine.
   Stessa impostazione del banner del vecchio savoiamarmi.com (scheda fissa
   in basso a destra, titolo, Accetta pieno + Nega neutro, link legale sotto,
   X per rimandare la scelta), tradotta nei colori e nei caratteri del sito. ---- */
.cookie-banner {
  position:fixed; right:24px; bottom:24px; z-index:9000; max-width:460px;
  background:var(--bg-dark-alt); border:1px solid var(--surface-border);
  box-shadow:0 24px 60px rgba(0,0,0,0.55);
  padding:26px 26px 20px;
  opacity:0; transform:translateY(26px); pointer-events:none;
  transition:transform .5s var(--ease), opacity .4s var(--ease);
}
.cookie-banner.visibile { opacity:1; transform:translateY(0); pointer-events:auto; }
/* testata come il banner del vecchio sito: logo + titolo, riga di separazione */
.cookie-banner-testata {
  display:flex; align-items:center; gap:16px; margin-right:28px;
  padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--surface-border);
}
.cookie-banner-logo { height:40px; width:auto; flex:0 0 auto; }
.cookie-banner-titolo {
  font-family:var(--font-heading); font-weight:400; font-size:1.15rem;
  color:var(--surface-text); letter-spacing:0.04em; margin:0;
}
.cookie-banner-chiudi {
  position:absolute; top:14px; right:14px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  color:var(--surface-text-mute); font-size:1.15rem; line-height:1;
}
.cookie-banner-chiudi:hover { color:var(--accent); }
.cookie-banner-testo { font-size:0.86rem; line-height:1.6; color:var(--surface-text-dim); margin:0 0 18px; }
.cookie-banner-azioni { display:flex; gap:10px; }
.cookie-banner-azioni .btn { flex:1; padding:11px 10px; font-size:0.85rem; text-align:center; }
.cookie-banner-note {
  margin:14px 0 0; text-align:center; font-family:var(--font-mono);
  font-size:0.72rem; letter-spacing:0.04em;
}
.cookie-banner-note a { color:var(--surface-text-mute); text-decoration:underline; text-underline-offset:3px; }
.cookie-banner-note a:hover { color:var(--accent); }
/* da mobile: scheda piu' discreta — misure ridotte, logo piccolo, testi corti */
@media (max-width:600px) {
  .cookie-banner { right:10px; left:10px; bottom:10px; max-width:none; padding:14px 16px 10px; }
  .cookie-banner-testata { gap:10px; padding-bottom:9px; margin-bottom:9px; }
  .cookie-banner-logo { height:24px; }
  .cookie-banner-titolo { font-size:0.95rem; }
  .cookie-banner-chiudi { top:8px; right:8px; }
  .cookie-banner-testo { font-size:0.76rem; line-height:1.5; margin-bottom:12px; }
  .cookie-banner-azioni .btn { padding:8px 8px; font-size:0.78rem; }
  .cookie-banner-note { margin-top:9px; font-size:0.64rem; }
}

/* ============================================================
   RIFINITURE DA TELEFONO (agosto 2026)
   ============================================================ */

/* ---- 1. Menu: le voci riempiono lo schermo ----
   Prima le sei voci si raccoglievano al centro con misure minime, lasciando
   vuoti sopra e sotto. Ora si spartiscono l'altezza disponibile: ogni voce e'
   una fascia alta uguale alle altre, con il testo centrato dentro. */
/* Lo stacco in alto e' un filo piu' ampio del solo ingombro della barra: la
   prima voce non parte incollata sotto al logo, e siccome le voci si
   spartiscono lo spazio rimasto, scendono tutte insieme restando equidistanti. */
.nav-mobile-screen[data-mobile-screen="root"] {
  justify-content:flex-start;
  padding:clamp(96px, 15vh, 138px) 26px clamp(16px, 2.6vh, 30px);
  gap:0;
}
.nav-mobile-screen[data-mobile-screen="root"] > a,
.nav-mobile-screen[data-mobile-screen="root"] > .nav-mobile-toggle {
  flex:1 1 0; min-height:0;
  display:flex; align-items:center;
  padding:0 4px;
  font-size:clamp(1.2rem, 3.3vh, 1.95rem);
}
/* lingua e contatti non si allungano: restano in coda, un poco piu' grandi */
.nav-mobile-screen[data-mobile-screen="root"] > .nav-lang-mobile,
.nav-mobile-screen[data-mobile-screen="root"] > .nav-mobile-contact { flex:0 0 auto; }
.nav-lang-mobile .nav-lang-btn,
.nav-lang-mobile .nav-lang-tendina a { font-size:clamp(0.95rem, 2.2vh, 1.15rem); }
.nav-lang-mobile { margin-top:clamp(14px, 2.6vh, 28px); }

/* ---- 2. Riga contatti: tre cerchi uguali ----
   Il telefono e' un'icona come Instagram e YouTube: il numero per esteso
   occupava mezza riga e sbilanciava il gruppo. Il numero resta nel markup ma
   solo per i lettori di schermo, cosi' il collegamento continua ad annunciarsi
   con la cifra giusta invece che con un'icona muta. */
.nav-mobile-contact { display:flex; align-items:center; gap:12px; }
.nav-mobile-panel .nav-mobile-contact a.is-call {
  flex:0 0 auto; width:56px; padding:0; gap:0; border-radius:50%;
}
.nav-mobile-contact a.is-call span {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.nav-mobile-contact a.is-call svg { width:20px; height:20px; }
.nav-mobile-social { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.nav-mobile-panel .nav-mobile-social a {
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; padding:0; flex:0 0 auto;
  border:1px solid rgba(255,255,255,0.32); border-radius:50%;
  color:rgba(255,255,255,0.92); border-bottom:1px solid rgba(255,255,255,0.32);
  transition:border-color .3s ease, color .3s ease;
}
.nav-mobile-panel .nav-mobile-social a:active { border-color:rgba(255,255,255,0.6); color:#fff; }
.nav-mobile-social svg { width:20px; height:20px; }
/* schermi bassi: i cerchi si stringono con il resto del menu */
@media (max-height:700px) {
  .nav-mobile-panel .nav-mobile-contact a.is-call { width:48px; height:48px; }
  .nav-mobile-panel .nav-mobile-social a { width:48px; height:48px; }
}

/* ---- 3. Hero della home: titolo piu' grande ---- */
@media (max-width:767px) {
  .hero-content h1 { font-size:clamp(1.85rem, 9.6vw, 3.1rem); line-height:1.06; }
  .hero-content h1, .hero-content .hero-tagline { padding-right:46px; }

  /* ---- 4. La freccia "scopri come" non deve finire sotto la barra del browser ----
     100vh su telefono misura lo schermo CON le barre nascoste: il fondo della
     schermata cade dietro la barra degli strumenti. svh misura invece l'area
     davvero visibile. Piu' un margine di sicurezza sotto la freccia. */
  .hero-pin { height:100svh; }
  .hero-content .hero-scroll-cue {
    bottom:calc(38px + env(safe-area-inset-bottom, 0px));
  }
  .ma-hero { min-height:100svh; }
  .ma-hero-scopri { bottom:calc(38px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- 4-bis. Tablet a sfioramento: l'hero lascia andare la pagina subito ----
   L'hero e' alto 130vh con dentro un fotogramma bloccato di 100vh: i primi
   30vh di scorrimento servono a tenerlo fermo mentre il testo sfuma. Col mouse
   sono due scatti di rotella e si legge come una pausa voluta; col dito sono
   quasi mezza schermata in cui sembra che la pagina non risponda. Sui tablet
   la pausa si riduce a un accenno, senza togliere l'effetto. Telefoni e
   scrivania restano come sono. */
@media (hover:none) and (pointer:coarse) and (min-width:768px) {
  .hero { height:112vh; }
}

/* ---- 5. Vantaggi (marmo alleggerito): riquadri tutti uguali ----
   Nel binario orizzontale le schede prendevano l'altezza del proprio testo:
   una alta, una bassa. Ora si allungano tutte a quella piu' alta. */
@media (max-width:767px) {
  .la-van-rail { align-items:stretch; }
  .la-van { display:flex; }
  .la-van .weightless-card-tilt { flex:1 1 auto; display:flex; flex-direction:column; }
  .la-van .weightless-card-content { margin-top:auto; }
}

/* ---- 6. Magazzino online (deposito lastre): pulsanti a misura di testo ----
   Sotto i 520px una regola generale allarga ogni pulsante a tutta riga: qui
   i due pulsanti tornano larghi quanto la loro etichetta, incolonnati e
   centrati come nel resto della sezione. */
@media (max-width:520px) {
  .magazzino-actions { flex-direction:column; align-items:center; gap:12px; }
  .magazzino-actions .btn { width:auto; max-width:100%; padding-left:26px; padding-right:26px; }
}

/* ============================================================
   CORREZIONI DOPO PROVA SU TELEFONO (agosto 2026)
   ============================================================ */

/* ---- Tendina lingua: bersaglio del tocco piu' grande ----
   Il pulsante era la sola scritta "IT" con la freccetta: circa 30px, sotto i
   44px che un dito centra con sicurezza. Il primo tocco spesso cadeva a vuoto
   e sembrava che ne servissero due. */
.nav-lang-mobile .nav-lang-btn {
  min-height:44px; min-width:44px; padding:6px 8px;
  justify-content:flex-start;
}

/* ---- Pulsante telefono: niente piu' rientro a cerchio ----
   La classe .ridotto non viene piu' applicata (vedi main.js); qui si toglie
   anche la transizione, cosi' il pulsante e' semplicemente fermo. */
.nav-mobile-panel .nav-mobile-contact a.is-call { transition:border-color .3s ease, color .3s ease; }
.nav-mobile-contact a.is-call span { transition:none; }

/* ---- Hero della home da telefono ----
   Titolo un po' piu' contenuto del primo tentativo, e torna il pulsante
   "Parlaci del tuo progetto": era nascosto per alleggerire la schermata, ma
   e' la chiamata all'azione principale del sito. */
@media (max-width:767px) {
  .hero-content h1 { font-size:clamp(1.6rem, 8vw, 2.6rem); line-height:1.08; }
  .hero-actions { display:flex; margin-top:22px; }
  .hero-actions .btn { padding:13px 22px; font-size:0.9rem; }
  /* il pulsante non deve finire sotto la colonna della freccia "scopri come" */
  .hero-actions { padding-right:46px; }
  .hero-content { padding-bottom:46px; }
}

/* ---- Magazzino online: pulsanti come quelli di "Hai bisogno solo della
   lastra giusta" — stessa larghezza piena dentro il margine della pagina,
   incolonnati, stesso spazio tra i due. ---- */
@media (max-width:520px) {
  .magazzino-actions {
    flex-direction:column; align-items:stretch; gap:16px;
    padding:0 24px; max-width:100%;
  }
  .magazzino-actions .btn { width:100%; max-width:none; text-align:center; }
}

/* ============================================================
   LASTRE ALLEGGERITE — hero a tutta schermata (agosto 2026)
   ============================================================
   Prima il testo stava sopra e la fotografia era una fascia sotto. Ora la
   fotografia in parallax e' il fondale dell'intera prima schermata, con il
   testo appoggiato in basso e l'invito a scendere nell'angolo: lo stesso
   impianto dell'hero di Macchia Aperta. */
.lah {
  position:relative; overflow:hidden; padding:0;
  min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
}
.lah > .container { position:relative; z-index:2; padding-bottom:clamp(56px, 8vh, 96px); }
.lah-banda { position:absolute; inset:0; z-index:0; margin:0; }
.lah-banda .parallax-feature-media { height:100%; aspect-ratio:auto; }
.lah-banda .parallax-feature-scale { height:100%; }
/* immagine piu' alta della cornice e ricentrata: la corsa del parallax (26%)
   non scopre mai i bordi */
.lah-banda .parallax-feature-scale img {
  height:152%; width:100%; object-fit:cover; object-position:center; position:relative; top:-26%;
}
.lah-banda figcaption { display:none; }
.lah-banda::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.20) 26%,
    rgba(12,12,12,0.70) 60%, rgba(18,18,18,0.92) 84%, var(--bg-dark) 100%);
}
.lah-riga { margin-bottom:0; }

/* invito a scendere: identico a .ma-hero-scopri di Macchia Aperta */
.lah-scopri {
  position:absolute; right:clamp(24px, 4.4vw, 64px); bottom:54px; z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--surface-text); text-decoration:none;
  padding:10px 6px; transition:color .3s var(--ease);
}
.lah-scopri span { writing-mode:vertical-rl; }
.lah-scopri svg { width:14px; height:26px; overflow:visible; }
.lah-scopri svg path { transition:transform .45s var(--ease); }
.lah-scopri:hover { color:var(--accent); }
.lah-scopri:hover svg path { transform:translateY(5px); }
.lah-scopri:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){ .lah-scopri svg path { transition:none; } }

@media (max-width:767px) {
  /* la colonna del testo si ferma prima della freccia, come nell'hero della home */
  .lah-titolo, .lah-sotto { padding-right:44px; }
  .lah-scopri { right:14px; bottom:calc(38px + env(safe-area-inset-bottom, 0px));
    font-size:0.62rem; gap:10px; padding:8px 4px; }
  .lah-scopri svg { width:12px; height:22px; }
}

/* Le due righe del filo rosso esistono nel codice a ogni misura, ma servono
   solo alla versione a elenco: sotto i 1024px non devono nemmeno occupare
   posto nella colonna delle tappe. */
.filiera-linea-fondo, .filiera-linea-rossa { display:none; }

/* ============================================================
   DA COMPUTER: LE DUE SEZIONI SI SCAMBIANO IL VESTITO
   Tutto quanto segue vale dai 1024px in su e solo dove sono state
   messe le classi .story-a-lastre e .filiera-a-elenco (per ora la
   sola pagina italiana). Sotto i 1024px, e nelle altre lingue, non
   cambia una riga.
   ============================================================ */
@media (min-width:1024px) {

  /* ---- "Cosa sappiamo fare" a lastre affiancate ----
     Le cinque lavorazioni diventano le lastre di "Come lavoriamo": chiuse
     mostrano numero e titolo in verticale, quella sotto il mouse si apre e
     scopre la foto e il testo. La foto e' la stessa che il blocco gia' si
     portava dietro per il carosello da telefono, quindi non ne serve un'altra:
     sopra i 1024px era solo nascosta. */
  .story-a-lastre .story-visual,
  .story-a-lastre .story-tabs,
  .story-a-lastre .story-ruler { display:none; }
  .story-a-lastre .story-layout { display:block; margin-top:50px; }
  /* Le lastre stanno dentro ai margini del sito come tutto il resto: stessa
     larghezza massima e stesso respiro laterale del .container. */
  .story-a-lastre .story-text {
    display:flex; flex-direction:row; align-items:stretch; gap:4px;
    height:540px; flex:none;
    max-width:1280px; margin:0 auto; padding:0 24px;
  }
  .story-a-lastre .story-block {
    position:relative; overflow:hidden; cursor:pointer; opacity:1;
    flex:0.7; display:flex; flex-direction:column; justify-content:flex-end;
    background:var(--bg-dark-alt); border:1px solid var(--surface-border);
    border-top:1px solid var(--surface-border); border-bottom:3px solid transparent;
    padding:38px 30px;
    transition:flex .8s var(--ease), background .4s ease, border-color .4s ease;
  }
  .story-a-lastre .story-text .story-block:last-child { border-bottom:3px solid transparent; }
  .story-a-lastre .story-block.active {
    flex:2.7; background:var(--bg-dark); border-bottom-color:var(--accent);
  }
  .story-a-lastre .story-block-img {
    display:block; position:absolute; inset:0; z-index:0;
    width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity .8s var(--ease);
  }
  .story-a-lastre .story-block.active .story-block-img { opacity:1; }
  /* Inquadrature ricalcolate su questo riquadro (largo circa una volta e mezza
     la sua altezza): quelle del carosello da telefono erano pensate per un
     riquadro verticale e qui tagliavano il soggetto.
     01 parete a macchia aperta: alza il taglio, il centro geometrico cade sotto
        la parete e ne mostrava solo la fascia bassa;
     02 bagno retroilluminato: il pannello luminoso sta in alto;
     03 curvatura: la piega e' nel terzo alto, al centro si vede solo il piano;
     05 scultura: il ricciolo principale sta poco sopra la meta'. */
  .story-a-lastre .story-block[data-story-target="0"] .story-block-img { object-position:center 45%; }
  .story-a-lastre .story-block[data-story-target="1"] .story-block-img { object-position:center 42%; }
  .story-a-lastre .story-block[data-story-target="2"] .story-block-img { object-position:center 34%; }
  .story-a-lastre .story-block[data-story-target="4"] .story-block-img { object-position:center 45%; }
  /* la velatura scurisce dal basso, cosi' il testo resta leggibile sulla foto */
  .story-a-lastre .story-block::after {
    content:''; position:absolute; inset:0; z-index:1; opacity:0;
    transition:opacity .8s var(--ease); pointer-events:none;
    background:linear-gradient(0deg, rgba(10,8,6,0.94) 0%, rgba(10,8,6,0.68) 50%, rgba(10,8,6,0.35) 100%);
  }
  .story-a-lastre .story-block.active::after { opacity:1; }
  /* Niente numeri: le cinque lavorazioni non sono una sequenza, quindi
     numerarle diceva una cosa che non e' vera. Lo .story-conta serve solo
     al carosello da telefono. */
  .story-a-lastre .story-index,
  .story-a-lastre .story-conta { display:none; }
  /* Chiusa, la lastra e' stretta: il titolo ci sta solo in verticale.
     Carattere e peso sono quelli dei titoli del sito; il maiuscolo prende
     --tracking-caps, la spaziatura che qui si da' a ogni testo maiuscolo
     (senza, le lettere si accavallano). */
  .story-a-lastre .story-block h3 {
    position:relative; z-index:2; margin:0;
    writing-mode:vertical-rl; transform:rotate(180deg);
    text-transform:uppercase; font-weight:400;
    font-size:0.94rem; letter-spacing:var(--tracking-caps); line-height:1.3;
    max-height:452px;
  }
  .story-a-lastre .story-block.active h3 {
    writing-mode:horizontal-tb; transform:none;
    font-size:1.42rem; line-height:1.25; margin-bottom:16px; max-height:none;
  }
  .story-a-lastre .story-block p {
    position:relative; z-index:2; display:block; max-width:460px;
    color:var(--surface-text-dim); font-size:0.98rem; line-height:1.65;
  }
  .story-a-lastre .story-link { position:relative; z-index:2; }
  .story-a-lastre .story-block:not(.active) p,
  .story-a-lastre .story-block:not(.active) .story-link {
    opacity:0; max-height:0; overflow:hidden; margin-top:0;
  }
  .story-a-lastre .story-block p,
  .story-a-lastre .story-link { transition:opacity .45s ease, max-height .6s var(--ease); }

  /* ---- "Come lavoriamo" a elenco numerato ----
     Sfondo a quadretti e filo rosso che scende mentre si legge, con il
     pallino di ogni tappa agganciato al filo. Le foto restano solo da
     telefono: qui la sezione e' un elenco, non una galleria. */
  .filiera-a-elenco {
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 68px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 68px);
  }
  .filiera-a-elenco .filiera-strip {
    position:relative; flex-direction:column; align-items:stretch;
    height:auto; gap:70px; margin-top:64px; padding-left:76px;
  }
  /* la traccia grigia e il filo rosso: 24px del contenitore piu' 5 di respiro */
  .filiera-a-elenco .filiera-linea-fondo,
  .filiera-a-elenco .filiera-linea-rossa {
    display:block; position:absolute; left:29px; top:6px; bottom:6px; width:1px;
  }
  .filiera-a-elenco .filiera-linea-fondo { background:var(--surface-border); }
  /* scaleY e non height: il transform non tocca il layout, l'altezza si' */
  .filiera-a-elenco .filiera-linea-rossa {
    background:var(--accent); transform:scaleY(0); transform-origin:top center; will-change:transform;
  }
  .filiera-a-elenco .filiera-stage,
  .filiera-a-elenco .filiera-stage.active {
    flex:none; display:block; position:relative; max-width:520px; overflow:visible;
    background:none; border:0; padding:0; cursor:default;
  }
  .filiera-a-elenco .filiera-stage::before {
    content:''; position:absolute; left:-52px; top:0.5em;
    width:9px; height:9px; border-radius:50%;
    background:var(--surface-bg); border:1px solid var(--accent);
  }
  .filiera-a-elenco .filiera-stage-bg { display:none; }
  /* le quattro voci sfalsate come nella vecchia sezione: la colonna respira
     invece di sembrare un elenco puntato */
  .filiera-a-elenco .filiera-stage[data-stage="1"] { margin-left:64px; }
  .filiera-a-elenco .filiera-stage[data-stage="2"] { margin-left:22px; }
  .filiera-a-elenco .filiera-stage[data-stage="3"] { margin-left:64px; }
  .filiera-a-elenco .filiera-num,
  .filiera-a-elenco .filiera-stage.active .filiera-num {
    position:static; display:block; margin-bottom:16px;
    font-family:var(--font-mono); font-weight:700; line-height:1;
    font-size:clamp(2.4rem, 4.6vw, 3.4rem); letter-spacing:-0.02em;
    color:transparent; -webkit-text-stroke:1px rgba(216,35,55,0.6);
  }
  .filiera-a-elenco .filiera-title,
  .filiera-a-elenco .filiera-stage.active .filiera-title {
    writing-mode:horizontal-tb; transform:none; white-space:normal;
    font-size:clamp(1.35rem, 2.4vw, 1.7rem); font-weight:600;
    letter-spacing:var(--tracking-tight-sm); margin-bottom:14px;
  }
  .filiera-a-elenco .filiera-text,
  .filiera-a-elenco .filiera-stage:not(.active) .filiera-text {
    opacity:1; max-height:none; overflow:visible;
    font-size:1rem; line-height:1.7; color:var(--surface-text-dim); text-wrap:pretty;
  }
  .filiera-a-elenco .filiera-note { margin-top:96px; padding-top:56px; }
}

/* ============================================================
   COME LAVORIAMO — IL RIGHELLO
   Classi nuove: le altre cinque lingue hanno ancora .filiera-strip e
   non vengono toccate da niente di quello che segue.

   Da telefono il righello si aggancia al bordo sinistro (M2); da
   1100px in su diventa la colonna ferma accanto al testo, con la
   fotografia di fianco (P3). In entrambi i casi la scala e' lunga
   quanto la sezione, quindi l'indice avanza al passo della lettura.
   ============================================================ */
.filiera-corpo { position:relative; padding-left:64px; margin-top:56px; }
.filiera-colonna { position:sticky; top:100px; float:left; margin-left:-64px; width:34px; height:56vh; z-index:5; }
.filiera-scala { position:relative; height:100%; }
.filiera-scala::before { content:''; position:absolute; left:5px; top:0; bottom:0; width:1px; background:rgba(255,255,255,0.12); }
/* graduazione a trattini corti: si intuisce, non si conta */
.filiera-grad { position:absolute; left:5px; top:0; bottom:0; width:5px; }
.filiera-grad i { position:absolute; left:0; width:100%; height:1px; background:rgba(255,255,255,0.07); }
.filiera-fermo {
  position:absolute; left:5px; width:14px; height:1px; background:rgba(255,255,255,0.12);
  transition:background .55s var(--ease), width .55s var(--ease);
}
.filiera-fermo.viva { background:var(--accent); width:21px; }
.filiera-fermo em {
  position:absolute; left:-5px; top:-19px; font-style:normal;
  font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.06em;
  color:var(--surface-text-mute); transition:color .55s var(--ease);
}
.filiera-fermo.viva em { color:var(--accent); }
.filiera-fermo b {
  position:absolute; left:34px; top:-20px; font-weight:400; white-space:nowrap;
  font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--surface-text-dim); opacity:0; transform:translateX(-8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.filiera-fermo.viva b { opacity:1; transform:none; }
.filiera-indice { position:absolute; left:1px; top:0; width:9px; height:9px; margin-top:-4px; }
.filiera-indice::before { content:''; position:absolute; inset:0; background:var(--accent); clip-path:polygon(0 50%, 100% 0, 100% 100%); }
/* la guida che esce dall'indice e si perde verso il testo */
.filiera-guida {
  position:absolute; left:9px; top:0; height:1px; width:44px;
  background:linear-gradient(90deg, rgba(216,35,55,0.7) 0%, rgba(216,35,55,0) 100%);
}

.filiera-fase { padding:26px 0 54px; border-top:1px solid rgba(255,255,255,0.12); transition:border-color .6s var(--ease); }
.filiera-fase:last-child { padding-bottom:0; }
.filiera-fase.viva { border-top-color:var(--accent); }
.filiera-quota {
  display:block; font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--surface-text-mute); transition:color .6s var(--ease);
}
.filiera-fase.viva .filiera-quota { color:var(--accent); }
.filiera-fase h3 {
  font-size:clamp(1.5rem,2.9vw,2.05rem); font-weight:500; margin:13px 0 15px;
  letter-spacing:var(--tracking-tight-sm); line-height:1.2;
  color:var(--surface-text-mute); transition:color .6s var(--ease);
}
.filiera-fase.viva h3 { color:var(--surface-text); }
.filiera-fase p { color:var(--surface-text-dim); line-height:1.78; margin:0 0 22px; max-width:52ch; }
.filiera-foto { overflow:hidden; aspect-ratio:4/3; }
.filiera-foto img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.6); transform:scale(1.02);
  transition:filter 1s var(--ease), transform 1.6s var(--ease);
}
.filiera-fase.viva .filiera-foto img { filter:grayscale(0); transform:scale(1); }

@media (min-width:1100px){
  /* tre colonne: righello fermo, testo, fotografia di fianco */
  .filiera-corpo { display:grid; grid-template-columns:150px minmax(0,1fr); gap:clamp(48px,5vw,76px); align-items:start; padding-left:0; }
  .filiera-colonna { float:none; margin-left:0; width:auto; top:132px; height:58vh; }
  /* Fotografia a sinistra, testo a destra. Nel codice il testo resta primo
     perche' e' il contenuto vero: a spostarlo e' solo l'ordine di stampa. */
  .filiera-fase { display:grid; grid-template-columns:clamp(330px,33vw,460px) minmax(0,1fr); gap:clamp(36px,4vw,60px); align-items:start; padding:34px 0 88px; }
  .filiera-foto { order:1; }
  .filiera-testo { order:2; }
  .filiera-fase p { margin-bottom:0; }
  .filiera-fermo { width:18px; }
  .filiera-fermo.viva { width:26px; }
  /* Il numero va a destra della tacca: a left:0 la linea gli passava sopra. */
  .filiera-fermo em { left:34px; top:-8px; font-size:0.68rem; letter-spacing:0.1em; }
  .filiera-fermo b { left:66px; top:-8px; font-size:0.68rem; }
  .filiera-guida { left:8px; width:132px; }
}
@media (prefers-reduced-motion:reduce){
  .filiera-fermo, .filiera-fermo em, .filiera-fermo b, .filiera-fase, .filiera-fase h3,
  .filiera-quota, .filiera-foto img { transition:none; }
  .filiera-indice, .filiera-guida { display:none; }
  .filiera-fermo, .filiera-fermo b { opacity:1; transform:none; }
  .filiera-fase h3 { color:var(--surface-text); }
  .filiera-quota { color:var(--accent); }
  .filiera-foto img { filter:none; transform:none; }
}

/* ============================================================
   COSA SAPPIAMO FARE — IL CAROSELLO DA TELEFONO (C2 + D4)
   Sotto i 1024px: una scheda a piena larghezza per volta, barrette
   sotto, didascalia fissa che cambia sfogliando, e l'indicazione
   "scorri" scritta come una linea di quota, che sparisce al primo
   movimento del dito e non torna piu'.

   Il testo sta una volta sola nell'HTML, dentro la scheda: e' main.js
   a spostarlo sotto al carosello. Cosi' non c'e' nessuna copia doppia
   da far leggere a Google.
   ============================================================ */
@media (max-width:1023px) {
  /* Il contenitore e' gia' a piena larghezza: il margine negativo che serviva al
     carosello di prima qui allargava la pista di 48px oltre lo schermo, e
     nessuna scheda si vedeva mai per intera. */
  .story-a-lastre .story-text { margin:0; padding:0; gap:0; }
  /* foto, barrette e didascalia distanziano gia' con i propri margini: il
     gap del contenitore ci aggiungeva sopra altri 40px per ogni stacco */
  .story-a-lastre .story-layout { gap:0; }
  /* L'altezza della fotografia si lega allo schermo, non alle sue proporzioni:
     a 4/5 la scheda usciva a 469px e, sommata a barrette e didascalia, la
     didascalia finiva sotto il bordo — con la barra del browser che si mangia
     altri cento e passa pixel, foto e testo non si vedevano mai insieme.
     svh e' l'altezza dello schermo CON la barra visibile, quindi il conto
     regge anche quando la barra ricompare; vh resta per i browser vecchi. */
  .story-a-lastre .story-block {
    flex:0 0 100%; max-width:none;
    aspect-ratio:auto;
    height:clamp(260px, 48vh, 440px);
    height:clamp(260px, 48svh, 440px);
    margin-right:0; padding:0; border:0;
  }
  .story-a-lastre .story-block::before { display:none; }
  .story-a-lastre .story-index { display:none; }
  .story-a-lastre .story-block-testo { display:none; }

  /* le barrette: una per lavorazione, quella corrente in rosso */
  .story-barrette { display:flex; gap:7px; justify-content:center; margin-top:15px; }
  .story-barrette i { width:20px; height:2px; background:rgba(255,255,255,0.12); transition:background .3s; }
  .story-barrette i.viva { background:var(--accent); }

  /* la didascalia: le voci si sovrappongono e si dissolvono, cosi' il
     riquadro non cambia altezza a ogni sfogliata */
  .story-didascalie { position:relative; min-height:196px; margin-top:18px; padding:0 24px; }
  .story-didascalie .story-block-testo {
    display:block; position:absolute; left:24px; right:24px; top:0;
    opacity:0; transition:opacity .45s var(--ease); pointer-events:none;
  }
  .story-didascalie .story-block-testo.viva { opacity:1; position:relative; left:auto; right:auto; pointer-events:auto; }
  .story-conta { display:block; font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent); }
  .story-didascalie h3 { font-size:1.28rem; font-weight:500; margin:11px 0 12px; letter-spacing:var(--tracking-tight-sm); line-height:1.25; color:var(--surface-text); }
  .story-didascalie p { display:block; color:var(--surface-text-dim); line-height:1.7; margin:0; font-size:0.97rem; max-width:none; }
  .story-didascalie .story-link { margin-top:13px; }

  /* "scorri" scritto come una linea di quota: l'etichetta a sinistra e un
     filo che sfuma verso il bordo destro, dove la fotografia continua */
  .story-scorri {
    position:absolute; left:24px; right:0; bottom:20px; z-index:4;
    display:flex; align-items:center; gap:12px; pointer-events:none;
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .story-scorri em {
    flex:none; font-style:normal;
    font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; color:#fff;
    text-shadow:0 1px 10px rgba(0,0,0,0.8);
  }
  .story-scorri span { flex:1; height:1px; background:linear-gradient(90deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.12) 100%); }
  .story-scorri svg { flex:none; width:13px; height:13px; color:#fff; margin-right:12px; }
  .story-carosello.mossa .story-scorri { opacity:0; transform:translateX(16px); }

  /* il righello vecchio del carosello lascia il posto alle barrette */
  .story-a-lastre .story-ruler { display:none; }
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){
  .story-didascalie .story-block-testo, .story-scorri, .story-barrette i { transition:none; }
}