:root{--font-display: "Cabinet Grotesk", system-ui, sans-serif;--font-sans: "Switzer", system-ui, -apple-system, sans-serif;--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;--ink: #15110e;--ink-2: #1d1813;--text: #f3ece3;--text-soft: #c8bcb0;--muted: #948578;--line: rgba(243, 236, 227, .12);--line-strong: rgba(243, 236, 227, .22);--surface: rgba(243, 236, 227, .05);--surface-2: rgba(243, 236, 227, .09);--glass: rgba(21, 17, 14, .66);--shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);--accent: #e0793f;--accent-2: #d4714e;--accent-deep: #b05a38;--accent-contrast: #1a0f07;--glow: rgba(224, 121, 63, .22);--ease: cubic-bezier(.22, 1, .36, 1);--ease-out: cubic-bezier(.16, 1, .3, 1)}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);background:var(--ink);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}::selection{background:var(--accent);color:var(--accent-contrast)}button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}.stage{min-height:100svh;display:flex;justify-content:center;position:relative;isolation:isolate;background:radial-gradient(130% 70% at 50% -8%,var(--glow),transparent 55%),var(--ink)}.stage:after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.42;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.card{width:100%;max-width:470px;padding:clamp(16px,4vw,24px) clamp(20px,5.5vw,30px) 140px;position:relative;z-index:1}.topbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:clamp(16px,4.5vw,24px)}.brandmark{display:flex;align-items:center;gap:9px;color:var(--text)}.brandmark svg{width:24px;height:24px;color:var(--accent)}.brandmark span{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.avail{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);padding:6px 11px 6px 9px;border:1px solid var(--line);border-radius:100px;background:var(--surface)}.avail .dot{width:7px;height:7px;border-radius:50%;background:#5fc27e;box-shadow:0 0 #5fc27e80;animation:pulse 2.4s var(--ease) infinite}@keyframes pulse{0%{box-shadow:0 0 #5fc27e73}70%{box-shadow:0 0 0 6px transparent}to{box-shadow:0 0 0 0 transparent}}.hero{position:relative}.portrait{position:relative;width:100%;aspect-ratio:1 / 1;border-radius:18px;overflow:hidden;background:var(--ink-2);box-shadow:var(--shadow)}.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}.portrait:after{content:"";position:absolute;inset:0;border-radius:18px;border:1px solid var(--line-strong);background:linear-gradient(to bottom,transparent 55%,rgba(21,17,14,.55) 88%,var(--ink) 100%);pointer-events:none}.portrait.reveal img{animation:focus-snap 1s var(--ease-out) both}@keyframes focus-snap{0%{filter:blur(14px) brightness(.7) saturate(.7);transform:scale(1.07)}60%{filter:blur(2px) brightness(.96) saturate(.96)}to{filter:blur(0) brightness(1) saturate(1);transform:scale(1)}}.loc-chip{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:6px 11px 6px 9px;border-radius:100px;background:#15110e6b;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16)}.loc-chip svg{width:13px;height:13px;color:var(--accent)}.name{position:relative;z-index:4;margin-top:-20%;padding-left:2px;font-family:var(--font-display);font-weight:800;line-height:.85;letter-spacing:-.035em;font-size:clamp(3.6rem,20vw,5.8rem);color:#fdf8f2;text-shadow:0 4px 40px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.4);pointer-events:none}.name span{display:block;overflow:hidden}.name span>i{display:block;font-style:normal;transform:translateY(110%);animation:rise .9s var(--ease-out) forwards}.name span:nth-child(2)>i{animation-delay:.08s}.name .accentdot{color:var(--accent)}@keyframes rise{to{transform:translateY(0)}}.role{margin-top:14px;font-size:15px;line-height:1.5;color:var(--text-soft);max-width:36ch;opacity:0;animation:fade-up .7s var(--ease-out) .4s forwards}.role b{color:var(--text);font-weight:600}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.focus{margin-top:12px;padding-left:13px;border-left:2px solid var(--accent);font-size:13.5px;line-height:1.45;color:var(--text);opacity:0;animation:fade-up .7s var(--ease-out) .5s forwards}.showreel-btn{display:flex;align-items:center;gap:10px;width:100%;margin-top:20px;padding:15px 18px;border-radius:14px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-weight:600;font-size:15px;letter-spacing:-.01em;transition:transform .2s var(--ease),border-color .3s,background .3s;opacity:0;animation:fade-up .7s var(--ease-out) .6s forwards}.showreel-btn:active{transform:scale(.98)}.showreel-btn svg{width:17px;height:17px;color:var(--accent)}.showreel-btn .sr-count{margin-left:auto;font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--muted)}.switch{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:14px;padding:4px;border:1px solid var(--line);border-radius:100px;background:var(--surface)}.switch-thumb{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);border-radius:100px;background:var(--accent);transition:transform .5s var(--ease);z-index:0}[data-mode=webdesign] .switch-thumb{transform:translate(100%)}.switch button{position:relative;z-index:1;padding:11px 8px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);transition:color .4s var(--ease);display:flex;align-items:center;justify-content:center;gap:7px}.switch button.active{color:var(--accent-contrast)}.switch button svg{width:14px;height:14px}.panel{margin-top:24px}.panel-line{font-size:16px;line-height:1.5;color:var(--text-soft);margin-bottom:22px}.panel-line b{color:var(--text);font-weight:600}.gallery{margin-bottom:22px}.gallery-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px}.gallery-head h3{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.025em;color:var(--text)}.gallery-head a,.gallery-head .muted-link{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.gallery-head .muted-link{color:var(--muted)}.gallery-head a svg{width:11px;height:11px}.strip{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*clamp(20px,5.5vw,30px));padding:4px clamp(20px,5.5vw,30px) 6px;scrollbar-width:none}.strip::-webkit-scrollbar{display:none}.shot{position:relative;flex:0 0 auto;width:150px;aspect-ratio:4 / 5;border-radius:13px;overflow:hidden;scroll-snap-align:start;border:1px solid var(--line);background:var(--ink-2);box-shadow:0 10px 24px -18px #000000b3;padding:0}.shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}.shot:active img{transform:scale(1.05)}.sites{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}.site{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--ink-2);transition:transform .2s var(--ease),border-color .3s}.site:active{transform:scale(.98)}.site-shot{position:relative;aspect-ratio:16 / 10;overflow:hidden;background:var(--ink)}.site-shot img{width:100%;height:100%;object-fit:cover;object-position:top}.site-go{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#0000006b;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18)}.site-go svg{width:13px;height:13px}.site-meta{padding:11px 13px 13px}.site-meta b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--text)}.site-meta span{display:block;margin-top:2px;font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}.cat-row{margin-bottom:22px}.cat-row-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}.cat-row-head h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.025em;color:var(--text)}.cat-row-head a{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.cat-row-head a svg{width:11px;height:11px}.hstrip{display:flex;gap:8px;overflow-x:auto;margin:0 calc(-1*clamp(20px,5.5vw,30px));padding:2px clamp(20px,5.5vw,30px) 6px;scrollbar-width:none}.hstrip::-webkit-scrollbar{display:none}.hshot{flex:0 0 auto;height:200px;width:auto;padding:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--ink-2);box-shadow:0 10px 24px -18px #000000b3}.hshot img{height:100%;width:auto;display:block;transition:transform .7s var(--ease)}.hshot:active img{transform:scale(1.05)}.lightbox{position:fixed;inset:0;z-index:80;background:#08050399;backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);display:grid;place-items:center;animation:overlay-in .22s var(--ease-out)}.lb-img{max-width:94vw;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 24px 70px -20px #000000d9}.lb-bar{position:absolute;left:0;right:0;bottom:max(24px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#ffffffd9}.lb-bar .lb-count{color:#ffffff80}.lb-close{position:absolute;top:max(20px,env(safe-area-inset-top));right:16px;z-index:4;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#ffffff24;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.24)}.lb-close svg{width:18px;height:18px}.lb-nav{position:absolute;bottom:0;width:30%;z-index:2;top:76px;display:grid;place-items:center;color:#ffffff8c}.lb-nav.prev{left:0;justify-items:start;padding-left:10px}.lb-nav.next{right:0;justify-items:end;padding-right:10px}.lb-nav svg{width:28px;height:28px}.ig{display:flex;align-items:center;gap:10px;margin-top:12px;padding:13px 18px;border-radius:14px;border:1px solid var(--line-strong);color:var(--text);font-weight:600;font-size:14px;transition:transform .2s var(--ease),border-color .3s}.ig:active{transform:scale(.98)}.ig svg{width:19px;height:19px;color:var(--accent)}.ig .ig-handle{margin-left:auto;font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--muted)}.specs{border-top:1px solid var(--line)}.spec{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line)}.spec dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}.spec dd{font-size:14.5px;font-weight:500;color:var(--text);text-align:right}.spec dd.wrap{line-height:1.5}.cta{display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding:17px 20px;border-radius:14px;background:var(--accent);color:var(--accent-contrast);font-weight:600;font-size:15px;letter-spacing:-.01em;transition:transform .25s var(--ease);box-shadow:0 16px 36px -22px var(--accent)}.cta:active{transform:scale(.98)}.cta .cta-sub{display:block;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;opacity:.74;margin-top:2px}.cta svg{width:22px;height:22px;flex:0 0 auto}.clients{margin-top:20px;font-size:12.5px;line-height:1.7;color:var(--muted)}.clients b{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);display:block;margin-bottom:5px;font-weight:500}.panel-fade{animation:panel-in .45s var(--ease-out) both}@keyframes panel-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.foot{margin-top:34px;display:flex;justify-content:flex-end;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.foot a{color:var(--text-soft);display:inline-flex;align-items:center;gap:5px}.foot a svg{width:11px;height:11px;color:var(--accent)}.dock{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translate(-50%);z-index:40;display:flex;align-items:center;gap:8px;padding:8px;border-radius:100px;background:var(--glass);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--line-strong);box-shadow:0 20px 50px -22px #000c;animation:dock-in .8s var(--ease-out) .55s both}@keyframes dock-in{0%{opacity:0;transform:translate(-50%,30px)}to{opacity:1;transform:translate(-50%)}}.act{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--text);transition:transform .3s var(--ease)}.act svg{width:20px;height:20px}.act:active{transform:scale(.86)}.act.primary{background:var(--accent);color:var(--accent-contrast);width:56px;height:56px}.act .tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%) translateY(4px);font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--text);background:var(--glass);border:1px solid var(--line);padding:4px 8px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.act:hover .tip{opacity:1;transform:translate(-50%) translateY(0)}.reel{position:fixed;inset:0;z-index:70;background:#0b0907;animation:overlay-in .3s var(--ease-out);overflow:hidden}.reel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease-out)}.reel-img.on{opacity:1;animation:kenburns 4s linear forwards}@keyframes kenburns{0%{transform:scale(1.02)}to{transform:scale(1.09)}}.reel:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,transparent 22% 70%,rgba(0,0,0,.55) 100%)}.reel-bars{position:absolute;top:max(12px,env(safe-area-inset-top));left:14px;right:14px;z-index:3;display:flex;gap:5px}.reel-bars span{flex:1;height:3px;border-radius:3px;background:#ffffff47;overflow:hidden}.reel-bars span.done{background:#ffffffb3}.reel-bars span.on{background:#ffffff4d;position:relative}.reel-bars span.on:after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:fill 3.2s linear forwards}@keyframes fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.reel-foot{position:absolute;left:20px;right:20px;bottom:max(26px,env(safe-area-inset-bottom));z-index:4;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}.reel-label{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.6)}.reel-link{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:9px 13px;border-radius:100px;background:#ffffff24;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22)}.reel-link svg{width:13px;height:13px}.reel-close{position:absolute;top:max(28px,env(safe-area-inset-top));right:16px;z-index:4;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#0006;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18)}.reel-close svg{width:18px;height:18px}.reel-nav{position:absolute;top:0;bottom:0;width:28%;z-index:3;display:grid;place-items:center;color:#fff0}.reel-nav.prev{left:0;justify-items:start;padding-left:12px}.reel-nav.next{right:0;justify-items:end;padding-right:12px}.reel-nav svg{width:30px;height:30px}.overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:#0b0705bd;backdrop-filter:blur(12px);animation:overlay-in .3s var(--ease-out)}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.sheet{width:100%;max-width:360px;background:var(--ink-2);border:1px solid var(--line-strong);border-radius:24px;padding:26px;text-align:center;position:relative;box-shadow:var(--shadow);animation:sheet-in .45s var(--ease) both}@keyframes sheet-in{0%{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.sheet h3{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em;margin-bottom:6px}.sheet p{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:20px}.sheet .close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--text-soft)}.sheet .close svg{width:16px;height:16px}.qr-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:0 0 18px;padding:4px;border:1px solid var(--line);border-radius:100px;background:var(--surface)}.qr-switch-thumb{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);border-radius:100px;background:var(--accent);transition:transform .45s var(--ease);z-index:0}.qr-switch-thumb[data-on=webdesign]{transform:translate(100%)}.qr-switch button{position:relative;z-index:1;padding:9px 6px;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);transition:color .35s var(--ease);display:flex;align-items:center;justify-content:center;gap:6px}.qr-switch button.active{color:var(--accent-contrast)}.qr-switch button svg{width:13px;height:13px}.qr-frame{position:relative;width:240px;height:240px;margin:0 auto 22px;border-radius:18px;overflow:hidden;background:#fff;padding:10px;display:grid;place-items:center}.qr-frame>div{width:100%;height:100%;display:grid;place-items:center}.qr-pop{animation:qr-pop .4s var(--ease) both}@keyframes qr-pop{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.qr-frame svg,.qr-frame canvas{width:100%!important;height:100%!important}.sheet-actions{display:flex;gap:10px}.btn{flex:1;padding:13px;border-radius:12px;font-size:13px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .2s var(--ease)}.btn svg{width:16px;height:16px}.btn:active{transform:scale(.97)}.btn-solid{background:var(--accent);color:var(--accent-contrast)}.btn-ghost{border:1px solid var(--line-strong);color:var(--text)}.radar{width:150px;height:150px;margin:6px auto 22px;position:relative;display:grid;place-items:center}.radar i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent);opacity:0;animation:radar 2s var(--ease-out) infinite}.radar i:nth-child(2){animation-delay:.66s}.radar i:nth-child(3){animation-delay:1.33s}@keyframes radar{0%{transform:scale(.3);opacity:.9}to{transform:scale(1);opacity:0}}.radar .core{width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--accent-contrast);display:grid;place-items:center;z-index:1}.radar .core svg{width:26px;height:26px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}.name span>i{transform:none}.reel-img.on{animation:none}}@media(min-width:720px){.card{margin-top:14px}}
