:root{--w:#fff;--s:#F5F5F2;--c:#191A1C;--o:#FF713D;--g:#92918D;--h:'Space Grotesk',Arial,sans-serif;--b:'DM Sans',Arial,sans-serif;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--w);color:var(--c);font:400 1rem/1.7 var(--b);overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--h);line-height:1.02;margin:0;letter-spacing:-.03em}
.wrap{width:min(1240px,100% - 40px);margin:auto}
section{padding:clamp(70px,10vw,130px) 0}
.lab{font:500 .75rem var(--h);letter-spacing:.16em;text-transform:uppercase;color:var(--g);display:flex;gap:10px;align-items:center;margin-bottom:18px}
.lab::before{content:"";width:22px;height:2px;background:var(--o)}
h2{font-size:clamp(2.1rem,5vw,3.9rem);font-weight:700;max-width:14ch}
.o{color:var(--o)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font:700 .8rem var(--h);letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--c);background:transparent;color:var(--c);transition:.3s}
.btn:hover,.btn:focus-visible{background:var(--c);color:#fff}
.btn.p{background:var(--o);border-color:var(--o);color:var(--c)}.btn.p:hover{background:var(--c);border-color:var(--c);color:#fff;transform:translateY(-2px)}
:focus-visible{outline:3px solid var(--o);outline-offset:3px}
/* nav */
header{position:fixed;inset:0 0 auto;z-index:50;background:var(--w);padding-top:env(safe-area-inset-top,0px);transition:.3s;border-bottom:1px solid transparent}
header.sc{border-color:#e6e5e0;box-shadow:0 6px 24px rgba(0,0,0,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font:700 1.15rem var(--h);letter-spacing:.04em}.logo b{color:var(--o)}
nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
nav a.l{font:500 .85rem var(--h);position:relative;padding:6px 0}
nav a.l::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--o);transform:scaleX(0);transform-origin:left;transition:.3s}
nav a.l.on::after,nav a.l:hover::after{transform:scaleX(1)}
.nr{display:flex;align-items:center;gap:20px}.nr .btn{padding:11px 18px}
.bg{display:none;background:none;border:0;width:44px;height:44px;position:relative}
.bg i{position:absolute;left:10px;width:24px;height:2px;background:var(--c);transition:.3s}.bg i:nth-child(1){top:16px}.bg i:nth-child(2){top:26px}
.bg.x i:nth-child(1){top:21px;transform:rotate(45deg)}.bg.x i:nth-child(2){top:21px;transform:rotate(-45deg)}
@media(max-width:900px){.bg{display:block}.nr .btn{display:none}
nav ul{position:absolute;top:100%;left:0;right:0;background:var(--w);flex-direction:column;gap:0;padding:6px 20px 20px;border-bottom:1px solid #e6e5e0;max-height:0;overflow:hidden;opacity:0;transition:.4s;visibility:hidden}
nav ul.open{max-height:420px;opacity:1;visibility:visible}nav a.l{display:block;padding:14px 0;font-size:1.1rem}}
/* hero */
#home{padding-top:clamp(120px,14vw,170px);padding-bottom:80px}
.hg{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
h1{font-size:clamp(2.8rem,7.4vw,6.4rem);font-weight:700}
.w{display:inline-block;opacity:0;transform:translateY(46px);animation:up .85s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*.08s + .1s)}
@keyframes up{to{opacity:1;transform:none}}
.fi{opacity:0;animation:up .9s forwards}
.hp{max-width:52ch;margin:28px 0 32px;color:#4a4b4e}
.hb{display:flex;gap:14px;flex-wrap:wrap}
.art{position:relative;min-height:440px;opacity:0;animation:up 1.1s .5s forwards}
.art img{position:absolute;box-shadow:0 24px 50px rgba(0,0,0,.15)}
.art .a1{width:88%;top:0;right:0}.art .a2{width:46%;bottom:0;left:0;border:8px solid var(--w)}
.art .dot{position:absolute;width:90px;height:90px;border-radius:50%;background:var(--o);bottom:30px;right:6%;z-index:2;display:grid;place-items:center;font:700 .7rem var(--h);text-align:center;line-height:1.2;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.hg{grid-template-columns:1fr}.art{min-height:340px}}
/* stats */
#stats{background:var(--s);padding:60px 0}
.st{display:grid;grid-template-columns:repeat(4,1fr)}
.st div{padding:10px 26px;border-left:1px solid #d9d8d2}.st div:first-child{border:0;padding-left:0}
.st b{display:block;font:700 clamp(1.7rem,3.6vw,3rem) var(--h);letter-spacing:-.03em}.st b span{color:var(--o)}
.st small{color:var(--g);font-size:.9rem}
@media(max-width:800px){.st{grid-template-columns:1fr 1fr;gap:26px 0}.st div:nth-child(3){border:0;padding-left:0}}
/* carousel */
#featured{background:var(--c);color:#fff}#featured .lab{color:var(--g)}
.ch{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.vp{overflow:hidden;touch-action:pan-y;cursor:grab}
.tr{display:flex;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sl{flex:0 0 100%;display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:end;padding-right:1px}
.sl img{width:100%;aspect-ratio:16/10;object-fit:cover;user-select:none;-webkit-user-drag:none}
.sl h3{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:10px 0 14px}.sl p{color:#c9c8c3;max-width:36ch}
.sl .cat{color:var(--o);font:500 .75rem var(--h);letter-spacing:.16em;text-transform:uppercase}
.cc{display:flex;align-items:center;gap:20px}
.cc .n{font:700 1.3rem var(--h)}.cc .n span{color:var(--g)}
.ar{width:52px;height:52px;border:1.5px solid #5a5b5e;background:none;color:#fff;font-size:1.2rem;transition:.3s}.ar:hover{background:var(--o);border-color:var(--o);color:var(--c)}
.th{display:flex;gap:12px;margin-top:34px;overflow-x:auto;padding-bottom:8px}
.th button{flex:0 0 120px;padding:0;border:2px solid transparent;background:none;opacity:.5;transition:.3s}
.th button.on{opacity:1;border-color:var(--o)}.th img{width:100%;aspect-ratio:16/10;object-fit:cover}
@media(max-width:800px){.sl{grid-template-columns:1fr;gap:20px}}
/* work */
.fl{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 40px}
.fl button{padding:10px 18px;border:1.5px solid #d9d8d2;background:none;font:500 .8rem var(--h);transition:.3s}
.fl button:hover{border-color:var(--c)}.fl button.on{background:var(--c);color:#fff;border-color:var(--c)}
.gd{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.cd{cursor:pointer;background:none;border:0;padding:0;text-align:left;transition:opacity .4s,transform .4s;display:block}
.cd.hide{display:none}.cd.fade{opacity:0;transform:scale(.96)}
.im{overflow:hidden;position:relative;background:var(--s)}
.im img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.cd:hover img{transform:scale(1.07)}
.im .ay{position:absolute;right:12px;bottom:12px;width:40px;height:40px;background:var(--o);display:grid;place-items:center;font-weight:700;opacity:0;transform:translate(-8px,8px);transition:.3s}
.cd:hover .ay,.cd:focus-visible .ay{opacity:1;transform:none}
.cd small{display:block;margin-top:12px;color:var(--g);font:500 .7rem var(--h);letter-spacing:.14em;text-transform:uppercase}
.cd h3{font-size:1.2rem;margin-top:2px}
@media(max-width:1000px){.gd{grid-template-columns:1fr 1fr}}@media(max-width:600px){.gd{grid-template-columns:1fr}}
.lb{position:fixed;inset:0;background:rgba(25,26,28,.94);z-index:100;display:none;place-items:center;padding:20px;opacity:0;transition:.35s}
.lb.open{display:grid}.lb.show{opacity:1}
.lb figure{margin:0;max-width:min(980px,100%);transform:scale(.94);transition:.4s;color:#fff}.lb.show figure{transform:none}
.lb img{max-height:70vh;width:auto;max-width:100%;margin:auto}
.lb figcaption{margin-top:14px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lb figcaption b{font:700 1.2rem var(--h)}.lb figcaption span{color:var(--o);font:500 .75rem var(--h);letter-spacing:.14em;text-transform:uppercase}
.lb .ar{position:absolute;top:50%;margin-top:-26px}.lb .pv{left:14px}.lb .nx{right:14px}
.lb .cl{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;width:48px;height:48px;background:var(--o);border:0;font-size:1.3rem}
/* work marquee */
.mq{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:18px;height:clamp(520px,82vh,780px);overflow:hidden;transition:opacity .3s;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.col{display:flex;flex-direction:column;animation:mq var(--t,60s) linear infinite;will-change:transform}
.col.r{animation-direction:reverse}.mq:hover .col{animation-play-state:paused}
@keyframes mq{to{transform:translateY(-50%)}}
.mq .cd{margin-bottom:18px;width:100%}
.mq .cp{position:absolute;inset:auto 0 0;padding:44px 14px 14px;background:linear-gradient(transparent,rgba(25,26,28,.92));color:#fff;display:flex;flex-direction:column;opacity:0;transform:translateY(8px);transition:.3s}
.mq .cp small{color:var(--o);margin:0}.mq .cp b{font:700 1.05rem var(--h)}
.mq .cd:hover .cp,.mq .cd:focus-visible .cp{opacity:1;transform:none}
@media(hover:none){.mq .cp{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mq{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}.col{animation:none!important}.cd[data-d="1"]{display:none}}
/* services */
#services{background:var(--s)}
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d9d8d2;margin-top:50px;border:1px solid #d9d8d2}
.sv{background:var(--s);padding:34px 30px 30px;display:flex;flex-direction:column;gap:14px;transition:.35s;position:relative}
.sv:nth-child(even){background:var(--w)}
.sv:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.1);z-index:2;background:var(--w)}
.sv .t{display:flex;justify-content:space-between;color:var(--g);font:700 .85rem var(--h)}
.sv i{font-style:normal;width:46px;height:46px;border:1.5px solid var(--c);display:grid;place-items:center;font-size:1.2rem;transition:.35s}
.sv:hover i{background:var(--o);border-color:var(--o);transform:rotate(-8deg)}
.sv h3{font-size:1.25rem;line-height:1.15}.sv p{margin:0;color:#4a4b4e;flex:1}
.sv a{font:700 .78rem var(--h);letter-spacing:.1em;text-transform:uppercase}.sv a span{display:inline-block;transition:.3s;color:var(--o)}.sv:hover a span{transform:translateX(8px)}
@media(max-width:1000px){.sg{grid-template-columns:1fr 1fr}}@media(max-width:600px){.sg{grid-template-columns:1fr}}
/* about */
.ab{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.pf{position:relative}.pf img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pf::after{content:"";position:absolute;inset:20px -20px -20px 20px;border:2px solid var(--o);z-index:-1}
.ab p{color:#3a3b3e;margin:0 0 16px}.ab h2{margin-bottom:26px;max-width:12ch}
.tg{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.tg span{padding:8px 14px;background:var(--s);font:500 .78rem var(--h)}
@media(max-width:900px){.ab{grid-template-columns:1fr;gap:50px}.pf{max-width:420px}}
/* timeline */
#experience{background:var(--s)}
.tl{margin-top:50px;position:relative;padding-left:40px;max-width:900px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:0;width:2px;background:#d9d8d2}
.ti{position:relative;padding-bottom:50px}
.ti::before{content:"";position:absolute;left:-40px;top:8px;width:16px;height:16px;border-radius:50%;background:var(--w);border:3px solid var(--o)}
.ti h3{font-size:1.6rem}.ti .r{color:var(--o);font:500 .75rem var(--h);letter-spacing:.14em;text-transform:uppercase}
.ti p{color:#4a4b4e;margin:8px 0 0;max-width:60ch}
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}.pg img{aspect-ratio:16/9;object-fit:cover;width:100%}
.pg img:nth-child(1){grid-column:span 2;grid-row:span 2;height:100%}
/* skills */
.kg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}
.kl{border:1.5px solid #e6e5e0;padding:24px;text-align:left;background:var(--w);transition:.3s}
.kl:hover{border-color:var(--o);transform:translateY(-4px)}
.kl b{display:grid;place-items:center;width:54px;height:54px;background:var(--c);color:var(--o);font:700 1.1rem var(--h);transition:.4s}.kl:hover b{transform:rotate(-10deg) scale(1.08)}
.kl h3{font-size:1.05rem;margin:18px 0 0}
.kl p{margin:0;max-height:0;overflow:hidden;color:var(--g);font-size:.9rem;transition:.4s}.kl:hover p,.kl:focus-visible p,.kl.op p{max-height:60px;margin-top:6px}
@media(max-width:900px){.kg{grid-template-columns:1fr 1fr}}@media(max-width:480px){.kg{grid-template-columns:1fr}}
/* process */
#process{background:var(--s)}
.pr{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:2px solid var(--c)}
.pr div{padding:26px 26px 0 0}.pr div+div{padding-left:26px;border-left:1px solid #d9d8d2}
.pr b{display:block;font:700 clamp(3rem,6vw,5rem) var(--h);color:var(--o);line-height:1;letter-spacing:-.04em}
.pr h3{font-size:1.2rem;margin:14px 0 8px}.pr p{margin:0;color:#4a4b4e;font-size:.95rem}
@media(max-width:800px){.pr{grid-template-columns:1fr;border-top:0}.pr div,.pr div+div{padding:24px 0;border-left:0;border-top:1px solid #d9d8d2}}
/* contact */
#contact{background:var(--c);color:#fff;position:relative;overflow:hidden}
#contact::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,113,61,.16),transparent 65%);top:-160px;right:-120px;animation:fl 14s ease-in-out infinite alternate}
@keyframes fl{to{transform:translate(-80px,90px)}}
#contact .wrap{position:relative}#contact h2{color:#f5f5f2;max-width:16ch;font-size:clamp(2.3rem,6vw,5rem)}
.cg{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:40px}
.cg>div>p{color:#c9c8c3;max-width:42ch}
.ci{display:grid;gap:12px;margin-top:30px}
.ci a{display:flex;justify-content:space-between;gap:14px;border:1px solid #3a3b3e;padding:16px 20px;color:#f5f5f2;transition:.3s;word-break:break-word}
.ci a:hover{border-color:var(--o);transform:translateX(6px)}.ci small{color:var(--g);display:block;font:500 .7rem var(--h);letter-spacing:.14em;text-transform:uppercase}
form{display:grid;gap:18px}label{font:500 .75rem var(--h);letter-spacing:.14em;text-transform:uppercase;color:var(--g)}
input,textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid #5a5b5e;color:#f5f5f2;font:1rem var(--b);padding:10px 0 12px;border-radius:0;transition:.3s}
input:focus,textarea:focus{outline:0;border-color:var(--o)}textarea{resize:vertical;min-height:110px}
.er{color:var(--o);font-size:.8rem;min-height:1em;display:block}.fb{display:flex;gap:12px;flex-wrap:wrap}
#contact .btn:not(.p){border-color:#f5f5f2;color:#f5f5f2}#contact .btn:not(.p):hover{background:#f5f5f2;color:var(--c)}
#contact .btn.p:hover{background:#f5f5f2;border-color:#f5f5f2;color:var(--c)}
.note{color:var(--g);font-size:.82rem;margin:0}
@media(max-width:900px){.cg{grid-template-columns:1fr;gap:50px}}
footer{background:var(--c);color:#c9c8c3;border-top:1px solid #2e2f32;padding:60px 0 30px}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer h4{margin:0 0 14px;color:#fff;font:500 .75rem var(--h);letter-spacing:.16em;text-transform:uppercase}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}footer a:hover{color:var(--o)}
footer .logo{color:#fff;font-size:1.4rem}footer p{max-width:32ch;margin:10px 0 0}
.fb2{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid #2e2f32;font-size:.85rem}
.tp{width:48px;height:48px;background:var(--o);border:0;font-size:1.2rem;font-weight:700;transition:.3s}.tp:hover{transform:translateY(-4px);background:#fff}
@media(max-width:700px){.fg{grid-template-columns:1fr 1fr}.fg>div:first-child{grid-column:span 2}}
/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0)*90ms)}
.rv.in{opacity:1;transform:none}.sv.rv.in:hover{transform:translateY(-6px)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.w,.fi,.art,.rv{opacity:1!important;transform:none!important}}