:root {
  --accent: #D11D12;
  --bg: #F5F3EC;
  --fg: #15141A;
  --border: rgba(21, 20, 26, 0.14);
  --font-display: "Jost", "Futura", system-ui, sans-serif;
  --font-sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Jost", system-ui, sans-serif;
  --cream-2: #ECEBE6;
  --cream-3: #DAD9D4;
  --bone: #FAFAF8;
  --ink-2: #33333A;
  --ink-3: #4A4A52;
  --muted: #6E6E78;
  --gold: #D11D12;
  --gold-deep: #A8160D;
  --accent-deep: #A8160D;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --container: 1600px;
  --gutter: 32px;
  --radius: 6px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html,
body {
  margin: 0;
  padding: 0;
}

.site,
.site * {
  box-sizing: border-box;
}

.site {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.site a {
  color: inherit;
  text-decoration: none;
}

.site img {
  display: block;
  max-width: 100%;
  height: auto;
}

.site button,
.site input,
.site textarea,
.site select {
  font: inherit;
}

.site button {
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
}

.ve-container {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
}

.ve-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.ve-brand img {
  display: block;
  height: 50px;
  width: auto;
}

.ve-nav {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  min-height: 72px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-6);
}

.ve-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

.ve-brand b {
  color: var(--accent);
  font-weight: 600;
}

.ve-mark {
  width: 34px;
  height: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--fg);
  background: var(--bg);
}

.ve-mark i {
  display: block;
  border: 1px solid var(--fg);
}

.ve-mark i:nth-child(2) {
  background: var(--accent);
  border-color: var(--accent);
}

.ve-menu {
  display: flex;
  justify-content: center;
  gap: var(--s-1);
}

.ve-menu a {
  position: relative;
  padding: 10px 14px;
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .25s var(--ease);
}

.ve-menu a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 100%;
  bottom: 6px;
  height: 1px;
  background: var(--accent);
  transition: right .3s var(--ease);
}

.ve-menu a:hover,
.ve-menu a.is-active {
  color: var(--accent);
}

.ve-menu a:hover::after,
.ve-menu a.is-active::after {
  right: 14px;
}

.ve-nav-cta,
.ve-btn,
.ve-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

.ve-nav-cta {
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
}

.site .ve-nav-cta {
  color: var(--bg);
}

.ve-nav-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.ve-btn::after,
.ve-nav-cta::after,
.ve-submit::after {
  content: "→";
}

.ve-hero {
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--fg);
}

.ve-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 86vh;
}

/* Hero compatto per le pagine interne: meno altezza, titolo piu' piccolo,
   testo centrato verticalmente (le pagine hanno poche informazioni). */
.ve-hero-compact .ve-hero-grid {
  min-height: 46vh;
}

.ve-hero-compact .ve-hero-text {
  justify-content: center;
  padding: var(--s-7) var(--s-8);
}

.ve-hero-compact h1 {
  margin: 0 0 var(--s-5);
  font-size: 64px;
}

.ve-hero-compact .ve-hero-sub {
  margin-bottom: var(--s-5);
}

.ve-hero-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: var(--s-9) var(--s-8) var(--s-7);
  border-right: 1px solid var(--fg);
  background: var(--bg);
}

.ve-hero-eye {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ve-hero-eye i {
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.ve-hero h1 {
  max-width: 22ch;
  margin: 28px 0 var(--s-6);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

/* L'accento del titolo hero resta nel font del titolo (stessa
   dimensione, maiuscolo) ma in corsivo e rosso: integrato nel titolo,
   non piu' font sans piu' piccolo e a capo. */
.ve-hero h1 em,
.ve-hero h1 span {
  font-style: italic;
}

.ve-section h2 em,
.ve-about-text h3 em {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.ve-hero h1 em,
.ve-hero h1 span {
  color: var(--accent);
}

.ve-hero-sub {
  max-width: 48ch;
  margin-bottom: var(--s-6);
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.55;
}

.ve-hero-sub p {
  margin: 0;
}

.ve-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.ve-btn-primary {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
}

.site .ve-btn-primary {
  color: var(--bg);
}

.ve-btn-primary:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  transform: translateY(-2px);
}

.site .ve-btn-primary:hover {
  color: var(--bg);
}

.ve-btn-outline {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg);
}

.site .ve-btn-outline {
  color: var(--fg);
}

.ve-btn-outline:hover {
  background: var(--fg);
  color: var(--bg);
  transform: translateY(-2px);
}

.site .ve-btn-outline:hover {
  color: var(--bg);
}

.ve-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 56px;
  align-items: end;
  margin-top: 56px;
  padding-top: var(--s-6);
  border-top: 1px solid var(--fg);
}

.ve-hero-cell b {
  display: block;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
}

.ve-hero-cell:first-child b {
  color: var(--accent);
}

.ve-hero-cell span {
  display: block;
  margin-top: 10px;
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.35;
  text-transform: uppercase;
}

.ve-hero-image {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: var(--fg);
}

.ve-hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 10s linear;
}

