/* ============================================================
   Y-UNO — 3 porte · Design system (canovaccio v2)
   Concept editoriale/ARIA: aria, foto trattate, un solo accento.
   Font: Zen Kaku Gothic New (display) + Merriweather (serif)
   Accento: per-linea via --acc (Eiffel oro · Maison verde · Empire platino)
   ============================================================ */

:root {
  /* --- Base colore (condiviso) --- */
  --ink:        #14140f;   /* near-black caldo */
  --ink-soft:   #3a3a34;
  --paper:      #f6f5f0;   /* off-white caldo */
  --paper-2:    #eeece4;
  --line:       #dedbd0;
  --white:      #ffffff;
  --wasabi:     #83bb26;   /* brand green (chrome globale) */
  --wasabi-dk:  #6b9c1e;

  /* --- Accento (default = brand; le linee lo ridefiniscono) --- */
  --acc:    #83bb26;
  --acc-dk: #6b9c1e;

  /* --- Tipografia --- */
  --display: "Zen Kaku Gothic New", "Helvetica Neue", Arial, sans-serif;
  --serif:   "Merriweather", Georgia, "Times New Roman", serif;

  --fs-giant: clamp(2.6rem, 6vw, 5.4rem);
  --fs-mega:  clamp(2.8rem, 7vw, 6.5rem);
  --fs-h1:    clamp(2.2rem, 5vw, 4rem);
  --fs-h2:    clamp(1.7rem, 3.2vw, 2.6rem);
  --fs-h3:    clamp(1.25rem, 2vw, 1.6rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.15rem);
  --fs-small: 0.82rem;
  --fs-micro: 0.72rem;

  /* --- Spazio (ARIA) --- */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.75rem;
  --s-4: 3rem;    --s-5: 5rem;   --s-6: 8rem;   --s-7: 12rem;

  --maxw: 1280px;
  --maxw-text: 62ch;
  --radius: 2px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 4.6rem;
}

