:root{
  --paper:#f2f1eb;
  --ink:#0b0b09;
  --muted:#a5a195;
  --acid:#d6ff3f;
  --line:rgba(242,241,235,.16);
  --display:"Archivo",sans-serif;
  --body:"Space Grotesk",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body:before{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;background-image:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1px);background-size:4px 4px}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.skip-link{position:fixed;z-index:100;left:16px;top:12px;transform:translateY(-140%);background:var(--acid);color:var(--ink);padding:10px 14px;border-radius:999px;font-weight:900}
.skip-link:focus-visible{transform:translateY(0)}
a:focus-visible{outline:3px solid var(--acid);outline-offset:4px}
.preloader{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:var(--paper);color:var(--ink);clip-path:inset(0 0 0 0);pointer-events:none}
.preloader span{position:absolute;top:32px;left:32px;font-size:12px;font-weight:900;letter-spacing:.28em;text-transform:uppercase}
.preloader strong{font-family:var(--display);font-size:clamp(50px,12vw,190px);line-height:.75;letter-spacing:-.09em;text-transform:uppercase}
.nav{position:fixed;z-index:30;left:50%;top:22px;transform:translateX(-50%);width:min(92vw,620px);min-height:58px;padding:8px 10px 8px 8px;display:flex;align-items:center;justify-content:space-between;border-radius:999px;background:rgba(11,11,9,.74);border:1px solid var(--line);backdrop-filter:blur(18px)}
.brand{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--paper);color:var(--ink);font-family:var(--display);font-weight:900}
.nav div{display:flex;align-items:center;gap:22px;padding-right:14px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.hero{position:relative;min-height:118dvh;padding:118px clamp(18px,5vw,72px) 80px;display:grid;place-items:center;overflow:hidden}
.hero-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 34%,rgba(214,255,63,.18),transparent 28%),linear-gradient(180deg,rgba(11,11,9,.2),var(--ink))}
.hero-plate{position:absolute;z-index:1;width:min(58vw,720px);height:min(76vh,860px);border-radius:42px;overflow:hidden;box-shadow:0 50px 160px rgba(0,0,0,.58);filter:grayscale(.12) contrast(1.08);will-change:transform,opacity,clip-path}
.hero-copy{position:relative;z-index:4;display:grid;justify-items:center;text-align:center;max-width:1180px}
.hero-copy p{margin:0 0 22px;color:var(--acid);font-size:12px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;text-wrap:balance}
.hero-copy h1{margin:0;font-family:var(--display);font-size:clamp(54px,7.7vw,118px);line-height:.82;letter-spacing:-.09em;text-transform:uppercase;text-wrap:balance;text-shadow:0 24px 90px rgba(0,0,0,.72)}
.word{display:inline-block;white-space:nowrap}
.char{display:inline-block;will-change:transform,opacity}
.button{display:inline-flex;align-items:center;gap:16px;margin-top:30px;min-height:56px;padding:8px 8px 8px 24px;border-radius:999px;background:var(--acid);color:var(--ink);font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:12px;transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1);touch-action:manipulation}
.button i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(11,11,9,.12);font-style:normal;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.button:hover{transform:translateY(-4px);box-shadow:0 24px 70px rgba(214,255,63,.22)}
.button:hover i{transform:translate(3px,-2px) scale(1.08)}
.button:active{transform:translateY(-1px) scale(.98)}
.button.light{background:var(--paper);color:var(--ink)}
.side{position:absolute;z-index:2;width:18vw;min-width:150px;height:25vw;min-height:220px;max-height:380px;border-radius:28px;overflow:hidden;box-shadow:0 36px 100px rgba(0,0,0,.5);will-change:transform,opacity}
.side-a{left:7vw;top:25vh}
.side-b{right:8vw;bottom:12vh}
.reel{position:relative;min-height:120dvh;padding:140px 0;overflow:hidden;background:var(--paper);color:var(--ink)}
.reel-copy{padding:0 clamp(18px,6vw,92px) 46px;max-width:980px}
.reel h2,.session h2,.close h2{margin:0;font-family:var(--display);font-size:clamp(48px,8vw,136px);line-height:.82;letter-spacing:-.08em;text-transform:uppercase;text-wrap:balance}
.reel p,.session-copy p{max-width:680px;color:#57534a;font-size:clamp(18px,2vw,28px);line-height:1.25;font-weight:600}
.reel-track{display:flex;gap:18px;width:max-content;padding:0 clamp(18px,6vw,92px);will-change:transform}
.reel-track article{position:relative;width:min(72vw,520px);height:min(74vh,720px);overflow:hidden;border-radius:36px;background:#d8d6ce;will-change:transform,opacity}
.reel-track article:nth-child(3){width:min(84vw,720px)}
.reel-track p{position:absolute;left:18px;bottom:18px;margin:0;padding:10px 14px;border-radius:999px;background:rgba(242,241,235,.86);color:var(--ink);font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.session{position:relative;display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;padding:150px clamp(18px,7vw,110px);background:var(--ink);color:var(--paper)}
.session-line{display:grid;align-content:space-between;min-height:440px;border-left:1px solid var(--line);padding-left:24px;color:var(--muted);font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.session-line strong{font-family:var(--display);font-size:clamp(56px,8vw,140px);line-height:.75;letter-spacing:-.08em;color:var(--acid)}
.scrub-word{opacity:.16;will-change:opacity}
.close{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:130px clamp(18px,7vw,110px);background:var(--acid);color:var(--ink)}
.close div{display:grid;gap:18px;justify-items:end}
.close div>a:last-child{font-weight:900;letter-spacing:.08em}
.motion-lite .side,.motion-lite .hero-backdrop{display:none}
.motion-lite .hero-plate,.motion-lite .reel-track article{will-change:auto}
@media(max-width:820px){
  .nav{top:14px;width:calc(100vw - 24px)}
  .nav div{gap:14px;font-size:10px}
  .hero{min-height:100dvh;padding:96px 16px 58px;align-items:end}
  .hero-plate{width:78vw;height:52vh;border-radius:28px;top:92px}
  .hero-copy{align-self:end}
  .hero-copy p{font-size:10px;margin-bottom:14px}
  .hero-copy h1{font-size:50px;line-height:.83}
  .side{display:none}
  .button{min-height:50px;margin-top:20px}
  .reel{padding:84px 0;min-height:auto}
  .reel h2,.session h2,.close h2{font-size:48px}
  .reel-track{display:grid;width:auto;padding:0 16px}
  .reel-track article,.reel-track article:nth-child(3){width:100%;height:420px;border-radius:26px}
  .session{grid-template-columns:1fr;padding:90px 16px}
  .session-line{min-height:180px}
  .close{display:grid;padding:86px 16px}
  .close div{justify-items:start}
}
@media(prefers-reduced-motion:reduce){
  .preloader{display:none}
  *,*:before,*:after{animation:none!important;transition:none!important}
}
