@import"https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&family=Parkinsans:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap";:root{--color-dark-cyan: #184c53;--color-deep-sea: #2a6c78;--color-teal: #2e9ca3;--color-sky-blue: #66c8e3;--color-light-cyan: #b9eaf7;--color-warm-orange: #f28c1e;--color-warm-orange-hover: #ffb24a;--color-text-primary: #f6fbfd;--color-text-muted: rgba(246, 251, 253, .7);--color-text-subtle: rgba(246, 251, 253, .45);--surface-base: rgba(46, 156, 163, .12);--surface-card: rgba(102, 200, 227, .15);--surface-card-hover: rgba(102, 200, 227, .22);--surface-footer: rgba(24, 76, 83, .7);--border-subtle: rgba(185, 234, 247, .18);--border-card: rgba(102, 200, 227, .3);--border-card-hover: rgba(102, 200, 227, .5);--border-focus: rgba(185, 234, 247, .6);--fg1: var(--color-text-primary);--fg2: var(--color-text-muted);--fg3: var(--color-text-subtle);--accent: var(--color-warm-orange);--accent-hover: var(--color-warm-orange-hover);--bg-page: var(--color-dark-cyan);--bg-card: var(--surface-card);--brand-highlight: var(--color-light-cyan);--gradient-page: linear-gradient(160deg, var(--color-dark-cyan), var(--color-deep-sea));--gradient-shell: linear-gradient(180deg, rgba(185,234,247,.15), rgba(24,76,83,.25));--font-display: "Parkinsans", "Rubik", system-ui, sans-serif;--font-body: "Rubik", system-ui, sans-serif;--font-mono: "Fira Code", "Cascadia Code", ui-monospace, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-md: 1.125rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-3xl: 3rem;--text-hero: clamp(2.4rem, 3.2vw + 1rem, 3.6rem);--weight-light: 300;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--weight-black: 800;--leading-tight: 1.1;--leading-snug: 1.25;--leading-normal: 1.5;--leading-loose: 1.75;--tracking-tight: -.02em;--tracking-normal: 0em;--tracking-wide: .08em;--tracking-wider: .12em;--tracking-widest: .2em;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 24px;--radius-pill: 999px;--shadow-card: 0 22px 38px -24px rgba(24, 76, 83, .65);--shadow-btn: 0 10px 20px -12px rgba(102, 200, 227, .6);--shadow-link: 0 12px 24px -18px rgba(102, 200, 227, .65);--shadow-glow: 0 0 24px 0 rgba(102, 200, 227, .25);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-medium: .35s ease;--transition-slow: .6s ease;--blur-card: blur(18px);--blur-shell: blur(12px);--blur-sm: blur(6px);--layout-content: min(94vw, 1220px);--layout-nav: min(90vw, 1080px)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--fg1);background:var(--gradient-page);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:focus-visible{outline:3px solid var(--border-focus);outline-offset:3px;border-radius:4px}#root{min-height:100vh;display:flex;flex-direction:column}.contact-wrapper{position:relative}.contact-dropdown{position:fixed;width:300px;background:#184c53d1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(242,140,30,.75);border-radius:10px 0 10px 10px;padding:1.25rem;box-shadow:0 20px 48px -8px #00000059,0 0 0 1px #f28c1e14;animation:dropdown-in .2s ease-out forwards;z-index:200}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-7px)}30%{transform:translate(7px)}45%{transform:translate(-5px)}60%{transform:translate(5px)}75%{transform:translate(-3px)}90%{transform:translate(3px)}}.contact-dropdown.shake{animation:shake .45s ease}.contact-dropdown-header{position:absolute;top:.45rem;right:.45rem;display:flex;align-items:center;gap:.4rem}.contact-dropdown-title{font-family:var(--font-display);font-size:.8rem;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--accent)}.contact-close-btn{background:none;border:none;cursor:pointer;padding:4px;color:var(--fg3);display:flex;align-items:center;justify-content:center;border-radius:4px;transition:color var(--transition-base),background var(--transition-base)}.contact-close-btn:hover{color:var(--accent)}.contact-close-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}.contact-form{display:flex;flex-direction:column;gap:.7rem}.contact-field{display:flex;flex-direction:column;gap:.28rem}.contact-field label{font-size:.68rem;font-weight:var(--weight-medium);letter-spacing:.09em;text-transform:uppercase;color:var(--fg3)}.contact-field input,.contact-field textarea{background:#ffffff0d;border:1px solid rgba(102,200,227,.18);border-radius:6px;padding:.48rem .72rem;font-family:var(--font-body);font-size:.82rem;color:var(--fg1);outline:none;resize:none;transition:border-color var(--transition-base),background var(--transition-base)}.contact-field input::placeholder,.contact-field textarea::placeholder{color:var(--fg3)}.contact-field input:focus,.contact-field textarea:focus{border-color:#f28c1e80;background:#ffffff12}.contact-submit{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:.52rem 1rem;margin-top:.2rem;border-radius:6px;border:1px solid rgba(242,140,30,.5);background:#f28c1e1f;color:var(--accent);font-family:var(--font-body);font-size:.76rem;font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;width:100%;transition:all var(--transition-base)}.contact-submit:hover{background:#f28c1e38;border-color:#f28c1ebf;color:var(--accent-hover)}.contact-submit svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}.contact-success-overlay{position:absolute;inset:0;border-radius:inherit;background:#12383e80;display:flex;align-items:center;justify-content:center;animation:overlay-in .3s ease forwards}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.contact-success-icon{width:72px;height:72px;fill:none;stroke-linecap:round;stroke-linejoin:round}.contact-success-icon circle{stroke:#f28c1e99;stroke-width:2;stroke-dasharray:152;stroke-dashoffset:152;animation:circle-draw .5s ease .1s forwards}.contact-success-icon path{stroke:var(--accent-hover);stroke-width:3.5;stroke-dasharray:30;stroke-dashoffset:30;filter:drop-shadow(0 0 6px rgba(242,140,30,.8));animation:check-draw .4s ease .45s forwards}@keyframes circle-draw{to{stroke-dashoffset:0}}@keyframes check-draw{to{stroke-dashoffset:0}}.contact-field input.input-error,.contact-field textarea.input-error{border-color:#dc505099}.field-error{font-size:.65rem;color:#e07070;letter-spacing:.02em}.contact-error{font-size:.72rem;color:#e07070;margin:0;text-align:center}.contact-submit:disabled{opacity:.6;cursor:not-allowed}.contact-toast{font-size:.67rem;font-weight:var(--weight-medium);letter-spacing:.04em;color:#e07070;white-space:nowrap;pointer-events:none;background:transparent;border:none;border-radius:4px;padding:.18rem .5rem;animation:toast-in .18s ease-out forwards}.contact-toast span{font-weight:var(--weight-bold)}@keyframes toast-in{0%{opacity:0}to{opacity:1}}.contact-toast.fading{animation:toast-out .5s ease forwards}@keyframes toast-out{0%{opacity:1}to{opacity:0}}.contact-close-btn.highlight{color:var(--accent)}.header{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.1rem 3rem;background:linear-gradient(180deg,rgba(24,76,83,.78) 0%,rgba(24,76,83,.2) 80%,transparent 100%);transition:background .45s ease,backdrop-filter .45s ease}.header.scrolled{background:#184c53bd;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:2rem}.wordmark{font-family:var(--font-body);font-weight:var(--weight-medium);font-size:var(--text-base);letter-spacing:.07em;text-transform:uppercase;color:var(--fg1);text-decoration:none;white-space:nowrap;flex-shrink:0;opacity:0;pointer-events:none;transition:opacity .4s ease}.header.scrolled .wordmark{opacity:.88;pointer-events:auto}.header.scrolled .wordmark:hover{opacity:1}.header-tagline{font-family:var(--font-display);font-weight:var(--weight-black);font-size:.9rem;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--brand-highlight);white-space:nowrap;flex-shrink:0;max-width:0;overflow:hidden;opacity:0;transition:max-width .45s ease,opacity .35s ease,margin .45s ease;margin-left:0}.header.scrolled .header-tagline{max-width:260px;opacity:1;margin-left:.5rem}.nav{display:flex;gap:0;margin-left:auto}.nav-link{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:var(--weight-medium);color:var(--fg3);padding:.4rem .8rem;text-decoration:none;position:relative;transition:color var(--transition-base)}.nav-link:after{content:"";position:absolute;bottom:0;left:.8rem;right:.8rem;height:1px;background:var(--color-sky-blue);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}.nav-link:hover{color:var(--fg1)}.nav-link:hover:after{transform:scaleX(1)}.nav-link.active{color:var(--fg1)}.nav-link.active:after{transform:scaleX(1);background:var(--accent)}.header-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}.btn-text{background:none;border:none;cursor:pointer;padding:0;font-family:var(--font-body);font-size:.76rem;font-weight:var(--weight-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2);text-decoration:none;display:inline-flex;align-items:center;gap:4px;position:relative;transition:color var(--transition-base)}.btn-text:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--transition-base)}.btn-text:hover{color:var(--fg1)}.btn-text:hover:after{transform:scaleX(1)}.btn-text svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;opacity:.6;transition:opacity var(--transition-base),transform var(--transition-base)}.btn-text:hover svg{opacity:1;transform:translate(1px,-1px)}.btn-cta{display:inline-flex;align-items:center;gap:6px;padding:.42rem 1rem;border-radius:6px;white-space:nowrap;overflow:hidden;border:1px solid rgba(242,140,30,.5);background:#f28c1e1a;color:var(--accent);font-family:var(--font-body);font-size:.76rem;font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:all var(--transition-base)}.btn-cta:hover{background:#f28c1e33;border-color:#f28c1ebf;color:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 18px -8px #f28c1e66}.btn-cta .btn-label{animation:label-in .18s ease}@keyframes label-in{0%{opacity:0}to{opacity:1}}.btn-cta svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}.btn-cta:hover svg{opacity:1}@keyframes btn-shake{0%,to{transform:translate(0)}15%{transform:translate(-7px)}30%{transform:translate(7px)}45%{transform:translate(-5px)}60%{transform:translate(5px)}75%{transform:translate(-3px)}90%{transform:translate(3px)}}.btn-cta.shake{animation:btn-shake .45s ease}.contact-overlay{position:fixed;inset:0;z-index:99;cursor:default}.header.contact-open{z-index:200}.btn-cta.highlighted{background:#f28c1e47;border-color:var(--accent);color:var(--accent-hover);transition:background .2s ease,border-color .2s ease,color .2s ease}.btn-cta.active.highlighted{background:#f28c1ebf;border-color:#f28c1e;color:#fff;border-bottom-color:transparent;transition:background .5s ease,border-color .5s ease,color .5s ease}.btn-cta.active{background:#f28c1e8c;border-color:#f28c1ee6;color:#fff;border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0}.btn-cta.active:hover{background:#f28c1ebf;border-color:#f28c1e;color:#fff;transform:none;box-shadow:0 4px 14px -4px #f28c1e80;border-bottom-color:transparent}@media (max-width: 768px){.header{padding:1rem 1.25rem}.header-actions{display:none}}@media (max-width: 700px){.nav{gap:0}}.photo-wrap{position:relative}.photo-wrap:after{content:"";position:absolute;bottom:-18px;left:10%;right:10%;height:24px;background:#123a40b3;filter:blur(14px);border-radius:50%;z-index:-1}.photo-outer{position:relative;width:100%;border-radius:var(--radius-lg);overflow:hidden}.photo-outer.hero-frame{max-width:380px}.photo-outer.about-frame{border-radius:var(--radius-md)}.photo-img{width:100%;display:block}.work-card{border-radius:16px;border:1px solid var(--border-card);background:#66c8e31a;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden;transition:all .22s ease;cursor:pointer;text-decoration:none;display:flex;flex-direction:column;color:inherit}.work-card:hover{background:#66c8e329;border-color:var(--border-card-hover);transform:translateY(-3px);box-shadow:0 20px 40px -20px #184c53b3}.work-card__thumb{height:160px;background:#2e9ca32e;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border-card);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3);transition:background .22s ease}.work-card:hover .work-card__thumb{background:#2e9ca347}.work-card__thumb.soon{border-style:dashed;border-color:#b9eaf738;background:#2e9ca314}.work-card__body{padding:1.25rem 1.4rem;flex:1;display:flex;flex-direction:column;gap:.5rem}.work-card__title{font-family:var(--font-display);font-size:1.1rem;font-weight:var(--weight-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-highlight)}.work-card__desc{font-size:.82rem;color:var(--fg2);line-height:1.55;flex:1}.work-card__tag{display:inline-block;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);border:1px solid rgba(185,234,247,.14);border-radius:4px;padding:2px 7px;align-self:flex-start}.page-container{max-width:1200px;margin:0 auto;padding:0 3rem 6rem}@keyframes fade-up{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.hero{padding-top:90px;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;min-height:100vh}.hero-left{display:flex;flex-direction:column;gap:1.5rem;animation:fade-up 1.2s ease-out both}.hero-eyebrow{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg3);font-weight:var(--weight-medium)}.hero-title-group{display:flex;flex-direction:column;gap:.15rem}.hero-title{font-family:var(--font-display);font-weight:var(--weight-black);font-size:clamp(3.5rem,5.5vw + 1rem,6.5rem);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-highlight);line-height:.92;display:flex;flex-direction:column;gap:0;margin:0}.hero-title span{display:block}.hero-name{font-family:var(--font-display);font-weight:var(--weight-black);font-size:clamp(1.8rem,2.8vw + .6rem,2.6rem);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:.1rem;line-height:.92;overflow:hidden;max-height:120px;transition:opacity .4s ease,transform .4s ease,max-height .4s ease,margin-top .4s ease}.hero-name.hidden{opacity:0;transform:translateY(-8px);max-height:0;margin-top:0}.hero-body{font-size:var(--text-base);color:var(--fg2);line-height:1.7;max-width:420px;font-weight:var(--weight-light);margin:0}.hero-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.tag-link{display:inline-block;padding:.45rem 1rem;border-radius:var(--radius-sm);border:1px solid rgba(102,200,227,.28);background:#66c8e314;color:var(--fg2);font-family:var(--font-body);font-size:.8rem;font-weight:var(--weight-medium);text-decoration:none;letter-spacing:.05em;transition:all var(--transition-base)}.tag-link:hover{background:#66c8e329;border-color:#66c8e37a;color:var(--fg1);transform:translateY(-1px)}.hero-right{display:flex;justify-content:center;align-items:center;animation:fade-up 1.2s ease-out .5s both}.section-label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg3);font-weight:var(--weight-medium);margin-bottom:1.5rem;display:flex;align-items:center;gap:12px}.section-label:after{content:"";flex:1;height:1px;background:#b9eaf71f}.work{padding-top:5rem}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.about{padding-top:5rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.about-text{display:flex;flex-direction:column;gap:1.25rem}.about-heading{font-family:var(--font-display);font-size:2.2rem;font-weight:var(--weight-black);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-highlight);line-height:1;margin:0}.about-body{font-size:.95rem;color:var(--fg2);line-height:1.75;font-weight:var(--weight-light);margin:0}.skills{display:flex;flex-wrap:wrap;gap:8px}.skill{padding:.35rem .85rem;border-radius:6px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:var(--weight-medium);border:1px solid rgba(102,200,227,.22);color:var(--fg2)}.about-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.about-photo-offset{margin-top:2rem}@media (max-width: 768px){.page-container{padding:0 1.5rem 4rem}.hero{grid-template-columns:1fr;min-height:auto;padding-top:120px;gap:2rem}.hero-right{order:-1}.work-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 700px){.page-container{padding:0 1.25rem 4rem}.hero,.work-grid,.about{grid-template-columns:1fr}.about-photos{grid-template-columns:1fr 1fr}}.placeholder-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 60px);padding:var(--space-12)}.placeholder-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4);max-width:380px}.placeholder-icon{color:var(--fg3);margin-bottom:var(--space-2);transition:color var(--transition-base)}.placeholder-icon svg{width:48px;height:48px}.placeholder-label{font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--fg3);font-weight:var(--weight-medium);margin:0}.placeholder-heading{font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-3xl);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--brand-highlight);line-height:var(--leading-tight);margin:0}.placeholder-body{font-size:var(--text-sm);color:var(--fg2);line-height:var(--leading-loose);font-weight:var(--weight-light);margin:0}