@font-face{font-family:Nunito Sans;src:url('images/fonts/NunitoSans-Variable.ttf') format('truetype');font-style:normal;font-weight:200 1000;font-display:swap}
@font-face{font-family:Fredoka;src:url('images/fonts/Fredoka-Variable.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{min-width:320px;background:#cce7f4;color-scheme:light;scrollbar-width:none}
body{margin:0;min-width:320px;min-height:100dvh;overflow-x:hidden;background:#cce7f4;color:#073248;font-family:'Nunito Sans',Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::-webkit-scrollbar{width:0;height:0}
.section{position:relative;height:420vh;background:#f4efe7;color:#172533}
.sticky{position:sticky;top:0;height:100dvh;min-height:560px;display:grid;grid-template-columns:minmax(0,58%) minmax(320px,42%);overflow:hidden}
.visual{position:relative;min-width:0;background:#d9eaf1 url('images/hero/ezgif-frame-001.jpg') center/cover no-repeat;overflow:hidden}
.canvas{display:block;width:100%;height:100%;opacity:0}
.fallbackImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visualShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,24,38,.05),rgba(7,24,38,.2));pointer-events:none}
.panel{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:clamp(28px,5vw,76px) clamp(24px,5vw,72px);border-left:1px solid rgba(23,37,51,.15)}
.panelTop{display:flex;justify-content:space-between;gap:14px;color:#697580;font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.panelTop span:first-child{color:#172533;font-family:Fredoka,sans-serif;font-size:22px;letter-spacing:-.02em;text-transform:none}
.projectStack{position:relative;flex:1;display:grid;align-items:center;min-height:0}
.project{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity 80ms linear,transform 80ms linear}
.project[aria-hidden="false"]{pointer-events:auto}
.number{margin:0 0 14px;color:var(--accent);font-size:16px;font-weight:800;letter-spacing:.05em}
.number span{color:#9aa3a8;font-weight:500}
.category{margin:0 0 20px;color:#697580;font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.project h1,.project h2{max-width:9ch;margin:0 0 24px;font-family:Fredoka,sans-serif;font-size:clamp(2.7rem,5vw,5.8rem);font-weight:500;line-height:.95;letter-spacing:-.055em}
.description{max-width:34ch;margin:0;color:#53616b;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.55}
.technologies{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.technologies li{padding:8px 12px;border:1px solid rgba(23,37,51,.2);border-radius:999px;color:#53616b;font-size:11px}
.progress{width:100%;height:3px;background:rgba(23,37,51,.16)}
.progress span{display:block;width:8%;height:100%;background:#d99048;transform-origin:left}
.footerNote{margin:18px 0 0;color:#697580;font-size:11px}
.customScrollbar{position:absolute;z-index:5;top:17%;right:max(.8rem,env(safe-area-inset-right));width:1.6rem;height:66%;pointer-events:none}
.scrollbarTrack{position:absolute;top:0;right:50%;bottom:0;width:.3rem;translate:50% 0;border:1px solid rgba(23,37,51,.35);border-radius:999px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 .3rem rgba(23,37,51,.13)}
.scrollbarTrack::before{position:absolute;inset:.2rem 50%;width:.08rem;border-radius:inherit;background:linear-gradient(180deg,#f4c56b,#d99048 52%,#b65e2e);content:"";translate:-50% 0}
.scrollbarThumb{position:absolute;top:0;left:50%;width:1.25rem;height:1.05rem;translate:-50% -50%;border:2px solid #172533;border-radius:70% 70% 38% 38%;background:#d99048;box-shadow:0 .2rem .45rem rgba(23,37,51,.25),inset 0 .12rem .18rem rgba(255,255,255,.5);transition:top 80ms linear}
.scrollbarThumb::before{position:absolute;right:.08rem;bottom:-.23rem;left:.08rem;height:.24rem;border:2px solid #172533;border-top:0;border-radius:0 0 999px 999px;background:#f4c56b;content:""}
.thumbStripe{position:absolute;top:.37rem;left:.12rem;width:.83rem;height:.12rem;border-radius:999px;background:#fff4df}
@media(max-width:800px){.section{height:500vh}.sticky{grid-template-columns:1fr;grid-template-rows:50% 50%;min-height:640px}.panel{padding:24px;border-top:1px solid rgba(23,37,51,.15);border-left:0}.panelTop span:first-child{font-size:19px}.project h1,.project h2{max-width:12ch;font-size:clamp(2.3rem,10vw,4rem)}.description{max-width:44ch;font-size:.95rem}.technologies{margin-top:18px}.customScrollbar{right:.42rem;width:1.45rem}.footerNote{display:none}}
@media(max-height:700px){.sticky{min-height:0}.panel{overflow-y:auto;justify-content:flex-start}.projectStack{flex:0 0 auto;min-height:max-content;margin:20px 0}.progress{flex:0 0 auto}}
@media(prefers-reduced-motion:reduce){.section{height:auto}.sticky{position:relative;height:auto;min-height:100dvh}.projectStack{display:block;padding:48px 0}.project{opacity:1!important;transform:none!important;position:relative;margin-bottom:64px;pointer-events:auto!important}.project:last-child{margin-bottom:0}.visual{min-height:48dvh}.customScrollbar,.progress{display:none}}