/* =========================================================
   RPG Ingegneria — Atelier Tecnico Editoriale
   Direzione: rottura della griglia, serif display + grotesco,
   palette avorio/verde-foresta/blu-acciaio, mega-menu full-screen.
   ========================================================= */

:root {
  /* Palette — DNA originale reinterpretato: navy + cremisi accent, su carta avorio */
  --ink:        #0A0A0A;          /* nero profondo per titoli */
  --ink-soft:   #2A2D4D;          /* blu navy — colore identitario brand */
  --paper:      #F5F1E8;          /* avorio caldo (carta da lucido) */
  --paper-2:    #EFE8D8;          /* avorio leggermente più carico */
  --rule:       #2A2A2A;          /* nero per linee */
  --brand:      #2A2D4D;          /* navy — colore identitario brand */
  --brand-2:    #181A2C;          /* navy profondo per hover */
  --brand-acc:  #D92027;          /* cremisi — accento "srl" e dettagli */
  --chrome:     #F4D03F;          /* giallo cromo — accento dopamina */
  --amber:      #C77A30;          /* ambra bruciata */
  --mute:       #5C5C5C;
  --line-soft:  rgba(10,10,10,.12);
  --line-dark:  rgba(10,10,10,.12);
  --card-bg:    #FFFFFF;          /* bianco puro per le card */
  --text-on-red: #F5F1E8;         /* alias per testi chiari su sfondo scuro */

  /* Tipografia */
  --ff-serif:    'Fraunces', 'Times New Roman', Georgia, serif;
  --ff-sans:     'Space Grotesk', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ff-mono:     'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* Layout */
  --gutter: clamp(20px, 4vw, 56px);
  --maxw:   1440px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x: hidden; }
