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

   VARIABLES & RESET

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

:root {

  --color-bg: #1a1a1a;

  --color-surface: #262626;

  --color-primary: #cba36b;

  --color-primary-dark: #a8834f;

  --color-text: #f0f0f0;

  --color-text-muted: #a0a0a0;

  --color-white: #ffffff;

  --color-black: #000000;

  --font-heading: 'Cinzel', serif;

  --font-body: 'Inter', sans-serif;

  --spacing-xs: 0.5rem;

  --spacing-sm: 1rem;

  --spacing-md: 2rem;

  --spacing-lg: 4rem;

  --spacing-xl: 8rem;

  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  --transition-fast: 0.3s ease;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

  font-size: 16px;

  -webkit-text-size-adjust: 100%;

  text-size-adjust: 100%;

}



body {

  background-color: var(--color-bg);

  color: var(--color-text);

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

  line-height: 1.6;

  overflow-x: hidden;

}



/* Custom Scrollbar only on Desktop */

@media (min-width: 1024px) {

  ::-webkit-scrollbar { width: 8px; }

  ::-webkit-scrollbar-track { background: var(--color-bg); }

  ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 4px; }

  ::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); }

}



a {

  text-decoration: none;

  color: inherit;

  transition: var(--transition-fast);

}

ul { list-style: none; }

img { max-width: 100%; display: block; }



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

   TYPOGRAPHY

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

h1, h2, h3, h4 {

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

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: -0.02em;

}



.section-title {

  font-size: 3.5rem;

  margin-bottom: var(--spacing-lg);

  color: var(--color-primary);

  position: relative;

  display: block;

  width: fit-content;

  letter-spacing: 0.05em;

}

.section-title.text-center {

  margin-left: auto;

  margin-right: auto;

}

.section-title::after {

  content: '';

  position: absolute;

  bottom: -10px;

  left: 50%;

  transform: translateX(-50%);

  width: 60px;

  height: 2px;

  background-color: var(--color-primary);

}

.lead {

  font-size: 1.3rem;

  color: var(--color-white);

  font-weight: 500;

}

.text-center { text-align: center; }



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

   UTILITY & LAYOUT

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

.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--spacing-md);

}



.section {

  padding: var(--spacing-xl) 0;

  border-top: 2px solid rgba(203, 163, 107, 0.2);

  border-bottom: 1px solid rgba(203, 163, 107, 0.2);

}

.hero { border-top: none; border-bottom: none; }



.btn {

  display: inline-block;

  padding: 1rem 2rem;

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

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1px;

  border: 1px solid transparent;

  cursor: pointer;

  transition: all 0.3s ease;

}

.btn-primary {

  background-color: var(--color-primary);

  color: var(--color-black);

  position: relative;

  overflow: hidden;

  z-index: 1;

}

.btn-primary::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 0%;

  height: 100%;

  background-color: var(--color-white);

  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  z-index: -1;

}

@media (hover: hover) {

  .btn-primary:hover { color: var(--color-black); }

  .btn-primary:hover::before { width: 100%; }

}

.btn-outline {

  background-color: transparent;

  border-color: var(--color-white);

  color: var(--color-white);

}

@media (hover: hover) {

  .btn-outline:hover {

    background-color: var(--color-white);

    color: var(--color-black);

  }

}



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

   ANIMATIONS

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

@keyframes slideInLeft {

  from { opacity: 0; transform: translateX(-50px); }

  to { opacity: 1; transform: translateX(0); }

}

@keyframes slideInRight {

  from { opacity: 0; transform: translateX(50px); }

  to { opacity: 1; transform: translateX(0); }

}

@keyframes heroFadeIn { to { opacity: 1; } }

@keyframes scrollIndicatorFadeIn {

  from { opacity: 0; transform: translate(-50%, 20px); }

  to { opacity: 0.7; transform: translate(-50%, 0); }

}

@keyframes bounce {

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

  40% { transform: translateY(-8px); }

  60% { transform: translateY(-4px); }

}

@keyframes scrollMarquee {

  0% { transform: translateX(0); }

  100% { transform: translateX(calc(-50% - 1rem)); }

}

@keyframes scrollMarqueeMobile {

  0% { transform: translateX(0); }

  100% { transform: translateX(calc(-50% - 0.75rem)); }

}



/* Reveal on scroll */

.reveal-text,

.reveal-item,

.reveal-image {

  opacity: 0;

  transform: translateY(30px);

  transition: all 0.8s ease;

}

.reveal-visible {

  opacity: 1;

  transform: translateY(0);

}

.delay-1 { transition-delay: 0.1s; }

.delay-2 { transition-delay: 0.2s; }

.hero-content .reveal-text { transition-delay: 0.2s; }

.hero-content .hero-subtitle { transition-delay: 0.4s; }

.hero-content .btn { transition-delay: 0.6s; }



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

   HEADER & NAVIGATION

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

.header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  padding: 1.5rem 3rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  z-index: 100;

  transition: background-color 0.4s ease, padding 0.4s ease;

}

.header.scrolled {

  background-color: rgba(26, 26, 26, 0.95);

  padding: 1rem 3rem;

  backdrop-filter: blur(10px);

}



.logo {

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

  color: var(--color-white);

  text-transform: uppercase;

  opacity: 0;

  animation: slideInLeft 0.8s ease-out forwards 0.6s;

}

.logo-text {

  font-size: 2rem;

  font-weight: 800;

  display: block;

  line-height: 1;

  white-space: nowrap;

}

.logo-sub {

  font-size: 0.8rem;

  letter-spacing: 3px;

  color: var(--color-primary);

}



