body{margin:0;background:#0B0B0B}
:focus-visible{outline:2px solid #E5484D;outline-offset:3px}
a{color:#EDE9E1}a:hover{color:#E5484D}
.tj *{box-sizing:border-box}
.tj{font-family:'Hanken Grotesk',system-ui,sans-serif;color:#EDE9E1;background:#0B0B0B;-webkit-font-smoothing:antialiased;overflow-x:clip}
.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-0.02em}
.it{font-style:italic}
.label{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:0.16em;text-transform:uppercase}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.red{color:#E5484D}
.muted{color:#9C978E}
.outline{color:transparent;-webkit-text-stroke:1px #EDE9E1}

/* ---------- motion ---------- */
@keyframes rise{from{transform:translateY(110%) rotate(4deg);filter:blur(8px)}to{transform:none;filter:blur(0)}}
@keyframes fade{from{opacity:0;transform:translateY(32px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.35}}
@keyframes flow{to{stroke-dashoffset:-48}}
@keyframes build{0%{transform:scaleX(0);opacity:1}8%{transform:scaleX(1)}88%{opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes noz{0%,100%{transform:translateX(-46px)}50%{transform:translateX(46px)}}
@keyframes drawline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wipe{from{transform:translateY(0)}to{transform:translateY(-101%)}}
@keyframes markin{0%{opacity:0;transform:scaleY(0)}40%{opacity:1;transform:scaleY(1)}100%{opacity:1;transform:scaleY(1)}}
@keyframes cube{from{transform:rotateX(-20deg) rotateY(0deg)}to{transform:rotateX(-20deg) rotateY(-360deg)}}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
@keyframes hs{from{transform:translateX(0)}to{transform:translateX(calc(-100% + 100vw))}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.ln{display:block;overflow:hidden;padding-bottom:0.08em;margin-bottom:-0.08em}
.ln>span{display:inline-block;transform-origin:left bottom;animation:rise 1.4s cubic-bezier(.19,1,.22,1) both}
.fade{animation:fade 1.4s cubic-bezier(.19,1,.22,1) both}
.rule{height:1px;background:#2A2A2A;transform-origin:left;animation:drawline 1.8s cubic-bezier(.19,1,.22,1) both}
.spin-slow{animation:spin 40s linear infinite}
.spin{animation:spin 9s linear infinite;transform-box:fill-box;transform-origin:center}
.spinr{animation:spinr 14s linear infinite;transform-box:fill-box;transform-origin:center}
.bob{animation:bob 4.5s ease-in-out infinite}
.pulse{animation:pulse 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.flow{stroke-dasharray:4 8;animation:flow 1.8s linear infinite}
.lay{transform-box:fill-box;transform-origin:left center;animation:build 8s cubic-bezier(.65,0,.35,1) infinite both}
.noz{animation:noz 1.6s ease-in-out infinite}
.cue{width:1px;height:64px;background:#EDE9E1;animation:cue 2.4s cubic-bezier(.65,0,.35,1) infinite}

/* page curtain (plays on every tab change) */
.curtain{position:fixed;inset:0;z-index:80;pointer-events:none}
.curtain .c1,.curtain .c2{position:absolute;inset:0;transform:translateY(-101%)}
.curtain .c1{background:#C8102E;animation:wipe 1s cubic-bezier(.76,0,.24,1) .32s both}
.curtain .c2{background:#0B0B0B;display:flex;align-items:center;justify-content:center;gap:5px;animation:wipe 1s cubic-bezier(.76,0,.24,1) .12s both}
.curtain .c2 i{display:block;width:5px;height:44px;background:#EDE9E1;animation:markin .5s cubic-bezier(.19,1,.22,1) both}
.curtain .c2 i:last-child{background:#C8102E}

/* grain + cursor */
.grain{position:fixed;inset:-10%;width:120%;height:120%;pointer-events:none;z-index:90;opacity:.07;mix-blend-mode:overlay;animation:grain 1.2s steps(4) infinite}

.prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:#C8102E;transform-origin:left;transform:scaleX(0)}

/* showreel */
@keyframes scene{0%{opacity:0;transform:scale(1.12)}3%{opacity:1}22%{opacity:1}25%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes cap{0%,2%{opacity:0;transform:translateY(16px)}6%{opacity:1;transform:none}21%{opacity:1}24%,100%{opacity:0}}
@keyframes segA{0%{transform:scaleX(0)}25%,100%{transform:scaleX(1)}}
@keyframes segB{0%,25%{transform:scaleX(0)}50%,100%{transform:scaleX(1)}}
@keyframes segC{0%,50%{transform:scaleX(0)}75%,100%{transform:scaleX(1)}}
@keyframes segD{0%,75%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
.reel{position:relative;width:100%;aspect-ratio:4/5;background:#0E0E0E;border:1px solid #2A2A2A;border-radius:4px;overflow:hidden}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20% 18% 26%;opacity:0;animation:scene 16s cubic-bezier(.4,0,.2,1) infinite both}
.scene svg{width:100%;height:100%;overflow:visible}
.scap{position:absolute;left:28px;right:28px;bottom:28px;display:flex;flex-direction:column;gap:8px;opacity:0;animation:cap 16s cubic-bezier(.19,1,.22,1) infinite both}
.scap .sname{font-family:'Instrument Serif',serif;font-size:clamp(34px,3.4vw,48px);line-height:1}
.segs{position:absolute;top:20px;left:28px;right:28px;display:flex;gap:6px;z-index:2}
.segs span{flex:1;height:2px;background:#2E2E2E;overflow:hidden}
.segs i{display:block;height:100%;background:#EDE9E1;transform-origin:left;transform:scaleX(0);animation:16s linear infinite both}
.rhud{position:absolute;top:40px;left:28px;right:28px;display:flex;justify-content:space-between;z-index:2}
.rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:#C8102E;margin-right:8px;vertical-align:middle;animation:blink 1.2s steps(1) infinite}
.rbtn{position:absolute;right:16px;bottom:16px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid #4A4A4A;background:rgba(11,11,11,.6);color:#EDE9E1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .3s,background .3s}
.rbtn:hover{border-color:#C8102E;background:#C8102E}
.reel.paused *,.reel.paused *:before{animation-play-state:paused !important}

/* nav */
.tab{display:inline-flex;align-items:center;text-decoration:none;appearance:none;background:transparent;border:0;color:#9C978E;font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:500;padding:0;min-height:76px;cursor:pointer;white-space:nowrap;position:relative}
.tab:after{content:'';position:absolute;left:0;right:0;bottom:22px;height:1px;background:#C8102E;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.tab:hover{color:#EDE9E1}
.tab:hover:after,.tab.on:after{transform:scaleX(1);transform-origin:left}
.tab.on{color:#EDE9E1}

/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 30px;background:#EDE9E1;color:#0B0B0B;border:1px solid #EDE9E1;border-radius:999px;font-family:'Hanken Grotesk',sans-serif;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;isolation:isolate;transition:color .5s cubic-bezier(.19,1,.22,1),border-color .5s}
.btn:before{content:'';position:absolute;inset:0;background:#C8102E;transform:translateY(101%);border-radius:inherit;transition:transform .6s cubic-bezier(.19,1,.22,1);z-index:-1}
.btn:hover{color:#FFFFFF;border-color:#C8102E}
.btn:hover:before{transform:translateY(0)}
.btn.line{background:transparent;color:#EDE9E1;border-color:#4A4A4A}
.btn.dark{background:#0B0B0B;color:#EDE9E1;border-color:#0B0B0B}
.btn .ar{display:inline-block;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.btn:hover .ar{transform:translateX(5px)}

/* marquee */
.marq{overflow:hidden;border-top:1px solid #222222;border-bottom:1px solid #222222;padding:28px 0}
.track{display:flex;width:max-content;animation:marq 38s linear infinite}
.track span{font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(56px,8vw,128px);line-height:1;padding-right:56px;white-space:nowrap}
.track .o{color:transparent;-webkit-text-stroke:1px #EDE9E1}
.track .dot{color:#C8102E;font-style:normal}

/* horizontal division gallery */
.hs{position:relative}
.hs-sticky{padding:72px 0}
.hs-track{display:flex;gap:28px;width:max-content;padding:0 40px}
.hs-scroll{overflow-x:auto}
.panel{flex:0 0 auto;width:clamp(300px,74vw,1040px);min-height:560px;display:flex;gap:48px;padding:48px;background:#111111;border:1px solid #2A2A2A;border-radius:4px;transition:border-color .5s}
.panel:hover{border-color:#4A4A4A}
.pt{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:20px}
.pnum{font-family:'Instrument Serif',serif;font-size:160px;line-height:.8;color:transparent;-webkit-text-stroke:1px #4A4A4A;transition:-webkit-text-stroke-color .5s}
.panel:hover .pnum{-webkit-text-stroke-color:#C8102E}
.panel .frame{flex:0 0 42%;aspect-ratio:auto}
.panel.cta{background:#C8102E;border-color:#C8102E;width:clamp(300px,46vw,620px);flex-direction:column;justify-content:space-between}
@media (max-width:860px){.panel .frame{display:none}.panel{padding:32px}.pnum{font-size:110px}}
@supports (animation-timeline: view()){
  .prog{animation:grow linear both;animation-timeline:scroll(root)}
  .rv{animation:fade linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
  .hs{height:2600px;view-timeline-name:--hs}
  .hs-sticky{position:sticky;top:77px;height:820px;overflow:hidden;padding:56px 0 0}
  .hs-scroll{overflow:visible}
  .hs-track{animation:hs linear both;animation-timeline:--hs;animation-range:contain 0% contain 100%}
}

.frame{position:relative;border:1px solid #2A2A2A;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:12%}
.frame .tk{position:absolute;width:14px;height:14px;border-color:#C8102E;border-style:solid}

/* process */
.step{display:grid;grid-template-columns:88px minmax(0,1fr);gap:24px;padding:44px 0;border-top:1px solid #2A2A2A}
.step .sn{font-family:'Instrument Serif',serif;font-size:56px;line-height:1;color:transparent;-webkit-text-stroke:1px #C8102E}
.step:hover h3{font-style:italic}

.srow{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.2fr);gap:32px;padding:36px 0;border-top:1px solid #2A2A2A;align-items:baseline;transition:padding .5s cubic-bezier(.19,1,.22,1)}
.srow:hover{padding-left:16px}
.srow:hover h3{font-style:italic;color:#FFFFFF}
@media (max-width:760px){.srow{grid-template-columns:48px minmax(0,1fr)}.srow p{grid-column:2}}

.plan{position:relative;background:#111111;border:1px solid #2A2A2A;border-radius:4px;padding:40px 34px;display:flex;flex-direction:column;gap:22px;transition:transform .6s cubic-bezier(.19,1,.22,1),border-color .5s}
.plan:hover{transform:translateY(-8px);border-color:#C8102E}
.plan.feat{background:#EDE9E1;color:#0B0B0B;border-color:#EDE9E1}
.plan.feat .muted{color:#4A4740}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.plan li{font-size:15px;line-height:1.45;padding-left:22px;position:relative}
.plan li:before{content:'';position:absolute;left:0;top:10px;width:10px;height:1px;background:#C8102E}

.fact{display:flex;flex-direction:column;gap:10px;padding:24px 0;border-top:1px solid #2A2A2A}

.field{display:flex;flex-direction:column;gap:10px}
.field label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#4A4740}
.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid #8C877E;color:#0B0B0B;font:inherit;font-size:18px;padding:10px 0 12px;min-height:48px;border-radius:0;transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:#C8102E;box-shadow:0 1px 0 #C8102E}
.ftab{display:flex;align-items:center;text-decoration:none;appearance:none;background:transparent;border:0;padding:0;color:#9C978E;font:inherit;font-size:15px;text-align:left;cursor:pointer;min-height:34px;transition:color .3s,transform .4s}
.ftab:hover{color:#EDE9E1;transform:translateX(4px)}
.seal{position:absolute;right:40px;top:-90px;width:180px;height:180px}
@media (max-width:860px){.seal{display:none}}

@media (prefers-reduced-motion: reduce){
  .tj *,.tj *:before,.tj *:after{animation:none !important;transition:none !important}
  .curtain,.grain{display:none}
  .scene:first-of-type,.scene:first-of-type .scap{opacity:1}
}
/* static-site additions */
html{scroll-behavior:smooth}
.reel .ic-play{display:none}
.reel.paused .ic-play{display:block}
.reel.paused .ic-pause{display:none}
.drow,.div{text-decoration:none}
a.btn{color:inherit}
a.btn{color:#0B0B0B}a.btn.line,a.btn.dark{color:#EDE9E1}a.btn:hover{color:#FFFFFF}
.form-note{font-size:14px;color:#3A3732;min-height:20px}
.tj header a{text-decoration:none}
@media (max-width:760px){
  .tj header .wrap{gap:0 16px;padding:0 20px}
  .tj header .wrap > a.btn{display:none}
  .tj header nav{order:3;width:100%;gap:24px;padding-bottom:4px}
  .tj header .tab{min-height:48px}
  .tj header .tab:after{bottom:8px}
  .wrap{padding:0 20px}
  .hs-sticky{top:125px}
}