*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --black:#000000;
  --black2:#050505;
  --black3:#0b0b0b;
  --white:#ffffff;
  --soft:rgba(255,255,255,.68);
  --dim:rgba(255,255,255,.36);
  --line:rgba(255,255,255,.13);
}

html{
  scroll-behavior:smooth;
  background:#000000;
}

body{
  background:#000000 !important;
  color:#ffffff;
  font-family:'Inter',Arial,sans-serif;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.10),transparent 22%),
    radial-gradient(circle at 15% 75%,rgba(255,255,255,.065),transparent 24%),
    linear-gradient(180deg,#000000 0%,#050505 55%,#000000 100%);
}

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

.grain{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.055;
  background-image:radial-gradient(rgba(255,255,255,.9) .6px,transparent .6px);
  background-size:3px 3px;
  mix-blend-mode:screen;
}

.loader{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  background:#000000;
  animation:loaderOut .8s ease 1.3s forwards;
}

.loader span{
  font-size:15vw;
  font-weight:900;
  letter-spacing:-.12em;
  color:#ffffff;
  animation:loaderText 1s cubic-bezier(.16,1,.3,1);
}

@keyframes loaderText{
  from{transform:translateY(120%) rotate(8deg);opacity:0}
  to{transform:none;opacity:1}
}

@keyframes loaderOut{
  to{opacity:0;visibility:hidden}
}

.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:9000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 4vw;
  color:#ffffff;
}

.logo{
  color:#ffffff;
  font-weight:900;
  font-size:1.5rem;
  letter-spacing:-.08em;
}

.menu-btn{
  color:#ffffff;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  padding:14px 22px;
  cursor:pointer;
  backdrop-filter:blur(18px);
}

.menu{
  position:fixed;
  inset:0;
  z-index:8500;
  background:rgba(0,0,0,.96);
  backdrop-filter:blur(30px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:7vw;
  transform:translateY(-105%);
  transition:.75s cubic-bezier(.76,0,.24,1);
}

.menu.open{
  transform:translateY(0);
}

.menu a{
  color:#ffffff;
  font-size:clamp(4rem,12vw,12rem);
  font-weight:900;
  letter-spacing:-.12em;
  line-height:.82;
}

.hero{
  min-height:100svh;
  padding:16vh 4vw 8vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  background:
    radial-gradient(circle at 78% 20%,rgba(255,255,255,.10),transparent 20%),
    radial-gradient(circle at 22% 82%,rgba(255,255,255,.055),transparent 25%),
    linear-gradient(180deg,#000000 0%,#050505 72%,#000000 100%);
}

.tiny{
  font-family:'Cormorant Garamond',serif;
  font-size:1.02rem;
  letter-spacing:.17em;
  color:rgba(255,255,255,.68);
  margin-bottom:3vh;
  font-style:italic;
}

.hero h1{
  color:#ffffff;
  font-size:clamp(5rem,16vw,18rem);
  line-height:.75;
  letter-spacing:-.12em;
  font-weight:900;
  text-shadow:0 0 55px rgba(255,255,255,.10);
}

.hero h1 span{
  display:block;
  transform-origin:left bottom;
}

.hero-circle{
  position:absolute;
  right:5vw;
  top:22vh;
  width:220px;
  height:220px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.20);
  display:grid;
  place-items:center;
  text-align:center;
  font-family:'Cormorant Garamond',serif;
  font-size:.94rem;
  letter-spacing:.18em;
  color:#ffffff;
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(12px);
  animation:spin 18s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

.lead{
  width:min(640px,90vw);
  margin-top:5vh;
  margin-left:auto;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.25rem,2vw,1.78rem);
  line-height:2;
  color:rgba(255,255,255,.68);
}

.marquee{
  overflow:hidden;
  border-block:1px solid rgba(255,255,255,.10);
  background:#000000;
}

.marquee div{
  display:flex;
  width:max-content;
  animation:mar 16s linear infinite;
}

.marquee span{
  white-space:nowrap;
  color:#ffffff;
  font-size:clamp(4rem,10vw,12rem);
  font-weight:900;
  letter-spacing:-.12em;
}

@keyframes mar{
  to{transform:translateX(-50%)}
}

.chaos{
  min-height:130vh;
  position:relative;
  padding:14vh 4vw;
  overflow:hidden;
  background:
    radial-gradient(circle at 70% 30%,rgba(255,255,255,.075),transparent 25%),
    linear-gradient(180deg,#000000,#050505 58%,#000000);
}

.big-title{
  position:absolute;
  left:-2vw;
  top:8vh;
  color:rgba(255,255,255,.055);
  font-size:clamp(7rem,24vw,26rem);
  line-height:.72;
  letter-spacing:-.14em;
  font-weight:900;
}

.floating-text{
  position:absolute;
  z-index:2;
  color:#ffffff;
  font-size:clamp(2rem,5vw,6rem);
  font-weight:900;
  letter-spacing:-.1em;
  text-shadow:0 0 45px rgba(255,255,255,.12);
}

.t1{
  left:8vw;
  top:40vh;
  transform:rotate(-7deg);
}

.t2{
  right:5vw;
  top:78vh;
  transform:rotate(5deg);
}

.visual{
  position:absolute;
  border-radius:36px;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 40px 120px rgba(0,0,0,.90);
}

.v1{
  width:42vw;
  height:52vh;
  right:8vw;
  top:22vh;
  background-image: url("../img/card/c01.jpg");
  background-size: cover;
}

.v2{
  width:34vw;
  height:42vh;
  left:12vw;
  bottom:10vh;
  background-image: url("../img/card/c02.jpg");
  background-size: cover;
}

.about-copy{
  position:absolute;
  right:8vw;
  bottom:8vh;
  width:min(520px,80vw);
  padding:28px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(22px);
  color:rgba(255,255,255,.68);
  font-family:'Cormorant Garamond',serif;
  font-size:1.22rem;
  line-height:2;
}

.about-copy p+p{
  margin-top:18px;
}

.service{
  padding:15vh 4vw;
  background:#000000;
}

.service h2,
.works h2,
.contact h2{
  color:#ffffff;
  font-size:clamp(5rem,10vw,12rem);
  font-weight:600;
  letter-spacing:-.13em;
  line-height:.78;
}

.service-row{
  display:grid;
  grid-template-columns:80px 1.1fr 1fr;
  gap:3vw;
  align-items:center;
  color:#ffffff;
  padding:34px 0;
  border-top:1px solid rgba(255,255,255,.10);
}

.service-row:last-child{
  border-bottom:1px solid rgba(255,255,255,.10);
}

.service-row span{
  color:rgba(255,255,255,.50);
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;
}

.service-row b{
  color:#ffffff;
  font-size:clamp(2rem,5vw,5.5rem);
  letter-spacing:-.1em;
  line-height:.85;
}

.service-row p{
  color:rgba(255,255,255,.68);
  font-family:'Cormorant Garamond',serif;
  font-size:1.25rem;
  line-height:1.8;
}

.works{
  height:360vh;
  position:relative;
  background:#000000;
}

.sticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  padding:10vh 0;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.065),transparent 28%),
    #000000;
}