.ve-hero.is-on .ve-hero-image img {
  transform: scale(1);
}

.ve-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(21, 20, 26, .56));
}

.ve-hero-tag {
  position: absolute;
  left: var(--s-5);
  bottom: var(--s-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ve-hero-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.ve-trust {
  position: relative;
  overflow: hidden;
  padding: 36px 0;
  background: var(--cream-2);
  border-bottom: 1px solid var(--border);
}

.ve-trust::before,
.ve-trust::after,
.ve-partner-marquee::before,
.ve-partner-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 140px;
  pointer-events: none;
}

.ve-trust::before {
  left: 0;
  background: linear-gradient(90deg, var(--cream-2), transparent);
}

.ve-trust::after {
  right: 0;
  background: linear-gradient(270deg, var(--cream-2), transparent);
}

.ve-trust-label {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  transform: translate(-50%, -50%);
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.ve-marquee {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 80px;
  animation: ve-slide 44s linear infinite;
}

.ve-trust-item,
.ve-partner-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-5);
  white-space: nowrap;
}

.ve-trust-logo,
.ve-partner-item span {
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.ve-trust-quote,
.ve-partner-item em {
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 19px;
  font-style: italic;
}

.ve-dot,
.ve-partner-item i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
}

@keyframes ve-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Clienti: slider (sostituisce il marquee) ───────────────── */
.ve-clients {
  margin: var(--s-7) 0 var(--s-7);
}

.ve-clients-viewport {
  overflow: hidden;
}

.ve-clients-track {
  display: flex;
  gap: var(--s-5);
  transition: transform .55s var(--ease);
  will-change: transform;
}

.ve-clients .ve-client-slide {
  position: relative;
  flex: 0 0 calc((100% - (var(--s-5) * 4)) / 5);
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 24px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bone);
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: inherit;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.ve-clients .ve-client-slide:hover {
  border-color: var(--fg);
  background: var(--bg);
}

.ve-client-slide.has-project::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.ve-client-slide.has-project:hover::after {
  opacity: 1;
}

.ve-client-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.ve-client-more i {
  font-style: normal;
  transition: transform 0.25s var(--ease);
}

.ve-client-slide:hover .ve-client-more i {
  transform: translateX(4px);
}

.ve-client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ve-client-logo img {
  max-height: 48px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}

.ve-clients .ve-client-slide:hover .ve-client-logo img {
  filter: grayscale(0);
  opacity: 1;
}

.ve-client-name {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.04;
  text-align: center;
  text-transform: uppercase;
}

.ve-client-modal-logo {
  display: flex;
  align-items: center;
  height: 80px;
  margin-bottom: var(--s-4);
}

.ve-client-modal-logo img {
  max-height: 72px;
  max-width: 60%;
  object-fit: contain;
  object-position: left center;
}

.ve-client-modal-work {
  margin: 0;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.55;
}

.ve-clients-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.ve-client-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 128px;
  padding: 28px 24px;
  background: var(--bone);
  border: 0;
  cursor: pointer;
  font: inherit;
  transition: background 0.2s var(--ease);
}

.ve-client-cell:hover {
  background: var(--cream-2);
}

.ve-client-cell img {
  max-height: 50px;
  max-width: 78%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}

.ve-client-cell:hover img {
  filter: grayscale(0);
  opacity: 1;
}

.ve-client-cell-name {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.ve-client-cell.has-project::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.ve-client-cell.has-project:hover::after {
  opacity: 1;
}

@media (max-width: 760px) {
  .ve-clients-wall {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }
  .ve-client-cell {
    min-height: 104px;
    padding: 20px 16px;
  }
  .ve-client-cell img {
    max-height: 40px;
  }
}

.ve-brands .ve-section-head {
  margin-bottom: var(--s-6);
}

.ve-brand-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}

.ve-brand-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bone);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

a.ve-brand-cell:hover {
  border-color: var(--fg);
  transform: translateY(-3px);
}

.ve-brand-cell img {
  max-height: 66px;
  max-width: 80%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.78;
  transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}

a.ve-brand-cell:hover img {
  filter: grayscale(0);
  opacity: 1;
}

.ve-brand-cell > span {
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--fg);
}

.ve-brand-go {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

a.ve-brand-cell:hover .ve-brand-go {
  opacity: 1;
}

@media (max-width: 980px) {
  .ve-brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .ve-brand-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ve-brand-cell {
    min-height: 120px;
    padding: var(--s-4);
  }
}

.ve-client-work {
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

.ve-clients-nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: var(--s-5);
}

.ve-clients-arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fg);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 18px;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.ve-clients-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

