@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --ink:#111;
  --paper:#fff;
  --acid:#c9ff35;
  --tone:#c9ff35;
  --ease:cubic-bezier(.76,0,.24,1);
}

*{box-sizing:border-box}
html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:var(--ink);
  color:var(--paper);
  font-family:Inter,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--acid);color:#111}

.pageLoader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:var(--ink);
  transition:opacity .65s,visibility .65s;
}
.pageLoader:before{
  content:none;
}
.pageLoader i{
  position:relative;
  width:min(360px,72vw);
  height:3px;
  overflow:hidden;
  background:rgba(255,255,255,.16);
  border-radius:999px;
}
.pageLoader i:after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:var(--paper);
  border-radius:inherit;
  box-shadow:0 0 18px rgba(255,255,255,.38);
  animation:load 1.1s var(--ease) infinite;
}
@keyframes load{from{transform:translateX(-105%)}to{transform:translateX(105%)}}
.pageLoader.done{opacity:0;visibility:hidden}

.pageWipe{
  position:fixed;
  inset:0;
  z-index:9000;
  pointer-events:none;
  background:var(--ink);
  opacity:0;
  visibility:hidden;
  transition:opacity .58s var(--ease),visibility .58s;
}
.pageWipe.go{opacity:1;visibility:visible}

.siteHeader{
  position:fixed;
  inset:0 0 auto;
  z-index:1000;
  height:92px;
  padding:0 3vw;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  color:#fff;
}
.logo{
  width:82px;
  height:58px;
  position:relative;
  overflow:hidden;
}
.logo img{
  position:absolute;
  width:140px;
  height:140px;
  max-width:none;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  object-fit:contain;
  filter:invert(1) grayscale(1) brightness(3);
  mix-blend-mode:screen;
}
.headerMeta{
  display:flex;
  align-items:center;
  gap:28px;
  color:rgba(255,255,255,.72);
  font-size:8px;
  font-weight:700;
  letter-spacing:.18em;
}
.availability i{
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:50%;
  background:#8bc53f;
  box-shadow:0 0 10px #8bc53f;
}
.menuToggle{
  position:relative;
  justify-self:end;
  display:flex;
  align-items:center;
  min-width:96px;
  height:44px;
  padding:0 52px 0 0;
  border:0;
  background:none;
  color:#fff;
  cursor:pointer;
}
.menuToggle b{font-size:10px;font-weight:600}
.menuToggle span{
  position:absolute;
  right:0;
  width:36px;
  height:2px;
  background:#fff;
  transition:transform .4s var(--ease),margin .4s var(--ease);
}
.menuToggle span:first-of-type{margin-top:-10px}
.menuToggle span:last-child{margin-top:10px}
.menuOpen .menuToggle span:first-of-type{margin:0;transform:rotate(45deg)}
.menuOpen .menuToggle span:last-child{margin:0;transform:rotate(-45deg)}

