/* ==========================================================
   Crazy Team Studio
   Edit suite palette: plum black screen, projector cream type,
   and the clip label colours every editor knows.
   ========================================================== */
@font-face{font-family:"Big Shoulders";src:url("../fonts/BigShoulders.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Hanken";src:url("../fonts/Hanken.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Courier Prime";src:url("../fonts/CourierPrime.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url("../fonts/CourierPrimeBold.woff2") format("woff2");font-weight:700;font-display:swap}
@property --sweep{syntax:"<angle>";initial-value:0deg;inherits:false}

:root{
  --bg:#141016; --bg2:#1c1720; --bg3:#272029; --deep:#0c0a0e;
  --cream:#f1e9da; --dim:#b4aa9d; --faint:#7d7383;
  --line:rgba(241,233,218,.12);
  --paper:#fbf8f1; --ink:#1a161c;
  --apricot:#f3a33b; --red:#ef3b42; --red-deep:#b5121b; --brand:#660103; --violet:#9a6bff; --blue:#4f8cff; --green:#36c08e; --pink:#ec5a86; --rec:#ff3b30;
  --disp:"Big Shoulders",Impact,"Arial Narrow",sans-serif;
  --body:"Hanken",system-ui,-apple-system,"Segoe UI",sans-serif;
  --type:"Courier Prime","Courier New",Courier,monospace;
  --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.4,.64,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--cream);font:400 17px/1.62 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--red);color:var(--bg)}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:4px}
.wrap{width:min(1240px,92vw);margin:0 auto}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--cream);color:var(--bg);padding:10px 14px}
.skip:focus{left:12px;top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:18px;height:18px;flex:none}