.works h2{
  padding-left:4vw;
  margin-bottom:4vh;
}

.track{
  display:flex;
  gap:5vw;
  width:max-content;
  padding:0 4vw;
}

.track article{
  width:70vw;
  flex:none;
}

.thumb{
  position:relative;
  height:52vh;
  border-radius:38px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 110px rgba(0,0,0,.92);
}

.thumb::before{
  content:"";
  position:absolute;
  inset:-20%;
  transform:rotate(-10deg);
  background:repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.16) 0 2px,
    transparent 2px 44px
  );
}

.a{
  background:
    radial-gradient(circle at 34% 35%,rgba(255,255,255,.48),transparent 20%),
    linear-gradient(135deg,#000000,#1a1a1a 55%,#6c6c6c);
}

.b{
  background:
    radial-gradient(circle at 70% 28%,rgba(255,255,255,.40),transparent 20%),
    linear-gradient(135deg,#050505,#202020 50%,#5c5c5c);
}

.c{
  background:
    radial-gradient(circle at 28% 72%,rgba(255,255,255,.40),transparent 20%),
    linear-gradient(135deg,#000000,#181818 50%,#4f4f4f);
}

.d{
  background:
    radial-gradient(circle at 62% 58%,rgba(255,255,255,.52),transparent 18%),
    linear-gradient(135deg,#080808,#252525 50%,#777777);
}

.track h3{
  color:#ffffff;
  font-size:clamp(2.8rem,6vw,7rem);
  letter-spacing:-.12em;
  line-height:.85;
  margin-top:18px;
}

.contact{
  min-height:100svh;
  padding:12vh 4vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:
    radial-gradient(circle at center,rgba(255,255,255,.06),transparent 40%),
    #000000;
}

.contact p{
  color:rgba(255,255,255,.68);
  font-family:'Cormorant Garamond',serif;
  font-size:1.15rem;
  letter-spacing:.25em;
  margin-bottom:4vh;
}

.contact a{
  margin-top:5vh;
  color:#ffffff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  padding:18px 28px;
  backdrop-filter:blur(14px);
}

@media(max-width:800px){
  .hero-circle{display:none}
  .hero h1{font-size:22vw}
  .lead{margin-left:0}
  .service-row{grid-template-columns:1fr;gap:14px}
  .track article{width:86vw}
  .thumb{height:46vh}
  .v1{width:80vw;right:5vw}
  .v2{width:70vw;left:5vw}
  .about-copy{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
    margin-top:86vh;
  }
}