*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#f4f1ec;
  color:#171717;
  font-family:Arial,Helvetica,sans-serif;
}

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

.topbar{
  height:82px;
  padding:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#f4f1ec;
}

.logo{
  font-size:25px;
  font-weight:700;
  letter-spacing:-1px;
}

.logo span{
  font-weight:400;
}

nav{
  display:flex;
  gap:30px;
  font-size:14px;
}

.hero{
  height:calc(100vh - 82px);
  min-height:650px;
  position:relative;
  background:
    url('/assets/img/homelaccato.png')
    center center / cover no-repeat;
}

.overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.50),
      rgba(0,0,0,.05)
    );
}

.hero-content{
  position:absolute;
  left:7%;
  bottom:10%;
  max-width:900px;
  color:white;
}

.eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  margin-bottom:24px;
}

.eyebrow.dark{
  color:#725f51;
}

.hero h1,
.intro h2,
.project h2,
.about h2,
.contact h2,
.collection h3{
  font-family:Georgia,serif;
  font-weight:400;
}

.hero h1{
  font-size:clamp(52px,6vw,92px);
  line-height:.98;
  margin:0 0 28px;
}

.hero p{
  font-size:19px;
  max-width:650px;
}

.btn{
  display:inline-block;
  margin-top:20px;
  background:white;
  color:#111;
  padding:15px 24px;
  border-radius:100px;
}

.intro{
  padding:120px 7%;
}

.intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
}

.intro h2,
.project h2,
.about h2,
.contact h2{
  font-size:clamp(42px,5vw,70px);
  line-height:1.02;
  margin:0;
}

.intro-grid p{
  font-size:19px;
  line-height:1.7;
}

.collections{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.collection{
  min-height:600px;
  position:relative;
  background-size:cover;
  background-position:center;
}

.collection:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      0deg,
      rgba(0,0,0,.65),
      rgba(0,0,0,.04)
    );
}

.collection > div{
  position:absolute;
  z-index:2;
  bottom:45px;
  left:45px;
  right:45px;
  color:white;
}

.collection h3{
  font-size:44px;
  margin:8px 0 12px;
}

.collection span{
  font-size:12px;
  letter-spacing:.18em;
}

.collection p{
  font-size:17px;
}

.bath{
  background-image:
  url('/assets/img/arredobagno.png');
}

.surfaces{
  background-image:
  url('/assets/img/pavimenti.png');
}

.radiators{
  background-image:
  url('/assets/img/termoarredi.png');
}

.fabrics{
  background-image:
  url('/assets/img/tessuti.png');
}

.project{
  padding:130px 7%;
}

.project > div{
  max-width:900px;
}

.project p{
  font-size:20px;
  max-width:650px;
}

.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:760px;
  background:#9b775f;
  color:white;
}

.about-image{
  background:
  url('https://images.unsplash.com/photo-1615529328331-f8917597711f?auto=format&fit=crop&w=1400&q=85')
  center / cover;
}

.about-copy{
  padding:100px 8%;
  align-self:center;
}

.about-copy p{
  max-width:580px;
  font-size:18px;
  line-height:1.65;
}

.contact{
  padding:120px 7%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
}

.contact-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.contact-details p{
  line-height:1.6;
}

footer{
  padding:35px 5%;
  background:#e9e3da;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
}

@media(max-width:800px){

  .topbar{
    height:68px;
  }

  nav{
    display:none;
  }

  .hero{
    height:80vh;
  }

  .hero-content{
    left:24px;
    right:24px;
    bottom:55px;
  }

  .hero h1{
    font-size:47px;
  }

  .intro{
    padding:80px 24px;
  }

  .intro-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

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

  .collection{
    min-height:520px;
  }

  .collection > div{
    left:25px;
    right:25px;
  }

  .collection h3{
    font-size:38px;
  }

  .project{
    padding:90px 24px;
  }

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

  .about-image{
    min-height:500px;
  }

  .about-copy{
    padding:80px 24px;
  }

  .contact{
    padding:80px 24px;
    grid-template-columns:1fr;
    gap:50px;
  }

  .contact-details{
    grid-template-columns:1fr;
  }

}

/* LOGO LACCATOLUCIDO */
.logo img{
  display:block;
  width:auto;
  height:46px;
  max-width:220px;
  object-fit:contain;
}

footer .logo img{
  height:40px;
}

@media(max-width:800px){
  .logo img{
    height:38px;
    max-width:190px;
  }
}

/* Spaziatura collezioni */
.collections{
  gap:14px;
  padding:14px;
  background:#f4f1ec;
}