/* =========================================
   OUR HERO THE VILLAIN
   MINIMAL LUXURY LANDING
========================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
}

html{
  background:#ffffff;
}

body.luxury-landing{
  margin:0;
  padding:0;

  width:100%;
  min-height:100vh;

  background:#ffffff;
  color:#080808;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

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


/* =========================================
   FULL PAGE
========================================= */

.landing-page{
  width:100%;
  min-height:100vh;

  display:flex;
  flex-direction:column;

  align-items:center;

  padding:
    38px
    24px
    24px;

  background:#ffffff;
}


/* =========================================
   MAIN CENTER
========================================= */

.landing-center{
  width:100%;

  flex:1;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  text-align:center;

  padding-bottom:70px;
}


/* =========================================
   LOGO
========================================= */

.landing-logo{
  width:clamp(
    160px,
    15vw,
    220px
  );

  height:auto;

  margin:
    0
    auto
    34px;
}


/* =========================================
   COMPANY NAME
========================================= */

.landing-title{
  margin:0;

  color:#080808;

  font-size:clamp(
    14px,
    1.2vw,
    17px
  );

  font-weight:500;

  line-height:1.6;

  letter-spacing:.18em;

  text-transform:uppercase;
}

.landing-title span{
  display:block;

  font-size:.88em;

  letter-spacing:.22em;
}


/* =========================================
   ENTER
========================================= */

.landing-enter{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:10px;

  margin-top:58px;

  padding:10px 4px;

  font-size:11px;

  font-weight:500;

  line-height:1;

  letter-spacing:.18em;

  text-transform:uppercase;

  transition:opacity .25s ease;
}

.landing-arrow{
  display:inline-block;

  font-size:14px;

  line-height:1;

  letter-spacing:0;

  transition:transform .3s ease;
}

.landing-enter:hover{
  opacity:.48;
}

.landing-enter:hover .landing-arrow{
  transform:translateX(5px);
}


/* =========================================
   FOOTER
========================================= */

.landing-footer{
  width:100%;

  max-width:1180px;

  margin:
    0
    auto;

  text-align:center;
}


/* SOCIALS */

.landing-socials{
  display:flex;

  align-items:center;
  justify-content:center;

  gap:14px;
}

.landing-socials a{
  width:23px;
  height:23px;

  display:flex;

  align-items:center;
  justify-content:center;

  opacity:.65;

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

.landing-socials a:hover{
  opacity:1;
  transform:translateY(-2px);
}

.landing-socials img{
  width:100%;
  height:100%;

  object-fit:contain;

  filter:
    grayscale(1)
    brightness(0);
}

.landing-youtube{
  transform:scale(1.18);
}


/* COPYRIGHT */

.landing-copyright{
  margin-top:15px;

  font-size:8px;

  line-height:1;

  letter-spacing:.15em;

  text-transform:uppercase;

  color:rgba(8,8,8,.46);
}


/* LEGAL */

.landing-footer-links{
  margin-top:18px;

  display:flex;

  align-items:center;
  justify-content:center;

  flex-wrap:wrap;

  gap:
    12px
    22px;
}

.landing-footer-links a{
  font-size:8px;

  line-height:1;

  letter-spacing:.16em;

  text-transform:uppercase;

  color:rgba(8,8,8,.56);

  transition:color .2s ease;
}

.landing-footer-links a:hover{
  color:#080808;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width:768px){

  body.luxury-landing{
    min-height:100svh;
  }

  .landing-page{
    min-height:100svh;

    padding:
      26px
      18px
      20px;
  }

  .landing-center{
    padding-bottom:54px;
  }

  .landing-logo{
    width:min(
      190px,
      54vw
    );

    margin-bottom:30px;
  }

  .landing-title{
    font-size:13px;

    letter-spacing:.15em;
  }

  .landing-enter{
    margin-top:48px;

    font-size:10px;
  }

  .landing-footer-links{
    gap:
      12px
      16px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width:420px){

  .landing-page{
    padding-left:14px;
    padding-right:14px;
  }

  .landing-logo{
    width:170px;
  }

  .landing-title{
    font-size:12px;
  }

  .landing-footer-links{
    gap:
      10px
      13px;
  }

  .landing-footer-links a{
    font-size:7px;
  }

}


/* =========================================
   ACCESSIBILITY
========================================= */

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

  .landing-enter,
  .landing-arrow,
  .landing-socials a{
    transition:none;
  }

}