@import "reset.css";:root{--fg:#000;--primary:#8C2312;--secondary:#FFFBCD;--accent:#F6B23B;--bdr:rgba(246, 178, 59, .3);--font-display:"Bodoni Moda", serif;--font-body:"Montserrat", sans-serif;--font-mono:"Google Sans Code", monospace;--ratio-lg:1.618;--ratio-sm:1.3;--text-xxs:calc(var(--text-xs) / var(--ratio-sm));--text-xs:calc(var(--text-sm) / var(--ratio-sm));--text-sm:calc(var(--text-base) / var(--ratio-sm));--text-base:clamp(8px, 12px + 0.4vw, 18px);--text-lg:calc(var(--text-base) * var(--ratio-lg));--text-xl:calc(var(--text-lg) * var(--ratio-lg));--text-2xl:calc(var(--text-xl) * var(--ratio-lg));--wght-sb:550;--text-stroke:clamp(1px, calc(0.75px + (100vw - 320px) / 448), 2.25px) var(--fg);--gap:clamp(1.5rem, 2.5rem + 0.4vw, 3.5rem);--max:1400px;--anim-time:.25s;--success-color:oklch(0.627 0.194 149.214 / .4);--warning-color:oklch(0.705 0.213 47.604 / .4);--info-color:oklch(0.546 0.245 262.881 / .4);--error-color:oklch(0.577 0.245 27.325 / .4);--background-color:oklch(1 0 0);--fill-color:oklch(1 0 0);--border-color:oklch(95.514% 0.00011 271.152);--stroke-color:var(--secondary);--stroke-color-foreground:var(--secondary);--btn-text-color-primary:var(--secondary);--btn-text-color-primary-foreground:var(--secondary);--btn-text-color-secondary:var(--secondary);--btn-text-color-secondary-foreground:var(--secondary)}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;font-size:var(--text-base)}body{background:var(--primary);color:var(--fg);font-family:var(--font-body);overflow-x:hidden;cursor:none}h1{font-family:var(--font-display);font-size:var(--text-2xl)}h2{font-size:var(--text-xl)}h3{font-size:var(--text-lg)}h4{font-size:var(--text-base)}.str{-webkit-text-stroke:var(--text-stroke);color:transparent}.sec-lbl,.stat-l,.tag,.hero-eye,.wi-cat,.scroll-cue span,nav ul a,.btn,.btn-g,footer p,footer ul a,.lib-tabs [role=tab],.lib-item--placeholder span{font-family:var(--font-mono);text-transform:uppercase}#cur,#ring{position:fixed;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}#cur{width:7px;height:7px;background:var(--accent);z-index:9999;transition:width var(--anim-time),height var(--anim-time)}#ring{width:34px;height:34px;border:1px solid rgba(246,178,59,.4);z-index:9998;transition:width var(--anim-time),height var(--anim-time)}.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gap)}.sec-lbl{font-size:var(--text-xs);letter-spacing:.3em;color:var(--accent);margin-bottom:14px}.sec{padding:120px 0}.btn{--btn-border-and-shadow:var(--primary);--btn-text-color:var(--primary);--btn-letter-spacing:2px;--btn-font-weight:normal;all:unset;display:inline-flex;color:var(--btn-text-color);font-weight:var(--btn-font-weight);letter-spacing:var(--btn-letter-spacing);text-decoration:none;border:1px solid var(--btn-border-and-shadow);transition:color var(--anim-time)ease-in-out,box-shadow var(--anim-time)ease-in-out;cursor:pointer;&:hover{box-shadow:4px 4px 0 0 var(--btn-border-and-shadow)}&:active{box-shadow:4px 4px 0 0 var(--btn-border-and-shadow)inset}}.btn-f{--btn-border-and-shadow:var(--secondary);--btn-text-color:var(--secondary);--font-weight:var(--wght-sb);padding:14px 28px;&:hover{--btn-border-and-shadow:var(--accent);--btn-text-color:var(--accent)}}.btn-g{letter-spacing:.2em;text-decoration:none;display:flex;align-items:center;gap:8px;transition:color var(--anim-time);font-size:var(--text-sm);color:var(--secondary);&:hover{color:var(--accent);& .arr{width:44px}}& .arr{width:28px;height:1px;background:currentColor;position:relative;transition:width var(--anim-time);&::after{content:'';position:absolute;right:0;top:-3px;width:6px;height:6px;border-right:1px solid;border-top:1px solid;transform:rotate(45deg)}}}.nav-blur{--layers:10;--height:6rem;--max-blur:1.5rem;--top:0;position:fixed;top:var(--top);left:0;right:0;height:var(--height);width:100%;z-index:99;pointer-events:none;overflow:hidden;& .nb-inner{position:relative;width:100%;height:100%}& .nb-layer{position:absolute;inset:0;--step:10%;--s:calc(var(--i) * var(--step));--blur:calc(var(--max-blur) * pow(1.32, var(--i)) / pow(1.32, 9));backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));mask-image:linear-gradient(to top,transparent var(--s),#fff calc(var(--s) + var(--step)),#fff calc(var(--s) + calc(var(--step) * 2)),transparent calc(var(--s) + calc(var(--step) * 3)));-webkit-mask-image:linear-gradient(to top,transparent var(--s),#fff calc(var(--s) + var(--step)),#fff calc(var(--s) + calc(var(--step) * 2)),transparent calc(var(--s) + calc(var(--step) * 3)));&.nb-1{--i:0}&.nb-2{--i:1}&.nb-3{--i:2}&.nb-4{--i:3}&.nb-5{--i:4}&.nb-6{--i:5}&.nb-7{--i:6}&.nb-8{--i:7}&.nb-9{--i:8}&.nb-10{--i:9}}}.nav-invert{mix-blend-mode:difference;& #nav-logo{filter:invert(1)}&.scrolled{mix-blend-mode:normal;& #nav-logo{filter:none}& ul a{color:var(--fg);&:hover{color:var(--accent)}}& .nav-btn{--color:var(--accent);--btn-text-color:var(--color);--btn-border-and-shadow:var(--color);& img{filter:none}}}& ul a{color:#fff}& .nav-btn{--btn-border-and-shadow:white;--btn-text-color:white;& img{filter:brightness(100)grayscale(100)}}}nav{position:fixed;inset:0 0 auto;z-index:100;padding:13px var(--gap);display:flex;align-items:center;justify-content:space-between;transition:background var(--anim-time)ease,backdrop-filter var(--anim-time)ease;& #nav-logo{height:3rem}& #nav-logo-btn{height:var(--text-base)}& ul{display:flex;gap:36px;list-style:none;& li{& a{font-size:var(--text-sm);font-weight:100;letter-spacing:1px;text-decoration:none;color:var(--fg);transition:color var(--anim-time);&:hover{color:var(--accent)}}}}& .nav-btn{--color:var(--accent);--btn-border-and-shadow:var(--color);--btn-text-color:var(--color);padding:9px 18px;&:hover{color:var(--color)}}}#hero{height:100vh;min-height:680px;display:flex;align-items:center;position:relative;overflow:hidden;& video{position:absolute;top:50%;left:50%;max-width:none;transform:translate(-50%,-50%);z-index:-10}& .hero-eye{position:absolute;bottom:0;right:0;font-size:var(--text-xxs);letter-spacing:.28em;color:var(--accent);opacity:0;animation:up .8s .2s forwards}& .hero-inner{margin:0 auto;margin-top:18rem;padding:0 var(--gap);text-align:center;pointer-events:none;& h1{opacity:0;animation:up .8s .4s forwards;& .gld{color:var(--accent)}}& p{display:inline-block;margin-top:28px;max-width:380px;opacity:0;animation:up .8s .6s forwards}& .hero-btns{margin-top:44px;display:flex;align-items:center;justify-content:center;gap:28px;opacity:0;animation:up .8s .8s forwards;pointer-events:all}}& .scroll-cue{background:linear-gradient(to top,var(--accent),transparent);width:2px;height:calc(var(--gap)/var(--ratio-lg));position:absolute;bottom:18px;left:50%;transform:translateX(-50%);opacity:.618;font-size:var(--text-xs);display:flex;flex-direction:column;align-items:center;gap:10px;animation:bounce 2s ease-in-out infinite;z-index:10}}.ticker{background:var(--accent);overflow:hidden;padding:11px 0;font-size:var(--text-sm);& ul{display:flex;white-space:nowrap;gap:var(--gap);animation:tick 22s linear infinite;& li{font-family:var(--font-display);letter-spacing:.12em;color:var(--primary);&::marker{content:"●\a0\a0\a0\a0";opacity:10%}}}}#about{content-visibility:auto;contain-intrinsic-size:auto none auto 600px;background:var(--secondary);& .about-grid{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:center;& > *{flex:1 1}}& h2 + p{margin-top:calc(var(--gap)/var(--ratio-lg))}& .stats-row{display:flex;flex-wrap:wrap;gap:1px;margin-top:56px;background:var(--bdr);border:1px solid var(--bdr);& .stat{flex:1 0;min-inline-size:140px;background:var(--secondary);padding:28px 24px;& .stat-n{font-family:var(--font-display);font-size:var(--text-xl);color:var(--primary)}& .stat-l{letter-spacing:.2em;margin-top:6px}}}& img{--aspect-ratio:4/5;width:100%;aspect-ratio:var(--aspect-ratio);background:var(--primary);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;object-fit:cover}}#services{content-visibility:auto;contain-intrinsic-size:auto none auto 700px;background:var(--primary);& .srv-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:56px;gap:40px;& > p{max-width:320px;text-align:justify}}& .srv-grid{contain:layout style paint;display:flex;flex-wrap:wrap;gap:1px;background:var(--bdr);border:1px solid var(--bdr);& .srv-card{flex:1 1 calc(33.33% - 1px);background:var(--primary);padding:44px 36px;position:relative;overflow:hidden;cursor:none;transition:background var(--anim-time);&::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(246,178,59,8%) 0%,transparent 55%);opacity:0;transition:opacity var(--anim-time);pointer-events:none}&:hover{&::after{opacity:1}& .srv-icon{opacity:1}& h3{color:var(--accent)}& .tag{border-color:rgba(246,178,59,.55)}}& .srv-icon{width:40px;height:40px;margin-bottom:20px;opacity:.6;transition:opacity var(--anim-time)}& h3{margin-bottom:12px;transition:color var(--anim-time)}& .tags{margin-top:28px;font-size:var(--text-xxs);display:flex;flex-wrap:wrap;gap:calc(var(--gap)/4);& .tag{--tag-color:color-mix(in srgb, var(--accent) 80%, transparent);letter-spacing:.14em;color:var(--tag-color);border:1px solid var(--tag-color);padding:4px 9px;transition:border-color var(--anim-time)}}}}}#work{content-visibility:auto;contain-intrinsic-size:auto none auto 700px;background:var(--secondary);& .work-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:56px}& .work-grid{contain:layout style paint;display:flex;flex-wrap:wrap;gap:1px;background:var(--bdr);border:1px solid var(--bdr);& .wi{position:relative;overflow:hidden;cursor:none;background:var(--secondary);min-height:300px;&:nth-child(1){flex:1 1 calc(58.33% - 1px)}&:nth-child(2){flex:1 1 calc(41.67% - 1px)}&:nth-child(3){flex:1 1 calc(41.67% - 1px)}&:nth-child(4){flex:1 1 calc(58.33% - 1px)}&::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--primary) 0%,transparent 30%);opacity:0;transition:opacity var(--anim-time)ease-in-out;z-index:0;pointer-events:none}&:hover{&::before{opacity:.35}& .wi-info{transform:translateY(0)}}& video{z-index:-3;object-fit:cover;aspect-ratio:5/2.5;&.bw{transition:filter var(--anim-time)ease-in-out;filter:saturate(10%)contrast(110%)}}& .wi-info{--pos:20px;--spacing:4px;position:absolute;bottom:var(--pos);left:var(--pos);transform:translateY(6px);transition:transform var(--anim-time);mix-blend-mode:difference;& .wi-cat{display:block;color:#fff;margin-bottom:4px;letter-spacing:calc(var(--spacing)/2);font-family:var(--font-display);font-size:var(--text-xs)}& .wi-title{color:#fff;font-size:var(--text-lg);font-weight:thin;word-spacing:calc(var(--spacing) * 2);letter-spacing:var(--spacing)}}}}}#process{content-visibility:auto;contain-intrinsic-size:auto none auto 500px;--opacity:.5;background:var(--primary);& .proc-grid{list-style:none;display:flex;flex-wrap:wrap;gap:1px;background:var(--bdr);border:1px solid var(--bdr);margin-top:56px;& .proc-step{flex:1 1 calc(25% - 1px);background:var(--primary);padding:40px 32px;position:relative;&::before{content:'';position:absolute;top:0;left:0;width:0;height:2px;background:var(--accent);transition:width calc(var(--anim-time) * 2)ease}&:hover{--opacity:1;&::before{width:100%}}& .proc-n{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--accent);opacity:var(--opacity);margin-bottom:20px}& h3{margin-bottom:10px}}}}#contact{--font:var(--text-base);background:var(--secondary);text-align:center;position:relative;padding:calc(var(--gap) * 5)0;& h2{font-family:var(--font-display);font-size:var(--text-2xl)}& .sec-lbl{margin-bottom:var(--gap)}& #copy-email{width:max-content;margin:auto;padding-bottom:var(--gap);display:flex;align-items:center;gap:var(--gap);font-weight:var(--wght-sb);& button{--btn-text-color:var(--primary);--btn-letter-spacing:1px;padding:calc(var(--gap)/var(--ratio-lg));justify-content:center;align-self:stretch;display:flex;align-items:center;text-transform:uppercase;user-select:none}}& .wechitra-img{display:inline-block;margin-top:.45rem;margin-bottom:var(--gap);height:var(--text-2xl)}& .contact-btn{--btn-border-and-shadow:var(--accent);--btn-text-color:var(--secondary);--btn-font-weight:var(--wght-sb);background:var(--primary);font-size:var(--text-lg);display:block;max-width:280px;padding:calc(var(--gap)/var(--ratio-sm));margin:0 auto var(--gap)}& iframe{width:50%}&.page{--contact-page-padding:calc(var(--gap) * 3) 0;padding:var(--contact-page-padding);padding-bottom:var(--gap)}& .contact-body{width:100%;max-width:var(--max);margin:auto;gap:calc(var(--gap) * 2);display:flex;flex-direction:column;justify-content:space-evenly;height:100%;& .contact-cols{display:flex;gap:calc(var(--gap) * 2);& .contact-left{flex:1;& .contact-text{padding-bottom:var(--gap)}& ul{list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--gap);& li{flex:1;min-width:80px;& a{display:flex;& img{width:2.5rem;margin:var(--gap)auto}}}}& #copy-email > button{--btn-border-and-shadow:var(--accent);background:var(--primary);color:var(--secondary)}}}& iframe{height:20rem;width:100%}}}footer{font-size:var(--text-sm);border-top:1px solid var(--bdr);padding:24px;display:flex;align-items:center;justify-content:space-between;& img{width:50px;aspect-ratio:5/2}& p, & ul a{letter-spacing:.15em;color:var(--fg)}& ul{display:flex;flex-wrap:wrap;align-items:center;gap:28px;list-style:none;& li{flex:1}& a{text-decoration:none;transition:color var(--anim-time);&:hover{color:var(--accent)}}}}@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}.reveal{opacity:0;transform:translateY(36px);transition:opacity calc(var(--anim-time) * 3)ease,transform calc(var(--anim-time) * 3)ease;&.vis{opacity:1;transform:translateY(0)}}#library{& .lib-hdr{margin-bottom:52px;& h1{margin-top:8px}}& .lib-tabs{position:relative;display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--bdr);margin-bottom:40px;&::-webkit-scrollbar{display:none}& [role=tab]{all:unset;font-size:var(--text-sm);letter-spacing:.105em;color:var(--secondary);padding:14px 20px;white-space:nowrap;cursor:pointer;transition:color var(--anim-time);flex-shrink:0;&:hover, &[aria-selected=true]{color:var(--accent)}&:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}}& .lib-tab-indicator{position:absolute;bottom:-1px;height:2px;background:var(--accent);pointer-events:none;transition:left .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1)}}& [role=tabpanel][hidden]{display:none}& .lib-grid{columns:3;column-gap:1px}& .lib-item{break-inside:avoid;margin:0 0 1px;overflow:hidden;position:relative;background:rgba(0,0,0,6%);display:block;font-size:var(--text-xs);& img, & video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease,filter .4s ease;filter:brightness(.88)saturate(.9)}&::after{content:'';position:absolute;inset:0;background:0 0;mix-blend-mode:multiply;pointer-events:none;transition:background .4s}&:hover{& img, & video{transform:scale(1.04);filter:brightness(1)saturate(1.1)}&::after{background:color-mix(in srgb,var(--accent) 14%,transparent)}}}& .lib-item--placeholder{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border:1px dashed var(--bdr);background:0 0;& span{letter-spacing:.15em}}}@media(max-height:1000px){#hero .scroll-cue{display:none}}@media(max-width:900px){body{cursor:auto}#hero .scroll-cue{display:none}#cur,#ring{display:none}.sec{padding:80px 0}nav{padding:16px var(--gap);& ul{display:none}}#about{& .about-grid{flex-direction:column;gap:var(--gap)}& img{--aspect-ratio:3/1}& .stats-row .stat{flex:1 1 calc(33.33% - 1px)}}#library .lib-grid{columns:2}#services .srv-grid .srv-card{flex:1 1 calc(50% - 1px)}#process .proc-grid .proc-step{flex:1 1 calc(50% - 1px)}#work .work-grid .wi{flex:1 1 100%!important;min-height:220px}#contact iframe{width:80%}footer{flex-direction:column;gap:20px;text-align:center;& img{width:12%}}}@media(max-width:768px){.sec{padding:60px 0}.nav-blur{--height:11rem;--top:-3.2rem}nav{padding:14px var(--gap)}.ticker{& ul{& li{&::marker{content:"●\2002"}}}}#about .stats-row .stat{flex:1 1 calc(50% - 1px)}#services{& .srv-grid .srv-card{flex:1 1 100%}& .srv-hdr{flex-direction:column;align-items:flex-start;gap:16px;& > p{max-width:100%}}}#process .proc-grid .proc-step{flex:1 1 100%}#work{& .work-grid .wi{flex:1 1 100%!important;min-height:180px}& .work-hdr{flex-direction:column;align-items:flex-start;gap:16px}}#contact{& iframe{width:90%}& #copy-email{flex-direction:column}& .contact-cols{flex-direction:column}}footer img{width:20%}}@media(max-width:540px){#library .lib-grid{columns:1}#library .lib-tabs [role=tab]{padding:12px 14px}.ticker{& ul{& li{&::marker{content:"●\a0\a0\2002"}}}}#hero{& .hero-inner{margin-top:28rem}}}