/* --- Theming per linea (accento) --- */
body.home        { --acc:#7d8172; --acc-dk:#5c6052; } /* Home: chrome neutro-salvia */
body.line-eiffel { --acc:#ad8a57; --acc-dk:#8a6a3c; } /* oro / ottone */
body.line-maison { --acc:#6fa22a; --acc-dk:#567f1f; } /* verde-acciaio */
body.line-empire { --acc:#9aa0a8; --acc-dk:#6c727b; } /* platino / acciaio */

/* accento locale a blocchi (usato in home: triptico + recap + megamenu) */
.t-eiffel { --acc:#ad8a57; --acc-dk:#8a6a3c; }
.t-maison { --acc:#6fa22a; --acc-dk:#567f1f; }
.t-empire { --acc:#9aa0a8; --acc-dk:#6c727b; }

/* --- Reset leggero --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
section[id], [data-anchor] { scroll-margin-top: 5.5rem; }

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}

/* --- Utilities --- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-3); }
.wrap-text { max-width: var(--maxw-text); }
.section { padding-block: var(--s-6); }
.section-sm { padding-block: var(--s-5); }
.section--tint { background: color-mix(in srgb, var(--acc) 7%, var(--paper)); }

.micro {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.micro::before { content: ""; width: 1.8em; height: 1px; background: var(--acc); display: inline-block; }
.micro--plain::before { display: none; }
.micro--dots::before { content: "· · · ·"; width:auto; height:auto; background:none; letter-spacing:.1em; color:var(--acc); }

.lead { font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.7; color: var(--ink-soft); }
.accent { color: var(--acc-dk); }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.eyebrow-num { font-family:var(--display); font-weight:700; color:var(--acc-dk); }

/* --- Bottoni --- */
.btn {
  font-family: var(--display); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 0.95em 1.6em; border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--paper); cursor: pointer;
  transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s;
}
.btn:hover { background: transparent; color: var(--ink); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--accent { background: var(--acc); border-color: var(--acc); color: var(--ink); }
.btn--accent:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn__arrow { transition: transform .4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ============================================================
   HEADER — nav + megamenu
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  --nav-fg: #ffffff;
  transition: background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid, .site-header.has-open {
  background: var(--paper); border-bottom-color: var(--line); --nav-fg: var(--ink);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: 1.05rem; }
.nav__logo img { height: 30px; width: auto; transition: filter .4s var(--ease); }
.site-header.is-solid .nav__logo img, .site-header.has-open .nav__logo img { filter: brightness(0) opacity(.88); }
.nav__menu { display: flex; gap: var(--s-3); align-items: center; }
.nav__menu > a, .nav__trigger {
  font-family: var(--display); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--nav-fg); background: none; border: 0; cursor: pointer;
  padding-block: 0.3em; position: relative; display: inline-flex; align-items: center; gap: .4em;
}
.nav__menu > a::after, .nav__trigger::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px;
  background: var(--acc); transition: width .35s var(--ease);
}
.nav__menu > a:hover::after, .nav__item:hover .nav__trigger::after, .nav__item.open .nav__trigger::after { width: 100%; }
.nav__caret { font-size: .62em; transition: transform .3s var(--ease); opacity:.8; }
.nav__item.open .nav__caret { transform: rotate(180deg); }
.nav__item { position: static; }
.nav__cta { border: 1px solid currentColor; border-radius: var(--radius); padding: .5em 1.1em !important; }
.nav__cta::after { display:none; }
.nav__burger { display: none; }

/* Megamenu / dropdown (full-width) */
.megamenu, .dropdown {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: 0 30px 48px -30px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.megamenu.open, .dropdown.open { opacity: 1; visibility: visible; transform: none; }
.megamenu__inner { max-width: var(--maxw); margin-inline: auto; padding: var(--s-4) var(--s-3); display: grid; gap: var(--s-4); grid-template-columns: repeat(3, 1fr); }
.mm-col { display: flex; flex-direction: column; }
.mm-col__head { display: block; margin-bottom: var(--s-3); }
.mm-col__media { aspect-ratio: 16/10; border-radius: var(--radius); margin-bottom: var(--s-3); }
.mm-col__num { font-family: var(--display); font-size: var(--fs-micro); letter-spacing: .28em; text-transform: uppercase; color: var(--acc-dk); font-weight: 700; }
.mm-col__name { font-family: var(--display); font-size: 1.5rem; font-weight: 600; display:block; margin-top: .1em; }
.mm-col__claim { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: .95rem; }
.mm-lab { font-family: var(--display); font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); display:block; margin: var(--s-3) 0 var(--s-1); padding-bottom:.4em; border-bottom:1px solid var(--line); }
.mm-links a, .dropdown a { font-family: var(--serif); font-size: .96rem; display: block; padding: .3em 0; color: var(--ink); transition: color .25s, padding-left .25s var(--ease); }
.mm-links a::before { content:"→"; color: var(--acc-dk); opacity:0; margin-right:.4em; transition: opacity .25s; font-family:var(--display); }
.mm-links a:hover, .dropdown a:hover { color: var(--acc-dk); padding-left: .3em; }
.mm-links a:hover::before { opacity:1; }
.dropdown__inner { max-width: var(--maxw); margin-inline: auto; padding: var(--s-3); display:grid; gap: var(--s-1) var(--s-4); grid-template-columns: repeat(3, auto); justify-content:start; }

/* Mobile nav overlay */
.mobile-nav { position: fixed; inset: 0; z-index: 80; background: var(--paper); display:flex; flex-direction:column; padding: var(--s-5) var(--s-3); transform: translateY(-100%); transition: transform .5s var(--ease); overflow-y:auto; }
.mobile-nav.open { transform: none; }
.mobile-nav__close { align-self:flex-end; background:none; border:0; font-family:var(--display); font-weight:600; font-size:1rem; cursor:pointer; }
.mobile-nav a { font-family: var(--display); font-size: 1.6rem; font-weight: 500; padding: .35em 0; border-bottom: 1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.mobile-nav a .n { font-size: .7rem; letter-spacing:.2em; color: var(--acc-dk); }
.mobile-nav .m-sub { font-size: 1rem; color: var(--ink-soft); border:0; padding:.2em 0 .2em var(--s-2); }

/* ============================================================
   HERO — full bleed
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--white); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,8,.74) 0%, rgba(10,10,8,.12) 46%, rgba(10,10,8,.42) 100%); }
.hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: var(--s-5); padding-top: calc(var(--header-h) + var(--s-4)); }
.hero__eyebrow { color: rgba(255,255,255,.85); margin-bottom: var(--s-3); }
.hero__title { font-size: var(--fs-mega); max-width: 15ch; }
.hero__sub { margin-top: var(--s-3); max-width: 46ch; font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: rgba(255,255,255,.9); }
.hero__actions { margin-top: var(--s-4); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.hero__actions .btn { background: var(--white); border-color: var(--white); color: var(--ink); }
.hero__actions .btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.hero__actions .btn--ghost:hover { background: var(--white); color: var(--ink); }
.hero__scroll { position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 2; font-family: var(--display); font-size: var(--fs-micro); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* ============================================================
   TRIPTICO — home (le 3 porte a tutta altezza)
   ============================================================ */
.triptico { display: flex; min-height: 100svh; }
.triptico__panel {
  position: relative; flex: 1; overflow: hidden; display: flex; align-items: flex-end;
  color: var(--white); text-decoration: none; border-right: 1px solid rgba(255,255,255,.14);
  transition: flex .6s var(--ease);
}
.triptico__panel:last-child { border-right: 0; }
.triptico__media { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); filter: grayscale(.82) brightness(.68); transition: filter .8s var(--ease), transform 1.3s var(--ease); }
.triptico__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,6,.86) 0%, rgba(8,8,6,.2) 55%, rgba(8,8,6,.5) 100%); }
.triptico__i { position: relative; z-index: 2; width: 100%; padding: var(--s-5) var(--s-3); }
.triptico__i::before { content: ""; display: block; width: 34px; height: 3px; background: var(--acc); margin-bottom: var(--s-3); transition: width .6s var(--ease); }
.triptico__label { font-family: var(--display); font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.triptico__name { font-family: var(--display); font-weight: 500; font-size: var(--fs-giant); line-height: .95; margin-top: var(--s-1); }
.triptico__claim { font-family: var(--serif); color: rgba(255,255,255,.92); margin-top: var(--s-2); max-width: 24ch; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.triptico__more { margin-top: var(--s-3); font-family: var(--display); font-weight: 600; font-size: .85rem; letter-spacing: .04em; display: inline-flex; gap: .6em; align-items: center; }
.triptico__more span { transition: transform .4s var(--ease); }
@media (min-width: 821px) {
  .triptico__panel:hover, .triptico__panel:focus-visible { flex: 1.75; }
  .triptico__panel:hover .triptico__media, .triptico__panel:focus-visible .triptico__media { filter: none; transform: scale(1.02); }
  .triptico__panel:hover .triptico__i::before, .triptico__panel:focus-visible .triptico__i::before { width: 64px; }
  .triptico__panel:hover .triptico__claim, .triptico__panel:focus-visible .triptico__claim { opacity: 1; transform: none; }
  .triptico__panel:hover .triptico__more span, .triptico__panel:focus-visible .triptico__more span { transform: translateX(5px); }
}
@media (max-width: 820px) {
  .triptico { flex-direction: column; min-height: auto; }
  .triptico__panel { min-height: 64svh; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .triptico__media { filter: grayscale(.35) brightness(.72); }
  .triptico__claim { opacity: 1; transform: none; }
}

/* ============================================================
   BLOCCHI DI CONTENUTO
   ============================================================ */
.split { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-img { grid-template-columns: 1.15fr 0.85fr; } .split.is-rev .split__media { order: 2; } }
.split__media { aspect-ratio: 4/5; background-size: cover; background-position: center; border-radius: var(--radius); }
.split__media--wide { aspect-ratio: 3/2; }
.block-title { font-size: var(--fs-h2); max-width: 22ch; margin-bottom: var(--s-3); }
.block-body p { margin: 0 0 var(--s-2); }

.section--dark { background: var(--ink); color: var(--paper); }
body.line-empire .section--dark { background: #191920; }
.section--dark .micro { color: rgba(255,255,255,.7); }
.section--dark .lead { color: rgba(255,255,255,.82); }
.section--dark .block-title { color: var(--paper); }
.section--dark .accent { color: var(--acc); }

/* Numeri / stats */
.stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, 1fr); } .stats--3 { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--paper); padding: var(--s-3); }
.section--dark .stats, .section--dark .stat { border-color: rgba(255,255,255,.12); background: transparent; }
.section--dark .stats { background: rgba(255,255,255,.1); }
.section--dark .stat { background: #1c1c16; }
body.line-empire .section--dark .stat { background: #202027; }
.stat__n { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 600; line-height: 1; }
.stat__n .u { font-size: .45em; color: var(--acc-dk); }
.section--dark .stat__n .u { color: var(--acc); }
.stat__l { font-family: var(--serif); font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--s-2); }
.section--dark .stat__l { color: rgba(255,255,255,.65); }

/* Tabella confronto */
.compare { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.compare th, .compare td { text-align: left; padding: var(--s-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--display); font-size: var(--fs-small); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.compare tbody th { font-family: var(--serif); font-weight: 400; color: var(--ink); width: 30%; }
.compare td.trad { color: var(--ink-soft); }
.compare .yes { color: var(--acc-dk); font-family: var(--display); font-weight: 600; }
.compare .col-yuno { background: color-mix(in srgb, var(--acc) 8%, transparent); }
.compare thead .col-yuno { color: var(--acc-dk); }

/* Decalogo (Eiffel) */
.decalogo { display: grid; gap: var(--s-5) var(--s-4); }
@media (min-width: 800px) { .decalogo { grid-template-columns: 1fr 1fr; } }
.deca-group__lab { margin-bottom: var(--s-2); }
.deca-item { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.deca-item__n { font-family: var(--display); font-weight: 700; color: var(--acc-dk); font-size: 1.05rem; }
.deca-item__t { font-family: var(--serif); line-height: 1.5; }
.deca-item__t b { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
.section--dark .deca-item { border-color: rgba(255,255,255,.14); }
.section--dark .deca-item__n { color: var(--acc); }

/* Matrix — i 3 piani di scelta (Maison) */
.matrix { display: grid; gap: var(--s-4); }
@media (min-width: 800px) { .matrix { grid-template-columns: repeat(3, 1fr); } }
.matrix__col h4 { font-family: var(--display); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .12em; padding-bottom: var(--s-2); border-bottom: 2px solid var(--acc); }
.matrix__col ul { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.matrix__col li { font-family: var(--serif); padding: .6em 0; border-bottom: 1px solid var(--line); }
.matrix__col li b { font-family: var(--display); font-weight: 600; }
.matrix__note { color: var(--ink-soft); font-size: var(--fs-small); margin-top: var(--s-2); font-style: italic; }
.section--dark .matrix__col li { border-color: rgba(255,255,255,.14); }
.section--dark .matrix__note { color: rgba(255,255,255,.6); }

/* Process — passi numerati */
.process { display: grid; }
.step { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); align-items: start; }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n { font-family: var(--display); font-weight: 700; color: var(--acc-dk); font-size: 1.35rem; line-height: 1; }
.step__t { font-family: var(--display); font-weight: 600; }
.step__d { font-family: var(--serif); color: var(--ink-soft); font-size: .96rem; margin-top: .2em; }
.section--dark .step { border-color: rgba(255,255,255,.14); }
.section--dark .step__n { color: var(--acc); }
.section--dark .step__d { color: rgba(255,255,255,.65); }

/* Quote — pull-quote editoriale */
.quote { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 3.6vw, 2.9rem); line-height: 1.3; max-width: 20ch; }
.quote--center { margin-inline: auto; text-align: center; max-width: 26ch; }
.quote__mark { color: var(--acc); font-style: normal; }
.quote__src { display: block; font-style: normal; font-family: var(--display); font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-top: var(--s-4); }
.section--dark .quote__src { color: rgba(255,255,255,.55); }

/* Deep-links — "approfondisci" (mirror megamenu inline) */
.deep-links { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.deep-links a { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3); font-family: var(--display); font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.deep-links a:hover { border-color: var(--acc); transform: translateY(-2px); }
.deep-links a .go { color: var(--acc-dk); transition: transform .3s var(--ease); }
.deep-links a:hover .go { transform: translateX(4px); }

/* Placeholder utility */
.ph { border: 1px dashed color-mix(in srgb, var(--acc) 40%, var(--line)); border-radius: var(--radius); padding: var(--s-3); display: flex; align-items: center; gap: .7em; color: var(--ink-soft); font-family: var(--display); font-size: var(--fs-small); font-weight: 500; }
.ph::before { content: "◇"; color: var(--acc-dk); }
.section--dark .ph { border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.6); }

/* Duotone image utility (background-image elements) */
.is-duotone { position: relative; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.02); transition: filter .7s var(--ease); }
.is-duotone::after { content: ""; position: absolute; inset: 0; background: var(--acc); mix-blend-mode: multiply; opacity: .18; transition: opacity .7s var(--ease); border-radius: inherit; }
.is-duotone.in, .is-duotone:hover, a:hover .is-duotone { filter: none; }
.is-duotone.in::after, .is-duotone:hover::after, a:hover .is-duotone::after { opacity: 0; }

/* Portfolio strip */
.portfolio { display: grid; gap: var(--s-2); }
@media (min-width: 700px) { .portfolio { grid-template-columns: repeat(3, 1fr); } }
.pf { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius); }
.pf img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: transform 1s var(--ease), filter .7s var(--ease); }
.pf:hover img { transform: scale(1.07); filter: none; }
.pf__cap { position: absolute; left: var(--s-2); bottom: var(--s-2); z-index: 2; color: var(--white); }
.pf__cap .t { font-family: var(--display); font-weight: 600; }
.pf__cap .s { font-family: var(--display); font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--white); border-bottom: 2px solid var(--acc); padding-bottom: 1px; }
.pf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,8,.62), transparent 55%); }

/* CTA finale */
.cta { text-align: center; }
.cta__title { font-size: var(--fs-h1); max-width: 18ch; margin: 0 auto var(--s-3); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: var(--paper); padding-block: var(--s-5) var(--s-3); }
.footer__top { display: grid; gap: var(--s-4); }
@media (min-width: 800px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer__logo img { height: 40px; width: auto; margin-bottom: var(--s-3); opacity: .95; }
.footer__col h4 { font-family: var(--display); font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: var(--s-2); font-weight: 600; }
.footer__col a { display: block; padding-block: .35em; color: rgba(255,255,255,.85); font-size: .95rem; transition: color .25s; }
.footer__col a:hover { color: var(--acc); }
.footer__bottom { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-small); color: rgba(255,255,255,.5); }

/* Badge demo */
.demo-flag { position: fixed; right: 12px; bottom: 12px; z-index: 999; background: var(--ink); color: var(--paper); font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; box-shadow: 0 4px 16px rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.14); }
.demo-flag b { color: var(--wasabi); }