body{
  margin:0;
  font-family:var(--ff-sans);
  font-weight:400;
  color:var(--ink);
  overflow-x: hidden;
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Grain noise sull'avorio — dà texture "carta da lucido" */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity:.9;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; background:none; border:0; color:inherit; padding:0; }
::selection{ background: var(--chrome); color: var(--ink); }

/* Tipografia display */
h1,h2,h3,h4{ font-family: var(--ff-serif); color: var(--ink); margin: 0; letter-spacing: -.02em; line-height: .95; font-weight: 500; }
h1{ font-size: clamp(2.6rem, 8.5vw, 10rem); font-weight: 500; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144; }
.nowrap{ white-space: nowrap; }
h2{ font-size: clamp(2.2rem, 5.5vw, 5.5rem); font-weight: 600; font-variation-settings: "opsz" 96; letter-spacing: -.025em; overflow-wrap: break-word; }
h3{ font-size: clamp(1.2rem, 1.6vw, 1.6rem); font-weight: 500; overflow-wrap: break-word; word-break: break-word; }
p { margin: 0 0 1em; color: var(--mute); font-size: 1rem; overflow-wrap: break-word; }
p.lead{ font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: var(--ink); line-height: 1.45; }
.italic{ font-style: italic; font-family: var(--ff-serif); }
.mono{ font-family: var(--ff-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-family: var(--ff-mono); font-size: .9rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--chrome); font-weight: 800;
}
.eyebrow::before{
  content:""; width: 36px; height: 2px; background: var(--chrome); display:inline-block;
}
.eyebrow.dark{ color: var(--brand); }
.eyebrow.dark::before{ background: var(--brand); }

/* Layout helpers */
.container{ width: min(100% - var(--gutter)*2, var(--maxw)); margin-inline: auto; position: relative; z-index: 1; }
section{ position: relative; }
section.tight{ padding: clamp(60px, 7vw, 110px) 0; }
section.loose{ padding: clamp(90px, 11vw, 180px) 0; }

/* =========================================================
   Header / Mega-menu
   ========================================================= */
.hdr{
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 22px 0;
  display: flex; align-items: center;
  background: transparent;
  transition: background .35s var(--ease), color .35s var(--ease), padding .35s var(--ease);
  color: var(--ink);
}
.hdr.scrolled{
  background: rgba(245,241,232,.95);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.hdr.on-dark{ color: var(--paper); }     /* quando sopra sezione scura */
.hdr.on-dark .hdr-trigger{ color: var(--paper); border-color: var(--paper); background: transparent; }
.hdr.on-dark .hdr-trigger:hover{ background: var(--paper); color: var(--brand); border-color: var(--paper); }
.hdr.on-dark .hdr-logo img{ filter: brightness(0) invert(1); }
body.inner .hdr-logo img{ filter: none !important; }
body.inner .hdr.on-dark{ color: var(--ink); }
body.inner .hdr.on-dark .hdr-trigger{ color: var(--ink); border-color: var(--ink); background: transparent; backdrop-filter: none; }
body.inner .hdr.on-dark .hdr-trigger:hover{ background: var(--ink); color: var(--paper); }

.hdr-inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hdr-logo img{ height: 56px; width: auto; }
.hdr.scrolled .hdr-logo img{ height: 44px; transition: height .3s var(--ease); }
.hdr-logo img{ transition: height .3s var(--ease); }

/* Bottone menu testuale */
.hdr-trigger{
  display: inline-flex; align-items: center; gap: .8em;
  font-family: var(--ff-mono); font-size: .85rem; letter-spacing: .28em; text-transform: uppercase;
  font-weight: 700;
  padding: 14px 22px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.hdr-trigger .dot{ width: 8px; height: 8px; background: currentColor; border-radius: 50%; transition: transform .3s var(--ease); }
.hdr-trigger:hover{ background: var(--ink); color: var(--paper); transform: translateY(-1px); }
.hdr-trigger:hover .dot{ transform: scale(1.4); }
.hdr-phone{
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--ff-mono); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600;
}
.hdr-phone .num{ font-family: var(--ff-serif); font-size: 1.4rem; font-weight: 500; letter-spacing: 0; }
.hdr-cta-group{ display: flex; align-items: center; gap: 32px; }

/* =========================================================
   MEGA MENU OVERLAY
   ========================================================= */
.mm{
  position: fixed; inset: 0; z-index: 70;
  background: var(--ink);
  color: var(--paper);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; pointer-events: none;
  transform: translateY(-2%);
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.mm.open{ opacity: 1; pointer-events: auto; transform: none; }

.mm-top{
  padding: 22px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(245,241,232,.08);
}
body .mm-top .hdr-logo img{ height: 56px; width: auto; max-width: 320px; filter: brightness(0) invert(1) !important; }
.mm-close{
  display: inline-flex; align-items: center; gap: .8em;
  font-family: var(--ff-mono); font-size: .78rem; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 600; color: var(--ink);
}
.mm-close .x{ width: 22px; height: 22px; position: relative; }
.mm-close .x::before, .mm-close .x::after{ content:""; position:absolute; left:0; right:0; top:50%; height: 1.4px; background: var(--paper); }
.mm-close .x::before{ transform: rotate(45deg); }
.mm-close .x::after{ transform: rotate(-45deg); }

.mm-grid{
  display: grid; grid-template-columns: 1fr;
  gap: 0; padding: clamp(20px, 3vw, 48px) var(--gutter);
  align-items: center;
  justify-items: start;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.mm-grid::-webkit-scrollbar{ width: 6px; }
.mm-grid::-webkit-scrollbar-thumb{ background: rgba(245,241,232,.18); border-radius: 3px; }
.mm-grid::-webkit-scrollbar-track{ background: transparent; }
.mm-left{ display: grid; gap: clamp(10px, 1.2vw, 18px); }
.mm-left a{
  font-family: var(--ff-serif);
  font-size: clamp(1.8rem, 4.4vw, 4.2rem);
  font-weight: 500; line-height: 1;
  color: var(--paper);
  display: flex; align-items: baseline; gap: .6em;
  position: relative; padding: .12em 0;
  text-decoration: none;
  transition: color .2s var(--ease), padding-left .35s var(--ease);
}
.mm-left a .num{
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .26em; color: var(--chrome);
  align-self: flex-start; margin-top: .6em; min-width: 3em;
}
.mm-left a:hover{ color: var(--chrome); padding-left: .5em; }
.mm-left a .arrow{
  display: inline-block; opacity: 0; transform: translateX(-12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  font-size: .6em; align-self: center;
}
.mm-left a:hover .arrow{ opacity: 1; transform: translateX(0); }

.mm-right{ padding-left: clamp(24px, 4vw, 80px); border-left: 1px solid rgba(245,241,232,.08); }
.mm-right .col{ display: grid; gap: 12px; margin-bottom: 28px; }
.mm-right .col h4{
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--chrome); font-weight: 600; margin: 0 0 8px;
}
.mm-right .col a{
  font-family: var(--ff-sans);
  font-size: clamp(1rem, 1.1vw, 1.15rem); color: rgba(245,241,232,.78);
  display: inline-block; padding: 4px 0; border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease), padding-left .25s var(--ease);
}
.mm-right .col a:hover{ color: var(--paper); border-color: var(--chrome); padding-left: 8px; }

.mm-bot{
  padding: 22px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-top: 1px solid rgba(245,241,232,.08);
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245,241,232,.6);
  flex-wrap: wrap;
}
.mm-bot .meta{ display: flex; gap: 28px; flex-wrap: wrap; }
.mm-bot .mm-brand{ font-weight: 700; color: var(--paper); }
.mm-bot .mm-sep{ display: inline-block; width: 1px; height: 14px; background: rgba(245,241,232,0.4); margin: 0 14px; vertical-align: middle; }

/* Quando il menu è aperto, nascondi l'header sotto */
body.mm-open{ overflow: hidden; }
body.mm-open .hdr{ opacity: 0; pointer-events: none; }

/* Mobile menu (sotto i 900px) */
@media (max-width: 900px){
  .eyebrow{ font-size: .72rem; letter-spacing: .18em; }
  .eyebrow::before{ width: 24px; }
  .mm-grid{ grid-template-columns: 1fr; padding: 32px var(--gutter); gap: 28px; }
  .mm-right{ padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid rgba(245,241,232,.08); }
  .mm-left a{ font-size: clamp(2rem, 9vw, 3rem); }
  .hdr-phone .num{ font-size: 1rem; }
  .hdr-cta-group{ gap: 14px; }
  .hdr-phone{ display: none; }  /* semplifichiamo su mobile */
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  padding: 130px 0 90px;
  background: linear-gradient(180deg, #010204 0%, #050a12 100%);
  overflow: hidden;
  color: var(--text-on-red);
}
.hero3d-wrap{
  position: absolute; inset: 0;
  z-index: 0; pointer-events: auto;
  background: #010204;
  transition: opacity .8s var(--ease);
  overflow: hidden;
  cursor: pointer;
}
.hero3d-canvas{ position: absolute; inset: 0; }
.hero3d-canvas canvas{ display: block; width: 100%; height: 100%; }
.hero .container{ position: relative; z-index: 2; }
/* Overlay gradient per leggibilità testo sopra animazione */
.hero::after{
  content:""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(245,241,232,.18) 0%, rgba(245,241,232,0) 40%, rgba(245,241,232,0) 60%, rgba(245,241,232,.12) 100%),
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, transparent 25%, rgba(0,0,0,.40) 60%, rgba(0,0,0,.85) 80%, #000 95%, #000 100%);
}
.hero-grid{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.hero-title{
  position: relative;
}
.hero-title .eyebrow{ margin-bottom: 36px; display: inline-block; }
.hero-title h1{
  /* Il titolo esce dal box e occupa l'intera larghezza */
  position: relative;
  z-index: 2;
  color: var(--text-on-red);
}
.hero-title h1 .em{
  font-style: italic; color: var(--brand-acc);
  display: inline-block; position: relative;
}
/* highlight rimosso: lasciamo il corsivo cremisi "pulito" */
/* .strike rimosso: non più usato */
.hero-meta{
  display: flex; flex-direction: column; gap: 16px; align-items: flex-end; text-align: right;
}
.hero-meta .lead{ max-width: 38ch; color: var(--text-on-red); font-size: 1.05rem; }
.hero-meta .scroll-cue{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(245,241,232,.7);
}
.hero-meta .scroll-cue .line{
  display: inline-block; width: 64px; height: 1px; background: rgba(245,241,232,.5); position: relative; overflow: hidden;
}
.hero-meta .scroll-cue .line::after{
  content:""; position: absolute; inset: 0; background: var(--chrome);
  transform: translateX(-100%); animation: scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{ 50%{ transform: translateX(0); } 100%{ transform: translateX(100%); } }

.hero-claims{
  margin-top: clamp(36px, 4vw, 56px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  /* Z-index alto per stare sopra a qualsiasi overlay 3D, sfondo trasparente */
  position: relative; z-index: 10;
  background: transparent;
}
.hero-claims .it{ position: relative; z-index: 11; background: transparent; }
.hero-claims .it{
  padding: 18px 32px;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 4px;
}
.hero-claims .it:last-child{ border-right: 0; }
.hero-claims .it .k{ font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(245,241,232,.7); }
.hero-claims .it .v{ font-family: var(--ff-serif); font-size: 1.4rem; color: var(--paper); font-weight: 500; }
.hero-claims .it .v b{ color: var(--chrome); font-weight: 500; }

/* Decoration "croce di misura" agli angoli del hero */
.crocini{ position: absolute; pointer-events: none; }
.crocini span{ position: absolute; display: block; width: 14px; height: 14px; }
.crocini span::before, .crocini span::after{ content:""; position: absolute; background: var(--ink); }
.crocini span::before{ left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.crocini span::after{ top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.crocini.tl{ top: 110px; left: var(--gutter); }
.crocini.tr{ top: 110px; right: var(--gutter); }
.crocini.bl{ bottom: 80px; left: var(--gutter); }
.crocini.br{ bottom: 80px; right: var(--gutter); }

@media (max-width: 900px){
  .hero{ padding: 100px 0 50px; }
  .hero-grid{ grid-template-columns: 1fr; gap: 28px; }
  .hero-meta{ align-items: flex-start; text-align: left; }
  .hero-claims{ grid-template-columns: 1fr; }
  .hero-claims .it{ border-right: 0; border-bottom: 1px solid var(--rule); }
  .hero-claims .it:last-child{ border-bottom: 0; }
  .crocini{ display: none; }
}

/* =========================================================
   Quote (striscia editoriale)
   ========================================================= */
.quote{
  background: var(--ink);
  color: var(--paper);
  padding: clamp(60px, 7vw, 110px) 0;
  position: relative;
  overflow: hidden;
}
.quote blockquote{
  font-family: var(--ff-serif);
  font-size: clamp(1.6rem, 3.4vw, 3.4rem);
  line-height: 1.15;
  margin: 0; max-width: 24ch;
  font-weight: 500;
  letter-spacing: -.01em;
}
.quote blockquote em{ font-style: italic; color: var(--chrome); }
.quote .sign{ margin-top: 28px; font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(245,241,232,.6); }
.quote .mark{
  position: absolute; top: 32px; right: var(--gutter);
  font-family: var(--ff-serif); font-style: italic; font-size: 8rem; line-height: 1; color: var(--chrome); opacity: .5;
}
@media (max-width: 900px){
  .quote .mark{ display: none; }
  .quote blockquote{ max-width: none; }
}

/* =========================================================
   Manifesto — scroll orizzontale (la firma distintiva)
   ========================================================= */
.manifesto{
  background: var(--paper-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(50px, 6vw, 100px) 0;
  overflow: hidden;
}
.manifesto-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.manifesto-head h2{ max-width: 14ch; }
.manifesto-head .hint{ font-family: var(--ff-mono); font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 14px; }
.manifesto-head .hint .arrow-icon{ display: inline-block; animation: nudge-x 1.6s ease-in-out infinite; }
.manifesto-head .hint .counter{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ink); }
@keyframes nudge-x{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(6px); } }

.manifesto-nav{ position: relative; }
.manifesto-arrow{ position: absolute; bottom: 18px; z-index: 5; width: 48px; height: 48px; display: grid; place-items: center; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); cursor: pointer; font-size: 1.4rem; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.manifesto-arrow:hover{ background: var(--brand-acc); border-color: var(--brand-acc); color: var(--paper); transform: scale(1.08); }
.manifesto-arrow:disabled{ opacity: 0.3; cursor: not-allowed; }
.manifesto-arrow.prev{ left: 0; }
.manifesto-arrow.next{ right: 0; }
.manifesto-progress{ position: absolute; left: 80px; right: 80px; bottom: 30px; height: 2px; background: rgba(10,10,10,0.12); z-index: 4; }
.manifesto-progress-bar{ height: 100%; width: 11%; background: var(--ink); transition: width .25s var(--ease); }
.manifesto-track-wrap{ position: relative; }
.manifesto-track-wrap > .container{ position: relative; }
.manifesto-track{
  display: flex; gap: clamp(20px, 2.5vw, 36px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 0 var(--gutter) 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
}
.manifesto-track::-webkit-scrollbar{ height: 8px; }
.manifesto-track::-webkit-scrollbar-thumb{ background: var(--ink); border-radius: 0; }
.manifesto-track::-webkit-scrollbar-track{ background: rgba(10,10,10,0.15); }

@media (max-width: 800px){ .manifesto-arrow{ display: none; } .manifesto-progress{ left: var(--gutter); right: var(--gutter); bottom: 4px; } }

.manifesto-card{
  flex: 0 0 clamp(280px, 32vw, 420px);
  scroll-snap-align: start;
  background: var(--card-bg);
  border: 1px solid var(--rule-dark);
  padding: 28px;
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 320px;
  transition: transform .3s var(--ease);
  color: var(--ink);
}
.manifesto-card:hover{ transform: translateY(-4px); }
.manifesto-card .num{
  font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .26em; color: var(--ink-soft);
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--rule-dark); padding-bottom: 14px;
}
.manifesto-card .num .i{ color: var(--brand-acc); }
.manifesto-card h3{
  font-family: var(--ff-serif); font-size: 1.8rem; line-height: 1; font-weight: 500;
  margin: 0; color: var(--ink);
}
.manifesto-card p{ font-size: .95rem; margin: 0; }
.manifesto-card .arrow{ position: absolute; right: 20px; bottom: 20px; font-family: var(--ff-serif); font-size: 1.4rem; color: var(--brand); transition: transform .25s var(--ease); }
.manifesto-card:hover .arrow{ transform: translate(6px, -6px); }

/* =========================================================
   Società preview (home) + Società page
   ========================================================= */
.about{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: stretch;
}
.about .copy{ display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.about .copy p.lead{ max-width: 42ch; }
.about .visual{
  background: var(--ink);
  color: var(--paper);
  position: relative;
  min-height: 480px;
  padding: 36px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.about .visual .label{ font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .26em; color: var(--chrome); text-transform: uppercase; }
.about .visual h3{ font-family: var(--ff-serif); font-size: clamp(1.6rem, 2.4vw, 2.4rem); line-height: 1.05; color: var(--paper); font-weight: 500; margin-top: 14px; }
.about .visual .deco{ position: absolute; inset: 0; opacity: .25; pointer-events: none; }
.about .visual .footer-row{ display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.about .visual .footer-row .k{ font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .22em; color: rgba(245,241,232,.6); }
.about .visual .footer-row .v{ font-family: var(--ff-serif); font-size: 1.2rem; }

@media (max-width: 900px){
  .about{ grid-template-columns: 1fr; }
  .about .visual{ min-height: 360px; }
}

/* MVV — versione editoriale */
.mvv-row{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-top: 1px solid var(--ink); }
.mvv-row .m{
  padding: 36px 40px;
  border-right: 1px solid var(--ink);
  display: flex; flex-direction: column; gap: 12px;
}
.mvv-row .m:last-child{ border-right: 0; }
.mvv-row .m .n{ font-family: var(--ff-serif); font-size: 3rem; line-height: 1; color: var(--brand); font-weight: 500; }
.mvv-row .m h3{ font-family: var(--ff-mono); font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.mvv-row .m p{ font-size: 1rem; color: var(--mute); }
@media (max-width: 800px){
  .mvv-row{ grid-template-columns: 1fr; }
  .mvv-row .m{ border-right: 0; border-bottom: 1px solid var(--ink); }
  .mvv-row .m:last-child{ border-bottom: 0; }
}

/* =========================================================
   Team
   ========================================================= */
.team{ display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); gap: 0; }
.team .cell{
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 28px 32px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--card-bg);
  color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease);
  cursor: default;
}
.team .cell:hover{ background: var(--ink); color: var(--paper); }
.team .cell:hover .num{ color: var(--chrome); }
.team .cell:hover p{ color: rgba(245,241,232,.75); }
.team .cell h3{ font-family: var(--ff-serif); font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 500; color: inherit; }
.team .cell .num{ font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .26em; color: var(--ink-soft); }
.team .cell p{ font-size: .9rem; margin: 0; color: var(--ink-soft); }
@media (max-width: 800px){
  .team{ grid-template-columns: 1fr; }
}

/* =========================================================
   Stat strip (numeri)
   ========================================================= */
.stats{ background: var(--ink); color: var(--paper); padding: clamp(50px, 6vw, 90px) 0; }
.stats-grid{ display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-grid .stat{ padding: 0 32px; border-right: 1px solid rgba(245,241,232,.12); }
.stats-grid .stat:last-child{ border-right: 0; }
.stats-grid .stat .v{ font-family: var(--ff-serif); font-size: clamp(3rem, 7vw, 7rem); line-height: 1; color: var(--paper); font-weight: 500; }
.stats-grid .stat .v .acc{ color: var(--chrome); font-style: italic; }
.stats-grid .stat .k{ font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .26em; color: rgba(245,241,232,.7); text-transform: uppercase; margin-top: 8px; }
@media (max-width: 800px){
  .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .stats-grid .stat{ border-right: 0; padding: 0 12px; }
  .stats-grid .stat:nth-child(odd){ border-right: 1px solid rgba(245,241,232,.12); }
}

/* =========================================================
   Eventi (layout editoriale asimmetrico)
   ========================================================= */
.events-wrap{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; align-items: stretch; }
.event{
  background: var(--paper-2);
  border: 1px solid var(--ink);
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 240px;
  transition: transform .3s var(--ease);
}
.event:hover{ transform: translateY(-4px); }
.event.feature{ grid-row: span 2; background: var(--ink); color: var(--paper); min-height: 100%; }
.event.feature .date{ color: var(--chrome); }
.event.feature p{ color: rgba(245,241,232,.8); }
.event .date{ font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--chrome); }
.event h3{ font-family: var(--ff-serif); font-size: 1.4rem; font-weight: 500; line-height: 1.1; color: var(--ink); }
.event.feature h3{ font-size: clamp(1.8rem, 2.4vw, 2.4rem); }
.event p{ font-size: .92rem; }
.event .arrow{ margin-top: auto; align-self: flex-end; font-family: var(--ff-serif); font-size: 1.3rem; color: inherit; }
@media (max-width: 800px){
  .events-wrap{ grid-template-columns: 1fr; }
  .event.feature{ grid-row: auto; }
  .event[style*="grid-column: span 2"]{ grid-column: span 1 !important; }
}

/* =========================================================
   Banner fiera
   ========================================================= */
.fiera{
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: clamp(36px, 5vw, 72px);
  display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center;
  position: relative; overflow: hidden;
}
.fiera .badge{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--chrome); font-weight: 600;
  margin-bottom: 18px;
}
.fiera .badge::before{ content:""; width: 10px; height: 10px; background: var(--chrome); border-radius: 50%; }
.fiera h2{ font-size: clamp(2rem, 4vw, 4rem); max-width: 16ch; color: var(--ink); }
.fiera .date{
  font-family: var(--ff-mono); font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(245,241,232,.7);
  margin-top: 16px;
}
.fiera .visual{
  aspect-ratio: 4/3;
  background: var(--ink); color: var(--paper);
  position: relative; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--ink);
}
.fiera .visual .corner{ position: absolute; font-family: var(--ff-mono); font-size: .65rem; letter-spacing: .26em; color: var(--chrome); }
.fiera .visual .corner.tl{ top: 12px; left: 12px; }
.fiera .visual .corner.br{ bottom: 12px; right: 12px; }
.fiera .visual svg{ width: 70%; height: 70%; }
@media (max-width: 800px){
  .fiera{ grid-template-columns: 1fr; }
}

/* =========================================================
   Form contatti
   ========================================================= */
.cta-strip{
  background: var(--ink); color: var(--paper);
  padding: clamp(50px, 7vw, 100px) 0;
}
.cta-strip h2{ color: var(--paper); max-width: 18ch; }
.cta-strip h2 em{ font-style: italic; color: var(--chrome); }
.cta-strip .row{ display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

.form{
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--ink);
}
.form .full{ grid-column: 1 / -1; }
.form .field{ padding: 22px 24px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.form .field:nth-child(2n){ border-right: 0; }
.form .field.full{ border-right: 0; }
.form .field.label-row{ display: flex; flex-direction: column; gap: 8px; }
.form label{ font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }
.form input, .form select, .form textarea{
  width: 100%; border: 0; background: transparent; padding: 8px 0;
  font-family: var(--ff-serif); font-size: 1.2rem; color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline: 0; border-color: var(--brand);
}
.form textarea{ min-height: 80px; resize: vertical; }
.form .actions{ padding: 22px 24px; display: flex; justify-content: flex-end; align-items: center; gap: 16px; grid-column: 1 / -1; border-top: 1px solid var(--ink); background: var(--paper-2); }
@media (max-width: 700px){
  .form{ grid-template-columns: 1fr; }
  .form .field{ border-right: 0; }
}

/* Buttons */
.btn{
  display: inline-flex; align-items: center; gap: .8em;
  font-family: var(--ff-mono); font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600;
  padding: 14px 22px; border: 1px solid currentColor; color: var(--ink);
  background: transparent;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.btn.solid{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.solid:hover{ background: var(--brand); border-color: var(--brand); color: var(--ink); }
.btn.chrome{ background: var(--chrome); color: var(--ink); border-color: var(--chrome); }
.btn.chrome:hover{ background: var(--ink); color: var(--chrome); border-color: var(--ink); }
.btn .arr{ transition: transform .25s var(--ease); display: inline-block; }
.btn:hover .arr{ transform: translateX(4px); }

/* Link con underline che si disegna */
.lnk{
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--ff-mono); font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600;
  position: relative; padding-bottom: 4px;
}
.lnk::after{
  content:""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor;
  transform-origin: left; transform: scaleX(.3);
  transition: transform .35s var(--ease-out);
}
.lnk:hover::after{ transform: scaleX(1); }
.lnk .arr{ transition: transform .25s var(--ease); }
.lnk:hover .arr{ transform: translateX(4px); }

/* =========================================================
   Footer
   ========================================================= */
.ftr{
  background: var(--paper);
  color: var(--ink);
  padding: clamp(60px, 7vw, 100px) 0 28px;
  border-top: 1px solid var(--rule);
}
.ftr-top{
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px;
  padding-bottom: 48px; border-bottom: 1px solid var(--rule);
  align-items: stretch;
}
.ftr-top > .ftr-brand,
.ftr-top > .ftr-col{ display: flex; flex-direction: column; min-height: 100%; }
.ftr-top > .ftr-brand{ gap: 12px; }
.ftr-top > .ftr-col{ gap: 8px; }
.ftr-top > .ftr-col > h4{ margin-bottom: 4px; }
.ftr-col .ftr-socials{ margin-top: auto; padding-top: 12px; }
.ftr-top > div:not(.ftr-brand){ display: flex; flex-direction: column; gap: 8px; }
.ftr h4{ font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; margin: 0 0 16px; color: var(--ink-soft); font-weight: 600; }
.ftr ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.ftr a{ font-family: var(--ff-serif); font-size: 1.05rem; color: var(--ink); display: inline-block; line-height: 1.45; }
.ftr a:hover{ color: var(--brand-acc); }
.ftr-phone{ font-family: var(--ff-serif); font-size: 1.05rem; color: var(--ink); display: inline-block; line-height: 1.45; }
.ftr-brand{ display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.ftr-brand .ftr-logo{ height: 60px; width: auto; max-width: 100%; }
.ftr-brand .ftr-addr{ font-style: normal; color: var(--mute); display: flex; flex-direction: column; gap: 0; }
.ftr-brand .ftr-addr-line{ font-family: var(--ff-serif); font-size: 1.05rem; margin: 0; line-height: 1.45; color: var(--ink-soft); }
.ftr-brand .ftr-addr-line.ftr-meta{ color: var(--mute); font-size: .85rem; margin-top: 2px; }
.ftr-socials{ display: flex; gap: 8px; margin-top: 16px; }
.ftr-socials a{
  width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--ink);
  font-family: var(--ff-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  background: transparent;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.ftr-socials a:hover{ background: var(--ink); color: var(--paper); }
.ftr-nl{ display: flex; flex-direction: column; gap: 4px; }
.ftr-nl .form{ display: flex; gap: 8px; }
.ftr-nl .form input{ flex: 1; padding: 12px 14px; border: 1px solid var(--ink); background: var(--paper); font-family: var(--ff-serif); font-size: 1rem; color: var(--ink); }
.ftr-nl .form button{ padding: 12px 16px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); font-family: var(--ff-mono); font-size: .85rem; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.ftr-nl .form button:hover{ background: var(--brand-acc); border-color: var(--brand-acc); }
.ftr-nl .desc{ font-family: var(--ff-serif); font-size: .9rem; color: var(--mute); margin: 8px 0 0; line-height: 1.4; }
.ftr-nl .desc2{ font-family: var(--ff-serif); font-size: .9rem; color: var(--mute); margin: 0; line-height: 1.4; }
.ftr-bot{
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding-top: 24px;
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mute);
}
.ftr-bot .col2{ text-align: center; }
.ftr-bot .col3{ text-align: right; }
@media (max-width: 800px){
  .ftr-top{ grid-template-columns: 1fr; gap: 36px; }
  .ftr-bot{ grid-template-columns: 1fr; text-align: left !important; gap: 6px; }
  .ftr-bot .col2, .ftr-bot .col3{ text-align: left; }
  /* Footer mobile: font più piccolo, niente split */
  .ftr-brand .ftr-logo{ height: 50px; }
  .ftr-brand .ftr-addr-line,
  .ftr a, .ftr-phone, .ftr h4 + ul li{ font-size: .95rem; }
  .ftr h4{ font-size: .68rem; }
  /* Indirizzo del brand più compatto */
  .ftr-brand .ftr-addr-line{ font-size: .9rem; line-height: 1.4; }
  .ftr-brand .ftr-addr-line.ftr-meta{ font-size: .78rem; }
  /* Indirizzi lunghi (Roma, Milano) non vanno a capo a metà parola */
  .ftr ul li a{ white-space: nowrap; }
  .ftr-col .ftr-socials{ padding-top: 8px; }
  .ftr-nl .form input{ padding: 10px 12px; font-size: .9rem; }
  .ftr-nl .form button{ padding: 10px 14px; }
  .ftr-socials a{ width: 36px; height: 36px; }
  .ftr-nl{ padding-top: 0; }
  /* Su mobile il brand e le colonne non hanno più bisogno di allinearsi alla stessa altezza */
  .ftr-top{ align-items: flex-start; }
  .ftr-top > .ftr-col{ min-height: 0; }
  .ftr-top > .ftr-col > h4{ margin-bottom: 8px; }
  .ftr ul{ margin-top: 0; }
}

/* =========================================================
   Page header (pagine interne)
   ========================================================= */
.ph{
  background: var(--paper);
  padding: 130px 0 80px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.ph .crumbs{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono); font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--mute);
  margin-bottom: 0;
  margin-top: 0;
}
.ph .crumbs a{ color: var(--ink); }
.ph .crumbs a:hover{ color: var(--brand-acc); }
.ph .crumbs .sep{ color: var(--ink-soft); }
.ph h1{ max-width: 14ch; margin-top: 12px; }
.ph .eyebrow{ display: inline-flex; margin-top: 10px; }
.ph .sub{ font-family: var(--ff-serif); font-size: clamp(1.2rem, 1.6vw, 1.5rem); max-width: 60ch; color: var(--ink); margin-top: 28px; line-height: 1.35; font-style: italic; }
@media (max-width: 900px){ .ph{ padding: 100px 0 50px; } }

/* =========================================================
   Progetti
   ========================================================= */
.proj-grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.proj{
  background: var(--ink); color: var(--paper);
  position: relative; overflow: hidden;
  min-height: 380px;
  padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--ink);
}
.proj .meta{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.proj .meta .k{ font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--chrome); }
.proj .meta .i{ font-family: var(--ff-mono); font-size: .68rem; color: rgba(245,241,232,.5); }
.proj h3{ font-family: var(--ff-serif); font-size: clamp(1.6rem, 2.2vw, 2.4rem); font-weight: 500; line-height: 1.05; color: var(--paper); }
.proj .loc{ font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .22em; color: rgba(245,241,232,.6); }
.proj .deco{ position: absolute; inset: 0; opacity: .25; pointer-events: none; }
.proj .corner{ position: absolute; font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .22em; color: var(--chrome); }
.proj .corner.tl{ top: 14px; left: 14px; }
.proj .corner.br{ bottom: 14px; right: 14px; }
.proj:hover{ background: var(--brand); }
.proj:hover .deco{ opacity: .35; }

.proj.size-l{ grid-column: span 7; }
.proj.size-m{ grid-column: span 5; }
.proj.size-s{ grid-column: span 4; }
.proj.size-f{ grid-column: span 12; min-height: 280px; flex-direction: row; align-items: end; }
@media (max-width: 900px){
  .proj-grid{ grid-template-columns: 1fr; }
  .proj.size-l, .proj.size-m, .proj.size-s, .proj.size-f{ grid-column: span 1; min-height: 280px; flex-direction: column; }
}

/* =========================================================
   Coming soon
   ========================================================= */
.cs{
  min-height: 80vh;
  display: grid; place-items: center; padding: 130px 0 80px;
}
.cs .box{ max-width: 720px; text-align: center; }
.cs h1{ font-size: clamp(2.6rem, 7vw, 6rem); margin-bottom: 24px; }
.cs h1 em{ font-style: italic; color: var(--chrome); }
.cs p{ max-width: 50ch; margin: 0 auto 32px; font-size: 1.1rem; }
.cs .symbol{ font-family: var(--ff-serif); font-style: italic; font-size: 6rem; line-height: 1; color: var(--chrome); margin-bottom: 16px; }

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal{ opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.visible{ opacity: 1; transform: none; }
.reveal.d1{ transition-delay: .08s; }
.reveal.d2{ transition-delay: .16s; }
.reveal.d3{ transition-delay: .24s; }
.reveal.d4{ transition-delay: .32s; }

/* =========================================================
   SVG draw-in
   ========================================================= */
.draw{ stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: drawIn 2.4s var(--ease-out) forwards; }
@keyframes drawIn{ to{ stroke-dashoffset: 0; } }
.draw-slow{ stroke-dasharray: 600; stroke-dashoffset: 600; animation: drawIn 3.5s var(--ease-out) forwards; }

/* Marquee */
.marquee{
  background: var(--ink); color: var(--paper);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  overflow: hidden;
  padding: 14px 0;
}
.marquee-track{
  display: flex; gap: 56px; white-space: nowrap;
  animation: marq 40s linear infinite;
  font-family: var(--ff-serif); font-size: 1.6rem; font-style: italic; color: var(--ink);
}
.marquee-track .sep{ color: var(--chrome); }
@keyframes marq{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Skip link */
.skip-link{ position: absolute; left: -9999px; }
.skip-link:focus{ position: fixed; left: 16px; top: 16px; background: var(--chrome); color: var(--ink); padding: 10px 14px; z-index: 200; }