.social-header {

  display: flex;

  align-items: center;

  gap: 1rem;

  margin-left: 1.0rem !important;

  margin-right: auto;

  opacity: 0;

  animation: slideInLeft 0.8s ease-out forwards 0.6s;

}



/* Icone social (base) */

.social-icon-header,

.social-icon-mobile {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  background-color: rgba(255, 255, 255, 0.1);

  border-radius: 50%;

  color: var(--color-white);

  font-size: 1.2rem;

  transition: all 0.3s ease;

}

@media (hover: hover) {

  .social-icon-header:hover,

  .social-icon-mobile:hover {

    background-color: var(--color-primary);

    transform: translateY(-2px);

    color: var(--color-black);

  }

}

.social-icon-header:active,

.social-icon-mobile:active {

  transform: scale(0.95);

}



/* Mobile header social */

.mobile-header-social {

  display: none;

  align-items: center;

  justify-content: center;

  gap: 0.8rem;

  flex: 1;

  opacity: 0;

  animation: slideInRight 0.8s ease-out forwards 0.6s;

}



.nav-list {

  display: flex;

  gap: 3rem;

  opacity: 0;

  animation: slideInRight 0.8s ease-out forwards 0.6s;

}

.nav-link {

  font-size: 0.9rem;

  text-transform: uppercase;

  letter-spacing: 1px;

  color: var(--color-text);

  position: relative;

  padding-bottom: 5px;

}

.nav-link::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 0;

  height: 1px;

  background-color: var(--color-primary);

  transition: width 0.3s ease;

}

@media (hover: hover) {

  .nav-link:hover::after { width: 100%; }

}



/* Menu toggle */

.menu-toggle {

  display: none;

  background: none;

  border: none;

  cursor: pointer;

  flex-direction: column;

  gap: 6px;

  opacity: 0;

  animation: slideInRight 0.8s ease-out forwards 0.6s;

}

.bar {

  width: 30px;

  height: 2px;

  background-color: var(--color-white);

  transition: all 0.3s ease;

}

.menu-toggle.active .bar:nth-child(1) {

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

}

.menu-toggle.active .bar:nth-child(2) {

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

}



/* Mobile social in nav */

.mobile-social-item { display: none; }

.mobile-social-icons {

  display: flex;

  justify-content: center;

  gap: 1.5rem;

  padding: 0.5rem 0;

}



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

   HERO

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

.hero {

  height: 100vh;

  width: 100%;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  overflow: hidden;

}

.hero-bg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  z-index: 1;

  opacity: 0;

  animation: heroFadeIn 0.8s ease-out forwards;

}

.hero-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7));

  z-index: 2;

}

.hero-content {

  position: relative;

  z-index: 3;

  max-width: 800px;

  padding: 0 1rem;

}

.hero-title {

  font-size: 4.5rem;

  color: var(--color-white);

  margin-bottom: 1.5rem;

  text-shadow: 0 4px 20px rgba(0,0,0,0.5);

  white-space: nowrap;

}

.hero-subtitle {

  font-size: 1.25rem;

  color: var(--color-text-muted);

  margin-bottom: 3rem;

}



.scroll-indicator {

  position: absolute;

  bottom: 2rem;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.5rem;

  color: var(--color-white);

  z-index: 5;

  opacity: 0;

  animation: scrollIndicatorFadeIn 1s ease forwards 1s;

  width: auto;

  text-align: center;

}

.scroll-indicator span {

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 2px;

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

}

.scroll-indicator i {

  font-size: 1rem;

  animation: bounce 2s infinite;

}



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

   ABOUT

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

.about { background-color: var(--color-surface); }

.about-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--spacing-lg);

  align-items: center;

}

.about-image {

  position: relative;

  border-radius: 50%;

  overflow: hidden;

  aspect-ratio: 1 / 1;

  max-width: 500px;

  margin: 0 auto;

  box-shadow: 0 10px 30px rgba(0,0,0,0.3);

}

.about-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}

@media (hover: hover) {

  .about-image:hover img { transform: scale(1.05); }

}

.about-text p {

  margin-bottom: 0.8rem; 

  font-size: 1rem;

  color: var(--color-text-muted);

  text-align: justify;

}

.features-list { margin-top: 2rem; }

.features-list li {

  margin-bottom: 0.5rem;

  display: flex;

  align-items: center;

  gap: 1rem;

}

.features-list i { color: var(--color-primary); }



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

   LOMÉ

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

.lome-section {

  background-color: #1a1510;

  position: relative;

  overflow: hidden;

}

.lome-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-areas:

    "title image"

    "content image";

  gap: 4rem 2rem;

  align-items: start;

}

.lome-title {

  grid-area: title;

  margin-bottom: 0;

}

.lome-image {

  grid-area: image;

  align-self: center;            /* mantiene l’immagine centrata verticalmente */

}

.lome-content {

  grid-area: content;

}

.lome-content .lead {

  color: var(--color-primary);

  margin-bottom: 1.5rem;

}

.lome-content p {

  margin-bottom: 1rem;

  line-height: 1.6;

  text-align: justify;

}

.lome-tags {

  margin-top: 2rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.8rem;

}

.lome-tags span {

  font-size: 0.85rem;

  color: var(--color-primary);

  background: rgba(203,163,107,0.1);

  padding: 0.4rem 1rem;

  border-radius: 20px;

  border: 1px solid rgba(203,163,107,0.2);

  transition: all 0.3s ease;

}

@media (hover: hover) {

  .lome-tags span:hover {

    background: var(--color-primary);

    color: var(--color-black);

    transform: translateY(-2px);

  }

}

.lome-tags span:active {

  transform: scale(0.95);

}