@media (max-width: 980px) {
  .ve-clients .ve-client-slide { flex-basis: calc((100% - (var(--s-5) * 2)) / 3); }
}

@media (max-width: 640px) {
  .ve-clients .ve-client-slide { flex-basis: calc((100% - var(--s-5)) / 2); }
}

.ve-section {
  position: relative;
  padding: 120px 0;
}

.ve-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1.3fr);
  gap: 60px;
  align-items: end;
  margin-bottom: 72px;
}

.ve-eye {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(245, 243, 236, .5);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

.ve-eye i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Eyebrow piu' grande e leggibile nella sezione Chi siamo. */
.ve-about .ve-eye {
  font-size: 14px;
  letter-spacing: .1em;
  padding: 10px 18px 10px 14px;
}

.ve-about .ve-eye i {
  width: 9px;
  height: 9px;
}

.ve-section h2 {
  margin: 18px 0 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 74px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.ve-lede {
  max-width: 54ch;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.65;
}

.ve-lede p {
  margin: 0 0 var(--s-4);
}

.ve-about,
.ve-products {
  background: var(--bg);
}

.ve-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}

.ve-about-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--fg);
  box-shadow: 0 30px 60px -20px rgba(21, 20, 26, .3);
}

.ve-about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ve-about-photo figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 10px 14px;
  background: var(--bg);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ve-about-text h3 {
  margin: 0 0 var(--s-5);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.04;
  text-transform: uppercase;
}

.ve-about-text h3 em {
  color: var(--accent);
}

.ve-about-text p {
  max-width: 58ch;
  margin: 0 0 var(--s-4);
  color: var(--ink-2);
}

.ve-signature {
  color: var(--accent) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ve-about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--s-7);
  overflow: hidden;
  border: 1px solid var(--fg);
  border-radius: var(--radius);
}

.ve-about-stats div {
  min-height: 116px;
  padding: 22px 18px;
  background: var(--bone);
  border-right: 1px solid var(--border);
}

.ve-about-stats div:last-child {
  border-right: 0;
}

.ve-about-stats b {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1;
}

.ve-about-stats span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ve-services,
.ve-partners {
  background: var(--cream-2);
}

.ve-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.ve-service-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 34px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bone);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}

.ve-service-card:hover {
  border-color: var(--fg);
  transform: translateY(-4px);
}

.ve-service-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  color: var(--accent);
}

.ve-service-icon svg {
  width: 100%;
  height: 100%;
}

.ve-service-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}

.ve-service-desc {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.ve-service-desc p {
  margin: 0;
}

.ve-badge {
  display: inline-flex;
  margin-bottom: var(--s-2);
  padding: 4px 10px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ve-arrow {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.ve-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

.ve-product-card {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--fg);
  box-shadow: 0 20px 50px -20px rgba(21, 20, 26, .25);
  transition: transform .45s var(--ease);
  cursor: pointer;
  text-align: left;
}

.ve-product-card:hover {
  transform: translateY(-6px);
}

.ve-product-card.is-featured {
  grid-column: 1 / -1;
  min-height: 560px;
}

.ve-product-img,
.ve-product-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ve-product-img img {
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.ve-product-card:hover .ve-product-img img {
  transform: scale(1.04);
}

.ve-product-img::after,
.ve-case-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 20, 26, .08) 0%, rgba(21, 20, 26, .82) 100%);
}

.ve-product-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--s-6);
  color: var(--bg);
}

.ve-product-k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ve-product-k::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.ve-product-body h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 500;
  line-height: 1.02;
  text-transform: uppercase;
}

.ve-product-card.is-featured .ve-product-body h3 {
  font-size: 54px;
}

.ve-product-body p {
  max-width: 52ch;
  margin: 0 0 var(--s-3);
  color: rgba(245, 243, 236, .82);
  font-size: 16px;
  line-height: 1.5;
}

.ve-product-cta {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--bg);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.site .ve-product-cta {
  color: var(--bg);
}

.ve-product-cta::after {
  content: "→";
  color: var(--gold);
}

.ve-product-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ve-product-card.is-featured .ve-product-badge {
  background: var(--gold);
  color: var(--fg);
}

.ve-partner-marquee {
  position: relative;
  margin: var(--s-7) 0 var(--s-8);
  overflow: hidden;
  background: var(--fg);
  color: var(--bg);
  padding: 40px 0;
}

.ve-partner-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--fg), transparent);
}

.ve-partner-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--fg), transparent);
}

.ve-marquee-dark {
  color: var(--bg);
  animation-duration: 52s;
}

.ve-marquee-dark span {
  color: var(--bg);
}

