:root{
  --bg:#080808; --ink:#ECEAE5; --muted:#9A978F; --dim:#5E5C57; --line:#1C1B1A; --line2:#2A2927; --acc:#FF5A1F;
  --sans:'Switzer', 'Helvetica Neue', Arial, sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace;
  --pad:clamp(22px,5vw,56px); --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden;opacity:0;animation:pagein 1.1s var(--ease) forwards}
body.leaving{animation:pageout .5s var(--ease) forwards}
@keyframes pagein{to{opacity:1}}
@keyframes pageout{from{opacity:1}to{opacity:0}}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
::selection{background:var(--acc);color:var(--bg)}
:focus-visible{outline:1px solid var(--acc);outline-offset:4px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:400}

/* grain */
body::after{content:"";position:fixed;inset:-50%;z-index:100;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,-4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}}

/* cursor light */
.glow{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,90,31,.10),rgba(255,90,31,0) 60%);transition:opacity .6s;will-change:transform}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:20;background:linear-gradient(rgba(8,8,8,.92) 55%,rgba(8,8,8,0));display:flex;justify-content:space-between;align-items:center;padding:26px var(--pad)}
.mark{display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:400;letter-spacing:.02em}
.mark i{width:34px;height:34px;border:1px solid var(--line2);border-radius:50%;display:inline-grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:0;color:var(--ink);transition:border-color .4s}
.mark:hover i{border-color:var(--acc)}
.apply-link{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px;border:1px solid var(--line2);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:border-color .4s,color .4s}
.apply-link:hover{border-color:var(--acc);color:var(--acc)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}

/* big CTA */
.cta{display:inline-flex;align-items:center;gap:16px;height:58px;padding:0 30px;border-radius:999px;border:1px solid var(--ink);font-size:15px;font-weight:400;letter-spacing:.01em;position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease),border-color .45s}
.cta::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;transform:scaleX(1);transform-origin:left;transition:transform .55s var(--ease),background .4s}
.cta{color:var(--bg)}
.cta:hover::before{background:var(--acc)}
.cta:hover{border-color:var(--acc)}
.cta svg{transition:transform .45s var(--ease)}
.cta:hover svg{transform:translateX(5px)}

/* reveal */
.rv{opacity:0;filter:blur(10px);transform:translateY(18px);transition:opacity 1.3s var(--ease),filter 1.3s var(--ease),transform 1.3s var(--ease)}
.rv.in{opacity:1;filter:none;transform:none}
.d1{transition-delay:.15s}.d2{transition-delay:.3s}.d3{transition-delay:.45s}.d4{transition-delay:.6s}

footer{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:30px var(--pad) calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  body{opacity:1}
  .rv{opacity:1;filter:none;transform:none}
}

.mail{transition:color .4s}.mail:hover{color:var(--acc)}
.side p.direct{margin-top:22px;font-size:15px;color:var(--dim)}.direct a{color:var(--ink);border-bottom:1px solid var(--line2);transition:color .4s,border-color .4s}.direct a:hover{color:var(--acc);border-color:var(--acc)}
.ft{align-items:center}.ft .wm{font-size:18px;font-weight:300;letter-spacing:-.02em}.ft .wm b{color:var(--acc);font-weight:300}
@media (max-width:760px){.ft{flex-direction:column;align-items:flex-start;gap:12px}}
.mark{min-height:44px}
@media (max-width:760px){.ft .mail{display:inline-block;padding:12px 0;margin:-12px 0}.direct a{display:inline-block;padding:10px 0;margin:-10px 0}}
.direct a{border-bottom:0!important;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:5px;text-decoration-thickness:1px}
.direct a:hover{text-decoration-color:var(--acc)}