/* =========================================

   VANTA STUDIO — VISUAL IDENTITY

   Dark Luxury / Burgundy Editorial

========================================= */

:root {

  --wine: #702b38;

  --wine-dark: #160d0e;

  --wine-light: #9a4351;

  --cream: #ede3d2;

  --cream-muted: #bdb0a0;

  --black: #100d0d;

  --line: rgba(237, 227, 210, 0.18);

  --font-display: "Italiana", Georgia, serif;

  --font-body: "DM Sans", sans-serif;

  --font-modern: "Manrope", sans-serif;

  --container: 1480px;

}

/* RESET */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

  background: var(--wine-dark);

}

body {

  background: var(--wine-dark);

  color: var(--cream);

  font-family: var(--font-body);

  overflow-x: hidden;

}

body, button, a {

  -webkit-tap-highlight-color: transparent;

}

a {

  color: inherit;

  text-decoration: none;

}

button {

  font: inherit;

}

img {

  display: block;

  max-width: 100%;

}

::selection {

  background: var(--wine);

  color: var(--cream);

}

/* PRELOADER */

.preloader {

  position: fixed;

  inset: 0;

  z-index: 9999;

  background: var(--wine-dark);

  display: flex;

  align-items: center;

  justify-content: center;

}

.preloader-content {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}

.preloader-name {

  font-family: var(--font-display);

  font-size: clamp(60px, 10vw, 110px);

  letter-spacing: 0.08em;

}

.preloader-subtitle {

  font-family: var(--font-modern);

  font-size: 11px;

  letter-spacing: 0.45em;

}

.preloader-line {

  height: 1px;

  width: 0;

  background: var(--wine-light);

  margin-top: 22px;

  animation: loadingLine 1.5s ease forwards;

}

@keyframes loadingLine {

  to {

    width: 160px;

  }

}

/* HEADER */

.site-header {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 100;

  padding: 15px 7%;

  border-bottom: 1px solid var(--line);

  background: rgba(16, 13, 13, 0.25);

  backdrop-filter: blur(12px);

}

.navigation {

  max-width: var(--container);

  margin: auto;

  min-height: 48px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

}

.brand {

  display: flex;

  flex-direction: column;

  align-items: center;

  flex-shrink: 0;

}

.brand > span {

  font-family: var(--font-display);

  font-size: 36px;

  line-height: 0.9;

  letter-spacing: 0.04em;

}

.brand small {

  font-size: 8px;

  letter-spacing: 0.55em;

  margin-top: 7px;

}

.nav-links {

  display: flex;

  align-items: center;

  gap: clamp(20px, 3.2vw, 52px);

}

.nav-links a {

  font-size: 12px;

  color: var(--cream-muted);

  transition: color 0.3s ease;

  position: relative;

}

.nav-links a:hover,

.nav-links a.active {

  color: var(--cream);

}

.nav-links a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -9px;

  height: 1px;

  width: 0;

  background: var(--cream);

  transition: width 0.35s ease;

}

.nav-links a:hover::after,

.nav-links a.active::after {

  width: 100%;

}

.nav-contact {

  border: 1px solid rgba(237, 227, 210, 0.65);

  padding: 13px 20px;

  font-size: 12px;

  transition: background 0.3s, color 0.3s;

}

.nav-contact span {

  margin-left: 8px;

  color: var(--cream-muted);

}

.nav-contact:hover {

  background: var(--cream);

  color: var(--wine-dark);

}

.menu-toggle {

  display: none;

  background: none;

  border: 0;

  cursor: pointer;

}

/* HERO */

.hero {

  min-height: 690px;

  height: min(850px, 100vh);

  position: relative;

  isolation: isolate;

  overflow: hidden;

  display: flex;

  align-items: center;

  border-bottom: 1px solid var(--line);

}

