@font-face{font-family:Purista;src:url('assets/Fonts/Purista.ttf') format('truetype');font-style:normal;font-weight:400 500;font-display:swap}
@font-face{font-family:Octosquares;src:url('assets/Fonts/TTOctosquares-Medium.woff') format('woff');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Shuttleblock;src:url('assets/Fonts/fonnts.com-Shuttleblock_Wide_Demi.otf') format('opentype');font-style:normal;font-weight:600;font-display:swap}
:root{color-scheme:dark;--text:#fff;--muted:#a1a1a1}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;min-height:100vh;color:var(--text);font-family:Purista,sans-serif;background:radial-gradient(74.4% 112.92% at 50% 56.9%,rgba(173,179,189,.1092) 0%,rgba(145,157,177,.0286) 58.23%,rgba(144,153,168,0) 100%),radial-gradient(27.55% 27.55% at -.81% -4.86%,rgba(71,71,71,.504) 0%,rgba(97,99,103,.132) 50%,rgba(187,192,201,0) 100%),#121214}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid #e5d6cc;outline-offset:6px}
.site-header{height:62px;margin-right:6px;padding:10px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff70;position:relative;z-index:2}
.logo{display:flex}.logo img{width:137px;height:32px}
nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:17px;padding:0 17px}
.nav-link{display:flex;align-items:center;gap:4px;white-space:nowrap;color:var(--muted);font-size:20px;line-height:24px;letter-spacing:-.085em;position:relative;transition:color .2s}
.nav-icon{width:20px;height:14px;background:url('assets/svg2.svg') left center/14px 14px no-repeat;position:relative;flex:none}
.nav-icon:after{content:"";position:absolute;right:0;top:2.5px;width:1px;height:9px;background:#d9d9d947}
.nav-link:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#d9d9d9;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-link.active,.nav-link:hover{color:white}.nav-link.active .nav-icon{background-image:url('assets/Selected.svg')}.nav-link.active:after,.nav-link:hover:after{transform:scaleX(1)}
.contact-button{width:122px;height:29px;border-radius:18px;background:#d9d9d9;color:#2b2c2c;display:flex;align-items:center;justify-content:center;gap:5px;font-size:16px;letter-spacing:-.085em;box-shadow:0 4px 4px #00000030;transition:background .2s,transform .2s}
.contact-button:hover{background:#fff;transform:translateY(-1px)}
.layout{max-width:1714px;margin:0 auto 55px;position:relative;display:grid;grid-template-columns:minmax(0,1014px) minmax(0,642px);gap:58px;left:-3px}
.content{padding-top:92.26px;min-width:0}
h1,h2,p{margin:0}h1{height:90px;font-size:64px;line-height:77px;font-weight:400;letter-spacing:-.085em;white-space:nowrap}
strong{font-family:Octosquares,sans-serif;font-weight:500}
.skills{display:flex;gap:14px;margin-top:4px;height:46.9px;align-items:flex-start}
.skill{height:44.1px;display:flex;justify-content:center;align-items:center;font-family:Shuttleblock,sans-serif;font-size:17.35px;line-height:24px;font-weight:600;letter-spacing:-.02em;border-radius:71px;background:linear-gradient(120.11deg,#ddcdc6 13.29%,rgba(60,49,44,.87) 86.71%);box-shadow:0 3.83455px 54.5464px #3f3f3fcf,inset 0 3.83455px 43.0428px #2a2a2a40;transform:rotate(1.09deg);transition:transform .25s}
.skill:nth-child(1){width:114.92px}.skill:nth-child(2){width:147.72px}.skill:nth-child(3){width:128.94px}.skill:hover{transform:rotate(0) translateY(-3px)}
.intro-copy{font-size:17.35px;line-height:21px;letter-spacing:-.02em;color:#ffffff85;margin-top:19px;min-height:105px}
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:34px}
.service-card{height:196px;position:relative;display:flex;align-items:center;justify-content:center;background:transparent;color:#2b2c2c;font-size:32px;line-height:38px;letter-spacing:-.085em;text-shadow:0 3px 4px #00000036;isolation:isolate;border-radius:17.5px;transition:transform .3s,filter .3s}
.service-card:before{content:"";position:absolute;inset:0 -4px -8px;background:url('assets/Card.png') center/100% 100% no-repeat;z-index:-1}
.service-card:hover{transform:translateY(-4px);filter:brightness(1.035)}
.projects{margin-top:33px}.projects h2{height:56px;font-size:40px;line-height:48px;font-weight:400;letter-spacing:-.085em}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin-top:12px}
.project{display:block;padding:0;background:transparent;border-radius:21px;transition:transform .3s,filter .3s;overflow:hidden;transform:rotate(.18deg)}
.project img{display:block;width:100%;height:auto}.project:hover{transform:translateY(-4px) rotate(0);filter:brightness(1.12)}
.site-footer{margin-top:33px;min-height:60px;padding:11px 16px;background:#121214;border-radius:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-footer p{font-size:15px;line-height:18px;letter-spacing:-.085em}.copyright{color:#696969}
.more-info{flex:none;display:flex;align-items:center;justify-content:center;width:116px;height:38px;background:#272728;border-radius:16px;color:#a1a1a1;font-size:15px;line-height:18px;letter-spacing:-.085em;transition:background .2s,color .2s}.more-info span{font-size:23px;transition:transform .2s}.more-info:hover{background:#333;color:#fff}.more-info:hover span{transform:translateX(3px)}
.badge-wrap{min-width:0;pointer-events:none;transform-origin:45% 0;animation:badge-sway 9s ease-in-out infinite}.badge{display:block;width:100%;height:auto}
@keyframes badge-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(.45deg)}}
.about,.services,.projects,.site-footer{animation:appear .7s ease-out both}.services{animation-delay:.07s}.projects{animation-delay:.14s}.site-footer{animation-delay:.21s}
@keyframes appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
dialog{width:min(540px,calc(100% - 36px));padding:38px;border:1px solid #ffffff25;border-radius:22px;background:#1b1b1e;color:white;box-shadow:0 24px 100px #0009}
dialog::backdrop{background:#08080bbb;backdrop-filter:blur(7px)}dialog[open]{animation:appear .22s ease-out}dialog h2{font-weight:400;font-size:32px;letter-spacing:-.06em;padding-right:15px}dialog p{margin-top:18px;color:#aaa;font-size:17px;line-height:1.5}.dialog-close{position:absolute;right:13px;top:10px;width:32px;height:32px;background:transparent;color:#aaa;font-size:28px;border-radius:50%}.dialog-close:hover{color:white;background:#ffffff10}.project-dialog{width:min(760px,calc(100% - 36px))}.project-dialog>img{display:block;width:100%;height:auto;margin-top:22px;border-radius:15px}
@media(min-width:1920px){.layout{width:1714px}}
@media(max-width:1919px) and (min-width:1101px){.layout{margin-left:5.20833%;margin-right:5.52083%;gap:3.02vw;grid-template-columns:minmax(0,1014fr) minmax(0,642fr);left:0}.content{padding-top:clamp(48px,4.8052vw,92.26px)}.service-card{height:auto;aspect-ratio:317/196}.intro-copy{min-height:105px}.badge-wrap{align-self:start}.site-footer p{max-width:75%}}
@media(max-width:1100px){.layout{margin:0 6% 36px;left:0;display:block}.content{padding-top:65px}.badge-wrap{position:absolute;right:-2%;top:0;width:260px;opacity:.7;z-index:-1}.about{padding-right:120px}h1{font-size:54px}.intro-copy{max-width:740px}.services{margin-top:34px}.service-card{height:auto;aspect-ratio:317/196;font-size:28px}.site-footer p{max-width:75%}}
@media(max-width:700px){.site-header{height:106px;margin-right:0;padding:14px 20px;align-items:flex-start}.logo img{width:110px;height:auto}.contact-button{width:100px;height:28px}nav{bottom:13px;width:100%;justify-content:center;gap:15px;padding:0 12px}.nav-link{font-size:17px}.nav-icon{width:17px;background-size:11px 11px}.layout{margin:0 22px 24px}.content{padding-top:42px}.about{padding-right:0}.badge-wrap{display:none}h1{font-size:clamp(36px,8.7vw,54px);line-height:1.2;height:auto;padding-bottom:20px}.skills{height:auto;margin-top:0;gap:10px}.skill{font-size:13px;height:37px;max-width:36%;padding:0 9px}.intro-copy{margin-top:23px;font-size:16px;line-height:21px}.services{gap:12px;grid-template-columns:1fr}.service-card{aspect-ratio:auto;height:150px;font-size:30px}.service-card:before{background-size:100% auto;background-position:center;border-radius:20px;inset:0;overflow:hidden}.projects{margin-top:30px}.projects h2{font-size:34px;height:auto}.project-grid{grid-template-columns:1fr;gap:16px}.project img{width:100%}.site-footer{margin-top:26px;align-items:flex-start;gap:15px;flex-direction:column}.site-footer p{max-width:none;font-size:14px;line-height:19px}.more-info{align-self:flex-end}}
.more-info{gap:7px}
.footer-arrow{flex:none;transition:transform .25s ease}
.more-info:hover .footer-arrow{transform:translateX(3px)}
.badge-wrap{position:relative;pointer-events:auto;align-self:start;--tilt-x:0deg;--tilt-y:0deg;--light-x:50%;--light-y:60%}
.badge{transform-origin:45% 0;transform:perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .65s;will-change:transform}
.badge-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#fff8,transparent 42%);mask:url('assets/Badge.png') center/100% 100% no-repeat;transform-origin:45% 0;transform:perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));mix-blend-mode:soft-light;opacity:0;transition:opacity .6s,transform .65s cubic-bezier(.2,.7,.2,1)}
.badge-wrap.is-active:after{opacity:.65}
.badge-wrap.is-active .badge{filter:drop-shadow(10px 16px 18px #0003)}
/* Preserve the original composition while fitting both desktop dimensions. */
@media(min-width:1101px){
  .layout{width:1714px;max-width:none;grid-template-columns:1014px 642px;gap:58px;margin:0 auto 28px;left:-3px;zoom:var(--desktop-scale,1)}
  .content{padding-top:92.26px}
  .service-card{height:196px;aspect-ratio:auto}
  .site-footer p{max-width:none}
}
@media(min-width:701px) and (max-width:1100px){.badge-wrap{position:absolute}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.badge,.badge-wrap:after{transform:none!important}.badge-wrap:after{display:none}}