.ve-marquee-dark em {
  color: rgba(245, 243, 236, .8);
}

.ve-marquee-dark i {
  background: var(--gold);
}

.ve-case-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.ve-case-card {
  position: relative;
  min-height: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--fg);
  text-align: left;
  transition: transform .4s var(--ease);
}

.ve-case-card:hover {
  transform: translateY(-4px);
}

.ve-case-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.ve-case-card:hover img {
  transform: scale(1.06);
}

.ve-case-info {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  color: var(--bg);
}

.ve-case-info b {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
}

.ve-case-info small {
  display: block;
  margin-top: 6px;
  color: rgba(245, 243, 236, .78);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ve-case-open {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bg);
  border-radius: 50%;
  background: rgba(21, 20, 26, .4);
  color: var(--bg);
  opacity: 0;
  transition: opacity .25s var(--ease);
}

.ve-case-card:hover .ve-case-open {
  opacity: 1;
}

.ve-contact {
  overflow: hidden;
  background: var(--fg);
  color: var(--bg);
}

.ve-contact .ve-section-head,
.ve-contact .ve-lede,
.ve-contact .ve-eye {
  color: var(--bg);
}

.ve-contact .ve-section h2,
.ve-contact h2 {
  color: var(--bg);
}

.ve-contact .ve-eye {
  background: rgba(245, 243, 236, .04);
  border-color: rgba(245, 243, 236, .16);
}

.ve-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1.1fr);
  gap: var(--s-8);
  align-items: start;
}

.ve-contact-info {
  display: grid;
  border: 1px solid rgba(245, 243, 236, .16);
  border-radius: var(--radius);
  background: rgba(245, 243, 236, .03);
}

.ve-contact-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--s-5);
  align-items: baseline;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(245, 243, 236, .12);
  transition: background .3s var(--ease);
}

.site .ve-contact-row {
  color: inherit;
}

.ve-contact-row:last-child {
  border-bottom: 0;
}

.ve-contact-row:hover {
  background: rgba(245, 243, 236, .05);
}

.ve-contact-row span {
  color: rgba(245, 243, 236, .62);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ve-contact-row b {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}

.ve-contact-row i {
  color: var(--gold);
  font-style: normal;
}

.ve-contact-form,
.ve-lead-form {
  display: grid;
  gap: 18px;
}

.ve-contact-form {
  padding: 36px;
  border: 1px solid rgba(245, 243, 236, .16);
  border-radius: var(--radius);
  background: rgba(245, 243, 236, .04);
  backdrop-filter: blur(8px);
}

.ve-contact-form h3,
.ve-lead-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}

.ve-contact-form p,
.ve-lead-body p {
  margin: 0;
  color: rgba(245, 243, 236, .72);
  font-size: 15px;
}

.ve-contact-form label,
.ve-lead-form label {
  display: grid;
  gap: 6px;
  color: rgba(245, 243, 236, .62);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ve-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ve-contact-form input,
.ve-contact-form select,
.ve-contact-form textarea,
.ve-lead-form input,
.ve-lead-form select,
.ve-lead-form textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(245, 243, 236, .24);
  border-radius: 4px;
  background: transparent;
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 15px;
}

.ve-contact-form input:focus,
.ve-contact-form select:focus,
.ve-contact-form textarea:focus,
.ve-lead-form input:focus,
.ve-lead-form select:focus,
.ve-lead-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.ve-contact-form input::placeholder,
.ve-contact-form textarea::placeholder,
.ve-lead-form input::placeholder,
.ve-lead-form textarea::placeholder {
  color: rgba(245, 243, 236, .42);
}

.ve-check {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
  letter-spacing: .04em !important;
  text-transform: none !important;
}

.ve-check input {
  width: auto !important;
  margin-top: 3px;
}

.ve-submit {
  width: 100%;
  border: 0;
  background: var(--gold);
  color: var(--bg);
}

.ve-submit:hover {
  background: var(--fg);
  color: var(--bg);
  transform: translateY(-2px);
}

