:root{
  --red:#ff3a44; --red-soft:#ff5a62; --blue:#3f9bff; --blue-soft:#62b8ff; --green:#7dff8a;
  --bg:#050505; --text:#ddd; --muted:#777;
  --figure-h:min(94svh,119vw);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:'Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit}
.vt{font-family:'VT323',ui-monospace,monospace;letter-spacing:.06em}
.red{color:var(--red-soft);text-shadow:0 0 12px rgba(255,30,40,.75)}
.blue{color:var(--blue-soft);text-shadow:0 0 12px rgba(30,140,255,.75)}
.green{color:var(--green);text-shadow:0 0 10px rgba(60,255,80,.6)}
.glitch{text-shadow:3px 0 rgba(255,0,40,.6),-3px 0 rgba(0,170,255,.6)}
[hidden]{display:none!important}

/* ---------- CRT power-on ---------- */
#screen{min-height:100svh}
.power-on{animation:power .9s ease-out both}
@keyframes power{
  0%{transform:scale(.6,.003);filter:brightness(5)}
  35%{transform:scale(1,.003);filter:brightness(4)}
  70%{transform:scale(1,1);filter:brightness(1.4)}
  100%{transform:none;filter:none}
}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px 28px;pointer-events:none}
.top a{pointer-events:auto;text-decoration:none}
.brand{font-size:24px;letter-spacing:.25em;color:#bbb;text-transform:uppercase}
.channels a{margin-left:24px;font-size:24px;color:var(--muted);transition:color .2s}
.channels a:hover{color:#fff}
.channels a.on[data-ch=short]{color:var(--red-soft)}
.channels a.on[data-ch=long]{color:var(--blue-soft)}
.channels a.on[data-ch=about]{color:var(--green)}
body[data-view=home] .brand{visibility:hidden}

/* ---------- views ---------- */
.view{min-height:100svh;padding:86px 28px 48px}
.ch-title{text-align:center;font-size:clamp(28px,3.2vw,46px);margin:0 0 22px}

/* ---------- HOME ---------- */
#view-home{position:relative;height:100svh;padding:0;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#262626,#060606 66%)}
.hero-text{position:absolute;left:4vw;bottom:7svh;z-index:4;max-width:calc((100vw - var(--figure-h) * .838) / 2 - 6vw)}
.hero-text h1{margin:6px 0 4px;font-size:clamp(26px,3.4vw,54px);line-height:1;letter-spacing:.08em;text-transform:uppercase}
.eyebrow{font-size:22px;color:var(--green);letter-spacing:.2em}
.sub{font-size:26px;color:#aaa;letter-spacing:.3em;text-transform:uppercase}
.figure{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:var(--figure-h);aspect-ratio:788/940}
.figure img{display:block;width:100%;height:100%;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 0 2px rgba(255,255,255,.35)) drop-shadow(0 0 30px #000)}
.device{position:absolute;top:60%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:3;display:block;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:none}
.device.red{--c:rgba(255,30,40,.6);--t:var(--red-soft)}
.device.blue{--c:rgba(30,140,255,.6);--t:var(--blue-soft)}
.device::before{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,var(--c),transparent 62%);opacity:.55;transition:opacity .3s}
.device::after{content:"";position:absolute;left:50%;top:88%;width:95%;height:45%;transform:translateX(-50%);background:radial-gradient(ellipse,var(--c),transparent 70%);mix-blend-mode:screen;opacity:.8;pointer-events:none}
.device:hover::before,.device:focus-visible::before{opacity:.95}
.device canvas{position:absolute;left:-40%;top:-40%;display:block;width:180%;height:180%;pointer-events:none}
.dlabel{position:absolute;left:50%;top:-4%;transform:translateX(-50%);font-size:clamp(16px,1.6vw,26px);letter-spacing:.22em;white-space:nowrap;color:var(--t);text-shadow:0 0 10px var(--c);z-index:2}
/* CSS stand-ins for when WebGL isn't available */
.fallback{display:none;position:absolute;left:50%;top:50%;animation:fb-float 3.2s ease-in-out infinite}
.fallback::before{content:"";position:absolute;inset:0;border-radius:inherit;animation:fb-spin 5s linear infinite}
.fallback::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;animation:fb-spin 5s linear infinite}
.fallback.phone{width:26%;height:52%;margin:-26% 0 0 -13%;border-radius:12%/6%}
.fallback.phone::before{background:linear-gradient(165deg,#3a0006,#0e0001 70%);box-shadow:0 0 0 6px #e0101c,0 0 40px var(--red)}
.fallback.laptop{width:62%;height:36%;margin:-22% 0 0 -31%;border-radius:6px}
.fallback.laptop::before{background:linear-gradient(165deg,#062457,#010814 70%);box-shadow:0 0 0 6px #1e78ff,0 10px 0 6px #0d55c8,0 0 40px var(--blue)}
@keyframes fb-float{0%,100%{translate:0 -4%}50%{translate:0 4%}}
@keyframes fb-spin{from{transform:perspective(400px) rotateY(0)}to{transform:perspective(400px) rotateY(360deg)}}
.fallback.phone::after,.fallback.laptop::after{transform-origin:center}
.nogl canvas{display:none}.nogl .fallback{display:block}

/* ---------- shared poster / player ---------- */
.poster{position:relative;display:block;width:100%;height:100%;border:0;padding:0;cursor:pointer}
.poster .play{position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-left:32px solid #fff;border-top:19px solid transparent;border-bottom:19px solid transparent;filter:drop-shadow(0 0 10px var(--accent));transition:transform .2s}
.poster:hover .play{transform:translate(-40%,-50%) scale(1.15)}
.poster:disabled{cursor:default}
.poster:disabled .play{opacity:.3;transform:translate(-40%,-50%)}
.soon{position:absolute;left:0;right:0;top:58%;text-align:center;font-size:20px;color:#aaa;letter-spacing:.18em}
.media iframe,.media video,.tv-screen iframe,.tv-screen video{display:block;width:100%;height:100%;border:0;background:#000}

/* ---------- CH 01 SHORT FORM ---------- */
.short-layout{display:grid;grid-template-columns:1fr auto 1fr;gap:5vw;align-items:center;max-width:1300px;margin:0 auto}
.short-list{justify-self:end;list-style:none;margin:0;padding:0 0 0 16px;border-left:3px solid #222}
.short-list button{display:block;background:none;border:0;padding:8px 0;color:var(--muted);font-size:26px;text-align:left;cursor:pointer;position:relative}
.short-list button:hover{color:#ccc}
.short-list button.on{color:var(--red-soft)}
.short-list button.on::before{content:"";position:absolute;left:-19px;top:6px;bottom:6px;width:3px;background:var(--red);box-shadow:0 0 10px var(--red)}
.phone-wrap{position:relative}
.phone-frame{box-sizing:content-box;height:calc(min(76svh,780px) - 20px);aspect-ratio:9/16;border-radius:36px;padding:10px;background:linear-gradient(120deg,#ff7a7a,#c00010 40%,#6a0006);box-shadow:0 0 70px rgba(255,30,40,.55)}
.feed{height:100%;border-radius:28px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;background:#000}
.feed::-webkit-scrollbar{display:none}
.slide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.media{position:absolute;inset:0}
.feed .media{overflow:hidden}
.feed .media iframe,.feed .media video{height:calc(100% + 2px);margin-top:-1px}
.caption{position:absolute;left:18px;right:18px;bottom:20px;display:flex;flex-direction:column;pointer-events:none}
.caption b{font-weight:normal;font-size:30px;color:#fff}
.caption span{font-size:20px;color:#bbb}
.slide[data-playing] .caption{display:none}
.ghost{position:absolute;left:10%;right:10%;height:40px;background:#1a1a1a;opacity:.5}
.ghost.up{top:-52px;border-radius:0 0 22px 22px}
.ghost.down{bottom:-52px;border-radius:22px 22px 0 0}
.short-side{justify-self:start;font-size:24px;line-height:1.6;color:#ccc;max-width:360px}
.short-info .t{font-size:40px;line-height:1.1;margin-bottom:10px}
.short-info span{color:var(--muted);margin-right:8px}
.counter{margin-top:14px;color:#666}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.tags b{font-weight:400;font-size:.72em;letter-spacing:.06em;text-transform:uppercase;padding:1px 8px;border:1px solid currentColor;border-radius:3px;color:#9fe39f;line-height:1.3}
.long-meta .tags{flex-basis:100%;margin:0}
.pl-t .tags{margin:0 0 4px;font-size:.85em}
.short-nav button{width:54px;height:54px;margin:18px 10px 0 0;background:none;border:1px solid #444;color:#ccc;font-family:'VT323',monospace;font-size:28px;cursor:pointer}
.short-nav button:hover{border-color:var(--red);color:var(--red-soft)}

/* ---------- CH 02 LONG FORM ---------- */
.long-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;max-width:1400px;margin:0 auto;align-items:start}
.tv-bezel{border-radius:36px;padding:clamp(12px,2vw,26px);background:linear-gradient(#262626,#0c0c0c);box-shadow:inset 0 0 0 3px #3a3a3a,0 0 50px rgba(30,140,255,.22)}
.tv-screen{position:relative;aspect-ratio:16/9;border-radius:46px/34px;overflow:hidden;background:#000}
.tv-screen::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(0,0,0,.85);border-radius:inherit}
.tv-title{position:absolute;left:0;right:0;top:0;z-index:2;padding:18px 30px 34px;font-size:26px;color:#fff;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.55) 60%,transparent);text-shadow:0 0 6px #000}
.long-meta{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:18px;font-size:24px;color:#ccc}
.long-meta i{font-style:normal;color:var(--muted)}
.playlist{list-style:none;margin:0;padding:0}
.playlist button{display:flex;gap:14px;align-items:center;width:100%;margin-bottom:12px;padding:8px;border:2px solid transparent;border-radius:10px;background:none;color:#ddd;font-family:'VT323',monospace;font-size:24px;text-align:left;cursor:pointer}
.playlist button:hover{background:rgba(255,255,255,.04)}
.playlist button.on{border-color:var(--blue);background:rgba(30,140,255,.12);box-shadow:0 0 18px rgba(30,140,255,.35)}
.thumb{flex:none;width:150px;aspect-ratio:16/9;border-radius:6px}
.pl-t em{display:block;font-style:normal;color:#888}

/* ---------- CH 03 ABOUT ---------- */
.about-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4vw;max-width:1300px;margin:0 auto;align-items:center}
.about-photo img{display:block;width:100%;max-height:84svh;object-fit:contain;object-position:bottom;filter:drop-shadow(0 0 2px rgba(255,255,255,.3)) drop-shadow(0 0 30px #000)}
.about-text h2{margin:8px 0 20px;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:.04em;text-transform:uppercase}
.bio{list-style:none;margin:0;padding:0;font-size:28px;line-height:1.5;color:#ccc}
.bio li::before{content:"> ";color:var(--muted)}
.label{margin:28px 0 12px;font-size:22px;font-weight:normal;color:var(--muted);letter-spacing:.25em}
.clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:18px 12px}
.client{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.client img,.client .noimg{width:72px;height:72px;border-radius:50%;object-fit:cover;border:1px solid #444;filter:grayscale(1) contrast(1.1);opacity:.85;transition:filter .3s,opacity .3s,box-shadow .3s}
.client .noimg{display:flex;align-items:center;justify-content:center;font-size:28px;color:#888;background:#111}
.client:hover img{filter:none;opacity:1;box-shadow:0 0 18px rgba(255,255,255,.25)}
.cname{font-size:18px;line-height:1.1;color:#999}
.client.more .noimg{border:1px dashed #777;background:transparent;font-size:34px;color:#aaa;opacity:1}
.client.more .cname{color:#aaa}
@media (max-width:700px), (max-aspect-ratio:4/5){ .client.more{display:none} } /* phone: grid is already full */
.refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.ref{margin:0;padding:16px 18px;border-left:3px solid var(--red);background:rgba(255,255,255,.03)}
.ref blockquote{margin:0 0 8px;font-size:17px;line-height:1.45;color:#ddd}
.ref figcaption{font-size:20px;color:#888}
.cta-row{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:32px}
.cta{background:transparent;cursor:pointer;padding:12px 30px;border:2px solid var(--red);color:var(--red-soft);font-size:34px;text-decoration:none;box-shadow:0 0 20px rgba(255,30,40,.45);transition:background .2s}
.cta:hover{background:rgba(255,30,40,.15)}
.contact{font-size:24px;line-height:1.4;color:#aaa}
.contact a{text-decoration:none}
.contact a:hover{color:#fff}

/* ---------- CRT overlay ---------- */
.crt{position:fixed;inset:0;z-index:50;pointer-events:none}
#grain{position:absolute;inset:0;width:100%;height:100%;opacity:.11;mix-blend-mode:screen}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}
.roll{position:absolute;left:0;right:0;height:18vh;background:linear-gradient(transparent,rgba(255,255,255,.045),transparent);animation:roll 7s linear infinite}
@keyframes roll{from{top:-20vh}to{top:110vh}}
.vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.75) 100%);box-shadow:inset 0 0 120px rgba(0,0,0,.8)}
.crt::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:flicker 5s steps(1) infinite}
@keyframes flicker{0%,100%{opacity:0}47%{opacity:.018}48%{opacity:0}73%{opacity:.012}74%{opacity:0}}

/* ---------- channel static ---------- */
.static{position:fixed;inset:0;z-index:60;background:#111;opacity:0;visibility:hidden;transition:opacity .08s}
.static.on{opacity:1;visibility:visible}
#staticNoise{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.bars{position:absolute;left:-5%;right:-5%;top:36%;height:22%;display:flex;opacity:.45;transform:skewX(-8deg);animation:jitter .12s steps(2) infinite}
.bars i{flex:1}
.bars i:nth-child(1){background:#ccc}.bars i:nth-child(2){background:#cc0}.bars i:nth-child(3){background:#0cc}.bars i:nth-child(4){background:#0c0}
.bars i:nth-child(5){background:#c0c}.bars i:nth-child(6){background:#c00}.bars i:nth-child(7){background:#00c}
@keyframes jitter{0%{transform:skewX(-8deg) translateX(0)}50%{transform:skewX(-8deg) translateX(30px)}}
.osd{position:absolute;right:6vw;top:10svh;text-align:right;color:var(--green);text-shadow:0 0 14px #3f3}
#osdCh{font-size:clamp(48px,6vw,88px);line-height:1}
#osdName{font-size:clamp(22px,2.4vw,36px)}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .short-layout{grid-template-columns:1fr;justify-items:center;gap:22px}
  .short-list{display:none}
  .phone-frame{height:calc(min(68svh,150vw) - 20px)}
  .ghost{display:none}
  .short-side{justify-self:center;text-align:center}
  .long-layout{grid-template-columns:1fr}
  .about-layout{grid-template-columns:1fr}
  .about-photo img{max-height:55svh;margin:0 auto}
}
@media (max-width:700px), (max-aspect-ratio:4/5){
  .hero-text{left:0;right:0;top:78px;bottom:auto;max-width:none;text-align:center;padding:0 16px}
  .channels span{display:none}
  .channels a{margin-left:16px}
  .top{padding:14px 16px}
  .brand{font-size:18px;letter-spacing:.15em}
  .view{padding:72px 16px 40px}
  .tv-title{padding:10px 18px 24px;font-size:20px}
  .thumb{width:120px}
  .device{width:30%}
  .bio{font-size:22px}
  .short-info .t{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  .power-on,.roll,.crt::after,.bars{animation:none}
}

/* ---------- BOOK AN EDIT questionnaire ---------- */
.book{width:min(640px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:0;border:2px solid var(--red);border-radius:10px;background:#070707;color:#ddd;box-shadow:0 0 60px rgba(255,30,40,.35)}
.book::backdrop{background:rgba(0,0,0,.75);backdrop-filter:blur(2px)}
.book form{padding:22px 26px 26px}
.book-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.book-head h2{margin:0;font-size:32px;font-weight:normal}
.book-x{background:none;border:0;color:#aaa;font-size:28px;cursor:pointer;line-height:1}
.book-x:hover{color:#fff}
.book .f{display:flex;flex-direction:column;gap:5px;margin:0 0 14px;padding:0;border:0;min-width:0}
.book .f > span,.book legend{font-size:19px;color:var(--muted);letter-spacing:.12em;padding:0}
.book input:not([type=checkbox]),.book textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #3a3a3a;border-radius:4px;background:#000;color:#fff;font:16px/1.4 "Space Grotesk",system-ui,sans-serif}
.book input:focus,.book textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.book textarea{resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:5px 12px;border:1px solid #444;border-radius:4px;font-size:19px;color:#aaa;transition:all .15s}
.chips input:checked + span{border-color:var(--red);color:#fff;background:rgba(255,30,40,.18)}
.chips input:focus-visible + span{outline:2px solid #fff;outline-offset:2px}
.book .cta{margin-top:6px;font-size:28px}
.book .cta:disabled{opacity:.6;cursor:wait}
.book-err{color:#ff6b6b;font-size:19px;margin:0 0 8px}
.book-done{padding:30px 0 10px;text-align:center}
.book-done .big{font-size:44px;margin-bottom:8px}
.book-done p{font-size:22px;color:#aaa;margin:0}
.hp{position:absolute;left:-9999px}
@media (max-width:560px){.f2{grid-template-columns:1fr}.book form{padding:18px 16px 20px}.book-head h2{font-size:26px}}