*{box-sizing:border-box;margin:0;padding:0}
  :root{--bone:#ECE6DA;--acc:#ECE6DA}
  body.warm{--acc:#CBA56A}
  body{background:#000;color:var(--bone);font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}

  /* curtain exit — hero sticks, content rides over it, hero sinks beneath */
  .hero{position:sticky;top:0;z-index:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000}
  .hero-dim{position:absolute;inset:0;z-index:14;background:#000;opacity:0;pointer-events:none}
  .below{position:relative;z-index:2;background:#000;box-shadow:0 -30px 80px rgba(0,0,0,.55)}
  .hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;animation:introZoom 3.4s ease-out both}
  @keyframes introZoom{0%{transform:scale(1.12)}100%{transform:scale(1)}}
  .vig{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(125% 95% at 50% 38%,transparent 42%,rgba(0,0,0,.6) 100%)}
  .grain{position:absolute;inset:0;z-index:2;opacity:.06;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .scrim-t{position:absolute;left:0;right:0;top:0;height:150px;z-index:3;pointer-events:none;background:linear-gradient(rgba(0,0,0,.5),transparent)}
  .scrim-b{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:3;pointer-events:none;opacity:0;transition:opacity .5s;background:linear-gradient(transparent,rgba(0,0,0,.82))}
  body.intro-done .scrim-b{opacity:1}

  .top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:24px 32px;opacity:0;transition:opacity .6s}
  body.intro-done .top{opacity:1}
  .brand{font-family:'Bebas Neue';font-size:28px;letter-spacing:.05em;opacity:0;transition:.4s}
  body.scrolled .brand{opacity:1}
  .nav{display:flex;gap:26px;font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
  .nav span{opacity:.8}.nav .live{color:var(--acc)}
  @media(max-width:640px){.nav{display:none}}

  /* lockup that travels */
  .lockup{position:absolute;left:34px;bottom:44px;z-index:12;display:flex;flex-direction:column;align-items:flex-start}
  .role{font-weight:600;letter-spacing:.36em;text-transform:uppercase;font-size:12px;color:var(--acc);margin-bottom:12px;opacity:0;transition:opacity .55s .1s}
  body.intro-done .role{opacity:1}
  .title{width:26vw;transform-origin:0 0;will-change:transform}
  body.window-mode .title,body.leader-mode .title{opacity:0}
  .title .lines{display:flex;flex-direction:column;align-items:stretch}
  .title .lines svg{display:block;width:100%;height:auto;overflow:visible}
  .title .lines svg+svg{margin-top:-2.2vw}
  .title .lines text{fill:var(--bone);font-family:'Bebas Neue';font-weight:400}
  .sub{margin-top:14px;font-family:Fraunces;font-style:italic;font-size:clamp(15px,1.7vw,21px);color:#e3dccd;max-width:520px;line-height:1.4;opacity:0;transition:opacity .55s .15s}
  body.intro-done .sub{opacity:1}
  /* mobile: bigger wordmark, clear Safari toolbar + home indicator so nothing clips */
  @media(max-width:640px){
    .lockup{left:22px;right:22px;bottom:calc(30px + env(safe-area-inset-bottom,0px))}
    .title{width:62vw}
    .title .lines svg+svg{margin-top:-3vw}
    .sub{font-size:15px;max-width:none}
  }

  /* effect styling on .lines */
  .lines.roll{animation:roll .27s ease}
  @keyframes roll{0%{transform:translateY(46%);opacity:.12}60%{opacity:1}100%{transform:translateY(0)}}
  .lines.pop{animation:pop .58s cubic-bezier(.2,.7,.2,1)}
  @keyframes pop{0%{opacity:0;transform:translateY(20px) scale(.985)}100%{opacity:1;transform:none}}
  .lines.cool{filter:drop-shadow(0 0 14px rgba(150,200,255,.25))}
  .lines.analog{animation:weave .14s steps(2,end) infinite}
  @keyframes weave{0%{transform:translate(0,0)}33%{transform:translate(-0.3%,0.4%)}66%{transform:translate(0.3%,-0.3%)}100%{transform:translate(0,0)}}

  /* fx overlay layer (leader + window + leak) */
  .fxl{position:absolute;inset:0;z-index:14;pointer-events:none;display:grid;place-items:center}
  .fxl .knock{width:100vw;height:100vh;display:block}
  .fxl .leak{position:fixed;inset:0;background:radial-gradient(circle at 72% 28%,rgba(255,176,84,.55),transparent 55%),radial-gradient(circle at 20% 80%,rgba(255,120,40,.35),transparent 50%);mix-blend-mode:screen}
  .ldr{position:relative;width:min(42vh,360px);aspect-ratio:1;display:grid;place-items:center}
  .ldr svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
  .ldr .trk{fill:none;stroke:rgba(236,230,218,.18);stroke-width:1.4}
  .ldr .cx{stroke:rgba(236,230,218,.5);stroke-width:.6}
  .ldr .swp{fill:none;stroke:var(--bone);stroke-width:2;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289}
  .ldr.go .swp{animation:sweep .66s linear forwards}
  @keyframes sweep{from{stroke-dashoffset:289}to{stroke-dashoffset:0}}
  .ldr .num{font-family:'Bebas Neue';font-size:min(26vh,220px);line-height:1;color:var(--bone)}
  .ldr.go .num{animation:flick .66s ease}
  @keyframes flick{0%{opacity:.2}8%{opacity:1}12%{opacity:.4}16%{opacity:1}100%{opacity:1}}

  /* selector — collapsed slot pinned to the right edge; tab toggles the panel out */
  .lab{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:40;display:flex;align-items:center}
  .lab-tab{appearance:none;background:rgba(10,10,10,.85);border:1px solid #2a2a2a;border-right:none;backdrop-filter:blur(12px);color:#9a9384;cursor:pointer;padding:14px 9px;border-radius:10px 0 0 10px;transition:color .18s,background .18s}
  .lab-tab span{display:block;writing-mode:vertical-rl;font-family:Archivo;font-weight:700;font-size:10px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
  .lab-tab:hover{color:var(--bone);background:rgba(16,16,16,.95)}
  .lab-open .lab-tab{color:var(--bone)}
  .lab-panel{display:flex;flex-direction:column;gap:5px;width:0;max-height:80vh;overflow:hidden;background:rgba(10,10,10,.92);border:1px solid #2a2a2a;border-right:none;backdrop-filter:blur(12px);border-radius:12px 0 0 12px;opacity:0;transition:width .32s cubic-bezier(.6,0,.2,1),opacity .22s,padding .32s;padding:12px 0}
  .lab-open .lab-panel{width:168px;opacity:1;padding:12px}
  .lab-open .lab-tab{border-radius:10px 0 0 10px;margin-right:-1px}
  .lab .lead{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7f7868;padding:0 6px 6px;white-space:nowrap}
  .fxbtn{font-family:Archivo;font-weight:700;font-size:12.5px;color:#e9e3d6;background:transparent;border:1px solid transparent;padding:8px 10px;border-radius:9px;cursor:pointer;transition:.18s;display:flex;gap:8px;align-items:center;width:100%;text-align:left;white-space:nowrap}
  .fxbtn:hover{border-color:#3a3a3a;color:#fff}
  .fxbtn.on{background:var(--bone);color:#0a0a0a}
  .fxbtn b{font-weight:800;opacity:.6}.fxbtn.on b{opacity:.5}
  .rep{font-family:Archivo;font-weight:700;font-size:12.5px;color:#0a0a0a;background:var(--acc);border:none;padding:9px 12px;border-radius:9px;cursor:pointer;margin-top:5px;white-space:nowrap}

  .peek{padding:64px 34px 96px;max-width:1180px;margin:0 auto}
  .peek .h{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid #1d1d1d;padding-bottom:14px;margin-bottom:20px}
  .peek .h h2{font-family:'Bebas Neue';font-size:34px;letter-spacing:.05em}
  .peek .h span{font-size:13px;color:#8a8378;letter-spacing:.1em;text-transform:uppercase}
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  @media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
  .cell{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:#111}
  .cell img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.8);transition:.4s}
  .cell:hover img{filter:none}