.hero-texture {

  position: absolute;

  inset: 0;

  z-index: -3;

  background:

    radial-gradient(ellipse at 8% 12%, rgba(112, 43, 56, 0.4), transparent 32%),

    radial-gradient(ellipse at 20% 90%, rgba(112, 43, 56, 0.22), transparent 40%),

    linear-gradient(110deg, #100d0d 0%, #160d0e 55%, #100d0d 100%);

}

.hero-burgundy {

  position: absolute;

  left: -14%;

  bottom: -43%;

  width: 55%;

  height: 75%;

  z-index: -2;

  border-radius: 50%;

  background: radial-gradient(ellipse, rgba(112, 43, 56, 0.55), transparent 68%);

  filter: blur(40px);

  transform: rotate(-25deg);

}

.hero-copy {

  position: relative;

  z-index: 4;

  width: 54%;

  padding-left: 13%;

  padding-top: 30px;

  animation: heroEnter 1.1s ease both;

}

@keyframes heroEnter {

  from {

    opacity: 0;

    transform: translateY(35px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.eyebrow,

.section-kicker {

  display: block;

  color: #c99b69;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.3em;

  text-transform: uppercase;

}

.hero-title {

  font-family: var(--font-display);

  font-weight: 400;

  font-size: clamp(105px, 13vw, 205px);

  line-height: 0.9;

  letter-spacing: 0.015em;

  margin: 35px 0 10px -7px;

  white-space: nowrap;

}

.hero-brand-line {

  display: flex;

  align-items: center;

  gap: 38px;

  width: 420px;

  max-width: 90%;

}

.hero-brand-line > span {

  width: 145px;

  height: 1px;

  background: var(--cream);

}

.hero-brand-line strong {

  font-family: var(--font-modern);

  font-size: 23px;

  font-weight: 500;

  letter-spacing: 0.48em;

}

.hero-description {

  font-family: var(--font-display);

  font-size: clamp(21px, 2vw, 30px);

  line-height: 1.25;

  margin-top: 35px;

  color: var(--cream);

}

.hero-description em {

  color: var(--wine-light);

}

.hero-buttons {

  display: flex;

  gap: 20px;

  margin-top: 35px;

  flex-wrap: wrap;

}

.button {

  min-height: 50px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 16px;

  padding: 0 27px;

  font-size: 12px;

  transition: background 0.35s, color 0.35s, transform 0.35s;

}

.button:hover {

  transform: translateY(-4px);

}

.button-light {

  background: var(--cream);

  color: var(--wine-dark);

}

.button-light:hover {

  background: #fff8ec;

}

.button-outline {

  border: 1px solid rgba(237, 227, 210, 0.75);

  color: var(--cream);

}

.button-outline:hover {

  background: var(--cream);

  color: var(--wine-dark);

}

/* HERO ARTWORK */

/* SCULTURA CINEMATOGRAFICA */

.hero-artwork {

  position: absolute;

  z-index: 1;

  top: 0;

  right: 0;

  width: 53%;

  height: 100%;

  overflow: hidden;

  pointer-events: none;

  background: #100d0d;

  animation: sculptureReveal 1.8s ease both;

}

.hero-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center 25%;

  opacity: 0.88;

  filter: grayscale(100%) contrast(1.12) brightness(0.82);

  transform: scale(1.08);

  animation: sculptureZoom 12s ease-in-out infinite alternate;

}

@keyframes sculptureReveal {

  from {

    opacity: 0;

    clip-path: inset(0 0 0 35%);

  }

  to {

    opacity: 1;

    clip-path: inset(0 0 0 0);

  }

}

@keyframes sculptureZoom {

  from {

    transform: scale(1.08);

  }

  to {

    transform: scale(1.17);

  }

}

.artwork-frame {

  position: absolute;

  z-index: 2;

  width: 55%;

  height: 53%;

  top: 24%;

  left: 13%;

  border: 1px solid rgba(237, 227, 210, 0.45);

}

.artwork-overlay {

  position: absolute;

  z-index: 3;

  top: 24%;

  right: 0;

  width: 70%;

  height: 22%;

  background: linear-gradient(

    100deg,

    rgba(112, 43, 56, 0.78),

    rgba(112, 43, 56, 0.35),

    rgba(112, 43, 56, 0.12)

  );

  mix-blend-mode: screen;

  pointer-events: none;

  animation: burgundyMove 8s ease-in-out infinite alternate;

}

@keyframes burgundyMove {

  from {

    transform: translateX(-12px);

    opacity: 0.75;

  }

  to {

    transform: translateX(12px);

    opacity: 1;

  }

}

.artwork-caption {

  position: absolute;

  z-index: 4;

  right: 9%;

  top: 53%;

  display: flex;

  flex-direction: column;

  gap: 13px;

  font-size: 10px;

  letter-spacing: 0.35em;

}

.artwork-caption i {

  width: 65px;

  height: 1px;

  background: var(--cream);

  margin-top: 12px;

}

/* SOCIAL AND SCROLL */

.hero-social {

  position: absolute;

  z-index: 5;

  left: 4.5%;

  top: 37%;

  display: flex;

  flex-direction: column;

  gap: 25px;

  font-size: 13px;

  font-weight: 600;

}

.hero-social a {

  transition: color 0.3s, transform 0.3s;

}

.hero-social a:hover {

  color: #c88a8f;

  transform: translateX(5px);

}

.hero-scroll {

  position: absolute;

  bottom: 6%;

  left: 4.5%;

  display: flex;

  align-items: center;

  gap: 20px;

  font-size: 9px;

  letter-spacing: 0.35em;

  line-height: 1.8;

}

.scroll-circle {

  width: 42px;

  height: 58px;

  border: 1px solid var(--cream);

  border-radius: 25px;

  display: grid;

  place-items: center;

  animation: scrollBounce 2s infinite;

}

@keyframes scrollBounce {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(7px); }

}

.hero-index {

  position: absolute;

  right: 5%;

  bottom: 9%;

  font-family: var(--font-display);

  font-size: 20px;

  letter-spacing: 0.1em;

}

/* FEATURED SERVICES */

.featured-services {

  padding: 75px 5%;

  display: grid;

  grid-template-columns: 0.9fr 2.4fr;

  gap: 55px;

  border-bottom: 1px solid var(--line);

  background: #120d0e;

}

.services-intro {

  position: relative;

}

.services-intro h2 {

  font-family: var(--font-display);

  font-size: clamp(55px, 6vw, 85px);

  line-height: 0.95;

  font-weight: 400;

  margin-top: 30px;

}

.services-intro h2 em {

  color: var(--cream-muted);

}

.round-link {

  display: grid;

  place-items: center;

  width: 45px;

  height: 45px;

  border: 1px solid var(--line);

  border-radius: 50%;

  margin-top: 35px;

  transition: background 0.3s, color 0.3s;

}

.round-link:hover {

  background: var(--cream);

  color: var(--wine-dark);

}

.service-preview {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

}

.service-tile {

  position: relative;

  min-height: 285px;

  overflow: hidden;

  border: 1px solid rgba(112, 43, 56, 0.75);

  background: #211112;

}

.tile-image {

  position: absolute;

  inset: 0;

  opacity: 0.45;

  background-size: cover;

  background-position: center;

  transition: transform 0.8s cubic-bezier(.2,.7,.2,1), opacity 0.5s;

}

.tile-image-web {

  background-image: linear-gradient(0deg, #160d0e, transparent), url("assets/siti-aziendali.jpg");

}

.tile-image-brand {

  background-image: linear-gradient(0deg, #160d0e, transparent), url("assets/landing-page.jpg");

}

.tile-image-commerce {

  background-image: linear-gradient(0deg, #160d0e, transparent), url("assets/restyling-web.jpg");

}

.service-tile:hover .tile-image {

  transform: scale(1.09);

  opacity: 0.72;

}

.tile-content {

  position: absolute;

  inset: auto 25px 24px;

  z-index: 2;

}

.tile-content > span:first-child {

  font-size: 9px;

  letter-spacing: 0.2em;

}

.tile-content h3 {

  font-family: var(--font-display);

  font-size: 30px;

  font-weight: 400;

  margin: 13px 0 7px;

}

.tile-content p {

  font-size: 13px;

  line-height: 1.5;

  color: var(--cream-muted);

}

.tile-arrow {

  position: absolute;

  right: 0;

  bottom: 0;

  font-size: 21px;

  transition: transform 0.3s;

}

.service-tile:hover .tile-arrow {

  transform: translate(5px, -5px);

}

/* MANIFESTO */

.manifesto {

  padding: 150px 10%;

  text-align: center;

  background:

    radial-gradient(ellipse at 50% 50%, rgba(112, 43, 56, 0.22), transparent 65%),

    var(--wine-dark);

}

.manifesto h2 {

  font-family: var(--font-display);

  font-weight: 400;

  font-size: clamp(45px, 7vw, 95px);

  line-height: 1.05;

  margin: 35px auto;

}

.manifesto h2 em {

  color: #b87b82;

}

.manifesto p {

  max-width: 550px;

  margin: 0 auto;

  color: var(--cream-muted);

  line-height: 1.9;

  font-size: 14px;

}

.text-link {

  display: inline-flex;

  align-items: center;

  gap: 15px;

  padding-bottom: 8px;

  border-bottom: 1px solid var(--wine-light);

  font-size: 12px;

  margin-top: 30px;

  transition: color 0.3s;

}

.text-link:hover {

  color: #c88a8f;

}

/* SELECTED WORK */

.selected-work {

  padding: 110px 7%;

  background: #120d0e;

}

.work-heading {

  display: flex;

  justify-content: space-between;

  align-items: end;

  margin-bottom: 55px;

}

.work-heading h2 {

  font-family: var(--font-display);

  font-size: clamp(55px, 7vw, 90px);

  font-weight: 400;

  line-height: 0.98;

  margin-top: 25px;

}

.work-heading h2 em {

  color: #b87b82;

}

.projects-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 55px 25px;

}

.work-card:first-child {

  grid-column: span 2;

}

.work-image {

  height: 350px;

  position: relative;

  overflow: hidden;

  background-color: #241415;

  background-size: cover;

  background-position: center;

  transition: filter 0.5s;

}

.work-card:first-child .work-image {

  height: 520px;

}

.work-noir .work-image {

  background-image: linear-gradient(0deg, rgba(16,13,13,.35), rgba(16,13,13,.1)), url("https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=1500&q=85");

}

.work-casa .work-image {

  background-image: linear-gradient(0deg, rgba(16,13,13,.35), rgba(16,13,13,.1)), url("https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=1200&q=85");

}

.work-mft .work-image {

  background-image: linear-gradient(0deg, rgba(16,13,13,.35), rgba(16,13,13,.1)), url("https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=1200&q=85");

}

.work-card:hover .work-image {

  filter: saturate(1.2);

}

.work-number,

.work-open {

  position: absolute;

  top: 22px;

  font-size: 12px;

  letter-spacing: 0.15em;

}

.work-number {

  left: 25px;

}

.work-open {

  right: 25px;

  font-size: 22px;

  transition: transform 0.3s;

}

.work-card:hover .work-open {

  transform: translate(5px, -5px);

}

.work-meta {

  padding: 20px 0;

  display: flex;

  align-items: start;

  justify-content: space-between;

  border-bottom: 1px solid var(--line);

}

.work-meta h3 {

  font-family: var(--font-display);

  font-size: 25px;

  font-weight: 400;

  margin-bottom: 8px;

}

.work-meta span {

  font-size: 9px;

  letter-spacing: 0.15em;

  color: var(--cream-muted);

}

.portfolio-disclaimer {

  color: var(--cream-muted);

  font-size: 11px;

  margin-top: 30px;

}

/* FINAL CTA */

.final-cta {

  padding: 130px 20px;

  text-align: center;

  background:

    radial-gradient(ellipse at 50% 110%, rgba(112, 43, 56, 0.48), transparent 65%),

    #160d0e;

}

.final-cta h2 {

  font-family: var(--font-display);

  font-size: clamp(65px, 9vw, 115px);

  font-weight: 400;

  line-height: 0.95;

  margin: 35px 0;

}

.final-cta h2 em {

  color: #bd8188;

}

.final-cta p {

  color: var(--cream-muted);

  margin-bottom: 30px;

  font-size: 14px;

}

/* FOOTER */

.site-footer {

  min-height: 190px;

  padding: 45px 7%;

  border-top: 1px solid var(--line);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  flex-wrap: wrap;

  background: #100d0d;

}

.footer-brand {

  display: flex;

  flex-direction: column;

  font-family: var(--font-display);

  font-size: 35px;

  line-height: 0.9;

}

.footer-brand small {

  font-family: var(--font-modern);

  font-size: 8px;

  letter-spacing: 0.5em;

  margin-top: 8px;

}

.site-footer > p {

  font-family: var(--font-display);

  font-size: 17px;

  color: var(--cream-muted);

}

.footer-links {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

}

.footer-links a,

.copyright,

.back-top {

  font-size: 10px;

  color: var(--cream-muted);

}

.footer-links a:hover,

.back-top:hover {

  color: var(--cream);

}

/* ANIMATIONS */

.reveal {

  opacity: 0;

  transform: translateY(35px);

  transition: opacity 0.8s ease, transform 0.8s ease;

}

.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}

/* RESPONSIVE TABLET */

@media (max-width: 1050px) {

  .site-header {

    padding: 15px 4%;

  }

  .nav-links {

    gap: 18px;

  }

  .hero-copy {

    padding-left: 9%;

    width: 60%;

  }

  .hero-title {

    font-size: 13vw;

  }

  .featured-services {

    grid-template-columns: 1fr;

    gap: 35px;

  }

  .services-intro h2 br {

    display: none;

  }

  .round-link {

    position: absolute;

    right: 0;

    top: 0;

  }

  .artwork-caption {

    right: 4%;

    font-size: 8px;

  }

}

/* RESPONSIVE MOBILE */

@media (max-width: 700px) {

  .site-header {

    padding: 14px 6%;

  }

  .navigation {

    min-height: 45px;

  }

  .brand > span {

    font-size: 29px;

  }

  .nav-contact {

    display: none;

  }

  .menu-toggle {

    display: flex;

    width: 38px;

    height: 38px;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    position: relative;

    z-index: 102;

  }

  .menu-toggle span {

    width: 25px;

    height: 1px;

    background: var(--cream);

    transition: transform 0.3s;

  }

  .menu-toggle.active span:first-child {

    transform: translateY(3.5px) rotate(45deg);

  }

  .menu-toggle.active span:last-child {

    transform: translateY(-3.5px) rotate(-45deg);

  }

  .nav-links {

    position: fixed;

    inset: 0;

    z-index: 101;

    background: var(--wine-dark);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 32px;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.35s, visibility 0.35s;

  }

  .nav-links.open {

    opacity: 1;

    visibility: visible;

  }

  .nav-links a {

    font-family: var(--font-display);

    font-size: 34px;

    color: var(--cream);

  }

  .hero {

    min-height: 850px;

    height: auto;

    align-items: flex-start;

    padding-top: 155px;

  }

  .hero-copy {

    width: 100%;

    padding: 0 7%;

    z-index: 5;

  }

  .eyebrow {

    font-size: 8px;

    letter-spacing: 0.19em;

  }

  .hero-title {

    font-size: clamp(85px, 21vw, 135px);

    margin: 25px 0 8px -4px;

  }

  .hero-brand-line {

    gap: 17px;

  }

  .hero-brand-line > span {

    width: 65px;

  }

  .hero-brand-line strong {

    font-size: 17px;

    letter-spacing: 0.35em;

  }

  .hero-description {

    font-size: 24px;

    margin-top: 28px;

  }

  .hero-buttons {

    gap: 12px;

    margin-top: 25px;

  }

  .button {

    min-height: 46px;

    padding: 0 17px;

    font-size: 11px;

  }

  .hero-artwork {

    top: 390px;

    right: -12%;

    width: 82%;

    height: 420px;

    opacity: 0.65;

  }

  .artwork-frame {

    top: 18%;

    height: 55%;

  }

  .artwork-overlay {

    top: 18%;

  }

  .artwork-caption {

    display: none;

  }

  .hero-social {

    display: none;

  }

  .hero-scroll {

    left: 7%;

    bottom: 3%;

    z-index: 5;

  }

  .hero-index {

    right: 7%;

    bottom: 5%;

    font-size: 15px;

  }

  .featured-services {

    padding: 70px 6%;

  }

  .services-intro h2 {

    font-size: 64px;

  }

  .service-preview {

    grid-template-columns: 1fr;

    gap: 15px;

  }

  .service-tile {

    min-height: 260px;

  }

  .manifesto {

    padding: 100px 7%;

  }

  .manifesto h2 {

    font-size: 48px;

  }

  .selected-work {

    padding: 80px 6%;

  }

  .work-heading {

    align-items: flex-start;

    flex-direction: column;

    gap: 20px;

  }

  .work-heading h2 {

    font-size: 65px;

  }

  .projects-grid {

    grid-template-columns: 1fr;

    gap: 35px;

  }

  .work-card:first-child {

    grid-column: auto;

  }

  .work-image,

  .work-card:first-child .work-image {

    height: 300px;

  }

  .work-meta {

    gap: 10px;

  }

  .work-meta h3 {

    font-size: 22px;

  }

  .work-meta span {

    font-size: 8px;

  }

  .final-cta {

    padding: 100px 6%;

  }

  .final-cta h2 {

    font-size: 75px;

  }

  .site-footer {

    padding: 45px 7%;

    flex-direction: column;

    align-items: flex-start;

  }

  .footer-links {

    gap: 17px;

  }

}

@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;

    transition-duration: 0.01ms !important;

  }

}

/* =====================================

   VANTA — EDITORIAL LUXURY REFINEMENT

===================================== */

/* Transizione più morbida tra testo e immagine */

.hero-artwork {

  width: 56%;

  background: transparent;

  -webkit-mask-image: linear-gradient(

    to right,

    transparent 0%,

    black 13%,

    black 100%

  );

  mask-image: linear-gradient(

    to right,

    transparent 0%,

    black 13%,

    black 100%

  );

}

/* Scultura meno ingrandita e più leggibile */

.hero-image {

  object-position: center 25%;

  transform: scale(1.04);

  animation: sculptureZoom 16s ease-in-out infinite alternate;

  filter: grayscale(100%) contrast(1.08) brightness(0.78);

}

@keyframes sculptureZoom {

  from {

    transform: scale(1.04);

  }

  to {

    transform: scale(1.11);

  }

}

/* Cornice più discreta */

.artwork-frame {

  top: 24%;

  left: 13%;

  width: 56%;

  height: 56%;

  border: 1px solid rgba(237, 227, 210, 0.32);

}

/* Fascia bordeaux più corta e raffinata */

.artwork-overlay {

  top: 25%;

  left: 13%;

  right: auto;

  width: 54%;

  height: 19%;

  background: linear-gradient(

    110deg,

    rgba(112, 43, 56, 0.68),

    rgba(112, 43, 56, 0.28),

    rgba(112, 43, 56, 0.04)

  );

  mix-blend-mode: screen;

  border-top: 1px solid rgba(237, 227, 210, 0.12);

  border-bottom: 1px solid rgba(237, 227, 210, 0.08);

}

/* Testi laterali più eleganti */

.artwork-caption {

  right: 7%;

  gap: 15px;

  font-size: 9px;

  letter-spacing: 0.32em;

  color: rgba(237, 227, 210, 0.82);

}

/* Social più discreti */

.hero-social {

  left: 4.2%;

  gap: 29px;

  font-size: 11px;

  letter-spacing: 0.12em;

}

.hero-social a {

  color: rgba(237, 227, 210, 0.75);

}

/* Profondità bordeaux dello sfondo */

.hero-texture {

  background:

    radial-gradient(

      ellipse at 12% 18%,

      rgba(112, 43, 56, 0.38),

      transparent 38%

    ),

    radial-gradient(

      ellipse at 35% 100%,

      rgba(112, 43, 56, 0.24),

      transparent 48%

    ),

    linear-gradient(

      110deg,

      #160d0e 0%,

      #100d0d 65%,

      #100d0d 100%

    );

}

/* =====================================

   VANTA — HOMEPAGE REFINEMENT

===================================== */

/* Social con loghi */

.hero-social {

  left: 4.2%;

  top: 36%;

  gap: 27px;

}

.hero-social a {

  width: 22px;

  height: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--cream);

  opacity: 0.8;

  transition: opacity .3s ease, transform .3s ease, color .3s ease;

}

