/* A personal digital studio: generous typography, real screens and responsive depth. */
:root{--max:1320px;--accent-soft:#5de1ff16}
html{scroll-padding-top:28px}
.header{height:104px;padding-inline:36px}
.header nav{font-size:.875rem;gap:30px}
.header nav a{padding:12px 0}
.nav-contact{font-size:.875rem;border-radius:30px;padding:12px 20px}
.brand small{font-size:.75rem}
.button{font-size:.875rem;border-radius:30px;padding:15px 25px;min-height:50px}
.hero{max-width:1380px;padding:84px 36px 100px;gap:48px;isolation:isolate;min-height:660px;overflow:clip}
.hero::before{width:80%;background:radial-gradient(ellipse at 75% 50%,#12395742,transparent 65%)}
body{isolation:isolate}
.site-backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#070d18}
.aurora-field{position:absolute;inset:-18%;transform:translate3d(var(--field-x,0px),var(--field-y,0px),0);opacity:1}
.aurora{position:absolute;width:74%;height:78%;will-change:transform}
.aurora-blue{left:27%;top:-8%;background:radial-gradient(ellipse,#087fcfbb 0%,#0e4e8a80 28%,transparent 68%);animation:aurora-blue 10s ease-in-out -2s infinite alternate}
.aurora-violet{left:-26%;top:35%;background:radial-gradient(ellipse,#6e3deec9 0%,#44208670 28%,transparent 68%);animation:aurora-violet 12s ease-in-out -6s infinite alternate}
.aurora-cyan{left:47%;top:46%;background:radial-gradient(ellipse,#08b9cea8 0%,#07556670 30%,transparent 68%);animation:aurora-cyan 10s ease-in-out -4s infinite alternate}
.backdrop-grid{position:absolute;inset:-20%;background-image:linear-gradient(#5de1ff0d 1px,transparent 1px),linear-gradient(90deg,#5de1ff0d 1px,transparent 1px);background-size:76px 76px;mask-image:linear-gradient(115deg,transparent 12%,#0008 60%,#000);transform:rotate(-12deg) translate3d(var(--field-x,0px),var(--field-y,0px),0)}
.ambient-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}
.backdrop-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 28% 40%,#060c1799 0%,#060c175e 45%,transparent 85%),linear-gradient(#070d1833,#070d1826 60%,#070d1866)}
.site-backdrop.is-paused .aurora{animation-play-state:paused}
@keyframes aurora-blue{from{transform:translate3d(-5%,-4%,0) rotate(-12deg) scale(.95)}to{transform:translate3d(12%,16%,0) rotate(15deg) scale(1.22)}}
@keyframes aurora-violet{from{transform:translate3d(-3%,12%,0) rotate(10deg) scale(1.05)}to{transform:translate3d(25%,-18%,0) rotate(-14deg) scale(1.2)}}
@keyframes aurora-cyan{from{transform:translate3d(10%,5%,0) scale(.85)}to{transform:translate3d(-28%,-25%,0) scale(1.25)}}
.intro{position:relative;z-index:1;animation:none}
.eyebrow{font-size:.75rem;letter-spacing:.12em}
h1{font-size:clamp(2.75rem,4.8vw,4.5rem);line-height:1.08;letter-spacing:-.06em}
.intro .title-line{display:block;color:var(--text);animation:line-enter .8s cubic-bezier(.16,1,.3,1) both}
.title-line:nth-child(2){animation-delay:.09s}.title-line:nth-child(3){animation-delay:.18s}
.intro .title-accent{color:var(--accent);text-shadow:0 0 50px #5de1ff16}
.lead{font-size:1rem;line-height:1.85;max-width:470px;margin:28px 0 32px}
.intro-foot{font-size:.8125rem;line-height:1.8;margin-top:26px}
.studio-wrap{position:relative;perspective:1400px;animation:line-enter 1s .15s both}
.scene-caption{position:relative;z-index:4}
.studio{transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotateZ(-1.5deg);box-shadow:0 40px 100px #0008,0 0 70px #22456225;border-radius:24px}
.studio>img{border-radius:24px}
.hotspot b{font-size:.75rem}.hotspot{padding:8px 12px 8px 8px;gap:8px}
.scene-caption{font-size:.75rem;line-height:1.7;letter-spacing:0;padding-top:24px}
.scene-caption span:first-child{letter-spacing:.06em}
.section{padding:96px 36px}
.section-head>p{font-size:1rem;max-width:400px}
.projects-section .section-head{align-items:flex-end;margin-bottom:48px}
.projects-heading h2{font-size:clamp(4rem,8vw,7.5rem);letter-spacing:-.065em;line-height:.95}
.projects-heading .work-period{color:var(--accent)}
.work-intro{max-width:410px}.work-intro p{color:var(--muted);font-size:1rem;line-height:1.8}
.work-count{display:block;color:var(--text);font-family:Manrope,sans-serif;font-size:2.5rem;font-weight:500;letter-spacing:-.04em;margin-bottom:12px;line-height:1}
.work-count small{font-family:'DM Sans',sans-serif;font-size:.75rem;color:var(--muted);letter-spacing:.1em;margin-left:12px}
.projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 32px}
.project{--cover-bg:#142131;--cover-ink:#acd7ed;background:transparent;border:0;border-radius:0;overflow:visible;min-width:0}
.project-clenda{--cover-bg:#27231f;--cover-ink:#e4c5a0}.project-motion{--cover-bg:#17211e;--cover-ink:#c0d2c7}.project-acd{--cover-bg:#20241b;--cover-ink:#d6ce9b;grid-column:1/-1}
.project:hover{transform:none;border-color:transparent}
.project-preview{border-radius:20px;aspect-ratio:1.48;position:relative;background:var(--cover-bg);overflow:hidden;isolation:isolate}
.project-preview::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;background:radial-gradient(400px circle at var(--light-x,55%) var(--light-y,40%),#ffffff12,transparent 75%);transition:opacity .3s}
.project-preview:hover::before{opacity:1}
.project-art{display:block;width:100%;height:100%;position:absolute;inset:0;transform-style:preserve-3d;transform:perspective(1200px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transition:transform .35s ease-out;background:radial-gradient(ellipse at 80% 10%,#ffffff0a,transparent 55%),linear-gradient(120deg,#ffffff04,transparent 65%)}
.cover-index{position:absolute;left:6%;top:5%;font-family:Manrope,sans-serif;font-size:clamp(3rem,6vw,5.5rem);font-weight:800;letter-spacing:-.08em;color:var(--cover-ink);opacity:.12;line-height:1}
.project-screen,.project-phone{display:block;position:absolute;border:3px solid #ffffff24;overflow:hidden;border-radius:12px;box-shadow:0 26px 60px #0006;background:#121b26;transform-origin:center;transition:transform .65s cubic-bezier(.2,.65,.3,1)}
.project-screen{width:84%;left:5%;top:50%;transform:translateY(-50%) rotate(-3deg) translateZ(24px)}
.project-phone{width:20%;right:6%;bottom:15%;border-width:4px;border-radius:16px;transform:rotate(5deg) translateZ(60px);box-shadow:0 18px 45px #0008}
.project-screen img,.project-phone img{width:100%;height:auto;display:block;object-fit:contain}
.project-preview:hover .project-screen{transform:translateY(-50%) rotate(-1deg) translateZ(24px) scale(1.035)}
.project-preview:hover .project-phone{transform:rotate(2deg) translateZ(60px) translateY(-9px)}
.cover-caption{position:absolute;bottom:22px;left:25px;font-size:.75rem;letter-spacing:.09em;color:var(--cover-ink);z-index:2;pointer-events:none}
.cover-explore{position:absolute;top:23px;right:23px;display:flex;gap:14px;align-items:center;font-size:.875rem;color:#f5f7fb;padding:8px 13px;border-radius:30px;background:#060d16ad;border:1px solid #ffffff1a;backdrop-filter:blur(12px);z-index:2}
.cover-explore>span{font-size:1.25rem;line-height:1;transition:transform .3s}.project-preview:hover .cover-explore>span{transform:rotate(90deg)}
.project-copy{padding:24px 0 0}
.project-meta{font-size:.75rem;letter-spacing:.08em;margin-bottom:16px;gap:12px}
.status{font-size:.875rem;color:#b4dbcb}.status i{width:6px;height:6px}
.project h3{font-size:clamp(2rem,3.5vw,3rem);letter-spacing:-.045em;margin-bottom:15px}
.project-copy>p{font-size:1rem;min-height:0;max-width:560px;line-height:1.85}
.feature-list{gap:8px;margin:20px 0}
.feature-list li{font-size:.75rem;padding:5px 10px;border-radius:30px;background:#ffffff03}
.project-actions{font-size:.875rem;padding-top:18px;align-items:center;flex-direction:row;gap:20px}
.project-actions .text-link,.text-link{font-size:.875rem;min-height:44px;display:inline-flex;align-items:center}
.project-actions>a{padding-block:10px}.project-actions>span{font-size:.8125rem}
.project-acd .project-preview{aspect-ratio:2.35}
.project-acd .project-screen{width:75%;left:5%;transform:translateY(-50%) rotate(-1.5deg) translateZ(24px)}
.project-acd .project-phone{width:15%;right:6%;bottom:11%}
.project-acd .project-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 50px}
.project-acd .project-meta{grid-column:1/-1}.project-acd h3{grid-column:1;grid-row:2}.project-acd .project-copy>p{grid-column:2;grid-row:2}.project-acd .feature-list{grid-column:2;grid-row:3}.project-acd .project-actions{grid-column:1;grid-row:3;align-self:start;border-top:0;padding-top:12px}
.project-note{margin-top:60px;border-radius:20px;padding:28px 32px}.project-note p{font-size:1rem}.project-note a{font-size:.875rem}
.service{border-radius:20px;padding:28px}.service p{font-size:1rem;line-height:1.8}.service h3{font-size:1.375rem}.service-number{font-size:.75rem}.service-bottom{font-size:.8125rem}.service-more{font-size:.875rem}.process p,.about-copy>p{font-size:1rem}.process li>span{font-size:2.5rem}.process h3{font-size:1.375rem}
.technical{border-radius:20px}.technical p{font-size:1rem}.stack-bar button{font-size:.875rem;min-height:44px;border-radius:30px}.code-projects,.repo-links strong,.recruiter{font-size:.875rem}.repo-links span{font-size:.8125rem}.technical .eyebrow{font-size:.75rem}.about-links{gap:22px}
.contact-lead{font-size:1rem;max-width:570px}.contact-info{font-size:.875rem}.contact .button{font-size:.875rem}footer>span,footer>div,.motion-toggle{font-size:.75rem}.motion-toggle{min-height:44px}
dialog{border-radius:24px}.close{width:44px;height:44px;top:16px;right:16px;z-index:4;background:#233349}
#dialog-description,#dialog-examples p,#dialog-examples ul{font-size:1rem}#dialog-examples h3{font-size:1rem}.dialog-tags span{font-size:.75rem;padding:7px 12px;border-radius:30px}
.project-dialog{width:min(1200px,calc(100% - 40px));padding:44px;max-height:92dvh}
.case-heading{padding-right:44px;margin-bottom:36px}.case-heading h2{font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-.05em;margin-bottom:18px}.case-heading .eyebrow{font-size:.75rem}.case-heading>p:last-child{font-size:1rem;max-width:760px;line-height:1.8}
.case-layout{grid-template-columns:1.65fr 1fr;gap:38px}.gallery-controls{gap:8px;margin-bottom:16px}.gallery-controls button{font-size:.875rem;padding:10px 17px;min-height:44px;border-radius:30px}.gallery-controls a{font-size:.8125rem;min-height:44px;display:flex;align-items:center}
.gallery-stage{padding:14px;border-radius:16px;min-height:0;background:#080e19}.gallery-stage img{max-height:520px;border-radius:6px}.gallery-stage.mobile img{max-height:570px;border-radius:12px}.gallery-stage figcaption{font-size:.8125rem;margin-top:16px;line-height:1.8}
.case-chapter{margin-bottom:26px}.case-chapter .eyebrow{font-size:.75rem;margin-bottom:10px}.case-chapter p,.case-chapter ul{font-size:1rem;color:#bac8d9;line-height:1.85}.case-chapter ul{padding-left:18px;margin:0}.case-chapter li{margin-bottom:9px}.case-copy .case-note{font-size:.875rem;line-height:1.85}.case-copy .button{font-size:.875rem}.case-copy .dialog-tags{margin-top:6px}
.case-navigation{border-top:1px solid var(--line);margin-top:35px;padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.reduced-motion .ambient-canvas{display:none}.reduced-motion .project-art{transform:none!important}.reduced-motion .project-screen{transform:translateY(-50%) rotate(-3deg)!important}.reduced-motion .project-phone{transform:rotate(5deg)!important}
@keyframes line-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:761px) and (hover:hover){.project-preview:focus-visible{outline-color:var(--cover-ink);outline-offset:8px}}
@media(max-width:1100px){.hero{gap:30px;padding-top:70px;min-height:600px}.scene-caption{font-size:.75rem;flex-wrap:wrap;gap:5px}.hotspot b{font-size:.75rem}.services{grid-template-columns:repeat(2,1fr)}.projects-heading h2{font-size:clamp(4rem,8vw,6rem)}.work-intro{max-width:340px}.project-meta{flex-direction:column;gap:8px}.project-acd .project-meta{flex-direction:row;justify-content:space-between}.case-layout{grid-template-columns:1.4fr 1fr;gap:28px}.project-dialog{padding:34px}.gallery-controls a{margin-left:0;width:100%}.project-actions{flex-wrap:wrap}}
@media(max-width:760px){.header{padding-inline:24px;height:88px}.hero{padding:54px 24px 72px;grid-template-columns:1fr;gap:50px;min-height:0;overflow:hidden}.hero::before{width:100%}.intro{max-width:590px}h1{font-size:clamp(2.5rem,6.5vw,3.625rem)}.lead{font-size:1rem;max-width:540px}.hero .button{font-size:.875rem;padding:14px 20px}.intro-foot{font-size:.8125rem}.studio-wrap{max-width:660px}.studio{transform:none}.scene-caption{font-size:.75rem;gap:12px}.hotspot b{font-size:.75rem}.section{padding:68px 24px}.section-head>p{font-size:1rem}.projects-section .section-head{align-items:flex-start;gap:28px;margin-bottom:36px}.projects-heading h2{font-size:clamp(3.5rem,11vw,5.5rem)}.work-intro{max-width:100%}.work-count{font-size:2rem;margin-bottom:14px}.work-intro p{font-size:1rem}.projects{grid-template-columns:1fr;gap:48px}.project-meta,.project-acd .project-meta{flex-direction:row;justify-content:space-between;align-items:center;gap:8px}.project h3{font-size:2.25rem}.project-copy>p{font-size:1rem}.project-copy{padding:24px 0 0}.project-preview{aspect-ratio:1.5}.cover-index{font-size:4.5rem}.cover-explore{font-size:.875rem;top:18px;right:18px}.cover-caption{font-size:.75rem;bottom:19px;left:22px}.project-acd .project-preview{aspect-ratio:1.5}.project-acd .project-screen{width:84%}.project-acd .project-phone{width:20%;bottom:15%}.project-acd .project-copy{display:block}.project-acd .project-actions{border-top:1px solid var(--line);padding-top:18px}.project-actions .text-link{font-size:.875rem}.feature-list li{font-size:.75rem}.project-note{margin-top:45px;padding:24px}.project-note p{font-size:1rem}.project-note a{margin-left:0}.services{grid-template-columns:1fr 1fr}.service p{font-size:1rem}.service h3{font-size:1.25rem}.service-more{font-size:.875rem}.service-bottom{font-size:.8125rem}.about{gap:32px}.technical{padding:25px}.contact{padding-block:72px}.case-layout{grid-template-columns:1fr}.project-dialog{padding:28px 24px;max-height:94dvh;width:calc(100% - 24px)}.case-heading{padding-right:28px;margin-bottom:25px}.gallery-controls a{margin-left:auto;width:auto}.gallery-stage img{max-height:430px}.gallery-stage.mobile img{max-height:520px}.case-navigation{flex-wrap:wrap}.case-copy .button{width:100%}}
@media(max-width:450px){.header{height:auto;padding:20px 24px;flex-wrap:wrap;gap:10px}.header nav{width:100%;justify-content:space-between;gap:16px;font-size:.875rem}.header .brand{font-size:29px}.header nav a{padding:8px 0}.hero{padding-top:34px;gap:40px}h1{font-size:clamp(2.1rem,9.7vw,2.5rem)}.hero .eyebrow{font-size:.75rem;letter-spacing:.07em}.hero .button{font-size:.875rem;padding:13px 18px}.hero .actions{flex-direction:column;align-items:flex-start}.lead{font-size:1rem;line-height:1.8}.scene-caption{font-size:.75rem;flex-direction:column;gap:6px}.hotspot{padding:6px 8px 6px 6px;gap:6px}.hotspot b{font-size:.75rem}.hotspot>span{width:20px;height:20px}.code-spot{left:2%;top:22%}.web-spot{right:2%;top:39%}.mobile-spot{left:13%;bottom:12%}.section{padding-inline:24px}.projects-heading h2{font-size:clamp(3rem,13vw,4.25rem)}.project-preview,.project-acd .project-preview{aspect-ratio:1.22}.project-screen,.project-acd .project-screen{width:85%;left:4%;top:52%}.project-phone,.project-acd .project-phone{width:22%;right:6%;bottom:16%}.cover-explore{font-size:.75rem;top:15px;right:15px;padding:7px 11px;gap:10px}.cover-caption{font-size:.75rem;letter-spacing:0;left:16px;bottom:16px}.cover-index{font-size:3.5rem;top:6%}.project-meta,.project-acd .project-meta{align-items:flex-start;flex-direction:column;gap:8px;font-size:.75rem}.status{font-size:.875rem}.project h3{font-size:2rem}.project-actions{gap:14px;align-items:center;font-size:.875rem}.project-note p{font-size:1rem}.services{grid-template-columns:1fr}.service{padding:25px}.service h3{font-size:1.375rem}.technical .eyebrow{font-size:.75rem}.stack-bar button{font-size:.875rem}.about-links{flex-direction:column;gap:10px}.contact h2{font-size:2.4rem}.contact .button{font-size:.875rem}.contact-info{font-size:.875rem;overflow-wrap:anywhere}.project-dialog{padding:25px 18px;width:calc(100% - 20px)}.case-heading h2{font-size:2.5rem}.case-heading .eyebrow{font-size:.75rem;padding-right:10px}.case-heading>p:last-child{font-size:1rem}.gallery-controls{gap:8px}.gallery-controls button{font-size:.875rem;padding:10px 14px}.gallery-controls a{margin-left:0;width:100%;min-height:34px;font-size:.8125rem}.case-navigation{gap:12px}.case-navigation>.button{width:100%;font-size:.875rem}footer{padding-inline:24px}footer>span{font-size:.75rem}footer>div{flex-direction:column;align-items:flex-start;gap:6px;font-size:.75rem}.motion-toggle{font-size:.75rem}}
@media(max-width:760px){.aurora-field{opacity:.7}.backdrop-grid{background-size:60px 60px;opacity:.6}.ambient-canvas{opacity:.75}.backdrop-shade{background:linear-gradient(90deg,#060c1799,#060c174d),linear-gradient(#070d1826,#070d184d)}}
@media(prefers-reduced-motion:reduce){.ambient-canvas{display:none}.project-art{transform:none!important}.project-preview:hover .project-screen{transform:translateY(-50%) rotate(-3deg)}.project-preview:hover .project-phone{transform:rotate(5deg)}}