/* ---------- type ---------- */
.slug{font:700 .8rem/1.4 var(--type);letter-spacing:.02em;color:var(--dim);margin-bottom:16px}
.h2{font:800 clamp(2.4rem,5.4vw,4.4rem)/.94 var(--disp);letter-spacing:.003em;max-width:16ch}
.body{color:var(--dim);font-size:1.06rem;max-width:58ch;margin-top:18px}
.narrow{max-width:60ch}
.lede{color:var(--dim);font-size:clamp(1.02rem,1.3vw,1.16rem);max-width:54ch;margin-top:22px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:6px;border:1px solid var(--cream);background:var(--cream);color:var(--bg);font:650 .98rem/1.2 var(--body);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .25s var(--spring)}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep);color:var(--cream);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:transparent;color:var(--cream);border-color:rgba(241,233,218,.38)}
.btn-ghost:hover{background:var(--cream);color:var(--bg);border-color:var(--cream)}
.btn-lg{padding:15px 24px;font-size:1.02rem}
.btn-sm{padding:9px 15px;font-size:.9rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.cta-row.center{justify-content:center;margin-top:44px}

/* ---------- logo (inline vector) ---------- */
.logo{display:inline-flex;align-items:center}
.logo .cts-logo{display:block;height:64px;width:auto;overflow:visible}
.logo-foot .cts-logo{height:auto;width:min(250px,60vw)}
.brand:hover .cts-logo .spk,.brand:focus-visible .cts-logo .spk{opacity:1}
.brand:hover .cts-logo .spk{transform-box:fill-box;transform-origin:50% 50%;opacity:1;animation:ctsKloop 1.1s linear infinite}@keyframes ctsKloop{to{transform:rotate(360deg)}}
.brand:focus-visible .cts-logo .spk{transform-box:fill-box;transform-origin:50% 50%;opacity:1;animation:ctsKloop 1.1s linear infinite}@keyframes ctsKloop{to{transform:rotate(360deg)}}
/* logo draw-on, generated from the brand timeline */
.cts-logo.draw .cam{transform-box:fill-box;transform-origin:50% 100%}
.cts-logo.draw .rib{transform-box:fill-box;transform-origin:50% 50%}
.cts-logo.draw .spk{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.cts-logo.draw .l1,.cts-logo.draw .l2,.cts-logo.draw .l3,.cts-logo.draw .l4,.cts-logo.draw .leg,.cts-logo.draw .t1,.cts-logo.draw .t2,.cts-logo.draw .t3,.cts-logo.draw .t4,.cts-logo.draw .rule,.cts-logo.draw .stu{stroke-dasharray:1 1}
.cts-logo.draw .l1{animation:ctsKdraw 0.550s cubic-bezier(.65,0,.35,1) 0.000s both}
@keyframes ctsKdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.cts-logo.draw .l2{animation:ctsKdraw 0.600s cubic-bezier(.65,0,.35,1) 0.080s both}
.cts-logo.draw .l3{animation:ctsKdraw 0.500s cubic-bezier(.65,0,.35,1) 0.160s both}
.cts-logo.draw .l4{animation:ctsKdraw 0.550s cubic-bezier(.65,0,.35,1) 0.240s both}
.cts-logo.draw .leg{animation:ctsKdraw 0.450s cubic-bezier(.65,0,.35,1) 0.300s both}
.cts-logo.draw .head{animation:ctsKfade 0.200s linear 0.300s both}
@keyframes ctsKfade{from{opacity:0}to{opacity:1}}
.cts-logo.draw .cam{animation:ctsKdrop 0.650s cubic-bezier(.34,1.56,.64,1) 0.550s both}
@keyframes ctsKdrop{from{opacity:0;transform:translateY(-130px) scale(.55) rotate(-10deg)}to{opacity:1;transform:none}}
.cts-logo.draw .t1{animation:ctsKdraw 0.350s cubic-bezier(.65,0,.35,1) 0.850s both}
.cts-logo.draw .t2{animation:ctsKdraw 0.350s cubic-bezier(.65,0,.35,1) 0.930s both}
.cts-logo.draw .t3{animation:ctsKdraw 0.350s cubic-bezier(.65,0,.35,1) 1.010s both}
.cts-logo.draw .t4{animation:ctsKdraw 0.350s cubic-bezier(.65,0,.35,1) 1.090s both}
.cts-logo.draw .rule{animation:ctsKdraw 0.450s cubic-bezier(.65,0,.35,1) 1.250s both}
.cts-logo.draw .rib{animation:ctsKunfurl 0.450s cubic-bezier(.22,.61,.36,1) 1.450s both}
@keyframes ctsKunfurl{from{transform:scaleX(0)}to{transform:none}}
.cts-logo.draw .stu{animation:ctsKdraw 0.500s cubic-bezier(.65,0,.35,1) 1.800s both}
.cts-logo.draw .spk{animation:ctsKspin 1.600s cubic-bezier(.3,0,.4,1) 1.000s both}
@keyframes ctsKspin{0%{opacity:0;transform:rotate(0)}12%{opacity:1}82%{opacity:1}100%{opacity:0;transform:rotate(720deg)}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(20,16,22,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.stuck{border-bottom-color:var(--line)}
.nav-in{width:min(1240px,92vw);margin:0 auto;height:78px;display:flex;align-items:center;gap:26px}
.brand{margin-right:auto;display:inline-flex}
.nav-links{display:flex;gap:4px}
.nav-links a{padding:8px 12px;border-radius:6px;font-weight:600;font-size:.96rem;color:var(--dim);transition:color .2s,background .2s}
.nav-links a:hover{color:var(--cream);background:rgba(241,233,218,.06)}
.nav-links a[aria-current="page"]{color:var(--cream);box-shadow:inset 0 -2px 0 var(--red)}
.rec{display:inline-flex;align-items:center;gap:7px;font:700 .74rem var(--type);color:var(--dim)}
.rec i{width:9px;height:9px;border-radius:50%;background:var(--rec);animation:blink 1.2s steps(1) infinite}
.rec b{font-weight:700;color:var(--cream)}
@keyframes blink{50%{opacity:.15}}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:8px;background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.burger span{width:18px;height:2px;background:var(--cream);transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.mob{position:fixed;top:78px;left:0;right:0;z-index:99;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 4vw 22px}
.mob nav{display:flex;flex-direction:column}
.mob a{padding:15px 4px;font:800 1.6rem var(--disp);border-bottom:1px solid var(--line)}
.mob .btn{margin-top:18px;justify-content:center;font:650 1rem var(--body);border-bottom:1px solid var(--cream)}
@media (max-width:1100px){.rec{display:none}}
@media (max-width:860px){.nav-links,.nav-in>.btn-sm{display:none}.burger{display:flex}.logo .cts-logo{height:56px}}

/* ---------- film grain ---------- */
.grain{position:fixed;inset:-50%;z-index:300;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .5s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(-1%,1%)}}

/* ---------- film leader intro ---------- */
.leader{display:none}
html.intro .leader{display:grid;position:fixed;inset:0;z-index:500;background:#000;place-items:center;grid-template-rows:1fr auto;padding:6vh 0;cursor:pointer;animation:leaderout .45s ease 5.2s forwards}
.leader.done{animation:leaderout .35s ease forwards!important}
@keyframes leaderout{to{opacity:0;visibility:hidden}}
.ld-ring{position:relative;width:min(56vmin,380px);aspect-ratio:1;border-radius:50%;border:3px solid var(--cream);display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 14px var(--bg),0 0 0 16px rgba(241,233,218,.35)}
.ld-sweep{position:absolute;inset:0;background:conic-gradient(rgba(241,233,218,.22) var(--sweep),transparent 0);animation:sweep .7s linear 3}
@keyframes sweep{to{--sweep:360deg}}
.ld-x::before,.ld-x::after{content:"";position:absolute;background:rgba(241,233,218,.5)}
.ld-x::before{left:0;right:0;top:50%;height:2px}
.ld-x::after{top:0;bottom:0;left:50%;width:2px}
.ld-n{position:relative;font:900 clamp(7rem,26vmin,13rem)/1 var(--disp)}
.ld-skip{font:700 .78rem var(--type);color:var(--faint)}
.ld-ring{grid-area:1/1;transition:opacity .3s,transform .4s var(--ease)}
.ld-logo{grid-area:1/1;width:min(68vmin,500px);opacity:0;transition:opacity .2s}
.ld-logo .cts-logo{display:block;width:100%;height:auto}
.leader.logo-on .ld-ring{opacity:0;transform:scale(.85)}
.leader.logo-on .ld-logo{opacity:1}

/* ============================ HERO ============================ */
.hero{position:relative;padding:clamp(34px,5vw,64px) 0 clamp(54px,6vw,90px);overflow:hidden}
.lbx{position:absolute;left:0;right:0;height:13vh;background:#000;z-index:5;pointer-events:none;animation:lbx 1s var(--ease) .25s forwards}
.lbx-t{top:0;transform-origin:top}
.lbx-b{bottom:0;transform-origin:bottom}
html.intro .lbx{animation-delay:4.75s}
@keyframes lbx{to{transform:scaleY(0)}}
.hero-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,4vw,64px);align-items:center}
.hero-h{font:900 clamp(3.6rem,8.4vw,8rem)/.84 var(--disp);text-transform:uppercase;letter-spacing:-.005em}
.hero-h span{display:block;clip-path:inset(0 100% 0 0);animation:cutin .55s var(--ease) forwards}
.hero-h span:nth-child(1){animation-delay:.5s}
.hero-h span:nth-child(2){animation-delay:.68s}
.hero-h span:nth-child(3){animation-delay:.86s}
.hero-h span:nth-child(4){animation-delay:1.04s;color:var(--red)}
html.intro .hero-h span:nth-child(1){animation-delay:5s}
html.intro .hero-h span:nth-child(2){animation-delay:5.18s}
html.intro .hero-h span:nth-child(3){animation-delay:5.36s}
html.intro .hero-h span:nth-child(4){animation-delay:5.54s}
@keyframes cutin{to{clip-path:inset(0 0 0 0)}}

/* ---------- monitor ---------- */
.monitor{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px var(--line)}
.monitor.cutflash::after{content:"";position:absolute;inset:0;background:#fff;opacity:.5;animation:fl .12s linear forwards}
@keyframes fl{to{opacity:0}}
.shot{position:absolute;inset:0;visibility:hidden}
.shot.on{visibility:visible}
.shot:not(.on) *{animation-play-state:paused!important}
.shot-svg{width:100%;height:100%}
.safe{position:absolute;inset:8% 6%;border:1px dashed rgba(255,255,255,.16);pointer-events:none}
.mon-ui{position:absolute;left:14px;right:14px;bottom:10px;display:flex;justify-content:space-between;align-items:center;font:700 .76rem var(--type);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7);pointer-events:none}
.mon-lbl{display:inline-flex;align-items:center;gap:8px}
.mon-lbl::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--c,var(--violet))}
.mon-title{position:absolute;left:7%;bottom:15%;display:flex;flex-direction:column;opacity:0;transform:translateX(-14px);transition:opacity .35s,transform .45s var(--ease);pointer-events:none}
.mon-logo{width:clamp(120px,24vw,230px);filter:drop-shadow(0 4px 16px rgba(0,0,0,.7))}
.mon-logo .cts-logo{display:block;width:100%;height:auto}
.mon-title span{font:700 .78rem var(--type);color:var(--red);margin-top:4px}
.mon-title.show{opacity:1;transform:none}

/* ---------- timeline ---------- */
.tl{margin-top:14px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px 14px;user-select:none;-webkit-user-select:none}
.tl-bar{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.tl-play{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:var(--bg3);border:1px solid var(--line);cursor:pointer}
.tl-play .ic{width:16px;height:16px}
.tl-play .ic:last-child{display:none}
.tl.paused .tl-play .ic:first-child{display:none}
.tl.paused .tl-play .ic:last-child{display:block}
.tl-tc{font:700 .9rem var(--type);color:var(--cream)}
.tl-hint{margin-left:auto;font-size:.82rem;color:var(--faint)}
.tl-body{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:8px}
.tl-names,.tl-area{display:grid;grid-template-rows:18px 30px 30px 32px;row-gap:6px}
.tl-names span{font:700 .7rem/30px var(--type);color:var(--faint)}
.tl-area{position:relative;cursor:pointer;touch-action:none}
.tl-ruler{position:relative;border-bottom:1px solid var(--line)}
.tk{position:absolute;bottom:0;height:5px;border-left:1px solid var(--faint)}
.tk-l{height:17px;padding-left:4px;font:700 .6rem/1 var(--type);color:var(--faint);white-space:nowrap}
.tl-lane{position:relative;background:rgba(241,233,218,.035);border-radius:4px}
.clip{position:absolute;top:2px;bottom:2px;display:flex;align-items:center;padding:0 7px;border-radius:4px;border:1px solid var(--c);background:#2a2133;background:color-mix(in srgb,var(--c) 26%,var(--bg2));font:650 .7rem/1 var(--body);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .2s,box-shadow .2s}
.clip.live{background:color-mix(in srgb,var(--c) 52%,var(--bg2));box-shadow:0 0 18px -4px var(--c)}
.clip-audio{padding:0}
.wave{width:100%;height:100%}
.wave polygon{fill:var(--green);opacity:.65}
.c-apricot{--c:var(--apricot)}.c-violet{--c:var(--violet)}.c-blue{--c:var(--blue)}.c-green{--c:var(--green)}.c-pink{--c:var(--pink)}
.playhead{position:absolute;top:0;bottom:-6px;left:var(--p,0%);width:2px;margin-left:-1px;background:var(--red);cursor:grab;z-index:3}
.playhead::before{content:"";position:absolute;top:0;bottom:0;left:-12px;right:-12px}
.playhead i{position:absolute;top:-3px;left:50%;width:15px;height:17px;transform:translateX(-50%);background:var(--red);clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%)}
.tl-area.drag .playhead{cursor:grabbing}
@media (max-width:1000px){.hero-in{grid-template-columns:1fr}}
@media (max-width:540px){.tl-hint{display:none}.tl-names,.tl-area{grid-template-rows:16px 26px 26px 28px}.clip{font-size:.62rem;padding:0 4px}}

/* ---------- shot animations ---------- */
.beam{transform-box:view-box}
.b1{transform-origin:160px 0;animation:sway 3.2s ease-in-out infinite alternate}
.b2{transform-origin:320px 0;animation:sway 2.6s ease-in-out -1s infinite alternate-reverse}
.b3{transform-origin:480px 0;animation:sway 3.6s ease-in-out -2s infinite alternate}
@keyframes sway{from{transform:rotate(-17deg)}to{transform:rotate(17deg)}}
.eq{transform-box:fill-box;transform-origin:50% 100%;animation:eq .8s ease-in-out infinite alternate}
@keyframes eq{from{transform:scaleY(.12)}to{transform:scaleY(1)}}
.singer{transform-box:fill-box;transform-origin:50% 100%;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(2.5deg)}}
.shine{animation:shine 2.6s var(--ease) infinite}
@keyframes shine{from{transform:translateX(0) skewX(-14deg)}to{transform:translateX(260px) skewX(-14deg)}}
.label{transform-box:fill-box;transform-origin:50% 50%;animation:turn 3.2s ease-in-out infinite}
@keyframes turn{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.25) translateX(40px)}}
.spark{animation:twinkle 1.6s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.15}}
.sun{animation:sunset 14s ease-in-out infinite alternate}
@keyframes sunset{to{transform:translateY(34px)}}
.hills1{animation:drift 16s ease-in-out infinite alternate}
.hills2{animation:drift2 11s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(-34px)}}
@keyframes drift2{to{transform:translateX(-64px)}}
.birds{animation:fly 12s linear infinite}
@keyframes fly{from{transform:translateX(-120px)}to{transform:translateX(560px)}}
.iris{transform-box:fill-box;transform-origin:50% 50%;animation:irisrot 3s ease-in-out infinite}
@keyframes irisrot{50%{transform:rotate(52deg)}}
.pupil{transform-box:fill-box;transform-origin:50% 50%;animation:ap 3s ease-in-out infinite}
@keyframes ap{0%,100%{transform:scale(.6)}50%{transform:scale(2.6)}}
.af{animation:af 3s steps(1) infinite}
@keyframes af{0%,40%{stroke:#f1e9da}41%,100%{stroke:#36c08e}}
.flash{opacity:0;animation:flashk 3s linear infinite}
@keyframes flashk{0%,48%{opacity:0}50%{opacity:.85}56%,100%{opacity:0}}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.4s var(--ease) infinite}
@keyframes draw{0%{stroke-dashoffset:1;opacity:1}62%,86%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.pen{animation:pen 3.4s var(--ease) infinite}
@keyframes pen{0%{transform:translate(380px,118px)}22%{transform:translate(264px,128px)}44%{transform:translate(312px,246px)}62%,100%{transform:translate(388px,210px)}}
.ball-e{transform-box:fill-box;transform-origin:50% 100%;animation:bounce 1s cubic-bezier(.5,0,.5,1) infinite}
@keyframes bounce{0%,100%{transform:translateY(124px)}45%{transform:translateY(250px) scale(1,1)}50%{transform:translateY(250px) scale(1.3,.72)}55%{transform:translateY(250px) scale(1,1)}}
.ball-sh{transform-box:fill-box;transform-origin:50% 50%;animation:shad 1s cubic-bezier(.5,0,.5,1) infinite}
@keyframes shad{0%,100%{transform:scale(.45);opacity:.15}50%{transform:scale(1.15);opacity:.45}}

/* ---------- film strip ---------- */
.strip{position:relative;overflow:hidden;background:var(--deep);padding:24px 0;border-block:1px solid var(--line)}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:9px;background:repeating-linear-gradient(90deg,rgba(241,233,218,.2) 0 13px,transparent 13px 26px);animation:sprock 1.3s linear infinite}
.strip::before{top:7px}.strip::after{bottom:7px}
@keyframes sprock{to{background-position:26px 0}}
.strip-t{display:flex;width:max-content;animation:roll 42s linear infinite}
.strip:hover .strip-t,.strip:hover::before,.strip:hover::after{animation-play-state:paused}
@keyframes roll{to{transform:translateX(-50%)}}
.fr{display:flex;align-items:center;height:78px;padding:0 34px;margin-right:10px;border-radius:4px;background:var(--bg2);border:1px solid var(--line);font:800 1.7rem var(--disp);text-transform:uppercase;white-space:nowrap}
.fr:nth-child(5n+1){color:var(--apricot)}.fr:nth-child(5n+2){color:var(--cream)}.fr:nth-child(5n+3){color:var(--blue)}.fr:nth-child(5n+4){color:var(--pink)}.fr:nth-child(5n+5){color:var(--green)}

/* ============================ SECTIONS ============================ */
.sec{position:relative;padding:clamp(84px,10vw,140px) 0}
.sec-tight{padding-top:24px}
.sec-screen{background:var(--deep)}
.two-l>.btn{margin-top:28px}
.two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(34px,5vw,84px);align-items:start}
.two-grade{align-items:center}
@media (max-width:900px){.two{grid-template-columns:1fr}}