.hero-social svg {

  width: 20px;

  height: 20px;

}

.hero-social a:hover {

  opacity: 1;

  color: #c88a8f;

  transform: translateX(5px);

}

/* Etichette a destra: più grandi e più in alto */

.artwork-caption {

  top: 43%;

  right: 7%;

  gap: 18px;

  font-size: 12px;

  letter-spacing: 0.30em;

  color: var(--cream);

}

.artwork-caption i {

  width: 75px;

  margin-top: 10px;

}

/* Via il vecchio quadro */

.artwork-frame {

  display: none;

}

/* Via la fascia rettangolare */

.artwork-overlay {

  display: none;

}

/* Profondità cinematografica sull'immagine */

.hero-artwork {

  position: absolute;

  overflow: hidden;

}

.hero-artwork::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:

    linear-gradient(

      90deg,

      rgba(16, 13, 13, .18),

      transparent 35%

    ),

    linear-gradient(

      0deg,

      rgba(16, 13, 13, .40),

      transparent 45%

    );

}

/* Le scritte rimangono sopra la sfumatura */

.artwork-caption {

  z-index: 4;

}

/* Numerazioni non più necessarie */

.work-number,

.hero-index {

  display: none;

}

/* =====================================

   VANTA STUDIO — FOOTER PIÙ GRANDE

===================================== */