.lome-image img {

  width: 100%;

  border-radius: 4px;

  box-shadow: 0 4px 20px rgba(0,0,0,0.3);

  filter: sepia(0.2) contrast(1.1);

  transition: transform 0.5s ease;

}

@media (hover: hover) {

  .lome-image:hover img { transform: scale(1.02); }

}



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

   SERVICES

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

.services { background-color: var(--color-bg); }

.services-grid {

  display: grid;

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

  gap: 2rem;

  margin-bottom: 3rem;

}



.service-card {

  background-color: var(--color-surface);

  padding: 2rem;

  border-radius: 4px;

  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

  border: 1px solid rgba(203, 163, 107, 0.15);

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

  display: flex;

  flex-direction: column;

  height: 100%;

}

@media (hover: hover) {

  .service-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 15px rgba(203, 163, 107, 0.15);

    border-color: rgba(203, 163, 107, 0.4);

  }

}

.service-card:active {

  transform: translateY(-2px);

}



.service-icon {

  width: 60px;

  height: 60px;

  background-color: rgba(203,163,107,0.1);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.5rem;

  color: var(--color-primary);

  font-size: 1.5rem;

  flex-shrink: 0;

}

.service-card h3 {

  color: var(--color-white);

  margin-bottom: 1rem;

  font-size: 1.3rem;

}

.service-card p {

  color: var(--color-text-muted);

  margin-bottom: 1.5rem;

  line-height: 1.6;

  flex: 1;

}

.service-features {

  list-style: none;

  margin-top: auto;

  padding-top: 0.5rem;

}

.service-features li {

  color: var(--color-text-muted);

  font-size: 0.9rem;

  margin-bottom: 0.5rem;

  padding-left: 1.5rem;

  position: relative;

}

.service-features li:before {

  content: '✓';

  color: var(--color-primary);

  position: absolute;

  left: 0;

  font-weight: bold;

}



.service-process {

  margin-top: 4rem;

  padding: 2.5rem;           /* leggermente ridotto rispetto a 3rem */

  background-color: var(--color-surface);

  border-radius: 4px;

  border: 1px solid rgba(203, 163, 107, 0.2);

}

.process-steps {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 1.2rem;               /* da 1.5rem a 1.2rem */

  text-align: center;

}

.process-step {

  padding: 1.6rem;           /* da 1.8rem a 1.6rem */

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}

.step-number {

  width: 56px;               /* da 60px a 56px */

  height: 56px;

  background-color: var(--color-primary);

  color: var(--color-black);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.7rem;         /* da 1.8rem a 1.7rem */

  font-weight: bold;

  margin: 0 auto 0.5rem;

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

}

.process-step h4 {

  color: var(--color-white);

  margin-bottom: 0.5rem;

  font-size: 1.1rem;

}

.process-step p {

  color: var(--color-text-muted);

  font-size: 0.85rem;

  line-height: 1.4;

}



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

   BANNER

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

.banner-section {

  padding: 5rem 1.5rem;

  background-color: var(--color-surface);

  text-align: center;

  border-top: 1px solid rgba(203, 163, 107, 0.2);

  border-bottom: 1px solid rgba(203, 163, 107, 0.2);

}

.banner-content h2 {

  font-size: 2.25rem;

  margin-bottom: 1rem;

}

.banner-content p {

  color: var(--color-text-muted);

  margin-bottom: 2rem;

  font-size: 1.15rem;

  max-width: 600px;

  margin-left: auto;

  margin-right: auto;

}



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

   GALLERY

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

.gallery { background-color: var(--color-surface); }

.gallery-filters {

  display: flex;

  justify-content: center;

  gap: 1.5rem;

  margin-bottom: 3rem;

}

.filter-btn {

  background: none;

  border: none;

  color: var(--color-text-muted);

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

  font-size: 1rem;

  cursor: pointer;

  transition: color 0.3s;

  position: relative;

  padding-bottom: 5px;

}

.filter-btn.active { color: var(--color-primary); }

@media (hover: hover) {

  .filter-btn:hover { color: var(--color-primary); }

}

.filter-btn.active::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 20px;

  height: 2px;

  background-color: var(--color-primary);

}



.gallery-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

  gap: 2rem;

}

.gallery-item {

  position: relative;

  height: 400px;

  overflow: hidden;

  cursor: pointer;

}

.gallery-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}

@media (hover: hover) {

  .gallery-item:hover img {

    transform: scale(1.05);

    filter: brightness(0.8);

  }

}

.item-overlay {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  padding: 2rem;

  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);

  transform: translateY(20px);

  opacity: 0;

  transition: all 0.4s ease;

}

@media (hover: hover) {

  .gallery-item:hover .item-overlay {

    transform: translateY(0);

    opacity: 1;

  }

}

.item-overlay h3 {

  color: var(--color-white);

  font-size: 1.5rem;

  margin-bottom: 0.5rem;

}



.gallery-load-more {

  margin-top: 2rem;

  display: none;

}



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

   TESTIMONIALS

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

.testimonials {

  background-color: var(--color-bg);

  overflow: hidden;

}

.testimonials-marquee {

  overflow-x: auto;         

  overflow-y: hidden;

  width: 100%;

  position: relative;

  padding: 2rem 0;

  scrollbar-width: none;     

  -ms-overflow-style: none; 

}

.testimonials-marquee::-webkit-scrollbar {

  display: none;             

}

.testimonials-track {

  display: flex;

  gap: 2rem;

  width: max-content;

}



.testimonial-card {

  background: var(--color-bg);

  padding: 1.8rem;

  border-radius: 1.5rem;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  box-shadow: 0 8px 20px rgba(0,0,0,0.2);

  border: 1px solid rgba(203,163,107,0.2);

  width: 350px;

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

}

