/* A living brand film: one visual, three chapters, driven by the visitor's scroll. */
:root{--acid:#dcfc58;--ink:#090a08;--paper:#f2f2e8}
body{background:#080907} .site-header{position:absolute;border-bottom:1px solid rgba(255,255,255,.14)}
.story{height:310svh;background:#050604;position:relative;color:#f5f3e9;--p:0;--split:0;--flash:0;--sprout:0;--intro:1;--chapter:0;--ending:0}
.story-stage{height:100svh;min-height:620px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:#050604}
.story-grain{position:absolute;inset:0;z-index:9;opacity:.16;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E")}
.story-glow{position:absolute;inset:-30%;background:radial-gradient(ellipse at 62% 49%,rgba(130,103,57,.20),transparent 32%),radial-gradient(ellipse at 50% 100%,rgba(126,134,72,.1),transparent 42%);transform:scale(calc(1 + var(--split)*.25))}
.story-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.9%,rgba(255,255,255,.05) 50%,transparent 50.1%);opacity:.6}
.hero-massive{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) scale(calc(1 + var(--split)*.18));font:900 clamp(180px,26.1vw,440px)/.8 'Archivo Black',sans-serif;letter-spacing:-.095em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);opacity:calc(var(--intro)*.9);user-select:none}
.scene-number{position:absolute;z-index:5;top:115px;right:var(--gutter);display:flex;align-items:center;gap:15px;font-size:9px;letter-spacing:.15em;color:#aaa89a;opacity:var(--intro)}.scene-number i{height:1px;width:48px;background:#8b887a}
.story-opening{position:absolute;z-index:6;top:23%;left:var(--gutter);width:48%;opacity:var(--intro);transform:translate3d(calc(var(--split)*-55px),calc(var(--split)*-30px),0)}
.story-overline{font-size:9px;letter-spacing:.14em;color:#c8c7b8;margin:0 0 32px}.story-overline span{display:inline-block;width:24px;height:2px;background:var(--acid);vertical-align:middle;margin-right:10px}
.story-opening h1{margin:0;font-family:'Noto Sans SC',sans-serif;line-height:1.03;letter-spacing:-.075em;font-size:clamp(30px,3.2vw,55px);font-weight:800;text-shadow:0 2px 20px rgba(0,0,0,.5)}.story-opening h1>span{display:block}.story-opening strong{display:block;font-size:clamp(76px,8.4vw,145px);font-weight:900;line-height:.93;letter-spacing:-.085em;margin-top:.19em}.story-opening strong i{font-style:normal;color:var(--acid)}.story-subtitle{font-size:clamp(19px,2vw,32px);font-weight:700;margin:30px 0 0;letter-spacing:.02em}.story-subtitle span{color:var(--acid);margin-left:.3em}
.peanut-scene{position:absolute;z-index:3;top:50%;left:62%;width:min(54vw,780px);height:90%;transform:translate(-50%,-50%);pointer-events:none}
.peanut-halo{position:absolute;inset:8% 8%;border-radius:50%;background:radial-gradient(ellipse,rgba(196,161,103,.18),transparent 64%);filter:blur(40px);transform:scale(calc(1 + var(--split)*.6));opacity:calc(1 - var(--sprout))}
.hero-shell{position:absolute;inset:-6% 0;background:url('assets/peanut-cutout.webp') center/contain no-repeat;filter:contrast(1.08) saturate(.65);will-change:transform,opacity;opacity:calc(1 - var(--sprout));animation:peanut-breathe 6s ease-in-out infinite}
.shell-left{clip-path:polygon(0 0,51% 0,48% 10%,52% 19%,47% 28%,52% 37%,48% 46%,52% 56%,47% 66%,52% 76%,48% 87%,51% 100%,0 100%);translate:calc(var(--split)*-17%) calc(var(--split)*5%);rotate:calc(var(--split)*-18deg)}
.shell-right{clip-path:polygon(51% 0,100% 0,100% 100%,51% 100%,48% 87%,52% 76%,47% 66%,52% 56%,48% 46%,52% 37%,47% 28%,52% 19%,48% 10%);translate:calc(var(--split)*17%) calc(var(--split)*5%);rotate:calc(var(--split)*18deg)}
@keyframes peanut-breathe{50%{transform:translateY(-12px) scale(1.015)}}
.crack-light{position:absolute;left:50%;top:12%;height:76%;width:calc(2px + var(--split)*30px);transform:translateX(-50%);background:linear-gradient(transparent,#faffd7 20%,var(--acid) 50%,#fffbe0 80%,transparent);filter:blur(4px);box-shadow:0 0 30px 6px #dcfc58,0 0 100px 20px #d5e96b;opacity:var(--flash)}
.orbit-line{position:absolute;inset:7% 4%;border:1px solid rgba(255,255,255,.18);border-radius:50%;transform:rotate(-22deg) scaleY(.84);opacity:calc(var(--intro)*.7)}.orbit-line-two{inset:17% -3%;transform:rotate(38deg) scaleY(.9);border-style:dashed;opacity:calc(var(--intro)*.35)}.scene-axis{position:absolute;color:var(--acid);font-size:15px;opacity:var(--intro)}.scene-axis-a{top:18%;right:9%}.scene-axis-b{bottom:20%;left:10%}
.particles{position:absolute;inset:0;opacity:var(--flash)}.particles i{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#edfbb0;box-shadow:0 0 10px var(--acid);transform:translate(calc(var(--x)*var(--split)),calc(var(--y)*var(--split))) scale(calc(.5 + var(--split)))}.particles i:nth-child(1){--x:-240px;--y:-260px}.particles i:nth-child(2){--x:180px;--y:-300px}.particles i:nth-child(3){--x:260px;--y:-130px}.particles i:nth-child(4){--x:-300px;--y:-90px}.particles i:nth-child(5){--x:310px;--y:90px}.particles i:nth-child(6){--x:-220px;--y:200px}.particles i:nth-child(7){--x:170px;--y:260px}.particles i:nth-child(8){--x:-80px;--y:-330px}.particles i:nth-child(9){--x:100px;--y:340px}.particles i:nth-child(10){--x:-340px;--y:50px}.particles i:nth-child(11){--x:240px;--y:180px}.particles i:nth-child(12){--x:-120px;--y:320px}
.story-germination{position:absolute;inset:0;z-index:2;opacity:var(--sprout);transform:scale(calc(1.12 - var(--sprout)*.12));will-change:transform,opacity}.germination-photo{position:absolute;inset:0;background:linear-gradient(90deg,#050604 0%,rgba(5,6,4,.7) 26%,transparent 70%),linear-gradient(0deg,#050604,transparent 30%),url('assets/seedling.webp') center 55%/cover no-repeat}.germination-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 55% 60%,transparent 0,rgba(0,0,0,.35) 85%)}
.story-chapter,.story-ending{position:absolute;z-index:6;left:var(--gutter);top:32%;opacity:var(--chapter);transform:translateY(calc((1 - var(--chapter))*30px));pointer-events:none}.story-ending{opacity:var(--ending);transform:translateY(calc((1 - var(--ending))*30px))}.story-chapter>span,.story-ending>span{font-size:10px;letter-spacing:.16em;color:#c8c6b4}.story-chapter p,.story-ending p{font-family:'Noto Sans SC',sans-serif;font-size:clamp(56px,7vw,112px);line-height:1.05;letter-spacing:-.08em;font-weight:900;margin:25px 0}.story-chapter em,.story-ending em{font-style:normal;color:var(--acid)}.story-chapter small,.story-ending small{font-size:13px;color:#c2c1b5}.story-bottom{position:absolute;z-index:7;bottom:32px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.13em;color:#b8b8aa}.story-bottom b{display:inline-grid;place-items:center;border:1px solid #929789;border-radius:50%;width:34px;height:34px;font-size:16px;font-weight:400;margin-left:12px;animation:arrow-bounce 2s ease-in-out infinite}.story-progress{position:absolute;z-index:7;bottom:0;left:0;width:100%;height:2px;background:rgba(255,255,255,.14)}.story-progress i{display:block;background:var(--acid);height:100%;width:calc(var(--p)*100%)}@keyframes arrow-bounce{50%{transform:translateY(5px)}}
.marquee{overflow:hidden;background:var(--acid);color:#10130b;padding:18px 0;white-space:nowrap}.marquee div{width:max-content;font:900 clamp(18px,2.7vw,42px)/1 'Archivo Black',sans-serif;letter-spacing:-.05em;animation:marquee 25s linear infinite}.marquee span{display:inline-block;margin:0 .55em;font-family:sans-serif}@keyframes marquee{to{transform:translateX(-50%)}}
.services{background:#e9e8df}.service-row{position:relative;overflow:hidden}.service-row:before{content:'';position:absolute;inset:0;background:#d5fb51;transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:0}.service-row:hover:before{transform:translateY(0)}.service-row>*{position:relative;z-index:1}.service-row:hover{padding-left:20px;color:#11120f}.service-mark{transition:transform .35s}.service-row:hover .service-mark{transform:rotate(90deg)}
.work{background:#090a08}.work-heading h2{font-size:clamp(55px,6.4vw,105px)}.work-grid{align-items:start}.work-image{background:#171a16}.work-image:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.25),transparent 45%);pointer-events:none}.work-card-large .work-image{aspect-ratio:.95}.work-card{transition:transform .5s cubic-bezier(.2,.8,.2,1)}.work-card:hover{transform:translateY(-8px)}.work-meta h3{font-family:'Archivo Black','Noto Sans SC',sans-serif}.partners{overflow:hidden}.brand-grid span{position:relative;transition:background .25s,color .25s}.brand-grid span:hover{background:#11120f;color:var(--acid)}
@media(max-width:700px){.story{height:290svh}.story-stage{min-height:650px}.hero-massive{top:62%;font-size:35vw;letter-spacing:-.1em}.scene-number{top:94px;font-size:8px}.scene-number i{width:20px}.scene-number span:last-child{display:none}.story-opening{top:17%;width:90%}.story-overline{font-size:8px;margin-bottom:18px}.story-opening h1{font-size:clamp(28px,7vw,38px);line-height:1.04}.story-opening strong{font-size:clamp(66px,17vw,96px);margin-top:.12em;line-height:.95}.story-opening strong br{display:none}.story-subtitle{font-size:19px;margin-top:15px}.peanut-scene{left:62%;top:63%;width:95vw;height:56%}.hero-shell{inset:-10% 0}.orbit-line{inset:5% 10%}.orbit-line-two{inset:16% 3%}.scene-axis-a{top:12%}.scene-axis-b{bottom:14%}.story-bottom{bottom:22px;font-size:8px}.story-bottom span:nth-child(2),.story-bottom span:nth-child(3){display:none}.story-bottom b{width:28px;height:28px}.story-chapter,.story-ending{top:28%}.story-chapter p,.story-ending p{font-size:clamp(49px,11vw,70px)}.story-chapter small,.story-ending small{font-size:12px}.germination-photo{background:linear-gradient(0deg,#050604 0%,transparent 40%),linear-gradient(90deg,rgba(5,6,4,.65),transparent),url('assets/seedling.webp') 56% center/auto 100% no-repeat}.marquee{padding:14px 0}.marquee div{font-size:21px}.work-heading h2{font-size:clamp(45px,11vw,68px)}}
@media(max-width:380px){.story-opening{top:16%}.story-opening strong{font-size:16vw}.peanut-scene{top:65%;height:54%}.story-subtitle{font-size:17px}}
@media(prefers-reduced-motion:reduce){.story{height:auto}.story-stage{position:relative;min-height:700px}.story-opening{opacity:1;transform:none}.hero-shell{opacity:1;animation:none}.story-bottom b,.marquee div{animation:none}.story-chapter,.story-ending{display:none}.story-germination{opacity:0}.crack-light,.particles{display:none}.story-progress{display:none}}
@media (hover:hover) and (pointer:fine){.peanut-scene{transform:translate(-50%,-50%) perspective(1200px) rotateY(calc(var(--mx, 0)*5deg)) rotateX(calc(var(--my, 0)*-5deg));transition:transform .35s ease-out}}
@media (prefers-reduced-motion:no-preference){
 .story-overline{animation:intro-rise .8s .12s both}.story-opening h1>span:first-child{animation:intro-rise .8s .2s both}.story-opening h1>span:nth-child(2){animation:intro-rise .8s .3s both}.story-opening strong{animation:intro-rise .9s .4s both}.story-subtitle{animation:intro-rise .8s .55s both}
 .motion-ready .reveal{opacity:0;transform:translateY(55px);transition:opacity .75s ease,transform .85s cubic-bezier(.2,.8,.2,1)}
 .motion-ready .reveal.is-visible{opacity:1;transform:translateY(0)}
 .motion-ready .work-card:nth-child(2){transition-delay:.08s}.motion-ready .work-card:nth-child(3){transition-delay:.16s}
}
@keyframes intro-rise{from{opacity:0;translate:0 28px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}