.ve-form-status {
  min-height: 18px;
  color: var(--gold) !important;
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.ve-footer {
  padding: 72px var(--gutter) var(--s-6);
  background: var(--cream-2);
  border-top: 1px solid var(--border);
}

.ve-footer-top {
  width: min(var(--container), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--border);
}

.ve-footer h2 {
  max-width: 15ch;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.04;
  text-transform: uppercase;
}

.ve-footer p {
  max-width: 36ch;
  margin: 0;
  color: var(--muted);
  font-style: italic;
}

.ve-footer h5 {
  margin: 0 0 14px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ve-footer a {
  display: block;
  padding: 5px 0;
  color: var(--ink-2);
  font-size: 15px;
}

.ve-footer a:hover {
  color: var(--accent);
}

.ve-footer-bottom {
  width: min(var(--container), 100%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: 28px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Bolla WhatsApp flottante: unico verde del sito, tenuto piccolo e
   staccato dal resto. Vive nel footer ma e' fixed, quindi accompagna il
   visitatore su ogni pagina. Sotto al lead-popup (z-index 200), cosi' il
   popup la copre invece di litigarci. */
.site .ve-wa {
  position: fixed;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 56px;
  height: 56px;
  display: block;
  padding: 0;
  color: var(--fg);
  font-size: inherit;
}

.ve-wa-dot {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 10px 26px rgba(21, 20, 26, .26);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

/* Il glifo ufficiale riempie tutta la viewBox 24x24 (contorno della
   nuvoletta compreso): dentro il cerchio va tenuto sul 55% del diametro,
   altrimenti tocca i bordi. */
.ve-wa-dot svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

/* L'etichetta resta muta finche' non serve: appare al passaggio del
   mouse, scorrendo da destra. Sui dispositivi touch non compare mai.
   E' in assoluto (e non un fratello in flex) perche' altrimenti la sua
   larghezza allargherebbe l'area cliccabile della bolla anche da
   invisibile, rubando i click al contenuto sotto. */
.ve-wa-label {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 12px;
  padding: 9px 14px;
  border-radius: var(--radius);
  background: var(--bone);
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(21, 20, 26, .12);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(8px, -50%);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .site .ve-wa:hover .ve-wa-label,
  .site .ve-wa:focus-visible .ve-wa-label {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

.site .ve-wa:hover .ve-wa-dot {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(21, 20, 26, .32);
}

.site .ve-wa:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 999px;
}

@media (max-width: 720px) {
  .site .ve-wa {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
  }

  .ve-wa-dot svg {
    width: 28px;
    height: 28px;
  }

  .ve-wa-label {
    display: none;
  }
}

@media print {
  .site .ve-wa {
    display: none;
  }
}

/* Lo switcher di lingua lo mette la piattaforma, in basso a DESTRA: la
   stessa casella della bolla WhatsApp. Misurato: a 375px le due aree si
   sovrappongono quasi del tutto, a 1280px per un terzo. Su questo sito lo
   spostiamo a sinistra, a ogni larghezza (a schermo grande il problema e'
   identico). Il selettore parte da `body` apposta: nel deploy la CSS dello
   switcher viene appesa DOPO theme.css, quindi con la sola classe, a
   parita' di specificita', vincerebbe quella della piattaforma. */
body .gm-langnav {
  right: auto;
  left: 16px;
}

.ve-modal,
.ve-lead-pop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: rgba(21, 20, 26, .84);
  backdrop-filter: blur(10px);
}

.ve-modal.is-open,
.ve-lead-pop.is-open {
  display: flex;
}

.ve-modal-card,
.ve-lead-card {
  width: min(100%, 980px);
  max-height: 92vh;
  overflow: auto;
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 40px 100px rgba(21, 20, 26, .5);
}

.ve-modal-card {
  position: relative;
}

.ve-client-modal .ve-modal-card {
  width: min(100%, 540px);
}

.ve-modal-close,
.ve-lead-close {
  position: absolute;
  z-index: 5;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fg);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 22px;
}

.ve-modal-close {
  top: 16px;
  right: 16px;
}

.ve-modal-close:hover,
.ve-lead-close:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.ve-modal-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--fg);
}

.ve-modal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ve-modal-img span,
.ve-modal-img em {
  position: absolute;
  top: 18px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ve-modal-img span {
  left: 18px;
  background: var(--bg);
}

.ve-modal-img em {
  right: 18px;
  background: var(--gold);
}

.ve-modal-body {
  padding: 36px 32px;
}

.ve-modal-k {
  display: block;
  margin-bottom: 14px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ve-modal-body h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.ve-modal-body p {
  max-width: 68ch;
  margin: 0 0 14px;
  color: var(--ink-2);
}

.ve-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--s-5);
  overflow: hidden;
  border: 1px solid var(--fg);
  border-radius: var(--radius);
}

.ve-modal-stats div {
  padding: 18px;
  background: var(--bone);
  border-right: 1px solid var(--border);
}

.ve-modal-stats div:last-child {
  border-right: 0;
}

.ve-modal-stats b {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
}

.ve-modal-stats span {
  display: block;
  margin-top: var(--s-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ve-lead-card {
  position: relative;
  max-width: 580px;
}

.ve-lead-flag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 11px 18px;
  background: var(--gold);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ve-lead-close {
  position: static;
  width: 30px;
  height: 30px;
  border-color: transparent;
  background: transparent;
}

.ve-lead-band {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 16px 22px;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ve-lead-band b {
  color: var(--gold);
  font-weight: 500;
}

.ve-lead-body {
  padding: 32px 28px 28px;
}

.ve-lead-body p,
.ve-lead-form label {
  color: var(--ink-2);
}

.ve-lead-body h3 {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}

.ve-lead-form input,
.ve-lead-form select,
.ve-lead-form textarea {
  border-color: var(--border);
  background: var(--bone);
  color: var(--fg);
}

.ve-lead-sent {
  margin-top: var(--s-3);
  padding: 22px;
  border-radius: var(--radius);
  background: var(--fg);
  color: var(--bg);
  text-align: center;
}

.ve-lead-sent b,
.ve-lead-sent strong,
.ve-lead-sent span {
  display: block;
}

.ve-lead-sent b {
  color: var(--gold);
  font-size: 34px;
}

.ve-lead-sent strong {
  margin: 4px 0;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ve-lead-sent span {
  color: rgba(245, 243, 236, .82);
  font-style: italic;
}

.ve-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.ve-reveal.is-in {
  opacity: 1;
  transform: none;
}

[hidden] {
  display: none !important;
}

@media (max-width: 1100px) {
  :root {
    --gutter: 24px;
  }

  .ve-menu {
    display: none;
  }

  .ve-nav {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .ve-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ve-hero-text {
    padding: var(--s-8) var(--s-6) var(--s-7);
    border-right: 0;
    border-bottom: 1px solid var(--fg);
  }

  .ve-hero h1 {
    font-size: 64px;
  }

  .ve-hero-image {
    min-height: 54vh;
  }

  .ve-section-head,
  .ve-about-grid,
  .ve-contact-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .ve-section h2 {
    font-size: 58px;
  }

  .ve-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ve-product-grid,
  .ve-product-card.is-featured {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .ve-case-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ve-footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  :root {
    --gutter: 18px;
  }

  .ve-nav {
    min-height: 64px;
  }

  .ve-brand {
    font-size: 15px;
  }

  .ve-mark {
    width: 30px;
    height: 30px;
  }

  .ve-nav-cta {
    padding: 10px 14px;
    font-size: 10px;
    letter-spacing: .08em;
  }

  .ve-hero-text {
    padding: var(--s-7) var(--s-5) var(--s-6);
  }

  .ve-hero h1 {
    font-size: 46px;
  }

  .ve-hero-sub {
    font-size: 16px;
  }

  .ve-hero-meta {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    margin-top: var(--s-6);
  }

  .ve-hero-cell b {
    font-size: 28px;
  }

  .ve-hero-cell span {
    font-size: 9px;
  }

  .ve-hero-image {
    min-height: 48vh;
  }

  .ve-section {
    padding: 76px 0;
  }

  .ve-section h2 {
    font-size: 40px;
  }

  .ve-about-text h3 {
    font-size: 34px;
  }

  .ve-about-stats {
    grid-template-columns: 1fr 1fr;
  }

  .ve-service-grid {
    grid-template-columns: 1fr;
  }

  .ve-product-card,
  .ve-product-card.is-featured {
    min-height: 420px;
  }

  .ve-product-body h3,
  .ve-product-card.is-featured .ve-product-body h3 {
    font-size: 32px;
  }

  .ve-case-grid,
  .ve-field-row,
  .ve-footer-top,
  .ve-modal-stats {
    grid-template-columns: 1fr;
  }

  .ve-contact-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .ve-footer {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .ve-lead-band {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site *,
  .site *::before,
  .site *::after {
    animation: none !important;
    transition: none !important;
  }

  .ve-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* blocco override trust */
.ve-trust{position:relative;padding:var(--s-7) 0 var(--s-6);background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));overflow:hidden}.ve-trust-label{display:inline-flex;align-items:center;gap:.55em;margin:0 auto var(--s-3);padding:.55em 1.05em;border:1px solid color-mix(in srgb,var(--fg) 12%,transparent);border-radius:999px;background:color-mix(in srgb,var(--bg) 92%,white);color:var(--fg);font:600 0.75rem/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 10px 30px rgba(11,11,12,.04)}.ve-trust-label::before{content:'';width:.45rem;height:.45rem;border-radius:999px;background:var(--rosso,var(--accent-2,var(--accent)))}.ve-trust-rail{position:relative;padding:1rem 0}.ve-trust-fade{position:absolute;top:0;bottom:0;width:clamp(2rem,8vw,6rem);pointer-events:none;z-index:2}.ve-trust-fade--left{left:0;background:linear-gradient(90deg,var(--bg) 18%,rgba(244,241,236,0))}.ve-trust-fade--right{right:0;background:linear-gradient(270deg,var(--bg) 18%,rgba(244,241,236,0))}.ve-marquee{display:flex;align-items:center;gap:1rem;width:max-content;animation:ve-trust-scroll 26s linear infinite;padding-inline:clamp(1rem,4vw,2.5rem)}.ve-trust-item{display:inline-flex;align-items:center;gap:.9rem;padding:.8rem 1.05rem;border:1px solid color-mix(in srgb,var(--fg) 10%,transparent);border-radius:999px;background:rgba(255,255,255,.58);backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(11,11,12,.05);white-space:nowrap}.ve-trust-logo{font:700 0.75rem/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}.ve-trust-sep{width:1.6rem;height:1px;background:color-mix(in srgb,var(--fg) 25%,transparent);flex:0 0 auto}.ve-trust-quote{font:italic 400 0.75rem/1.15 var(--font-display);color:color-mix(in srgb,var(--fg) 78%,var(--rosso,var(--accent)) 22%)}@keyframes ve-trust-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}@media (max-width: 720px){.ve-trust{padding:var(--s-6) 0 var(--s-5)}.ve-trust-label{margin-bottom:var(--s-2)}.ve-trust-rail{padding-top:.5rem}.ve-marquee{gap:.75rem;animation-duration:18s}.ve-trust-item{padding:.72rem .9rem}.ve-trust-sep{width:1rem}}

/* blocco override contact */
.ve-contact-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
}
.ve-contact-row i{display:none;}
.ve-contact-row b{margin-left:auto;}
.ve-contact-form .ve-submit{
  width:100%;
  min-height:54px;
  border:1px solid var(--bg);
  background:transparent;
  color:var(--bg);
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:none;
  transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ve-contact-form .ve-submit:hover,
.ve-contact-form .ve-submit:focus-visible{
  background:var(--bg);
  color:var(--fg);
  border-color:var(--bg);
  transform:scale(1.03);
}
.ve-contact-form .ve-submit:active{
  transform:scale(1.01);
}
.ve-contact-form .ve-submit:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bg) 18%, transparent);
}

/* blocco override products */
/* ── Modal del catalogo e dei progetti: rifiniture Spazio Milano ──
   1) margine garantito tutt'intorno, anche in basso, sempre
   2) testo lungo: si restringe l'IMMAGINE (fino a un limite), poi
      scorre il corpo; la card non sfora mai il viewport
   3) X come bottone pieno, visibile su qualunque immagine e sempre a
      portata mentre si scorre (scrolla il corpo, non la card) */

.ve-modal {
  padding: clamp(20px, 4vh, 44px) clamp(16px, 3vw, 40px);
}

.ve-modal-card {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
}

.ve-modal-img {
  flex: 0 1 auto;
  aspect-ratio: auto;
  height: min(42vh, 430px);
  min-height: 220px;
}

.ve-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Il reset .site button del tema vince sullo sfondo: il bottone X
   va dichiarato con .site davanti per avere sempre la meglio. */
.site .ve-modal-close,
.site .ve-lead-close {
  width: 40px;
  height: 40px;
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
  box-shadow: 0 6px 18px rgba(21, 20, 26, 0.35);
}

.site .ve-modal-close:hover,
.site .ve-lead-close:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

@media (max-width: 680px) {
  .ve-modal {
    padding: 14px;
  }
  .ve-modal-img {
    height: min(34vh, 300px);
    min-height: 150px;
  }
  .ve-modal-body {
    padding: 26px 20px;
  }
}

/* Corpo del modal: colonna del testo con piu' aria, un filo a sinistra
   del centro per usare meglio lo spazio. */
.ve-product-modal .ve-modal-body {
  padding: 42px clamp(48px, 10%, 110px) 48px clamp(36px, 7%, 76px);
}

.ve-product-modal .ve-modal-body p {
  max-width: 62ch;
}

/* blocco override brands */
/* I brand usano lo slider dei clienti: le celle-link senza sottolineatura. */
.ve-brands .ve-client-slide {
  text-decoration: none;
}

/* blocco override partners */
/* Variante griglia dei clienti: pulita, senza riquadri ne' linee. */
.ve-partners .ve-clients-wall {
  margin: var(--s-7) 0;
  gap: var(--s-5) var(--s-6);
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.ve-partners .ve-client-cell {
  min-height: 104px;
  padding: 14px 10px 12px;
  background: transparent;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ve-partners .ve-client-cell:hover {
  background: transparent;
}

.ve-partners .ve-client-cell img {
  max-height: 56px;
  max-width: 82%;
}

.ve-partners .ve-client-cell-name,
.ve-partners .ve-client-name,
.ve-partners .ve-client-logo {
  flex: 0 0 auto;
}

.ve-partners .ve-client-logo,
.ve-partners .ve-client-cell-name {
  margin-top: 18px;
}

.ve-partners .ve-client-cell img {
  margin-top: 18px;
}

/* Niente pallino sui clienti con progetto: il modal si scopre al click. */
.ve-client-slide.has-project::after,
.ve-client-cell.has-project::after {
  display: none;
}

/* Etichetta "tag" sotto il logo o il nome. */
.ve-partners .ve-client-tag {
  display: block;
  margin-top: auto;
  padding-top: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  min-height: 1em;
}

.ve-partners .ve-client-cell:hover .ve-client-tag,
.ve-partners .ve-client-slide:hover .ve-client-tag {
  color: var(--accent);
}

/* blocco override editorial */
/* Chi siamo senza testata: l'eyebrow vive sopra la frase forte. */
.ve-about-text .ve-eye {
  margin-bottom: var(--s-5);
}

/* Didascalia della foto IDENTICA alla targhetta del hero: puntino
   rosso e testo bianco direttamente sull'immagine, niente scatola. */
.ve-about-photo figcaption {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ve-about-photo figcaption::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .ve-about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .ve-about-text {
    display: contents;
  }

  .ve-about-text .ve-eye {
    order: 1;
    margin-bottom: 0;
    /* display:contents promuove la pill a grid item: senza questo
       si stira a tutta la colonna (il bubble largo). */
    justify-self: start;
  }

  .ve-about-text h3 {
    order: 2;
    margin-bottom: 0;
  }

  .ve-about-photo {
    order: 3;
    margin: 0;
  }

  .ve-about-text > :is(p:not(.ve-signature), .ve-signature, .ve-about-stats) {
    order: 4;
  }

  .ve-about-text .ve-about-stats {
    order: 5;
  }
}

/* blocco override hero */
/* Il corsivo di TEMA sul titolo del hero e' spento: la seconda riga
   non e' piu' in italic per design. Ma il corsivo scelto DALL'UTENTE
   coi marcatori (*testo*) deve vincere: vive in un em annidato. */
.ve-hero h1 em,
.ve-hero h1 span {
  font-style: normal;
}

.ve-hero h1 em em,
.ve-hero h1 span em,
.ve-hero h1 gm-t em {
  font-style: italic;
}


/* Hero senza animazione di comparsa: above-the-fold visibile SUBITO.
   La reveal del tema (.ve-reveal: opacity 0 + translateY) lasciava l'hero
   bianco durante il caricamento ("sembra che manchi qualcosa"). Qui la
   neutralizziamo SOLO dentro l'hero; lo scroll-reveal del resto resta. */
.ve-hero .ve-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* blocco override nav */
.ve-nav-right{display:inline-flex;align-items:center;gap:20px;justify-self:end}
.ve-lang{display:inline-flex;align-items:center;gap:9px}
.ve-lang a,.ve-lang span{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;color:var(--fg);opacity:.4;line-height:1;transition:opacity .15s ease}
.ve-lang a:hover{opacity:.85}
.ve-lang [aria-current]{opacity:1}
@media (max-width:1100px){ .ve-lang{display:none} }
@media (min-width:1101px){ .gm-langnav{display:none!important} }

/* Splash di caricamento iniziale (logo Spazio Milano). L'uscita la guida il
   JS (opacity inline + display:none): NON dipende dall'avanzare di
   un'animazione, quindi sparisce sempre. L'animazione CSS e' solo la safety
   se il JS e' disattivato. Una sola volta per sessione. */
.ve-splash{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:var(--bg,#fff);animation:ve-sp-fallback .5s ease 2.6s forwards}
@keyframes ve-sp-fallback{to{opacity:0;visibility:hidden}}
.ve-splash-in{display:flex;flex-direction:column;align-items:center;gap:20px}
.ve-splash-img{width:min(300px,64vw);height:auto;display:block}
.ve-splash-load{width:120px;height:2px;background:rgba(128,128,128,.18);overflow:hidden;position:relative}
.ve-splash-load::after{content:"";position:absolute;inset:0;background:var(--accent,#c8402f);transform:translateX(-100%);animation:ve-splash-bar 1s ease-in-out infinite}
@keyframes ve-splash-bar{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.ve-splash-load::after{animation:none;transform:none}}
.gm-langnav{position:fixed;bottom:16px;right:16px;z-index:2147482000;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(20,20,20,.82);box-shadow:0 4px 16px rgba(0,0,0,.22);font-family:system-ui,-apple-system,sans-serif;font-size:12px;font-weight:600}.gm-langnav a,.gm-langnav span{display:inline-block;padding:4px 10px;border-radius:999px;text-decoration:none;text-transform:uppercase;letter-spacing:.04em;color:#fff;opacity:.65}.gm-langnav a:hover{opacity:1}.gm-langnav [aria-current]{background:#fff;color:#111;opacity:1}