@media (hover: hover) {

  .testimonial-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 30px rgba(0,0,0,0.3);

    border-color: var(--color-primary);

  }

}

.testimonial-header {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  margin-bottom: 1rem;

  padding-bottom: 0.5rem;

  border-bottom: 1px dashed rgba(203,163,107,0.3);

}

.testimonial-author {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-size: 1.1rem;

  font-weight: 600;

  color: var(--color-white);

}

.testimonial-flag img {

  vertical-align: middle;

  width: 20px;

  height: 15px;

}

.testimonial-text {

  position: relative;

  margin: 1rem 0 0;

  line-height: 1.5;

  color: var(--color-text-muted);

  padding-left: 0.5rem;

  flex: 1;

}

.quote-icon {

  color: var(--color-primary);

  opacity: 0.5;

  font-size: 1.2rem;

  margin-right: 0.3rem;

  vertical-align: middle;

}

.testimonial-text p { display: inline; font-size: 0.95rem; }

.testimonial-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 1rem;

  padding-top: 0.75rem;

  border-top: 1px dashed rgba(203,163,107,0.2);

}

.testimonial-location {

  font-size: 0.85rem;

  color: var(--color-primary);

  display: flex;

  align-items: center;

  gap: 0.3rem;

}

.testimonial-stars {

  color: var(--color-primary);

  font-size: 1rem;

  letter-spacing: 2px;

}



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

   CONTACTS

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

.contacts { background-color: var(--color-surface); }

.contacts-grid {

  display: grid;

  grid-template-columns: 1fr 1.5fr;

  gap: var(--spacing-xl);

}

.info-item {

  display: flex;

  gap: 1.5rem;

  margin-bottom: 2rem;

}

.info-item i {

  font-size: 1.5rem;

  color: var(--color-primary);

  margin-top: 5px;

}

.info-item h4 {

  color: var(--color-white);

  margin-bottom: 0.5rem;

}

.info-item p { color: var(--color-text-muted); }



.contact-form-wrapper {

  background-color: var(--color-bg);

  padding: 3rem;

  border-radius: 4px;

  box-shadow: 0 4px 20px rgba(0,0,0,0.2);

  border: 1px solid rgba(203, 163, 107, 0.2);

}

.contact-form .form-group { margin-bottom: 1.5rem; }

.contact-form label {

  display: block;

  margin-bottom: 0.5rem;

  color: var(--color-text);

  font-size: 0.9rem;

  font-weight: 500;

}

.contact-form input,

.contact-form textarea {

  width: 100%;

  padding: 1rem;

  background-color: var(--color-bg);

  border: 1px solid #333;

  color: var(--color-white);

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

  font-size: 16px;

  transition: all 0.3s ease;

  border-radius: 4px;

  -webkit-appearance: none;

}

.contact-form input:focus,

.contact-form textarea:focus {

  outline: none;

  border-color: var(--color-primary);

  background-color: rgba(203,163,107,0.05);

}

.contact-form button {

  margin-top: 1rem;

  cursor: pointer;

  width: 100%;

}



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

   MAP

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

.map-section {

  background-color: var(--color-bg);

  padding: var(--spacing-xl) 0;

}

.map-container {

  border-radius: 16px;

  overflow: hidden;

  border: 3px solid var(--color-primary);

  height: 400px;

  transition: transform 0.3s ease;

}

.map-container iframe {

  display: block;

  width: 100%;

  height: 100%;

  border: 0;

}

@media (hover: hover) {

  .map-container:hover { transform: scale(1.01); }

}

.map-caption {

  text-align: center;

  margin-top: 1rem;

  font-size: 0.9rem;

  color: var(--color-text-muted);

}



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

   FOOTER

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

.footer {

  padding: 4rem 0 2rem;

  background-color: var(--color-surface);

  color: var(--color-text-muted);

  border-top: 1px solid rgba(203,163,107,0.2);

}

.footer-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 3rem;

  margin-bottom: 3rem;

}

.footer-section h4 {

  color: var(--color-white);

  margin-bottom: 1.5rem;

  font-size: 1.2rem;

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

}

.footer-logo {

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

  color: var(--color-white);

  font-size: 1.8rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 1rem;

}

.footer-logo span { color: var(--color-primary); }

.footer-description {

  margin-bottom: 1.5rem;

  line-height: 1.6;

  font-size: 0.95rem;

}

.footer-social {

  display: flex;

  align-items: center;

  gap: 1.2rem;

  margin-top: 1.5rem;

  flex-wrap: wrap;

}

.footer-social h4 {

  margin-bottom: 0;

}

.footer-social .social-icons {

  margin-top: 0;

}

.social-icons {

  display: flex;

  gap: 1rem;

}

.social-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  background-color: rgba(255,255,255,0.1);

  border-radius: 50%;

  color: var(--color-white);

  transition: all 0.3s ease;

}

@media (hover: hover) {

  .social-icon:hover {

    background-color: var(--color-primary);

    transform: translateY(-3px);

  }

}

.social-icon:active {

  transform: scale(0.95);

}

.footer-links li {

  margin-bottom: 0.8rem;

  font-size: 0.95rem;

}

.footer-links a {

  color: var(--color-text-muted);

  transition: color 0.3s ease;

}

@media (hover: hover) {

  .footer-links a:hover { color: var(--color-primary); }

}

.contact-info-footer p {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 0.8rem;

  font-size: 0.9rem;

}

.contact-info-footer i {

  color: var(--color-primary);

  width: 20px;

}

.footer-bottom {

  padding-top: 2rem;

  border-top: 1px solid rgba(255,255,255,0.1);

  text-align: center;

}