/* ---------- service rows (home) ---------- */
.srows{border-bottom:1px solid var(--line)}
.srow{position:relative;display:grid;grid-template-columns:8px minmax(0,.85fr) minmax(0,1.25fr);gap:18px;align-items:center;padding:18px 10px;border-top:1px solid var(--line)}
.srow::before{content:"";position:absolute;inset:6px 0;border-radius:6px;background:color-mix(in srgb,var(--c,var(--apricot)) 14%,transparent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);z-index:-1}
.srow{--c:inherit}
.srow-c{height:34px;border-radius:3px;background:var(--c)}
.srow-n{font:800 1.45rem/1 var(--disp);transition:transform .35s var(--ease)}
.srow-l{color:var(--dim);font-size:.95rem}
.srow:hover::before,.srow:focus-visible::before{transform:scaleX(1)}
.srow:hover .srow-n{transform:translateX(6px)}
.srows .srow:nth-child(1){--c:var(--apricot)}.srows .srow:nth-child(2){--c:var(--violet)}.srows .srow:nth-child(3){--c:var(--blue)}.srows .srow:nth-child(4){--c:var(--green)}
.srows .srow:nth-child(5){--c:var(--pink)}.srows .srow:nth-child(6){--c:var(--apricot)}.srows .srow:nth-child(7){--c:var(--violet)}.srows .srow:nth-child(8){--c:var(--blue)}
@media (max-width:620px){.srow{grid-template-columns:6px 1fr}.srow-l{grid-column:2}}

