@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500;600&display=swap');

:root{
  --ink:#2a211a;
  --paper:#f4efe5;
  --gold:#b98a43;
  --dark:#17130f;
  --soft:#6e6257;
  --line:rgba(42,33,26,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:"Montserrat",system-ui,sans-serif;
}

img{display:block;width:100%}
a{text-decoration:none;color:inherit}

.site-header{
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  width:100%;
  color:#fff;
}
.header-inner{
  max-width:1400px;
  margin:auto;
  padding:26px 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.brand{
  display:flex;
  flex-direction:column;
  letter-spacing:.18em;
  font-family:"Cormorant Garamond",serif;
  font-weight:700;
  font-size:1.7rem;
  line-height:.8;
}
.brand small{
  margin-top:8px;
  font-family:"Montserrat",sans-serif;
  font-size:.62rem;
  letter-spacing:.45em;
}
.main-nav{
  display:flex;
  gap:34px;
  align-items:center;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:600;
}
.main-nav a:last-child{
  border:1px solid rgba(255,255,255,.65);
  padding:13px 18px;
}
.menu-toggle{display:none}

.hero{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  background-image:url("../images/meetlife-hero-desk.webp");
  background-position:center;
  background-size:cover;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(10,8,6,.78) 0%,rgba(10,8,6,.45) 34%,rgba(10,8,6,.08) 68%,rgba(10,8,6,.03) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:1400px;
  width:100%;
  margin:auto;
  padding:155px 70px 90px;
  color:#fff;
}
.eyebrow{
  margin:0 0 10px;
  color:#f2c97d;
  font-size:.78rem;
  letter-spacing:.26em;
  font-weight:700;
  text-shadow:0 2px 8px rgba(0,0,0,.75);
}
.eyebrow.dark{color:#9a7137}
.hero h1,
.section-heading h2,
.pantaneto h2,
.visit h2{
  font-family:"Cormorant Garamond",serif;
}
.hero h1{
  font-size:clamp(4.5rem,8vw,8rem);
  line-height:.78;
  font-weight:600;
  margin:0 0 36px;
  max-width:650px;
}
.hero-copy{
  max-width:470px;
  font-size:1.05rem;
  line-height:1.8;
}
.hero-link{
  display:inline-flex;
  gap:16px;
  align-items:center;
  margin-top:25px;
  color:#e0b66f;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.8rem;
  font-weight:600;
}

.intro,
.moments,
.visit{
  max-width:1250px;
  margin:auto;
  padding:90px 40px;
}
.intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:end;
}
.section-heading h2,
.visit h2{
  margin:0;
  font-size:clamp(2.7rem,4.4vw,4.5rem);
  line-height:1;
  font-weight:600;
}
.intro-text{
  margin:0;
  font-size:1.05rem;
  line-height:1.9;
  color:var(--soft);
}

.moments{
  padding-top:35px;
}
.moments .section-heading{
  text-align:center;
  margin-bottom:48px;
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
.card{
  background:#fbf7ef;
  border:1px solid var(--line);
  transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(42,33,26,.12);
}
.card img{
  aspect-ratio:4/5;
  object-fit:cover;
}
.card-body{
  text-align:center;
  padding:28px 26px 34px;
}
.card h3{
  margin:0 0 12px;
  font-family:"Cormorant Garamond",serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:1.7rem;
}
.card p{
  margin:0;
  line-height:1.7;
  color:var(--soft);
  font-size:.92rem;
}

.pantaneto{
  position:relative;
  background:
    linear-gradient(rgba(22,16,11,.72),rgba(22,16,11,.78)),
    url("../images/meetlife-hero-desk.webp") center 62%/cover fixed;
  color:#fff;
}
.pantaneto-inner{
  max-width:850px;
  margin:auto;
  padding:120px 40px;
  text-align:center;
}
.pantaneto h2{
  margin:0 0 28px;
  font-size:clamp(3rem,5vw,5rem);
}
.pantaneto p{
  max-width:680px;
  margin:0 auto;
  line-height:1.9;
  color:rgba(255,255,255,.82);
}
.pantaneto blockquote{
  margin:55px auto 0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2rem,3.5vw,3.5rem);
  line-height:1.15;
  color:#e6c28c;
}

.visit{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:50px;
}
.visit p{color:var(--soft)}
.visit-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px 24px;
}
.visit-links a{
  border-bottom:1px solid var(--gold);
  padding-bottom:5px;
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}

footer{
  background:var(--dark);
  color:#eee6dc;
  padding:28px 42px;
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  font-size:.82rem;
}
footer div{
  display:flex;
  gap:22px;
  align-items:center;
}
footer span,
footer small{opacity:.65}

/* TABLET */
@media (max-width:900px){
  .header-inner{padding:22px 26px}
  .main-nav{
    display:none;
    position:absolute;
    top:82px;
    right:20px;
    left:20px;
    background:rgba(20,16,12,.96);
    padding:25px;
    flex-direction:column;
    align-items:flex-start;
  }
  .main-nav.open{display:flex}
  .main-nav a:last-child{border:0;padding:0}
  .menu-toggle{
    display:flex;
    border:0;
    background:transparent;
    flex-direction:column;
    gap:5px;
    padding:8px;
  }
  .menu-toggle span{
    width:27px;
    height:2px;
    background:#fff;
  }
  .intro{grid-template-columns:1fr;gap:28px}
  .cards{grid-template-columns:1fr}
  .card{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
  }
  .card img{height:100%;aspect-ratio:auto}
  .visit{align-items:flex-start;flex-direction:column}
}

/* SMARTPHONE */
@media (max-width:600px){
  .header-inner{padding:19px 18px}
  .brand{font-size:1.35rem}

  .hero{
    min-height:100svh;
    background-image:url("../images/meetlife-hero-smartphone.webp");
    background-position:center top;
  }

  .hero-overlay{
    background:linear-gradient(180deg,rgba(10,8,6,.08) 0%,rgba(10,8,6,.06) 34%,rgba(10,8,6,.42) 63%,rgba(10,8,6,.72) 100%);
  }

  .hero-content{
    align-self:flex-end;
    padding:118px 22px 185px;
  }

  .hero .eyebrow{
    color:#ffd993;
    background:rgba(14,11,8,.58);
    text-shadow:0 2px 8px rgba(0,0,0,.9);
  }

  .hero h1{
    font-size:clamp(3.7rem,18vw,5.5rem);
    line-height:.84;
    margin-bottom:22px;
    text-shadow:0 3px 18px rgba(0,0,0,.45);
  }

  .hero-copy{
    font-size:.93rem;
    line-height:1.65;
    max-width:100%;
    color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.75);
  }

  .intro,.moments,.visit{padding:64px 18px}
  .section-heading h2,.visit h2{font-size:2.75rem}

  .cards{gap:26px}

  .card{
    display:block;
    background:#fffaf2;
    overflow:hidden;
  }

  .card img{
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    background:#efe6d7;
  }

  .card-body{
    display:block;
    padding:25px 20px 30px;
    min-height:150px;
    background:#fffaf2;
  }

  .card h3{
    color:#2a211a;
    font-size:1.65rem;
    margin-bottom:10px;
  }

  .card p{
    display:block;
    color:#5f554d;
    font-size:.95rem;
    line-height:1.65;
    opacity:1;
  }

  .pantaneto{background-attachment:scroll}
  .pantaneto-inner{padding:86px 22px}

  footer{
    padding:28px 22px;
    flex-direction:column;
    align-items:flex-start;
  }

  footer div{
    flex-direction:column;
    gap:5px;
    align-items:flex-start;
  }
}


