/* Versione A scelta: corsivo minuscolo, accento rosso dritto maiuscolo. */
.hero h1 {
  font-weight: 400;
  line-height: 1.04;
  font-synthesis: none;
  text-transform: none;
}
.hero h1 .hero-title-neutral {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.018em;
  text-transform: none;
}
.hero h1 .roma {
  display: inline;
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.hero h1[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}
.hero-video-bg picture { display: block; width: 100%; height: 100%; }
.hero-with-image .hero-video-bg { background: #f5eee4; }
.hero-with-image .hero-video-bg img {
  object-position: right center;
  filter: brightness(.9) contrast(1.03);
  transform-origin: 75% 65%;
  animation: cover-breathe 12s ease-in-out infinite;
  will-change: transform;
}
.hero-with-image .hero-overlay {
  background: linear-gradient(90deg, rgba(12,10,10,.88) 0%, rgba(12,10,10,.73) 42%, rgba(12,10,10,.5) 100%);
}
@keyframes cover-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.015); }
  50% { transform: translate3d(-.55%, -6px, 0) scale(1.035); }
}
@media(max-width:700px) {
  header.hero.hero-with-image {
    min-height: 680px;
    background: #f5eee4;
  }
  .hero-with-image .hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #f5eee4;
  }
  .hero-with-image .hero-video-bg img {
    position: absolute;
    top: clamp(220px, 61vw, 275px);
    right: -3%;
    width: 100%;
    height: clamp(300px, 100vw, 430px);
    object-fit: contain;
    object-position: right center;
    filter: brightness(.92) contrast(1.03);
  }
  .hero-with-image .hero-overlay {
    display: block;
    background:
      linear-gradient(180deg, rgba(12,10,10,.86) 0%, rgba(12,10,10,.65) 25%, rgba(12,10,10,.22) 48%, rgba(12,10,10,.82) 74%, rgba(12,10,10,.94) 100%),
      linear-gradient(90deg, rgba(12,10,10,.28), transparent 65%);
  }
  .hero-with-image .hero-content {
    background: transparent;
    padding: 42px 20px 40px;
  }
  .hero-with-image .hero-content h1 { margin-bottom: clamp(170px, 52vw, 230px); }
}
@media(max-width:540px) {
  .hero h1 { line-height: 1.06; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-with-image .hero-video-bg img { animation: none; transform: none; will-change: auto; }
}

/* Video street: testo leggibile e scarpe visibili sotto al titolo. */
.hero-with-video .hero-video-bg.has-video ~ .hero-overlay {
  background: linear-gradient(90deg,rgba(10,8,8,.86),rgba(10,8,8,.58) 48%,rgba(10,8,8,.12));
}
.hero-with-video .hero-video-bg video { object-position: center 65%; }
@media(max-width:700px) {
  header.hero.hero-with-video { min-height:680px;background:#171313; }
  .hero-with-video .hero-content { padding:60px 20px 40px; }
  .hero-with-video .hero-content h1 { margin-bottom:220px; }
  .hero-with-video .hero-video-bg video {
    position:absolute;top:245px;left:0;width:100%;height:300px;
    object-fit:cover;object-position:right center;
  }
  .hero-with-video .hero-video-bg.has-video ~ .hero-overlay {
    background:linear-gradient(180deg,#171313 0%,#171313e8 26%,#17131310 43%,#17131310 65%,#171313eb 79%,#171313 100%);
  }
}

@media(max-width:700px) {
  .hero-responsive-video .hero-video-bg video {
    height:min(100vw,430px);
    object-position:center 60%;
  }
  .hero-responsive-video .hero-content h1 {margin-bottom:clamp(230px,70vw,300px);}
}