.copyright { margin-bottom: 0.5rem; font-size: 0.9rem; }

.footer-note { font-size: 0.85rem; color: var(--color-text-muted); opacity: 0.8; margin-bottom: 0.5rem;}



.credits {

  font-size: 0.85rem;

  color: var(--color-text-muted);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

}

.credits-icon {

  color: var(--color-primary);

  font-size: 0.9rem;

}

.credits-link {

  color: var(--color-primary);

  font-weight: 500;

  text-decoration: none;

  transition: color 0.3s ease;

}

@media (hover: hover) {

  .credits-link:hover {

    color: var(--color-white);

    text-decoration: underline;

  }

}



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

   LIGHTBOX

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

.lightbox {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.95);

  z-index: 1000;

  justify-content: center;

  align-items: center;

  padding: 2rem;

  backdrop-filter: blur(5px);

  overscroll-behavior: contain;

}

.lightbox.active { display: flex; }

.lightbox-container {

  display: flex;

  flex-direction: column;

  width: 100%;

  max-width: 1400px;

  height: 90vh;

  background: var(--color-surface);

  border-radius: 24px;

  overflow: hidden;

  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

  border: 1px solid rgba(203, 163, 107, 0.3);

  overscroll-behavior: contain;

}

.lightbox-gallery {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #0a0a0a;

  flex: 1.5;

}

.lightbox-image-wrapper {

  position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}

/* Subtle CSS Spinner shown when image is loading */

.lightbox-image-wrapper::before {

  content: "";

  position: absolute;

  width: 40px;

  height: 40px;

  border: 3px solid rgba(203, 163, 107, 0.1);

  border-top-color: var(--color-primary);

  border-radius: 50%;

  animation: lightbox-spin 0.8s linear infinite;

  opacity: 0;

  transition: opacity 0.3s ease;

  pointer-events: none;

  z-index: 1;

}

.lightbox-image-wrapper.loading::before {

  opacity: 1;

}

@keyframes lightbox-spin {

  to { transform: rotate(360deg); }

}

.lightbox-image {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  transition: opacity 0.25s ease-in-out;

  opacity: 1;

  z-index: 2;

}

.lightbox-image.loading {

  opacity: 0;

}

.lightbox-counter {

  position: absolute;

  bottom: 20px;

  right: 20px;

  background: rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(5px);

  color: var(--color-white);

  padding: 0.4rem 0.8rem;

  border-radius: 20px;

  font-size: 0.85rem;

  font-weight: 600;

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

  z-index: 10;

  border: 1px solid rgba(255, 255, 255, 0.2);

  pointer-events: none;

}

.lightbox-nav {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(5px);

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: white;

  font-size: 1.8rem;

  cursor: pointer;

  padding: 0.8rem 1.2rem;

  border-radius: 50%;

  transition: all 0.6s ease;

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 10;

}

@media (hover: hover) {

  .lightbox-nav:hover {

    background: var(--color-primary);

    color: var(--color-black);

    transform: translateY(-50%) scale(1.1);

    border-color: var(--color-primary);

  }

}

.lightbox-nav:active {

  background: var(--color-primary);

  color: var(--color-black);

  border-color: var(--color-primary);

  transform: translateY(-50%) scale(0.95);

  transition: none;

}

.prev { left: 20px; }

.next { right: 20px; }



.lightbox-info {

  flex: 1;

  padding: 2rem;

  display: flex;

  flex-direction: column;

  gap: 1rem;

  background: var(--color-surface);

  border-left: 1px solid rgba(203, 163, 107, 0.2);

  overflow: hidden;

}

.lightbox-header {

  border-bottom: 2px solid rgba(203, 163, 107, 0.3);

  padding-bottom: 1rem;

  flex-shrink: 0;

}

.lightbox-title {

  font-size: 1.8rem;

  font-weight: 700;

  color: var(--color-primary);

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

  margin-bottom: 0.5rem;

}

.lightbox-category {

  display: inline-block;

  background: rgba(203, 163, 107, 0.15);

  color: var(--color-primary);

  padding: 0.3rem 1rem;

  border-radius: 20px;

  font-size: 0.8rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1px;

}

.lightbox-description {

  color: var(--color-text-muted);

  line-height: 1.6;

  font-size: 1rem;

  text-align: justify;

  overflow-y: auto;

  flex: 1;

  padding-right: 0.5rem;

  scrollbar-width: thin;

  scrollbar-color: var(--color-primary) rgba(255, 255, 255, 0.1);

}

/* Pulsante CTA nel lightbox */

.lightbox-description p:has(.btn-contact) {

  text-align: center;

}

.btn-contact {

  display: inline-block;

  margin-top: 1.5rem;

  padding: 0.65rem 1.4rem;

  background-color: var(--color-primary);

  color: var(--color-black) !important;

  text-decoration: none;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1px;

  font-size: 0.8rem;

  border-radius: 4px;

  transition: all 0.3s ease;

}

@media (hover: hover) {

  .btn-contact:hover {

    background-color: var(--color-white);

    color: var(--color-black) !important;

    transform: translateY(-2px);

    box-shadow: 0 4px 15px rgba(203, 163, 107, 0.3);

  }

}

.btn-contact:active {

  background-color: var(--color-white);

  color: var(--color-black) !important;

  transform: translateY(0) scale(0.97);

  box-shadow: 0 2px 8px rgba(203, 163, 107, 0.2);

}

.lightbox-description::-webkit-scrollbar { width: 4px; }

.lightbox-description::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }

.lightbox-description::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 10px; }



.lightbox-footer {

  flex-shrink: 0;

  text-align: center;

  padding-top: 0.5rem;

  margin-top: 0;

}