.hero .eyebrow{
  display:inline-block;
  padding:6px 10px 6px 11px;
  background:rgba(18,14,10,.42);
  border-radius:3px;
  backdrop-filter:blur(2px);
}

#backToTop {
  position: fixed;
  right: 22px;
  bottom: 45px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(215, 170, 98, .65);
  border-radius: 50%;
  background: rgba(23, 19, 15, .90);
  color: #d7aa62;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 1000;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease,
    background .25s ease;
}

#backToTop.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#backToTop:hover {
  background: #2a211a;
}

@media (max-width: 600px) {
  #backToTop {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
    font-size: 21px;
  }
}

/* TABLET VERTICALE */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  .hero {
    min-height: 82svh;
    background-image: url("../images/meetlife-hero-smartphone.webp");
    background-position: center 42%;
  }

  .hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(10,8,6,.10) 0%,
        rgba(10,8,6,.10) 32%,
        rgba(10,8,6,.48) 62%,
        rgba(10,8,6,.84) 100%
      );
  }

  .hero-content {
    align-self: flex-end;
    padding: 120px 50px 55px;
  }

  .hero h1 {
    font-size: clamp(4.5rem, 11vw, 6.5rem);
    line-height: .84;
    margin-bottom: 24px;
    text-shadow: 0 3px 18px rgba(0,0,0,.45);
  }

  .hero-copy {
    max-width: 600px;
    font-size: 1rem;
    line-height: 1.7;
    text-shadow: 0 2px 8px rgba(0,0,0,.70);
  }

  .hero .eyebrow {
    color: #ffd993;
    background: rgba(14,11,8,.55);
  }
}