/* ---------- grading slider ---------- */
.grade{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px var(--line)}
.grade-a,.grade-b{position:absolute;inset:0}
.grade-a svg{filter:saturate(.16) contrast(.7) brightness(1.2) sepia(.08)}
.grade-b{clip-path:inset(0 0 0 var(--pos))}
.grade-b svg{filter:saturate(1.18) contrast(1.06)}
.grade-tag{position:absolute;top:12px;font:700 .74rem var(--type);background:rgba(0,0,0,.55);padding:5px 9px;border-radius:4px;pointer-events:none}
.t-a{left:12px}.t-b{right:12px;color:var(--red)}
.grade-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--cream);pointer-events:none}
.grade-line i{position:absolute;top:50%;left:50%;width:42px;height:42px;transform:translate(-50%,-50%);border-radius:50%;background:var(--cream);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.grade-line i::before{content:"";position:absolute;inset:0;background:var(--bg);clip-path:polygon(22% 50%,40% 34%,40% 66%,22% 50%,78% 50%,60% 34%,60% 66%,78% 50%)}
.grade-in{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.grade:focus-within .grade-line i{outline:3px solid var(--red);outline-offset:3px}

/* ---------- featured film ---------- */
.film-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(34px,5vw,84px);align-items:center}
.film .h2{font-size:clamp(3rem,7.5vw,6.4rem);text-transform:uppercase;letter-spacing:.02em;max-width:none}
.credits{position:relative;height:360px;overflow:hidden;border-radius:10px;background:#07060a;box-shadow:0 0 0 1px var(--line);text-align:center;
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.credits-roll{padding-top:120px;animation:creditroll 24s linear infinite}
.credits:hover .credits-roll{animation-play-state:paused}
@keyframes creditroll{to{transform:translateY(-50%)}}
.credits p{font:500 1rem/1.4 var(--body);color:var(--dim);margin-bottom:26px;letter-spacing:.03em}
.credits p:nth-child(8n+1){font:900 2.3rem/1 var(--disp);color:var(--cream);text-transform:uppercase;letter-spacing:.06em;margin-bottom:40px}
.credits b{font:800 1.8rem/1.1 var(--disp);color:var(--red);text-transform:uppercase;letter-spacing:.04em}
@media (max-width:900px){.film-in{grid-template-columns:1fr}.credits{height:300px}}

/* ---------- screenplay page ---------- */
.sec-paper{background:var(--bg)}
.page{position:relative;max-width:760px;margin:0 auto;background:var(--paper);color:var(--ink);padding:64px clamp(24px,7vw,92px) 56px;border-radius:2px;font:400 1.02rem/1.6 var(--type);box-shadow:0 40px 90px rgba(0,0,0,.5);transform:rotate(-.6deg)}
.page-no{position:absolute;top:28px;right:36px;font-weight:700}
.fadein{font-weight:700}
.h2-paper{font:700 1.15rem var(--type);text-transform:uppercase;text-align:center;text-decoration:underline;text-underline-offset:4px;margin:30px auto 34px;max-width:none}
.scenes{counter-reset:none}
.scene{margin-bottom:24px}
.scene-h{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;font-weight:700;text-transform:uppercase}
.scene-h span:last-child{text-align:right}
.scene-a{margin:8px 44px 0}
.cutto{text-align:right;font-weight:700;margin-top:10px}
.tw::after{content:"";display:inline-block;width:.6ch;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--ink);animation:blink 1s steps(1) infinite}

/* ---------- clocks ---------- */
.clocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;margin-top:44px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.clk{background:var(--bg);padding:20px 22px}
.sec-screen .clk{background:var(--deep)}
.clk-c{display:flex;align-items:center;gap:8px;font-weight:650}
.clk-c em{font:700 .7rem var(--type);font-style:normal;color:var(--red);border:1px solid rgba(239,59,66,.55);border-radius:4px;padding:1px 6px}
.clk-t{font:800 3.1rem/1 var(--disp);margin-top:10px;letter-spacing:.01em}
.clk-t i{font-style:normal;animation:blink 1s steps(1) infinite}
.clk-d{color:var(--dim);font-size:.86rem;margin-top:6px}

/* ---------- social film frames ---------- */
.frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.frame{position:relative;display:block;padding:24px 26px 22px;border-radius:6px;background:#0a080c;box-shadow:0 0 0 1px var(--line);overflow:hidden;isolation:isolate;transition:transform .45s var(--spring),box-shadow .3s}
.frame::before,.frame::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,rgba(241,233,218,.2) 0 12px,transparent 12px 24px);transition:opacity .3s}
.frame::before{top:6px}.frame::after{bottom:6px}
.frame-pic{position:relative;display:grid;place-items:center;aspect-ratio:16/10;margin:10px 0 18px;border-radius:4px;overflow:hidden;filter:invert(1) sepia(.55) saturate(1.5) hue-rotate(-12deg) contrast(.92);transition:filter .7s var(--ease)}
.f-ig .frame-pic{background:linear-gradient(135deg,#feda75,#fa7e1e 28%,#d62976 55%,#962fbf 78%,#4f5bd5)}
.f-fb .frame-pic{background:linear-gradient(135deg,#4c9bff,#1877f2 55%,#0d4fb3)}
.f-sbs .frame-pic{background:linear-gradient(135deg,var(--apricot),var(--pink) 55%,var(--violet))}
.frame-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%)}
.reel{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;color:#fff;background:rgba(255,255,255,.14);border:2px dashed rgba(255,255,255,.7);transition:transform 1s var(--ease)}
.reel .ic{width:38px;height:38px}
.frame-txt{display:block}
.frame-txt b{display:block;font:800 1.7rem/1 var(--disp)}
.frame-txt span{display:block;font:700 .82rem var(--type);color:var(--red);margin-top:6px}
.frame-txt em{display:block;font-style:normal;color:var(--dim);font-size:.94rem;margin-top:8px}
.frame:hover,.frame:focus-visible{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 0 0 1px rgba(241,233,218,.3),0 30px 60px rgba(0,0,0,.5)}
.frame:hover .frame-pic,.frame:focus-visible .frame-pic{filter:none}
.frame:hover .frame-pic::after,.frame:focus-visible .frame-pic::after{animation:sheen .9s var(--ease) .2s}
.frame:hover .reel,.frame:focus-visible .reel{transform:rotate(360deg) scale(1.08)}
.frame:hover::before,.frame:hover::after{animation:sprock .5s linear infinite}
@keyframes sheen{to{transform:translateX(120%)}}
@media (hover:none){.frame-pic{filter:none}}
@media (max-width:900px){.frames{grid-template-columns:1fr}}

/* ---------- clapperboard CTA ---------- */
.cta-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(34px,5vw,80px);align-items:center}
.clapper{position:relative;width:100%;max-width:440px;padding:0;border:0;background:none;cursor:pointer;justify-self:center}
.stick{transform-box:view-box;transform-origin:22px 82px;transform:rotate(-17deg);transition:transform .55s var(--spring)}
.clapper:hover .stick{transform:rotate(-24deg)}
.clapper.clap .stick{transform:rotate(0deg);transition:transform .13s cubic-bezier(.7,0,.9,.5)}
.sl-t{font:700 13px var(--type);fill:rgba(241,233,218,.6)}
.sl-v{font:700 17px var(--type);fill:var(--cream)}
.sl-s{font-size:13.5px}
.action{position:absolute;top:2%;right:0;font:900 2.6rem/1 var(--disp);color:var(--red);text-transform:uppercase;opacity:0;pointer-events:none}
.clapper.clap .action{animation:action .95s var(--ease)}
@keyframes action{0%{opacity:0;transform:scale(.5) rotate(-10deg)}20%{opacity:1;transform:scale(1.12) rotate(-6deg)}70%{opacity:1;transform:scale(1) rotate(-6deg)}100%{opacity:0;transform:translateY(-14px) rotate(-6deg)}}
@media (max-width:900px){.cta-in{grid-template-columns:1fr}.clapper{max-width:340px}}

/* ============================ INNER PAGES ============================ */
.phero{padding:clamp(54px,7vw,96px) 0 40px}
.phero-h{font:900 clamp(3.4rem,9vw,8rem)/.86 var(--disp);text-transform:uppercase}
.scrub{position:relative;height:2px;margin-top:40px;background:var(--line)}
.scrub::before{content:"";position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(0);animation:fill 1.6s var(--ease) .25s forwards}
.scrub i{position:absolute;top:-7px;left:0;width:2px;height:16px;background:var(--red);animation:ph 1.6s var(--ease) .25s forwards}
@keyframes fill{to{transform:scaleX(1)}}
@keyframes ph{to{left:100%}}

.svcs{border-bottom:1px solid var(--line)}
.svc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(20px,3vw,40px);padding:36px 0;border-top:1px solid var(--line);scroll-margin-top:90px}
.svc-clip{align-self:start;border-left:4px solid var(--c);padding:4px 0 4px 18px;border-radius:2px;transition:background .3s}
.svc:target .svc-clip{background:color-mix(in srgb,var(--c) 16%,transparent)}
.svc-n{display:block;font:800 clamp(1.7rem,2.8vw,2.4rem)/1 var(--disp)}
.svc-line{color:var(--cream);font-weight:600;font-size:1.08rem;margin-bottom:10px}
.svc-b p:not(.svc-line){color:var(--dim)}
.svc-gh{font:700 .8rem var(--type);color:var(--c);margin-bottom:10px}
.svc-g li{position:relative;padding-left:18px;color:var(--dim);margin-bottom:7px}
.svc-g li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:6px;border-radius:1.5px;background:var(--c)}
@media (max-width:900px){.svc{grid-template-columns:1fr;gap:14px}}