.lightbox-footer-text {

  font-size: 0.75rem;

  color: var(--color-text-muted);

  opacity: 0.6;

  letter-spacing: 1px;

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

  text-transform: uppercase;

}



/* Bottom panel layout */

.lightbox-bottom-panel {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding: 1rem 2rem 1.5rem 2rem;

  background: var(--color-surface);

  flex-shrink: 0;

}

.lightbox-cta-wrapper {

  width: 100%;

}

.btn-contact-fixed {

  display: block !important;

  width: 100%;

  text-align: center;

  margin-top: 0 !important;

  padding: 0.8rem 1rem !important;

}



.close-lightbox {

  position: absolute;

  top: 20px;

  right: 30px;

  background: rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(5px);

  border-radius: 50%;

  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.6s ease;

  z-index: 20;

  border: 1px solid rgba(255, 255, 255, 0.2);

}

@media (hover: hover) {

  .close-lightbox:hover {

    background: var(--color-primary);

    color: var(--color-black);

    transform: scale(1.1);

  }

  .close-lightbox:hover i { color: var(--color-black); }

}

.close-lightbox:active {

  background: var(--color-primary);

  color: var(--color-black);

  transform: scale(0.95);

  transition: none;

}

.close-lightbox:active i { color: var(--color-black); transition: none; }

.close-lightbox i { font-size: 1.3rem; color: white; transition: color 0.6s ease; }



.lightbox-project-nav {

  display: flex;

  justify-content: space-between;

  gap: 1rem;

  margin-top: 0;

  padding-top: 0;

  border-top: none;

}

.lightbox-project-prev,

.lightbox-project-next {

  flex: 1;

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(203, 163, 107, 0.3);

  color: var(--color-white);

  padding: 0.6rem;

  border-radius: 30px;

  font-size: 0.8rem;

  cursor: pointer;

  transition: all 0.6s ease;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

}

@media (hover: hover) {

  .lightbox-project-prev:hover,

  .lightbox-project-next:hover {

    background: var(--color-primary);

    color: var(--color-black);

    border-color: var(--color-primary);

  }

}

.lightbox-project-prev:active,

.lightbox-project-next:active {

  background: var(--color-primary);

  color: var(--color-black);

  border-color: var(--color-primary);

  transform: scale(0.97);

  transition: none;

}



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

   EXTRA LINKS

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

.whatsapp-link {

  color: var(--color-white);

  text-decoration: underline;

  display: inline-flex;

  align-items: center;

}