.site-footer {

  padding: 55px 7%;

  min-height: 170px;

}

/* Logo VANTA */

.footer-brand {

  font-size: 34px;

  letter-spacing: 1px;

}

.footer-brand small {

  font-size: 11px;

  letter-spacing: 6px;

  margin-top: 7px;

}

/* Slogan */

.site-footer > p {

  font-size: 17px;

  line-height: 1.6;

}

/* Link del footer */

.footer-links {

  gap: 25px;

}

.footer-links a {

  font-size: 13px;

  transition: color .3s ease;

}

.footer-links a:hover {

  color: #b69a65;

}

/* Copyright */

.copyright {

  font-size: 12px;

}

/* Torna su */

.back-top {

  font-size: 12px;

  letter-spacing: 1.5px;

}

/* Adattamento smartphone */

@media (max-width: 768px) {

  .site-footer {

    padding: 40px 6%;

    gap: 22px;

  }

  .footer-brand {

    font-size: 30px;

  }

  .site-footer > p {

    font-size: 16px;

  }

  .footer-links {

    flex-wrap: wrap;

    gap: 18px;

  }

  .footer-links a {

    font-size: 13px;

  }

  .copyright,

  .back-top {

    font-size: 11px;

  }

}

.work-nightlife .work-image {
  background-image:
    linear-gradient(0deg, rgba(16,13,13,.40), rgba(16,13,13,.10)),
    url("assets/locali-notturni.jpg");
}

.work-casa .work-image {
  background-image:
    linear-gradient(0deg, rgba(16,13,13,.40), rgba(16,13,13,.10)),
    url("assets/ristorazione.jpg");
}

.work-general .work-image {
  background-image:
    linear-gradient(0deg, rgba(16,13,13,.40), rgba(16,13,13,.10)),
    url("assets/attivita-commerciali.jpg");
}


.projects-hero {

  background:

    linear-gradient(

      90deg,

      rgba(16,13,13,.96) 0%,

      rgba(16,13,13,.72) 45%,

      rgba(16,13,13,.12) 100%

    ),

    url("assets/scultura-progetti.png") no-repeat 75% center / cover;

}