.bin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.bin-i{margin:0}
.bin-mon{aspect-ratio:16/9;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px var(--line);transition:transform .4s var(--spring)}
.bin-i:hover .bin-mon{transform:scale(1.03)}
.bin-i figcaption{display:flex;align-items:center;gap:9px;margin-top:12px;font-weight:650}
.clipdot{width:11px;height:11px;border-radius:2px;background:var(--c)}
@media (max-width:900px){.bin{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bin{grid-template-columns:1fr}}

.prose p{color:var(--dim);font-size:1.08rem;margin-bottom:20px;max-width:62ch}
.prose p:first-child{color:var(--cream);font-size:1.2rem}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,60px);align-items:start}
.brief{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:clamp(22px,3vw,38px)}
.brief-h{font:800 2rem var(--disp);margin-bottom:22px}
.fld{margin:0 0 20px;padding:0;border:0;min-width:0}
.fld label,.fld legend{display:block;padding:0;font-weight:650;font-size:.95rem;margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;padding:13px 14px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--cream);font:400 1rem/1.4 var(--body)}
.fld textarea{resize:vertical;min-height:130px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(239,59,66,.28)}
.fld [aria-invalid="true"]{border-color:#ff8a80}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 13px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--dim);font-weight:600;font-size:.9rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s var(--spring)}
.chip:hover{color:var(--cream);border-color:rgba(241,233,218,.4)}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--bg);transform:translateY(-1px)}
.brief-err{color:#ff9d94;font-weight:600;margin-bottom:12px}
.send{display:flex;flex-wrap:wrap;gap:10px}
.brief-note{margin-top:14px;color:var(--dim);font-size:.9rem}
.brief-note.ok{color:var(--green)}
.contact-side{display:flex;flex-direction:column;gap:34px}
.dl{display:grid;grid-template-columns:22px minmax(0,1fr) 16px;gap:14px;align-items:center;padding:15px 0;border-top:1px solid var(--line);transition:padding .3s var(--ease)}
.dl:last-child{border-bottom:1px solid var(--line)}
.dl span{color:var(--dim);font-size:.92rem}
.dl b{display:block;color:var(--cream);font-weight:650;font-size:1rem}
.dl:hover{padding-left:8px}
.dl:hover .ic-ext{color:var(--red)}
.side-clocks .clocks{margin-top:0}
.hello{font:700 3.4rem/1 "Noto Sans Armenian","Arian AMU","Mshtakan",system-ui,sans-serif;color:var(--red)}
.hello-n{color:var(--dim);margin-top:-22px}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

/* ============================ FOOTER ============================ */
.foot{position:relative;background:var(--deep);padding:70px 0 26px}
.sprockets{position:absolute;top:0;left:0;right:0;height:18px;background:repeating-linear-gradient(90deg,rgba(241,233,218,.12) 0 14px,transparent 14px 28px);background-size:28px 9px;background-repeat:repeat-x;background-position:0 5px}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr) minmax(0,1fr);gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-brand p{color:var(--dim);margin-top:16px;max-width:40ch}
.foot-soc{display:flex;gap:10px;margin-top:20px}
.sbtn{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;border:1px solid var(--line);color:var(--cream);transition:background .25s,transform .35s var(--spring),border-color .25s}
.sbtn:hover{background:var(--red-deep);border-color:var(--red-deep);color:var(--cream);transform:translateY(-3px) rotate(-6deg)}
.foot-nav{display:flex;flex-direction:column;gap:8px}
.foot-nav a{color:var(--dim);font-weight:600}
.foot-nav a:hover{color:var(--cream)}
.foot-cta{text-align:right}
.foot-cta .slug{font-size:1rem;color:var(--cream)}
.foot-mail{display:block;margin-top:14px;color:var(--dim);font-weight:600;font-size:.95rem;overflow-wrap:anywhere}
.foot-mail:hover{color:var(--red)}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;color:var(--faint);font-size:.88rem}
@media (max-width:800px){.foot-in{grid-template-columns:1fr}.foot-cta{text-align:left}}

/* ============================ SAFETY ============================ */
.no-js .leader{display:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .grain,.leader{display:none!important}
  .lbx{display:none}
  .hero-h span{clip-path:none}
  .shot-svg *{animation:none!important}
  .credits-roll,.strip-t{animation:none!important}
}