body{margin:0;background:#050506}
*{box-sizing:border-box}
a{color:#f2f2f0}a:hover{color:#ffffff}
.stage{position:relative;width:100%;height:100vh;overflow:hidden;background-color:#050506;color:#f2f2f0;font-family:"Space Grotesk",system-ui,sans-serif;background-image:conic-gradient(from 270deg at 3px 3px,rgba(255,255,255,.13) 90deg,transparent 0);background-size:24px 24px;background-position:-1px -1px}
/* pixel grid: each line is a row of tiny square dashes, brighter squares at the crossings */
.stage::before,.stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.stage::before{background:linear-gradient(90deg,rgba(255,255,255,.07) 2px,transparent 2px) 0 0/5px 5px;-webkit-mask:linear-gradient(#000 1px,transparent 1px) 0 0/24px 24px;mask:linear-gradient(#000 1px,transparent 1px) 0 0/24px 24px}
.stage::after{background:linear-gradient(rgba(255,255,255,.07) 2px,transparent 2px) 0 0/5px 5px;-webkit-mask:linear-gradient(90deg,#000 1px,transparent 1px) 0 0/24px 24px;mask:linear-gradient(90deg,#000 1px,transparent 1px) 0 0/24px 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic .fill{fill:currentColor;stroke:none}

/* intro */
.intro{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s ease}
.intro.show{opacity:1}
.intro .tag{position:absolute;left:0;right:0;text-align:center;letter-spacing:.6em;padding-left:.6em;font-size:13px;color:#d4d4d4}
.scrollbtn{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);pointer-events:auto;background:none;border:0;color:#e8e8e8;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;font:500 10px/1 "JetBrains Mono",monospace;letter-spacing:.35em;padding:8px 12px 8px 16px;min-height:44px}
.scrollbtn:focus-visible{outline:1px solid #fff;outline-offset:4px;border-radius:8px}
.mouse{width:22px;height:34px;border:1.5px solid currentColor;border-radius:11px;position:relative}
.mouse::after{content:"";position:absolute;left:50%;top:7px;width:2px;height:6px;margin-left:-1px;background:currentColor;border-radius:1px;animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(9px)}}

/* hub */
.hub{position:absolute;inset:0;z-index:3;pointer-events:none}
.hub.show{pointer-events:auto}
.reveal{opacity:0;transform:scale(.965);transition:opacity .6s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.hub.show .reveal{opacity:1;transform:none}
.d1{transition-delay:0s}.d2{transition-delay:.08s}.d3{transition-delay:.16s}.d4{transition-delay:.24s}.d5{transition-delay:.32s}
.hhead{position:absolute;left:8%;top:6.5%;display:flex;flex-direction:column;gap:10px}
.hname{margin:0;font-weight:700;font-size:clamp(20px,2.2vw,32px);letter-spacing:.01em;line-height:1}
.htag{font-size:10px;letter-spacing:.42em;color:#a8a8a8}
.talk{position:absolute;right:4%;top:6%;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04);color:#f2f2f0;cursor:pointer;font:500 11px "JetBrains Mono",monospace;letter-spacing:.25em;transition:border-color .3s,box-shadow .3s}
.talk:hover,.talk:focus-visible{border-color:rgba(255,255,255,.7);box-shadow:0 0 22px rgba(255,255,255,.15);outline:none}
.hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font:500 10px "JetBrains Mono",monospace;letter-spacing:.35em;color:#8f8f8f;white-space:nowrap}

/* pixel tiles: stepped corners + an outline made of square pixel cells */
.tile{--px:rgba(255,255,255,.5);--stairs:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));position:absolute;display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:24px;border:0;border-radius:0;background:none;text-align:left;color:#f2f2f0;cursor:pointer;font:inherit;overflow:hidden;filter:drop-shadow(0 0 8px rgba(255,255,255,.12))}
.tile{transition:opacity .6s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .3s,translate .4s cubic-bezier(.2,.8,.2,1)}
.tile::before,.mplayer::before{content:"";position:absolute;inset:0;pointer-events:none;clip-path:var(--stairs);background:radial-gradient(120% 60% at 0% 0%,rgba(255,255,255,.10),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.015) 55%,rgba(255,255,255,.04)),rgba(8,8,10,.72)}
.tile::after,.mplayer::after{content:"";position:absolute;inset:0;pointer-events:none;clip-path:var(--stairs);transition:opacity .3s;
background:
conic-gradient(from 90deg at 1px 1px,var(--px) 90deg,transparent 0) left 0 top 0/4px 4px repeat-x,
conic-gradient(from 90deg at 1px 1px,var(--px) 90deg,transparent 0) left 0 bottom 0/4px 4px repeat-x,
conic-gradient(from 90deg at 1px 1px,var(--px) 90deg,transparent 0) left 0 top 0/4px 4px repeat-y,
conic-gradient(from 90deg at 1px 1px,var(--px) 90deg,transparent 0) right 0 top 0/4px 4px repeat-y,
conic-gradient(from 90deg at 1px 1px,var(--px) 90deg,transparent 0) left 4px top 4px/4px 4px no-repeat,
conic-gradient(from 90deg at 1px 1px,var(--px) 90deg,transparent 0) right 4px top 4px/4px 4px no-repeat,
conic-gradient(from 90deg at 1px 1px,var(--px) 90deg,transparent 0) left 4px bottom 4px/4px 4px no-repeat,
conic-gradient(from 90deg at 1px 1px,var(--px) 90deg,transparent 0) right 4px bottom 4px/4px 4px no-repeat}
.tile{transition:opacity .6s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .3s,scale .4s cubic-bezier(.2,.8,.2,1);animation:float 9s ease-in-out infinite}
.tile:hover,.tile:focus-visible{--px:rgba(255,255,255,.95);filter:drop-shadow(0 0 14px rgba(255,255,255,.3));scale:1.02;outline:none;animation-play-state:paused}
/* slow idle drift: each tile on its own rhythm so they never move in sync */
@keyframes float{0%{translate:0 0}25%{translate:5px -7px}50%{translate:-3px -11px}75%{translate:-6px -4px}100%{translate:0 0}}
.t-work{animation-duration:11s;animation-delay:-2s}
.t-about{animation-duration:8s;animation-delay:-5s;animation-direction:reverse}
.t-soft{animation-duration:9.5s;animation-delay:-1s}
.t-clients{animation-duration:12s;animation-delay:-7s;animation-direction:reverse}
@media (prefers-reduced-motion:reduce){.tile{animation:none}}
.tile > *{position:relative}
.t-work{left:46%;top:15%;width:36.5%;height:41.5%}
.t-about{left:17%;top:23%;width:16.5%;height:29%}
.t-soft{left:14%;top:58.5%;width:19.5%;height:31%}
.t-clients{left:42%;top:59.5%;width:43%;height:27.5%}
.tlabel{font-weight:700;font-size:clamp(18px,1.7vw,26px);line-height:1.05;letter-spacing:.01em;text-transform:uppercase}
.big{font-weight:700;font-size:clamp(44px,5.4vw,88px);line-height:.85;letter-spacing:-.02em}
.trow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tphoto{flex:1;min-height:0;display:flex;align-items:flex-end;padding:8px;font-size:9px;letter-spacing:.2em;color:#ececec;text-shadow:0 1px 4px #000;image-rendering:pixelated;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
background:
linear-gradient(rgba(5,5,6,.6) 1px,transparent 1px) 0 0/6px 6px,
linear-gradient(90deg,rgba(5,5,6,.6) 1px,transparent 1px) 0 0/6px 6px,
radial-gradient(circle at 50% 40%,#a8a8a8 0 17%,transparent 18%),
radial-gradient(ellipse 42% 34% at 50% 100%,#7c7c7c 0 98%,transparent 100%),
linear-gradient(160deg,#2a2a2e,#141416)}
.arc{position:absolute;right:-40%;top:-10%;width:110%;height:120%;border-radius:50%;border:1px solid rgba(255,255,255,.18);box-shadow:inset 18px 0 40px rgba(255,255,255,.05);pointer-events:none}
.preview{flex:1;min-height:0;border-radius:10px;filter:grayscale(1) contrast(1.15);transition:filter .7s ease}
.t-work:hover .preview,.t-work:focus-visible .preview{filter:none}
.minis{display:flex;flex-wrap:wrap;gap:8px}
.mini{width:38px;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.45);display:grid;place-items:center;font-weight:700;font-size:14px;box-shadow:0 0 12px rgba(255,255,255,.12)}
.minichip{padding:9px 12px;border:1px solid rgba(255,255,255,.5);font:500 11px "JetBrains Mono",monospace;letter-spacing:.06em;white-space:nowrap;box-shadow:0 0 14px rgba(255,255,255,.14);text-shadow:0 0 8px rgba(255,255,255,.5)}
.slots{display:flex;gap:10px}
.slot{flex:1;min-width:0;aspect-ratio:1.15;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);display:grid;place-items:center;color:#7d7d7d;font-size:18px}

/* color art (stands in for your videos) */
.art{position:relative;overflow:hidden;background:#0b0b10;isolation:isolate}
.art::before{content:"";position:absolute;inset:-45%;z-index:-2;background:conic-gradient(from 0deg at 50% 50%,#ff5a3c,#ffb03b,#7a5cff,#2ad4ff,#ff3d9a,#ff5a3c);filter:blur(38px);opacity:.9;animation:spin 14s linear infinite}
.art::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(0,0,0,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.5) 1px,transparent 1px);background-size:6px 6px}
.g2::before{filter:blur(38px) hue-rotate(70deg);animation-duration:18s;animation-direction:reverse}
.g3::before{filter:blur(38px) hue-rotate(150deg);animation-duration:11s}
.g4::before{filter:blur(38px) hue-rotate(220deg);animation-duration:20s;animation-direction:reverse}
.g5::before{filter:blur(38px) hue-rotate(290deg);animation-duration:16s}
.g6::before{filter:blur(38px) hue-rotate(320deg) saturate(.7);animation-duration:13s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}

.wcell:hover,.wcell:focus-visible{border-color:rgba(255,255,255,.75);box-shadow:0 0 30px rgba(255,255,255,.16);scale:1.015;outline:none}
.wcell:hover .wplay{background:#f2f2f0;color:#050506}
.wplay{transition:background .3s,color .3s}

/* mini player window */
.mini-back{position:absolute;inset:0;z-index:6;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0}}
.mplayer{--px:rgba(255,255,255,.7);--stairs:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));position:absolute;z-index:7;left:50%;top:50%;width:min(860px,92vw);max-height:92vh;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:14px;padding:18px;color:#f2f2f0;filter:drop-shadow(0 0 18px rgba(255,255,255,.14));animation:miniIn .45s cubic-bezier(.2,.8,.2,1)}
.mplayer.short{width:min(400px,92vw)}
@keyframes miniIn{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}}
.mplayer > *{position:relative}
.mini-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mini-dots{display:flex;gap:6px}
.mini-dots span{width:8px;height:8px;background:rgba(255,255,255,.5)}
.mini-screen{aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:14px}
.mplayer.short .mini-screen{aspect-ratio:9/16;max-height:62vh}
.mini-label{margin-top:auto;font-size:11px;letter-spacing:.25em;text-shadow:0 1px 8px #000}
.mini-ctrl{margin-top:auto;width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.mini-track{flex:1;height:4px;background:linear-gradient(90deg,rgba(255,255,255,.25) 3px,transparent 3px) 0 0/4px 4px}
.mini-prog{display:block;height:100%;width:0;background:linear-gradient(90deg,#f2f2f0 3px,transparent 3px) 0 0/4px 4px;animation:prog 14s linear infinite}
@keyframes prog{to{width:100%}}
.mini-info{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}

/* section panels */
.panel{position:absolute;inset:0;z-index:5;background:rgba(5,5,6,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow-y:auto;transform-origin:50% 30%;animation:panelIn .6s cubic-bezier(.2,.8,.2,1)}
.pbar{display:block;width:168px;height:4px;background:linear-gradient(90deg,rgba(255,255,255,.18) 3px,transparent 3px) 0 0/4px 4px}
.pfill{display:block;height:100%;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#f2f2f0 3px,transparent 3px) 0 0/4px 4px;filter:drop-shadow(0 0 4px rgba(255,255,255,.6))}
@keyframes panelIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.pin{max-width:1180px;margin:0 auto;padding:40px 32px 24px;min-height:100%;display:flex;flex-direction:column;gap:28px}
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.pkick{font-size:11px;letter-spacing:.35em;color:#a3a3a3;margin-bottom:12px}
.ptitle{margin:0;font-weight:700;font-size:clamp(44px,7vw,104px);line-height:.85;letter-spacing:-.02em;text-transform:uppercase}
.iconbtn{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.04);color:#f2f2f0;display:grid;place-items:center;cursor:pointer;transition:border-color .3s,box-shadow .3s}
.iconbtn:hover,.iconbtn:focus-visible{border-color:#fff;box-shadow:0 0 18px rgba(255,255,255,.18);outline:none}
.pfoot{margin-top:auto;padding:48px 0 8px;display:flex;flex-direction:column;align-items:center;gap:8px;color:#9a9a9a;font:500 10px "JetBrains Mono",monospace;letter-spacing:.32em;text-align:center}
.bob{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}
.pix{animation:pixIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes pixIn{from{opacity:0;transform:scale(.86);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chipsl{font-size:10px;letter-spacing:.3em;color:#9a9a9a;margin-right:6px}
.chip{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#d8d8d8;cursor:pointer;font:500 12px "JetBrains Mono",monospace;letter-spacing:.06em}
.chip:hover{border-color:rgba(255,255,255,.6)}
.chip.on{background:#f2f2f0;color:#050506;border-color:#f2f2f0;box-shadow:0 0 18px rgba(255,255,255,.25)}
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.wcell{width:100%;text-align:left;color:#f2f2f0;font:inherit;cursor:pointer;transition:box-shadow .3s,border-color .3s,scale .3s;aspect-ratio:16/10;border-radius:14px;border:1px solid rgba(255,255,255,.22);display:flex;flex-direction:column;justify-content:space-between;padding:14px;box-shadow:0 0 22px rgba(255,255,255,.05)}
.wtop{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.2em;color:#ffffff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.wplay{align-self:center;margin:auto 0;width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;backdrop-filter:blur(6px)}
.wbot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;font-weight:500;font-size:15px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.wtool{font:500 10px "JetBrains Mono",monospace;letter-spacing:.12em;padding:5px 8px;border-radius:6px;background:rgba(0,0,0,.55);white-space:nowrap}

.agrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
.photo{aspect-ratio:4/5;border-radius:18px;border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;color:#9a9a9a;font-size:11px;letter-spacing:.25em;background-color:#0c0c0e;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:14px 14px;box-shadow:0 0 30px rgba(255,255,255,.06)}
.introvid{aspect-ratio:16/9;border:1px solid rgba(255,255,255,.28);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#f2f2f0;filter:grayscale(.6)}
.lead{margin:0;font-size:clamp(26px,3vw,40px);font-weight:500;line-height:1.15;letter-spacing:-.01em}
.body{margin:0;font-size:17px;line-height:1.6;color:#cfcfcf;max-width:560px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fact{border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
.fk{font-size:10px;letter-spacing:.25em;color:#9a9a9a}
.fv{font-size:16px;font-weight:500}
.live{display:flex;align-items:center;gap:10px;color:#4dff88}
/* pixel dot: a 3x3-pixel "round" made of 4px squares, pulsing like a live light */
.pdot{flex:none;width:12px;height:12px;background:#3dff7f;clip-path:polygon(4px 0,8px 0,8px 4px,12px 4px,12px 8px,8px 8px,8px 12px,4px 12px,4px 8px,0 8px,0 4px,4px 4px);filter:drop-shadow(0 0 4px #3dff7f);animation:livePulse 1.8s ease-in-out infinite}
@keyframes livePulse{50%{opacity:.45}}
.cta{align-self:flex-start;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:12px;border:1px solid #f2f2f0;background:#f2f2f0;color:#050506;font:700 14px "Space Grotesk",sans-serif;letter-spacing:.04em;cursor:pointer;box-shadow:0 0 24px rgba(255,255,255,.2)}
.cta:hover,.cta:focus-visible{box-shadow:0 0 36px rgba(255,255,255,.4);outline:none}

.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.scard{border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:32px;display:flex;align-items:center;gap:18px;background:rgba(255,255,255,.025);transition:border-color .3s,box-shadow .3s}
.scard:hover{border-color:rgba(255,255,255,.6);box-shadow:0 0 30px rgba(255,255,255,.12)}
.smono{flex:none;width:84px;height:84px;border-radius:14px;border:1.5px solid #f2f2f0;display:grid;place-items:center;font-weight:700;font-size:24px;box-shadow:0 0 22px rgba(255,255,255,.28),inset 0 0 14px rgba(255,255,255,.12);text-shadow:0 0 12px rgba(255,255,255,.6)}
/* logo slot: the glow is already on the frame; a logo file dropped in inherits it */
.smono.slot{font:500 10px "JetBrains Mono",monospace;letter-spacing:.2em;color:#9a9a9a;text-shadow:none;border-style:dashed}
.smono.slot img{width:70%;height:70%;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,255,255,.45))}
.smono.ph{border-style:dashed;border-color:rgba(255,255,255,.35);box-shadow:none;color:#8f8f8f;text-shadow:none}
.sname{font-size:18px;font-weight:700}
.snote{font-size:13px;color:#a3a3a3;margin-top:4px}

.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ccell{aspect-ratio:3/2;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.025);display:grid;place-items:center;color:#8f8f8f;font-size:11px;letter-spacing:.2em}

.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:760px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
.field label{font:500 10px "JetBrains Mono",monospace;letter-spacing:.3em;color:#a3a3a3}
.field input,.field textarea,.field select{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#f2f2f0;font:400 16px "Space Grotesk",sans-serif}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:#f2f2f0;box-shadow:0 0 20px rgba(255,255,255,.14)}
.field option{background:#111;color:#f2f2f0}
.thanks{max-width:620px;border:1px solid rgba(255,255,255,.3);border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:12px;box-shadow:0 0 30px rgba(255,255,255,.08)}

@media (max-width:760px){
.hub{overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:28px 16px 80px}
.hhead{position:static;margin-bottom:10px;padding-right:130px}
.talk{top:24px;right:16px;padding:0 12px}
.tile{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:170px;flex:none}
.t-work{min-height:320px}
.hint{position:static;transform:none;align-self:center;margin-top:10px}
.pin{padding:24px 16px 16px}
.wgrid,.sgrid{grid-template-columns:repeat(1,minmax(0,1fr))}
.agrid{grid-template-columns:repeat(1,minmax(0,1fr));gap:24px}
.facts,.cgrid,.form{grid-template-columns:repeat(2,minmax(0,1fr))}
.photo{max-width:320px}
}
@media (prefers-reduced-motion:reduce){
.art::before,.mouse::after,.bob{animation:none}
.panel,.pix{animation:none}
}

/* ===== real-content additions (site build) ===== */
[hidden]{display:none!important}
html,body{height:100%}
/* hub previews filled with your content */
.preview{position:relative;overflow:hidden}
.preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tphoto{position:relative;overflow:hidden}
.tphoto canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.tphoto.has-img{color:transparent;text-shadow:none}
.slot img{max-width:72%;max-height:62%;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}
/* work cards with real thumbnails */
.wcell{position:relative;overflow:hidden}
.wcell > *{position:relative;z-index:1}
.wcell > .wthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.wcell.has-thumb{background:#000}
.wcell.has-thumb::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0) 55%)}
.wcell.has-thumb::before{display:none}
.wbot{width:100%}
.wbot > span:first-child{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* about media */
.photo{position:relative;overflow:hidden}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.introvid{position:relative;overflow:hidden;cursor:pointer;font:inherit}
.introvid.real{filter:none;background:#000;padding:0}
.introvid > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.introvid > *:not(img){position:relative}
.introvid iframe,.introvid video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
/* software + clients logos */
.smono.slot img{width:70%;height:70%;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,255,255,.45))}
.smono.has-logo{border-style:solid;color:transparent}
.ccell img{max-width:70%;max-height:55%;object-fit:contain;filter:brightness(0) invert(1);opacity:.9;transition:opacity .3s}
a.ccell{text-decoration:none}
a.ccell:hover img{opacity:1}
/* real player */
.mini-screen.real{padding:0;background:#000}
.mini-screen.real iframe,.mini-screen.real video{width:100%;height:100%;border:0;display:block;background:#000}
.formmsg{grid-column:1 / -1;font:500 12px "JetBrains Mono",monospace;letter-spacing:.06em;color:#ff8a8a}
.empty{font:500 13px "JetBrains Mono",monospace;letter-spacing:.08em;color:#9a9a9a}