/* ============================================================
   BRAND (wordmark testuale — no logo image)
   ============================================================ */
.nav__logo { display: inline-flex; align-items: center; gap: .55em; }
.brand { font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; color: var(--nav-fg); line-height: 1; }
.brand__tag { font-family: var(--display); font-weight: 500; font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: var(--nav-fg); opacity: .68; align-self: center; }
@media (max-width: 560px) { .brand__tag { display: none; } }
.footer__logo .brand { color: var(--paper); font-size: 1.7rem; }
.footer__logo .brand__tag { color: rgba(255,255,255,.6); }

/* ============================================================
   GALLERY — griglia immagini (duotone → colore su hover)
   ============================================================ */
.gallery { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery .g { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/3; display: block; }
.gallery .g img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: transform 1s var(--ease), filter .7s var(--ease); }
.gallery .g:hover img { transform: scale(1.06); filter: none; }
@media (min-width: 760px) { .gallery .g--wide { grid-column: span 2; aspect-ratio: 16/9; } .gallery .g--tall { grid-row: span 2; aspect-ratio: 3/4; } }

/* BAND — striscia immagine full-bleed */
.band { position: relative; min-height: 54vh; display: flex; align-items: flex-end; overflow: hidden; }
.band__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(.4) brightness(.72); transform: scale(1.03); }
.band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,6,.74) 0%, rgba(8,8,6,.1) 58%, rgba(8,8,6,.32) 100%); }
.band__i { position: relative; z-index: 2; color: var(--white); width: 100%; padding-block: var(--s-5); }
.band .micro { color: rgba(255,255,255,.85); }
.band__title { font-family: var(--display); font-weight: 500; font-size: var(--fs-h1); max-width: 20ch; margin-top: var(--s-2); }
.band__sub { font-family: var(--serif); color: rgba(255,255,255,.9); max-width: 44ch; margin-top: var(--s-2); }

/* MATRIX — immagine di testata colonna */
.matrix__img { aspect-ratio: 16/10; border-radius: var(--radius); margin-bottom: var(--s-3); }

/* ============================================================
   RESPONSIVE — nav mobile
   ============================================================ */
@media (max-width: 900px) {
  .nav__menu { display: none; }
  .nav__burger { display: inline-flex; font-family: var(--display); font-weight: 600; font-size: .9rem; background: none; border: 0; color: var(--nav-fg); cursor: pointer; letter-spacing: .04em; }
  .megamenu__inner { grid-template-columns: 1fr; }
}
@media (min-width: 901px) { .mobile-nav { display: none; } }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero__bg, .triptico__media { transform: none; }
  .triptico__panel, .triptico__media, .triptico__claim { transition: none; }
}