:root{
  --carbon:#141210;--carbon2:#1b1713;--bone:#ECE5D8;--dim:#a39a8d;--faint:#6b6358;
  --lime:#B4C95A;--limeBright:#C8FA4B;--seed:#A6733F;--line:rgba(236,229,216,.12);
  --grotesk:'Space Grotesk',system-ui,sans-serif;--cormorant:'Cormorant Garamond',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--carbon);color:var(--bone);font-family:var(--grotesk);font-weight:300;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:none}
@media(hover:none){body{cursor:auto}}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:var(--carbon)}
.wrap{width:min(1240px,92vw);margin:0 auto}
.eyebrow{font-size:13px;letter-spacing:.4em;text-transform:uppercase;color:var(--lime)}
h1,h2,h3{font-family:var(--cormorant);font-weight:500;line-height:1.04;letter-spacing:.005em}

.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vig{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 90% at 50% 35%,transparent 40%,rgba(8,7,6,.55) 100%)}
#ember{position:fixed;inset:0;z-index:0;display:block}
.bg-tint{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,18,16,.2),rgba(20,18,16,.55))}

.cur{position:fixed;top:0;left:0;z-index:120;pointer-events:none;width:34px;height:34px;margin:-17px 0 0 -17px;mix-blend-mode:difference;transition:width .25s,height .25s,margin .25s}
.cur svg{width:100%;height:100%;display:block}
.cur.big{width:64px;height:64px;margin:-32px 0 0 -32px}
@media(hover:none){.cur{display:none}}

nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(20px,4vw,48px);transition:.4s;border-bottom:1px solid transparent}
nav.solid{background:rgba(18,16,14,.6);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px;font-weight:500;letter-spacing:.26em;font-size:15px}
.brand svg{width:42px;height:42px}
.brand .st{font-size:9px;letter-spacing:.5em;color:var(--dim);display:block;margin-top:3px}
.nlinks{display:flex;align-items:center;gap:32px;font-size:14px;letter-spacing:.08em;color:var(--dim)}
.nlinks a{transition:color .25s}.nlinks a:hover{color:var(--bone)}
.nbtn{font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:12px 22px;border:1px solid var(--line);border-radius:40px;color:var(--bone);background:rgba(236,229,216,.02);transition:.3s;cursor:none}
.nbtn:hover{background:var(--lime);color:var(--carbon);border-color:var(--lime)}
@media(max-width:860px){.nlinks a:not(.nbtn){display:none}}

.hero{position:relative;overflow:hidden;z-index:10;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px clamp(20px,4vw,48px) 90px}
.hero .eyebrow{opacity:0;animation:fade .9s .2s forwards}
.hero h1{font-size:clamp(40px,7vw,98px);margin:22px 0 6px;letter-spacing:-.01em;max-width:18ch}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln span{display:block;transform:translateY(110%);animation:rise 1s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 .ln:nth-child(2) span{animation-delay:.1s}.hero h1 .ln:nth-child(3) span{animation-delay:.2s}
.hero h1 em{font-style:italic;color:var(--lime)}
.hero .sub{max-width:600px;color:var(--dim);font-size:clamp(18px,2vw,23px);margin-top:30px;opacity:0;animation:fade 1s .8s forwards;line-height:1.5}
.cta{display:flex;gap:14px;margin-top:42px;flex-wrap:wrap;opacity:0;animation:fade 1s 1s forwards}
.btn{font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:16px 30px;border-radius:42px;transition:.3s;border:1px solid var(--line);cursor:none;font-family:var(--grotesk)}
.btn--p{background:var(--lime);color:var(--carbon);border-color:var(--lime)}
.btn--p:hover{background:var(--limeBright);border-color:var(--limeBright)}
.btn--g:hover{background:rgba(236,229,216,.06);border-color:var(--bone)}
.scrollcue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:fade 1s 1.4s forwards}
.scrollcue i{width:1px;height:40px;background:linear-gradient(var(--lime),transparent);display:block;animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes rise{to{transform:translateY(0)}}@keyframes fade{to{opacity:1}}

.marq{position:relative;z-index:10;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(18,16,14,.5);overflow:hidden;padding:20px 0}
.marq__t{display:inline-flex;white-space:nowrap;animation:marq 30s linear infinite;will-change:transform}
.marq__t span{font-family:var(--cormorant);font-style:italic;font-size:clamp(22px,2.8vw,32px);padding:0 30px;color:var(--bone)}
.marq__t span b{color:var(--seed);font-style:normal;font-family:var(--grotesk);font-weight:300;font-size:.45em;vertical-align:middle}
@keyframes marq{to{transform:translateX(-50%)}}

section.blk{position:relative;z-index:10;padding:clamp(90px,14vh,150px) 0}
.lead{font-family:var(--cormorant);font-size:clamp(32px,5vw,62px);line-height:1.1;max-width:15ch}
.lead em{font-style:italic;color:var(--lime)}
.intro__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:end}
.intro__txt{color:var(--dim);font-size:20px;max-width:44ch;line-height:1.62}
.intro__txt b{color:var(--bone);font-weight:400}
.intro__txt p{margin-top:22px}
@media(max-width:820px){.intro__grid{grid-template-columns:1fr;gap:34px}}