@media (hover: hover) {

  .whatsapp-link:hover { color: #25D366; }

}

.social-link {

  display: inline-flex;

  align-items: center;

  color: var(--color-white);

  text-decoration: none;

  transition: all 0.3s ease;

  padding: 4px 8px;

  border-radius: 4px;

}

@media (hover: hover) {

  .social-link:hover {

    text-decoration: underline;

    background-color: rgba(255,255,255,0.1);

  }

  .instagram-link:hover { color: #E4405F; }

  .facebook-link:hover { color: #1877F2; }

}

.social-link:active {

  transform: scale(0.98);

}

.social-link i {

  width: 20px;

  text-align: center;

  font-size: 1.1em;

}

.whatsapp-btn {

  background-color: #25D366;

  color: white;

  display: inline-flex;

  align-items: center;

  gap: 8px;

}

@media (hover: hover) {

  .whatsapp-btn:hover {

    background-color: #128C7E;

    color: white;

  }

}

.whatsapp-btn:active {

  transform: scale(0.97);

}



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

   RESPONSIVE MEDIA QUERIES

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



/* ≥ 768px */

@media (min-width: 768px) {

  .testimonials-marquee::before,

  .testimonials-marquee::after {

    content: "";

    position: absolute;

    top: 0;

    width: 15vh;

    height: 100%;

    z-index: 2;

    pointer-events: none;

  }

  .testimonials-marquee::before {

    left: 0;

    background: linear-gradient(to right, var(--color-bg), transparent);

  }

  .testimonials-marquee::after {

    right: 0;

    background: linear-gradient(to left, var(--color-bg), transparent);

  }

  .lightbox-container {

    display: grid;

    grid-template-columns: 1.5fr 1fr;

    grid-template-rows: 1fr auto;

  }

  .lightbox-content-scroll {

    display: contents;

  }

  .lightbox-gallery {

    grid-column: 1;

    grid-row: 1 / 3;

    background: #0a0a0a;

    height: 100%;

  }

  .lightbox-info {

    grid-column: 2;

    grid-row: 1;

    border-left: 1px solid rgba(203, 163, 107, 0.2);

    height: 100%;

  }

  .lightbox-bottom-panel {

    grid-column: 2;

    grid-row: 2;

    border-left: 1px solid rgba(203, 163, 107, 0.2);

  }

}



/* ≤ 1024px */

@media (max-width: 1024px) {

  .section { padding: 5rem 0; }

  .banner-section { padding: 5rem 1.5rem; }

  .hero-title { font-size: 3.5rem; }

  .about-grid,

  .contacts-grid { gap: 2rem; }

  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  .banner-content h2 { font-size: 2.2rem; }

  .banner-content p { font-size: 1.1rem; }



  /* Processi: 2 colonne su tablet */

.process-steps {

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1rem;

}

.process-step { padding: 1.4rem; }

.step-number { width: 52px; height: 52px; font-size: 1.5rem; }

.service-process h3 { font-size: 1.9rem; }

.process-step h4 { font-size: 1.05rem; }

.process-step p { font-size: 0.8rem; }

}



/* ≤ 900px (tablet & mobile menu) */

@media (max-width: 900px) {

  .header { padding: 1.2rem 1.5rem; }

  .header.scrolled { padding: 0.8rem 1.5rem; }

  .logo-text { font-size: 1.6rem; }



  .menu-toggle { display: flex; z-index: 101; }

  .nav {

    position: fixed;

    top: 0;

    right: -100%;

    width: 100%;

    height: 100vh;

    background-color: var(--color-bg);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: right 0.5s ease;

  }

  .nav.active { right: 0; }

  .nav-list {

    flex-direction: column;

    gap: 2rem;

    text-align: center;

  }

  .nav-link { font-size: 1.5rem; }



  .social-header { display: none; }

  .mobile-header-social { display: flex; }

  .mobile-social-item { display: block; margin-top: 2rem; text-align: center; }



  .hero-title { font-size: 3rem; }

  .about-grid,

  .contacts-grid { grid-template-columns: 1fr; }



  .lome-grid { display: flex; flex-direction: column; gap: 1.5rem; }

  .lome-title { font-size: 2.2rem; margin-bottom: 0.5rem; }

  #chi-siamo .section-title { font-size: 2.2rem; }

  .lome-image { order: 0;                 margin-bottom: 1rem; }

  .lome-content { order: 0; }



  .contact-form-wrapper { padding: 2.5rem; }

  .section-title { font-size: 2.5rem; }

  .lead { font-size: 1.15rem; }



  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  .gallery-item { height: 280px; }

  .item-overlay h3 { font-size: 1rem; }

  .item-overlay p { font-size: 0.8rem; }



  /* Banner */

  .banner-section { padding: 4rem 1.5rem; }

  .banner-content h2 { font-size: 2rem; }

  .banner-content p { font-size: 1.05rem; }



  /* Servizi (carousel) */

  .service-card {

    display: flex;

    flex-direction: column;

    height: auto;

  }

  .service-card p { flex: 1; }

  .service-features { margin-top: auto; }



  /* Processi: resta 2 colonne (ereditato da ≤1024) */

  .service-process { padding: 1rem; margin: 2rem 0 0 0; }

}



/* ≤ 768px */

@media (max-width: 768px) {

  .container { padding: 0 1.2rem; }

  .section { padding: 4rem 0; }

  .hero-bg { background-attachment: scroll; }

  .scroll-indicator {

    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));

  }

  .scroll-indicator span {

    font-size: 0.7rem;

    letter-spacing: 1.5px;

  }

  .scroll-indicator i { font-size: 0.9rem; }



  .about-image { max-width: 375px; }

  .contact-form-wrapper { padding: 2rem; }



  /* Banner */

  .banner-section { padding: 3.5rem 1.2rem; }

  .banner-content h2 { font-size: 1.8rem; }

  .banner-content p { font-size: 1rem; }

  .banner-content .btn { padding: 0.8rem 1.5rem; font-size: 0.85rem; }



  /* Galleria */

  .gallery-item { height: 280px; }



  /* Testimonianze */

  .testimonial-card { width: 300px; padding: 1.5rem; }

  .testimonial-header {

    flex-direction: row;          /* rimane in riga */

    align-items: center;          /* centra verticalmente */

    gap: 0.4rem;

  }

  .testimonial-author {

    font-size: 0.9rem;

    flex: 1;

  }

  .testimonial-flag img {

    width: 18px;

    height: 13px;

  }

  .testimonial-location { font-size: 0.8rem; }



  /* Servizi (mobile) */

  .services-grid {

    display: flex;

    flex-wrap: nowrap;

    overflow-x: auto;

    overflow-y: hidden;

    gap: 1.2rem;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    padding-bottom: 1rem;

    margin-bottom: 2rem;

    scrollbar-width: thin;

  }

  .services-grid::-webkit-scrollbar { height: 4px; }

  .services-grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }

  .services-grid::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 10px; }

  .service-card {

    flex: 0 0 85%;

    scroll-snap-align: start;

    padding: 1.2rem;

    margin-bottom: 0.5rem;

  }

  .service-card h3 { font-size: 1.1rem; }

  .service-card p { font-size: 0.85rem; }

  .service-icon {

    width: 45px;

    height: 45px;

    font-size: 1.3rem;

    margin-bottom: 1rem;

  }

  .service-features li { font-size: 0.75rem; padding-left: 1.2rem; }

  .services-grid::after { content: ''; display: block; flex: 0 0 0.5rem; }



  .service-process { padding: 1rem; margin-top: 2rem; }

  .service-process h3 { font-size: 1.6rem; }



  /* Processi: 2 colonne compatte */

.process-steps {

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.8rem;

}

.process-step { padding: 1.1rem; }

.step-number { width: 44px; height: 44px; font-size: 1.3rem; }

.process-step h4 { font-size: 1rem; }