.menuPanel{
  position:fixed;
  inset:0;
  z-index:800;
  visibility:hidden;
  color:#fff;
}
.menuBackdrop{
  position:absolute;
  inset:0;
  background:var(--panel);
  transform:translateY(-101%);
  transition:transform .72s var(--ease);
}
.menuPanel nav{
  position:relative;
  z-index:1;
  width:min(1220px,88vw);
  height:min(31vh,285px);
  margin:15vh auto 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:1fr;
  counter-reset:menu-item;
  border-top:1px solid rgba(255,255,255,.15);
  border-left:1px solid rgba(255,255,255,.15);
  opacity:0;
  transform:translateY(55px);
  transition:opacity .42s .25s,transform .65s .25s var(--ease);
}
.menuPanel nav a{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  padding:38px 42px;
  border-right:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(255,255,255,.15);
  overflow:hidden;
  counter-increment:menu-item;
  transition:background .42s var(--ease),color .42s var(--ease);
}
.menuPanel nav a:before{
  content:"0" counter(menu-item);
  position:absolute;
  top:28px;
  left:40px;
  color:#777b75;
  font:9px/1 monospace;
  letter-spacing:.2em;
  transition:color .35s,transform .42s var(--ease);
}
.menuPanel nav a:after{
  content:"\2197";
  position:absolute;
  top:24px;
  right:36px;
  color:#777b75;
  font-size:20px;
  transition:color .35s,transform .42s var(--ease);
}
.menuPanel nav strong{
  display:block;
  font-size:clamp(30px,3vw,50px);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:800;
  transition:color .35s,transform .42s var(--ease);
}
.menuPanel nav small{
  display:block;
  max-width:300px;
  margin-top:17px;
  color:#747872;
  font-size:12px;
  line-height:1.55;
  letter-spacing:.01em;
  transition:color .35s,transform .42s var(--ease);
}
.menuPanel nav a:hover{background:var(--acid);color:#0a0c0b}
.menuPanel nav a:hover:before,.menuPanel nav a:hover:after{color:#0a0c0b;transform:translate(4px,-4px)}
.menuPanel nav a:hover strong,.menuPanel nav a:hover small{color:#0a0c0b;transform:translateX(8px)}
.menuContact{
  position:relative;
  z-index:1;
  width:min(1220px,88vw);
  min-height:210px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(270px,.78fr) minmax(0,1.22fr);
  border-left:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(255,255,255,.15);
  opacity:0;
  transform:translateY(35px);
  transition:opacity .45s .34s,transform .7s .34s var(--ease);
}
.menuContactCopy{
  padding:31px 38px;
  border-right:1px solid rgba(255,255,255,.15);
}
.menuContactCopy>small{
  color:#777b75;
  font:8px/1 monospace;
  letter-spacing:.19em;
}
.menuContactCopy h2{
  margin:28px 0 10px;
  font-size:clamp(30px,3.1vw,50px);
  line-height:.9;
  letter-spacing:-.05em;
}
.menuContactCopy p{
  max-width:410px;
  margin:0;
  color:#777b75;
  font-size:11px;
  line-height:1.6;
}
.menuContactIcons{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
}
.menuContactIcons a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:16px;
  min-width:0;
  border-right:1px solid rgba(255,255,255,.15);
  overflow:hidden;
  transition:background .38s var(--ease),color .38s var(--ease);
}
.menuContactIcons img{
  width:25px;
  height:25px;
  object-fit:contain;
  filter:invert(1);
  transition:filter .35s,transform .5s var(--ease);
}
.menuContactIcons span{
  color:#777b75;
  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:color .35s,transform .5s var(--ease);
}
.menuContactIcons a:hover{background:var(--acid);color:#0a0c0b}
.menuContactIcons a:hover img{filter:none;transform:translateY(-5px) scale(1.2) rotate(-7deg)}
.menuContactIcons a:hover span{color:#0a0c0b;transform:translateY(2px)}
.menuContactIcons a[aria-label="WhatsApp"] img{filter:invert(1) grayscale(1) brightness(3) contrast(8)}
.menuContactIcons a[aria-label="WhatsApp"]:hover img{filter:none}
.menuFooter{
  position:absolute;
  z-index:1;
  left:3vw;
  right:3vw;
  bottom:32px;
  display:flex;
  justify-content:space-between;
  color:#666a64;
  font-size:9px;
  letter-spacing:.13em;
  opacity:0;
  transition:opacity .4s .45s;
}
.menuOpen .menuPanel{visibility:visible}
.menuOpen .menuBackdrop{transform:none}
.menuOpen .menuPanel nav{opacity:1;transform:none}
.menuOpen .menuContact{opacity:1;transform:none}
.menuOpen .menuFooter{opacity:1}

.homeSlider{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--ink);
  touch-action:none;
  user-select:none;
}
.homeSlider.isDragging{cursor:grabbing}
.slide{
  position:absolute;
  inset:0;
  z-index:1;
  visibility:hidden;
  overflow:hidden;
  background:var(--ink);
}
.slide.isActive{z-index:2;visibility:visible}
.slide.isIncoming,.slide.isOutgoing{visibility:visible;pointer-events:none}
.slide.isIncoming{z-index:4}
.slide.isOutgoing{z-index:3}
.slide.enterNext{animation:revealNext 1.12s var(--ease) both}
.slide.enterPrev{animation:revealPrev 1.12s var(--ease) both}
@keyframes revealNext{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes revealPrev{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

.slide>img,.slideMedia,.driveFrame{
  position:absolute;
  inset:-3%;
  width:106%;
  height:106%;
  border:0;
  object-fit:cover;
  filter:grayscale(.48) saturate(.7);
  transform:scale(1.065);
  transition:transform 1.25s var(--ease),filter .7s;
}
.slide.isActive>img,.slide.isActive>.slideMedia,.slide.isActive>.driveFrame{
  transform:scale(1);
  filter:grayscale(.18) saturate(.9);
}
.videoSlide .slideMedia,.videoSlide .driveFrame{filter:none}
.driveFrame{pointer-events:none}
.videoSlide.playerActive .driveFrame{pointer-events:auto;inset:0;width:100%;height:100%}
.slide.enterNext>img,.slide.enterNext>.slideMedia,.slide.enterNext>.driveFrame{
  animation:mediaEnterNext 1.3s var(--ease) both;
}
.slide.enterPrev>img,.slide.enterPrev>.slideMedia,.slide.enterPrev>.driveFrame{
  animation:mediaEnterPrev 1.3s var(--ease) both;
}
.slide.leaveNext>img,.slide.leaveNext>.slideMedia,.slide.leaveNext>.driveFrame{
  animation:mediaLeaveNext 1.12s var(--ease) both;
}
.slide.leavePrev>img,.slide.leavePrev>.slideMedia,.slide.leavePrev>.driveFrame{
  animation:mediaLeavePrev 1.12s var(--ease) both;
}
@keyframes mediaEnterNext{from{transform:translateX(7%) scale(1.1)}to{transform:translateX(0) scale(1)}}
@keyframes mediaEnterPrev{from{transform:translateX(-7%) scale(1.1)}to{transform:translateX(0) scale(1)}}
@keyframes mediaLeaveNext{to{transform:translateX(-4%) scale(1.05);filter:grayscale(.7) brightness(.72)}}
@keyframes mediaLeavePrev{to{transform:translateX(4%) scale(1.05);filter:grayscale(.7) brightness(.72)}}

.slideShade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.06) 72%),
    linear-gradient(0deg,rgba(0,0,0,.42),transparent 58%);
}
.slideCopy{
  position:absolute;
  z-index:5;
  left:3vw;
  bottom:10vh;
  width:94vw;
  color:#fff;
}
.slideCopy small{
  display:block;
  margin-bottom:25px;
  color:rgba(255,255,255,.72);
  font-size:8px;
  font-weight:700;
  letter-spacing:.19em;
  opacity:0;
  transform:translateY(20px);
}
.slideCopy h1,.slideCopy h2{
  margin:0;
  width:max-content;
  max-width:94vw;
  white-space:nowrap;
  font-size:clamp(58px,8.1vw,148px);
  font-weight:800;
  line-height:.78;
  letter-spacing:-.075em;
  opacity:0;
  transform:translateY(65px);
}
.slideCopy h2.longTitle{font-size:clamp(49px,6.55vw,122px)}
.slideCopy h2.xlongTitle{font-size:clamp(34px,4.65vw,86px);letter-spacing:-.06em}
.slideCopy a{
  --circle-progress:0deg;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  margin-top:30px;
  padding:12px 16px;
  color:var(--tone);
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  opacity:0;
  transform:translateY(18px);
}
.slideCopy a:before{content:"";width:36px;height:1px;background:currentColor}
.slideCopy a:after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-9px -15px -10px -12px;
  border-radius:50%;
  pointer-events:none;
  background:conic-gradient(from -82deg,currentColor 0 var(--circle-progress),transparent var(--circle-progress) 360deg);
  -webkit-mask:radial-gradient(ellipse at center,transparent 60%,#000 62%,#000 66%,transparent 68%);
  mask:radial-gradient(ellipse at center,transparent 60%,#000 62%,#000 66%,transparent 68%);
  transform:rotate(-4deg) scale(.96);
  opacity:0;
}
.slide.isActive .slideCopy a:after{animation:ctaCircle 2.65s var(--ease) infinite}
@property --circle-progress{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes ctaCircle{
  0%,8%{--circle-progress:0deg;opacity:0;transform:rotate(-4deg) scale(.93)}
  15%{opacity:.9}
  56%{--circle-progress:360deg;opacity:.9;transform:rotate(-4deg) scale(1)}
  76%{--circle-progress:360deg;opacity:.9}
  100%{--circle-progress:360deg;opacity:0;transform:rotate(-4deg) scale(1.08)}
}
.slideCopy a:hover:after{animation-duration:1.45s}
.slide.isActive .slideCopy small,
.slide.isActive .slideCopy h1,
.slide.isActive .slideCopy h2,
.slide.isActive .slideCopy a{
  opacity:1;
  transform:none;
  transition:opacity .55s,transform .8s var(--ease);
}
.slide.isActive .slideCopy h1,.slide.isActive .slideCopy h2{transition-delay:.1s}
.slide.isActive .slideCopy a{transition-delay:.19s}
.slide.isOutgoing .slideCopy{animation:copyLeaves .55s var(--ease) both}
@keyframes copyLeaves{to{opacity:0;transform:translateX(-40px)}}

.slideArrow{
  position:absolute;
  z-index:30;
  top:49%;
  display:flex;
  align-items:center;
  gap:20px;
  border:0;
  background:none;
  color:#fff;
  cursor:pointer;
  font-size:9px;
  font-weight:700;
  letter-spacing:.22em;
}
.slideArrow i{
  display:block;
  width:46px;
  height:1px;
  background:rgba(255,255,255,.8);
  transition:width .3s,background .3s;
}
.slidePrev{left:0}
.slideNext{right:0}
.slideArrow:hover i{width:72px;background:#fff}
.slideArrow:hover span{opacity:.65}

.soundToggle{
  position:absolute;
  z-index:20;
  right:3vw;
  bottom:10vh;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(0,0,0,.28);
  color:#fff;
  cursor:pointer;
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
  backdrop-filter:blur(10px);
}
.soundToggle:before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:8px;
  border-radius:50%;
  background:currentColor;
}

.socialDock{
  position:absolute;
  z-index:40;
  left:50%;
  bottom:3.8vh;
  display:flex;
  align-items:center;
  gap:17px;
  transform:translateX(-50%);
}
.socialDock a{
  display:grid;
  width:26px;
  height:26px;
  place-items:center;
  opacity:.64;
  transition:opacity .25s,transform .3s var(--ease);
}
.socialDock a:hover{opacity:1;transform:translateY(-4px)}
.socialDock img{display:block;width:14px;height:14px;object-fit:contain}

.slideTimeline{
  position:absolute;
  z-index:30;
  right:3vw;
  bottom:4vh;
  width:310px;
  display:grid;
  grid-template-columns:1fr auto auto auto auto;
  align-items:center;
  gap:8px;
  color:#fff;
  font:8px monospace;
  letter-spacing:.12em;
}
.slideTimeline>div{height:1px;background:rgba(255,255,255,.35);overflow:hidden}
.slideTimeline>div i{display:block;width:100%;height:100%;background:#fff;transform-origin:left}
.slideTimeline.animate>div i{animation:timeline 1.12s var(--ease)}
@keyframes timeline{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.slideTimeline span{margin-left:5px;color:rgba(255,255,255,.55)}
.slideTimeline b{font-size:11px}
.slideTimeline em{font-style:normal;color:#777}

@media(max-width:760px){
  .siteHeader{height:75px;padding:0 5vw;grid-template-columns:1fr auto}
  .headerMeta{
    position:absolute;
    top:83px;
    left:5vw;
    right:5vw;
    justify-content:flex-start;
    gap:14px;
    flex-wrap:wrap;
  }
  .headerMeta span{font-size:6px}
  .logo{width:70px}
  .logo img{width:125px;height:125px}
  .menuToggle{min-width:85px;padding-right:42px}
  .menuToggle span{right:0;width:29px}
  .menuPanel{overflow-y:auto}
  .menuPanel nav{width:90vw;height:230px;margin-top:15vh}
  .menuPanel nav a{padding:24px 14px}
  .menuPanel nav a:before{top:18px;left:19px;font-size:7px}
  .menuPanel nav a:after{top:14px;right:17px;font-size:16px}
  .menuPanel nav strong{font-size:clamp(19px,5.6vw,30px);line-height:1}
  .menuPanel nav small{margin-top:11px;font-size:9px;line-height:1.4}
  .menuContact{width:90vw;min-height:310px;grid-template-columns:1fr}
  .menuContactCopy{padding:24px 20px;border-right:0;border-bottom:1px solid rgba(255,255,255,.15)}
  .menuContactCopy h2{margin-top:20px}
  .menuContactIcons{min-height:160px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .menuContactIcons a{min-height:80px;border-bottom:1px solid rgba(255,255,255,.15)}
  .menuContactIcons img{width:20px;height:20px}
  .menuFooter{position:relative;left:auto;right:auto;bottom:auto;margin:28px 5vw 24px}
  .slideCopy{left:5vw;bottom:17vh;width:90vw}
  .slideCopy small{margin-bottom:16px}
  .slideCopy h1,.slideCopy h2{font-size:13.1vw;max-width:90vw;letter-spacing:-.07em}
  .slideCopy h2.longTitle{font-size:9.5vw}
  .slideCopy h2.xlongTitle{font-size:7.2vw;letter-spacing:-.045em}
  .slideCopy a{margin-top:22px;padding:10px 13px;font-size:11px}
  .slideArrow{top:auto;bottom:4vh}
  .slideArrow i{width:30px}
  .slidePrev{left:5vw}
  .slideNext{right:5vw}
  .socialDock{bottom:3.2vh;gap:11px}
  .socialDock a{width:23px;height:23px}
  .socialDock img{width:12px;height:12px}
  .slideTimeline{right:5vw;left:5vw;bottom:9vh;width:auto}
  .slideTimeline span{display:none}
  .soundToggle{right:5vw;bottom:15.5vh}
}

@media(prefers-reduced-motion:reduce){
  .pageLoader i:after,.slideTimeline.animate>div i{animation:none}
  .slide,.slide>img,.slideMedia,.slideCopy>*{animation:none!important;transition:none!important}
  .slideCopy a:after{animation:none!important;opacity:.8;--circle-progress:360deg}
}