/* ---------- SEED->FRAME SCENE ---------- */
.scene{position:relative;z-index:10;height:420vh}
.scene__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.scene svg#markSvg{width:min(58vh,500px);height:min(58vh,500px);overflow:visible;position:relative;z-index:5}
.beat{position:absolute;left:50%;transform:translateX(-50%);bottom:11vh;text-align:center;width:min(90vw,680px);opacity:0;transition:opacity .4s;z-index:6}
.beat.on{opacity:1}
.beat h2{font-size:clamp(30px,5vw,62px)}.beat h2 em{font-style:italic;color:var(--lime)}
.beat p{color:var(--dim);font-size:16px;letter-spacing:.04em;margin-top:10px}
.scene__filmframe{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;z-index:4}
.scene__filmframe div{border:1px solid var(--lime);opacity:0}

/* generation UI backdrop */
.gen{position:absolute;top:9vh;left:50%;transform:translateX(-50%);width:min(680px,92vw);z-index:3;opacity:0}
.gen__bar{background:rgba(26,23,19,.88);border:1px solid var(--line);border-radius:20px;padding:18px 20px 14px;box-shadow:0 24px 70px rgba(0,0,0,.5);backdrop-filter:blur(8px)}
.gen__row{display:flex;align-items:center;gap:13px}
.gen__plus{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:17px;flex:none}
.gen__txt{font-size:15.5px;color:var(--bone);min-height:1.5em;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gen__txt .caret{display:inline-block;width:1px;height:1.05em;background:var(--lime);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.gen__chips{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap;align-items:center}
.gchip{font-size:12.5px;letter-spacing:.04em;color:var(--dim);border:1px solid var(--line);border-radius:12px;padding:8px 13px;background:rgba(236,229,216,.03)}
.gbtn{margin-left:auto;font-size:13.5px;font-weight:500;letter-spacing:.03em;color:var(--carbon);background:var(--lime);border-radius:13px;padding:10px 18px;transition:.3s}
.gbtn.pressed{background:var(--limeBright);box-shadow:0 0 26px rgba(200,250,75,.45);transform:scale(.97)}
.gen__prog{height:2px;border-radius:2px;background:rgba(236,229,216,.08);margin-top:14px;overflow:hidden}
.gen__prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--seed),var(--lime))}
.gen__status{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:9px;min-height:1.2em}
.gen__status b{color:var(--lime);font-weight:400}

/* render block that resolves behind the mark */
.render{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(96vh,760px);aspect-ratio:16/9;z-index:2;border-radius:10px;overflow:hidden;opacity:0;border:1px solid rgba(236,229,216,.09)}
.render__noise{position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,rgba(236,229,216,.05) 0 2px,transparent 2px 4px),#171412}
.render__noise::after{content:"";position:absolute;inset:-60%;background:linear-gradient(115deg,transparent 42%,rgba(200,250,75,.10) 50%,transparent 58%);animation:scan 2.2s linear infinite}
.render::after{
    content:"";
    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 55%,
            rgba(5,5,5,.45) 100%
        );

    z-index:2;
}
@keyframes scan{to{transform:translateX(60%)}}
.render__img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit: cover;
object-position: center center;

    background:#0d0d10;

    opacity:0;

    transform:scale(1.08);

    transition:
        opacity .8s ease,
        transform 2.4s ease;
}