.process-step p { font-size: 0.75rem; }



  /* Contatti: form prima, info dopo */

  .contacts-grid {

    display: flex;

    flex-direction: column;

  }

  .contact-info {

    order: 2;

  }

  .contact-form-wrapper {

    order: 1;

  }



  /* Lightbox mobile */

  .lightbox { padding: 0.5rem; }

  .lightbox-container {

    height: 85vh;

    max-height: 85vh;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    overscroll-behavior: contain;

    position: relative;

  }

  .lightbox-container::-webkit-scrollbar {

    display: none;

  }

  .lightbox-content-scroll {

    display: flex;

    flex-direction: column;

    overflow-y: auto;

    flex: 1;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color: var(--color-primary) rgba(255, 255, 255, 0.1);

  }

  .lightbox-content-scroll::-webkit-scrollbar {

    width: 2px;

  }

  .lightbox-content-scroll::-webkit-scrollbar-track {

    background: rgba(255, 255, 255, 0.05);

    border-radius: 10px;

  }

  .lightbox-content-scroll::-webkit-scrollbar-thumb {

    background: var(--color-primary);

    border-radius: 10px;

  }

  .lightbox-gallery {

    flex: none;

    height: 35vh;

    min-height: 250px;

    touch-action: pan-y;

  }

  .lightbox-image {

    touch-action: pan-y;

    -webkit-user-drag: none;

    user-select: none;

  }

  .lightbox-counter {

    bottom: 10px;

    right: 10px;

    font-size: 0.75rem;

    padding: 0.25rem 0.6rem;

  }

  .lightbox-nav { width: 40px; height: 40px; font-size: 1.4rem; padding: 0.5rem 1rem; }

  .prev { left: 10px; }

  .next { right: 10px; }

  .lightbox-info {

    padding: 0;

    gap: 0.75rem;

    height: auto;

    display: flex;

    flex-direction: column;

    overflow: visible;

    flex: none;

  }

  .lightbox-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 0.5rem;

    padding: 1rem 1rem 0.5rem 1rem;

    min-height: 0;

    flex-shrink: 0;

    border-bottom: 2px solid rgba(203, 163, 107, 0.3);

  }

  .lightbox-title { font-size: 1.3rem; margin-bottom: 0; line-height: 1.3; }

  .lightbox-category {

    font-size: 0.7rem;

    padding: 0.25rem 0.8rem;

    white-space: nowrap;

    flex-shrink: 0;

    line-height: 1.3;

    display: inline-flex;

    align-items: center;

    height: fit-content;

  }

  .lightbox-description {

    font-size: 0.85rem;

    line-height: 1.45;

    overflow: visible;

    height: auto;

    padding: 0 1rem 2rem 1rem;

  }

  .lightbox-footer-text { font-size: 0.65rem; }

  .close-lightbox { top: 10px; right: 10px; width: 36px; height: 36px; }

  .close-lightbox i { font-size: 1rem; }

  .lightbox-project-nav { margin-top: 0; padding-top: 0; }

  .lightbox-project-prev,

  .lightbox-project-next { padding: 0.4rem; font-size: 0.7rem; }

  .lightbox-bottom-panel {

    background: var(--color-surface);

    margin: 0;

    padding: 1rem 1rem 0.75rem 1rem;

    border-top: 1px solid rgba(255, 255, 255, 0.15);

    gap: 0.5rem;

    flex-shrink: 0;

    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.5);

    z-index: 10;

  }

  .btn-contact-fixed {

    font-size: 0.75rem !important;

    padding: 0.6rem 1rem !important;

  }



  /* Footer */

  .footer { padding: 3rem 0 1.5rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

  .footer-section { text-align: center; }

  .footer-social {

    flex-direction: column;

    gap: 0.5rem;

    justify-content: center;

  }

  .footer-social h4 {

    margin-bottom: 0.5rem;

  }

  .social-icons { justify-content: center; }

  .contact-info-footer p { justify-content: center; }

}



/* ≤ 550px (galleria mobile: 2 colonne anche su schermi piccoli) */

@media (max-width: 550px) {

  .gallery-grid {

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

    gap: 0.8rem;

  }

  .gallery-item {

    height: 240px;

  }

  .item-overlay {

    padding: 1rem;

  }

  .item-overlay h3 {

    font-size: 1rem;

  }

}



/* Sotto i 360px (pochissimi telefoni obsoleti): 1 colonna */

@media (max-width: 360px) {

  .gallery-grid {

    grid-template-columns: 1fr;

    gap: 1rem;

  }

  .gallery-item {

    height: 280px;

  }

  .item-overlay {

    padding: 1rem;

  }

}



/* ≤ 480px (mobile molto piccolo) */

@media (max-width: 480px) {

  .container { padding: 0 1rem; }

  .section { padding: 3rem 0; }

  .hero-title { font-size: 2rem; margin-bottom: 1rem; }

  .hero-subtitle { font-size: 1rem; margin-bottom: 2rem; }

  .section-title { font-size: 2rem; margin-bottom: 1.5rem; }

  #chi-siamo .section-title,

  .lome-title { font-size: 1.6rem; }

  .logo-text { font-size: 1.35rem; }

  .lead { font-size: 1rem; }

  .scroll-indicator { bottom: 1rem; }

  .about-image { max-width: 312px; }

  .btn { padding: 0.8rem 1.5rem; font-size: 0.9rem; }



  /* Banner */

  .banner-section { padding: 2.8rem 1rem; }

  .banner-content h2 { font-size: 1.5rem; }

  .banner-content p { font-size: 0.9rem; margin-bottom: 1.5rem; }

  .banner-content .btn { padding: 0.7rem 1.2rem; font-size: 0.8rem; }



  .service-process { padding: 0.8rem; }

  .service-process h3 { font-size: 1.4rem; }



  /* Processi: 2 colonne molto compatte */

.process-steps {

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.5rem;

}

.process-step { padding: 0.9rem; }

.step-number { width: 38px; height: 38px; font-size: 1.1rem; margin-bottom: 0.4rem; }

.process-step h4 { font-size: 0.95rem; }

.process-step p { font-size: 0.7rem; }



  /* Lightbox mini */

  .lightbox-header { gap: 0.3rem; }

  .lightbox-title { font-size: 1.1rem; line-height: 1.25; }

  .lightbox-category {

    font-size: 0.6rem;

    padding: 0.15rem 0.6rem;

    line-height: 1.25;

  }

  .lightbox-description { font-size: 0.8rem; line-height: 1.4; }

}



/* iOS fix */

@supports (-webkit-touch-callout: none) {

  .hero-bg { background-attachment: scroll; }

}