.render__tag{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(236,229,216,.75);background:rgba(12,11,10,.55);border:1px solid rgba(236,229,216,.14);border-radius:8px;padding:6px 10px;opacity:0;z-index:3}

/* work */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.head h2{font-size:clamp(34px,5vw,66px)}.head .eyebrow{margin-bottom:16px}
.head p{color:var(--dim);max-width:34ch;font-size:18px;line-height:1.55}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--carbon2);aspect-ratio:16/10;cursor:none}
.card.w7{grid-column:span 7}.card.w5{grid-column:span 5}.card.w4{grid-column:span 4}.card.w6{grid-column:span 6}.card.w12{grid-column:span 12;aspect-ratio:21/8}
.card__bg{position:absolute;inset:0;background-size:300% 300%;animation:drift 18s ease infinite;opacity:.9}
.card video,.card__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.card video{opacity:0;transition:opacity .45s ease}
.card__poster{opacity:1;transition:opacity .45s ease;transform:scale(1.08)}
.card.playing video{opacity:1}
.card.playing .card__poster{opacity:0;transform:scale(1)}
.card__o{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;background:linear-gradient(180deg,transparent 40%,rgba(12,11,10,.82));z-index:2;transition:.4s}
.card__cat{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--lime)}
.card__ttl{font-family:var(--cormorant);font-size:clamp(24px,2.6vw,34px);margin-top:8px}
.card:hover{border-color:rgba(180,201,90,.5)}
.card:hover .card__o{background:linear-gradient(180deg,rgba(12,11,10,.1),rgba(12,11,10,.6))}
@keyframes drift{0%,100%{background-position:0% 30%}50%{background-position:100% 70%}}
.g1{background:radial-gradient(70% 80% at 30% 20%,rgba(140,170,200,.5),transparent 60%),radial-gradient(60% 70% at 80% 90%,rgba(180,201,90,.35),transparent 55%),#0e1316}
.g2{background:radial-gradient(70% 90% at 70% 20%,rgba(166,115,63,.55),transparent 60%),radial-gradient(60% 60% at 20% 90%,rgba(120,40,40,.4),transparent 55%),#16100d}
.g3{background:radial-gradient(80% 80% at 50% 30%,rgba(120,140,160,.45),transparent 60%),radial-gradient(50% 60% at 80% 80%,rgba(180,201,90,.3),transparent 55%),#0c0e10}
.g4{background:radial-gradient(70% 80% at 40% 30%,rgba(200,180,120,.45),transparent 60%),radial-gradient(60% 70% at 85% 85%,rgba(120,90,50,.45),transparent 55%),#14110c}
.g5{background:radial-gradient(70% 80% at 60% 25%,rgba(70,130,110,.45),transparent 60%),radial-gradient(60% 70% at 20% 90%,rgba(180,201,90,.3),transparent 55%),#0b110e}
.g6{background:radial-gradient(70% 80% at 50% 20%,rgba(180,201,90,.4),transparent 55%),radial-gradient(60% 70% at 20% 90%,rgba(166,115,63,.4),transparent 55%),#121009}
@media(max-width:820px){.grid{grid-template-columns:1fr}.card{grid-column:1/-1!important;aspect-ratio:16/10!important}}

.edge{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
.edge__n{font-family:var(--cormorant);font-style:italic;font-size:clamp(40px,6vw,72px);color:var(--lime);line-height:1}
.edge__l{color:var(--dim);font-size:18px;margin-top:14px;line-height:1.5;max-width:24ch;margin-left:auto;margin-right:auto}
@media(max-width:820px){.edge{grid-template-columns:1fr;gap:34px}}

.mani{text-align:center;padding:clamp(110px,20vh,200px) 0}
.mani h2{font-size:clamp(42px,8vw,110px);line-height:1.04}.mani h2 em{font-style:italic;color:var(--lime)}

footer{position:relative;z-index:10;border-top:1px solid var(--line);background:rgba(15,13,11,.7);padding:clamp(70px,12vh,120px) 0 50px}
.foot__cta{text-align:center;margin-bottom:80px}
.foot__cta h2{font-size:clamp(36px,6vw,84px)}
.foot__cta p{color:var(--dim);font-size:19px;margin:18px auto 0;max-width:40ch}
.foot__cta .btn{margin-top:34px;display:inline-block}
.foot__b{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:34px}
.social{display:flex;gap:14px}
.social a{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--dim);transition:.3s;cursor:none}
.social a:hover{color:var(--carbon);background:var(--lime);border-color:var(--lime)}
.social svg{width:19px;height:19px}
.foot__fine{width:100%;margin-top:30px;color:var(--faint);font-size:12px;letter-spacing:.2em;text-transform:uppercase}

.rev{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rev.in{opacity:1;transform:none}

/* CHAT */
.chat-ov{position:fixed;inset:0;z-index:200;display:none;align-items:flex-end;justify-content:center;background:rgba(8,7,6,.55);backdrop-filter:blur(5px);padding:0 16px 18px}
.chat-ov.open{display:flex}
.chat{width:min(470px,100%);background:rgba(24,20,17,.97);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.65);display:flex;flex-direction:column;max-height:82vh;animation:up .45s cubic-bezier(.16,1,.3,1)}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.chat__h{display:flex;align-items:center;gap:13px;padding:16px 18px;border-bottom:1px solid var(--line)}
.chat__h svg{width:34px;height:34px}
.chat__h .t{font-weight:500;letter-spacing:.18em;font-size:14px}.chat__h .s{font-size:11px;color:var(--lime);letter-spacing:.06em;margin-top:2px}
.chat__x{margin-left:auto;cursor:pointer;color:var(--dim);font-size:22px;background:none;border:none;line-height:1;padding:4px}
.chat__x:hover{color:var(--bone)}
.chat__body{padding:20px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;flex:1;min-height:260px}
.msg{max-width:84%;padding:12px 16px;border-radius:15px;font-size:16px;line-height:1.5;animation:pop .3s ease}
@keyframes pop{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
.msg.bot{align-self:flex-start;background:rgba(236,229,216,.06);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.user{align-self:flex-end;background:var(--lime);color:var(--carbon);border-bottom-right-radius:5px;font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start}
.chips button{font-family:var(--grotesk);font-size:14px;padding:10px 16px;border:1px solid var(--line);border-radius:30px;color:var(--bone);background:transparent;cursor:pointer;transition:.2s}
.chips button:hover{background:var(--lime);color:var(--carbon);border-color:var(--lime)}
.typing{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:rgba(236,229,216,.06);border:1px solid var(--line);border-radius:15px;border-bottom-left-radius:5px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:ty 1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes ty{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat__f{display:flex;gap:9px;padding:14px;border-top:1px solid var(--line)}
.chat__f input{
    flex:1;
    background:#1b1713;
    border:1px solid rgba(180,201,90,.18);
    border-radius:30px;
    padding:13px 17px;
    color:#ECE5D8;
    font-family:var(--grotesk);
    font-size:16px;
    outline:none;

    caret-color:#C8FA4B !important;
    -webkit-text-fill-color:#ECE5D8;
}
.chat__f input:focus{
    border-color:#C8FA4B;
    box-shadow:0 0 0 3px rgba(200,250,75,.15);
}
.chat__f input::placeholder{color:rgba(236,229,216,.45)}
.chat__f input::selection{background:var(--lime);color:var(--carbon)}
.chat__f button{background:var(--lime);color:var(--carbon);border:none;border-radius:30px;padding:0 22px;font-family:var(--grotesk);font-weight:500;cursor:pointer;letter-spacing:.04em}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}.hero h1 .ln span{transform:none}.rev{opacity:1;transform:none}}