/* =====================================================================
   Harshkumar Narendra — portfolio (Dennis Snellenberg-style system)
   Tokens mirror the reference site's scale; colours = navy + electric blue
   ===================================================================== */
:root{
  --color-dark:#0f1430;        /* ref #1C1D20 */
  --color-dark-dark:#090d22;   /* ref #141517 */
  --color-blue:#2f6bff;        /* ref #455CE9 */
  --color-blue-dark:#1f4bd8;   /* ref #334BD3 */
  --color-gray:#8f99bd;        /* ref #999D9E -> studio slate */
  --color-lightgray:#e9ebf2;
  --color-white:#ffffff;
  --color-border:rgba(15,20,48,.175);
  --color-border-light:rgba(255,255,255,.2);
  --color-text:#0f1430;
  --ease:cubic-bezier(.7,0,.3,1);
  --animation-primary:all .5s var(--ease);
  --animation-fast:all .3s var(--ease);
  --animation-smooth:all .7s var(--ease);
  --section-padding:clamp(5em,21vh,12em);
  --container-padding:clamp(2.5em,8vw,8em);
  --gap-padding:clamp(1.5em,4vw,2.5em);
  --font:'Inter Tight',system-ui,sans-serif;
  --script:'Mrs Saint Delafield',cursive;
}
@media (max-width:720px){:root{--color-border:rgba(15,20,48,.225);--color-border-light:rgba(255,255,255,.225);--container-padding:clamp(1.25em,4vw,2.5em);--section-padding:max(2.5em,12vh)}}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;width:100%;background:var(--color-dark);-webkit-font-smoothing:antialiased}
html{overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{font-family:var(--font);color:var(--color-text);line-height:1.6;font-weight:450;font-size:clamp(16px,1.2vw,19px);overflow-x:hidden}
h1,h2,h3,h4,h5,p,a,li,ul,span{margin:0;padding:0;font-weight:450;letter-spacing:normal}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width:100%}
h1{font-size:calc(clamp(3.25em,7vw,8em)*.875);line-height:1.065;margin-bottom:1em;letter-spacing:-.02em}
h2{font-size:calc(clamp(3.25em,5vw,4.5em)*.75);line-height:1.065;margin-bottom:.66em}
h4{font-size:clamp(1.55em,2.3vw,2.5em);line-height:1.45;margin-bottom:1em;letter-spacing:-.01em}
h5{font-size:.6em;line-height:1.065;margin-bottom:1em;text-transform:uppercase;letter-spacing:.05em;opacity:.5}
.theme-dark,.theme-dark h1,.theme-dark h2,.theme-dark h4,.theme-dark h5,.theme-dark p{color:var(--color-white)}
.section{position:relative;display:block;padding:var(--section-padding) 0}
.container{margin:0 auto;padding:0 var(--container-padding);max-width:100em}
.container.medium{padding:0 calc(var(--container-padding)*2)}
@media (max-width:720px){.container.medium{padding:0 var(--container-padding)}}
.row{display:flex;flex-wrap:wrap}
.flex-col{position:relative}
.stripe{display:block;width:100%;height:1px;background:var(--color-border)}
.theme-dark .stripe{background:var(--color-border-light)}
.overlay{position:absolute;inset:0}
.no-select{user-select:none}

/* ---------------- Loader / page transition ---------------- */
.loading-container{position:fixed;inset:0;z-index:900;pointer-events:none}
.loading-screen{position:relative;width:100%;height:100%;top:0;background:var(--color-dark-dark);will-change:top}
.rounded-div-wrap{position:absolute;left:0;width:100%;height:0;overflow:hidden;will-change:height}
.rounded-div{position:absolute;left:50%;bottom:0;width:150%;height:745%;border-radius:50%;transform:translateX(-50%);background:var(--color-dark-dark)}
.loading-screen .rounded-div-wrap.top{top:0;transform:translateY(-99%) scale(1,-1)}
.loading-screen .rounded-div-wrap.bottom{bottom:0;transform:translateY(99%);height:10vh}
.loading-words{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;color:#fff;white-space:nowrap}
.loading-words h2{position:relative;margin:0;padding-left:.6em;font-size:calc(clamp(3.25em,5vw,4.5em)*.75);color:#fff}
.loading-words .dot{position:absolute;left:0;top:42%;width:calc(clamp(16px,1.2vw,19px)/1.65);height:calc(clamp(16px,1.2vw,19px)/1.65);border-radius:50%;background:#fff}
.signature{width:min(820px,86vw);height:auto;overflow:visible;display:block}
.signature text{font-family:var(--script);font-size:128px;fill:transparent;stroke:#fff;stroke-width:1.3;stroke-dasharray:1600;stroke-dashoffset:1600}
html.is-loading,html.is-loading *{cursor:wait!important}

/* ---------------- Buttons (btn-click / btn-fill / magnetic) ---------------- */
.btn{position:relative;display:inline-block}
.btn-click{position:relative;display:flex;align-items:center;justify-content:center;height:4.25em;min-width:1em;padding:0;border:0;border-radius:2.125em;
  background:transparent;color:var(--color-dark);font:inherit;cursor:pointer;overflow:hidden;will-change:transform;transform:translateZ(0) rotate(.001deg)}
.btn-fill{position:absolute;width:150%;height:200%;top:-50%;left:-25%;border-radius:50%;background:var(--color-blue);transform:translate3d(0,-76%,0);will-change:transform;transition:background-color .25s ease-in-out}
.btn-text{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0 2.5em;color:var(--color-dark);pointer-events:none;will-change:transform,color;white-space:nowrap}
.btn-normal .btn-click{box-shadow:inset 0 0 0 1px var(--color-border)}
.theme-dark .btn-normal .btn-click{box-shadow:inset 0 0 0 1px var(--color-border-light)}
.theme-dark .btn-normal .btn-text-inner{color:#fff!important}
.btn-normal.active .btn-fill{transform:translate3d(0,0,0)!important;background-color:var(--color-dark)}
.btn-normal.active .btn-text-inner{color:#fff!important}
.count-nr{position:absolute;display:inline-block;width:0;margin-left:.25em;font-size:.7em;opacity:.6;transform:translate(20%,-15%)}
.btn-round .btn-click{width:clamp(9em,12vw,11em);height:clamp(9em,12vw,11em);border-radius:50%;background:var(--color-dark)}
.btn-round .btn-text{padding:0 1em;text-align:center}
.btn-round .btn-text-inner{color:#fff}
.theme-dark .btn-round .btn-click{background:var(--color-blue)}
.theme-dark .btn-round .btn-fill{background:var(--color-blue-dark)}
/* text links with dot */
.btn-link .btn-click{height:2.75em;border-radius:0;overflow:visible}
.btn-link .btn-text{padding:0 calc(var(--gap-padding)/2)}
.btn-link .btn-click::after{content:"";position:absolute;bottom:-.5em;left:50%;width:calc(clamp(16px,1.2vw,19px)/2.75);height:calc(clamp(16px,1.2vw,19px)/2.75);border-radius:50%;
  background:var(--color-dark);transform:translate(-50%,-50%) scale(0) rotate(.001deg);transition:var(--animation-fast)}
.btn-link.active .btn-click::after,.btn-link .btn-click:hover::after{transform:translate(-50%,-50%) scale(1) rotate(.001deg)}
.links-wrap{display:flex}
.links-wrap:hover .btn-link .btn-click::after{transform:translate(-50%,-50%) scale(0) rotate(.001deg)}
.links-wrap:hover .btn-link .btn-click:hover::after{transform:translate(-50%,-50%) scale(1) rotate(.001deg)}
.theme-dark .btn-link .btn-text{color:#fff}
.theme-dark .btn-link .btn-click::after{background:#fff}
.btn-link-external .btn-click{height:2.25em;margin:0 calc(var(--gap-padding)/3)}
.btn-link-external .btn-text{padding:0}
.btn-link-external .btn-click::after{bottom:0;width:100%;height:1px;border-radius:0;transform:translate(-50%,-50%) scale(0,1) rotate(.001deg)}

/* ---------------- Nav bar + logo ---------------- */
.nav-bar{position:absolute;top:0;left:0;width:100%;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--gap-padding)/1) calc(var(--gap-padding)*.5) calc(var(--gap-padding)/1) calc(var(--gap-padding)*.33)}
.nav-bar .btn-menu{display:none}
.btn-left-top .btn-click::after{display:none}
.btn-left-top .btn-text{padding-left:calc(var(--gap-padding)/2)}
.credit{padding-right:.21em}
.credit span{display:block;transition:var(--animation-primary)}
.btn-left-top:hover .credit span{transform:rotate(360deg)}
.cbd{position:relative;overflow:hidden;display:flex;white-space:nowrap}
.code-by,.first{position:relative;display:inline-block;transition:var(--animation-primary)}
.first{padding-left:.21em;padding-right:.2em}
.last{position:absolute;top:0;left:var(--first-w,2.8em);padding-left:.21em;white-space:nowrap}
.btn-left-top:hover .code-by{transform:translateX(calc(var(--code-w,3.2em) * -1))}
.btn-left-top:hover .first{padding-right:calc(var(--last-w,4.4em) + .2em);transform:translateX(calc(var(--code-w,3.2em) * -1))}
@media (max-width:720px){
  .nav-bar .links-wrap li{display:none}
  .nav-bar .links-wrap li.btn-menu{display:block}
  .nav-bar .btn-menu .btn-click::after{left:0;bottom:50%;transform:translate(-50%,50%) scale(1)}
}

/* ---------------- Hamburger + side nav ---------------- */
.btn-hamburger{position:fixed;top:calc(var(--gap-padding)/1.5);right:calc(var(--gap-padding)/1.5);z-index:105;
  transform:translateY(0) scale(0) rotate(.001deg);transition:transform .4s cubic-bezier(.36,0,.66,0)}
main.scrolled .btn-hamburger,.btn-hamburger.active{transform:translateY(0) scale(1) rotate(.001deg);transition:transform .4s cubic-bezier(.34,1.5,.64,1)}
.btn-hamburger .btn-click,.btn-hamburger .btn-text{width:clamp(4em,5.5vw,5em);height:clamp(4em,5.5vw,5em);border-radius:50%;padding:0}
.btn-hamburger .btn-click{background:var(--color-dark);box-shadow:inset 0 0 0 1px var(--color-border-light),0 0 30px rgba(0,0,0,.25);transition:background-color .25s cubic-bezier(.36,0,.66,0)}
.btn-hamburger.active .btn-click{background:var(--color-blue)}
.btn-bars{position:absolute;width:28%;height:8%}
.btn-bars::before,.btn-bars::after{content:"";position:absolute;left:50%;width:100%;height:1px;background:#fff;transform:translate(-50%,-50%);transition:var(--animation-fast)}
.btn-bars::before{top:0}.btn-bars::after{top:100%}
.btn-hamburger.active .btn-bars::before{top:50%;transform:translate(-50%,-50%) rotate(-45deg)}
.btn-hamburger.active .btn-bars::after{top:50%;transform:translate(-50%,-50%) rotate(45deg)}
.fixed-nav-back{position:fixed;inset:0;z-index:100;opacity:0;pointer-events:none;background:linear-gradient(to right,hsla(228,50%,4%,.3) 40%,hsla(228,50%,4%,1) 80%);transition:opacity .8s cubic-bezier(.7,0,.2,1)}
main.nav-active .fixed-nav-back{opacity:.35;pointer-events:all}
.fixed-nav{position:fixed;right:0;top:0;height:100vh;z-index:101;background:var(--color-dark);transform:translate(calc(100% + 6vw),0) rotate(.001deg);transition:transform .8s cubic-bezier(.7,0,.2,1);will-change:transform}
main.nav-active .fixed-nav{transform:translate(0,0) rotate(.001deg)}
.fixed-nav-rounded{position:absolute;left:1px;top:0;height:100%;transform:translateX(-100%)}
.fixed-nav-rounded .wrap{position:relative;width:6vw;height:100%;overflow:hidden;transition:width .85s cubic-bezier(.7,0,.2,1)}
main.nav-active .fixed-nav-rounded .wrap{width:0}
.fixed-nav-rounded .rd{position:absolute;top:50%;width:775%;height:150%;border-radius:50%;background:var(--color-dark);transform:translate(-6.5%,-50%)}
.fixed-nav-inner{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:15vh 7.5vw 10vh 7.5vw}
.fixed-nav h5{margin-bottom:3em}
.fixed-nav .nav-links{display:flex;flex-direction:column;align-items:flex-start;padding-top:5vh;margin-left:calc(var(--gap-padding)/-2)}
.fixed-nav .nav-links .btn{transform:translate(15vw,0);transition:transform .8s cubic-bezier(.7,0,.2,1)}
main.nav-active .fixed-nav .nav-links .btn{transform:translate(0,0)}
.fixed-nav .nav-links .btn:nth-child(2){transition-delay:.03s}.fixed-nav .nav-links .btn:nth-child(3){transition-delay:.06s}.fixed-nav .nav-links .btn:nth-child(4){transition-delay:.09s}
.fixed-nav .nav-links .btn-click{height:auto}
.fixed-nav .nav-links .btn-text-inner{font-size:calc(clamp(3.25em,5vw,4em)*.875);line-height:1.4}
.fixed-nav .nav-links .btn-click::after{left:calc(var(--gap-padding)/-4);top:50%;bottom:auto;width:calc(clamp(16px,1.2vw,19px)/1.65);height:calc(clamp(16px,1.2vw,19px)/1.65)}
.fixed-nav .socials{margin-left:calc(var(--gap-padding)/-3)}
.fixed-nav .socials ul{display:flex;flex-wrap:wrap}
.fixed-nav .socials h5{padding-left:calc(var(--gap-padding)/3)}
@media (max-width:720px){
  .fixed-nav{width:100%;transform:translate(calc(100% + 20vw),0)}
  .fixed-nav-rounded .wrap{width:20vw}
  .fixed-nav-inner{padding:15vh var(--container-padding) calc(var(--gap-padding)*1.25)}
  .fixed-nav .nav-links .btn-text-inner{font-size:3em;line-height:1.25}
}

/* ---------------- Home header ---------------- */
.home-header{position:relative;min-height:115vh;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(ellipse 70% 80% at 50% 38%,#aeb6d6 0%,#8f99bd 45%,#6b76a0 85%,#5f6a95 100%)}
.personal-image{position:absolute;top:-10%;left:0;width:100%;height:110%}
.figure{position:absolute;left:50%;bottom:0;height:min(96vh,1040px);aspect-ratio:1280/1490;transform:translateX(-50%)}
.figure img,.figure svg{position:absolute;inset:0;width:100%;height:100%}
.figure img{filter:drop-shadow(0 30px 60px rgba(9,13,34,.35))}
.lens-ring{fill:none;stroke:#fff;stroke-width:4}
.lens-tag{font:500 22px var(--font);letter-spacing:4px;fill:#fff}
.get-height{position:absolute;top:0;left:0;width:100%;height:100vh}
.hanger{position:absolute;left:0;top:50%;transform:translateY(-50%);display:inline-block;color:#fff}
.hanger svg{display:block;width:auto;height:6em}
.hanger p{position:absolute;top:50%;transform:translateY(-50%);margin:0;padding-left:var(--gap-padding);padding-right:5em;line-height:1.2;color:#fff}
.hanger p span{display:block}
.hanger .time{font-size:.62em;letter-spacing:.08em;opacity:.7;margin-top:.45em;font-variant-numeric:tabular-nums}
.digital-ball{position:absolute;right:.9em;top:.9em;width:4.2em;height:4.2em}
.globe{position:absolute;top:50%;left:50%;width:2.5em;height:2.5em;font-size:.8em;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden}
.globe-wrap{position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 .125em #fff;transform:translate(-50%,-50%) rotate(30deg);animation:globe 5.4s cubic-bezier(.35,0,.65,1) infinite}
.globe .circle{position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;font-size:.75em;transform:translate(-50%,-50%);box-shadow:inset .1em 0 0 .08em #fff;animation:circle1 2.7s linear infinite}
.globe .circle:nth-child(1){animation-delay:-1.8s}.globe .circle:nth-child(2){animation-delay:-.9s}
.globe .circle-hor{position:absolute;top:50%;left:50%;width:150%;height:55%;border-radius:50%;font-size:.75em;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 .15em #fff}
.globe .circle-hor-middle{position:absolute;top:50%;left:50%;width:150%;height:.15em;font-size:.75em;transform:translate(-50%,-50%);background:#fff}
@keyframes globe{0%,100%{transform:translate(-50%,-50%) rotate(15deg)}50%{transform:translate(-50%,-50%) rotate(-15deg)}}
@keyframes circle1{0%{border-radius:50%;box-shadow:inset .1em 0 0 .08em #fff;width:100%}49%{border-radius:50%;box-shadow:inset .1em 0 0 .08em #fff;background:transparent}50%{border-radius:0;width:.175em;background:#fff}51%{border-radius:50%;box-shadow:inset -.1em 0 0 .08em #fff;background:transparent}100%{border-radius:50%;box-shadow:inset -.1em 0 0 .08em #fff;width:100%}}
.home-header .container{position:relative;width:100%;padding-bottom:15vh}
.home-header .container .row{justify-content:flex-end}
.header-above-h4{position:absolute;top:-12.5vh}
.arrow svg{width:clamp(1.1em,1.3vw,1.25em);height:auto;display:block}
.home-header h4{margin:0;line-height:1.4;color:#fff}
.home-header h4 span{display:block}
.big-name{position:absolute;bottom:15vh;left:0;width:100%;padding-bottom:calc(var(--gap-padding)*1.25);pointer-events:none}
.name-h1{position:relative;display:flex;width:100%}
.name-wrap{position:relative;display:flex;align-items:center}
.big-name h1{display:flex;align-items:center;margin:0;padding:0;color:#fff;line-height:1;font-size:max(9em,15vw);white-space:nowrap;letter-spacing:-.03em}
.big-name .spacer{padding:0 3vw}
.hover-hint{position:absolute;left:var(--gap-padding);top:calc(var(--gap-padding)*3.2);color:#fff;font-size:.6em;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
@media (hover:none){.hover-hint{display:none}}

/* ---------------- One-minute summary: nudge + player ---------------- */
.rush{position:absolute;z-index:6;left:var(--gap-padding);top:calc(var(--gap-padding)*3.2 + 2.6em);display:inline-flex;align-items:center;gap:1em;padding:.55em 1.5em .55em .55em;border:0;border-radius:4em;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--color-border-light);color:#fff;font:inherit;text-align:left;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color .4s var(--ease),box-shadow .4s var(--ease)}
.rush:hover,.rush:focus-visible{background:rgba(255,255,255,.16)}
.rush:focus-visible{outline:2px solid #fff;outline-offset:3px}
.rush-play{display:grid;place-items:center;flex:none;width:2.9em;height:2.9em;border-radius:50%;background:var(--color-blue);transition:transform .5s var(--ease)}
.rush-play svg{width:1.15em;height:1.15em;margin-left:.1em}
.rush:hover .rush-play{transform:scale(1.1)}
.rush-text{display:flex;flex-direction:column;line-height:1.25}
.rush-text small{font-size:.62em;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.rush-text strong{font-weight:450;font-size:.95em}
.rush-text{min-width:0}
@media (max-width:720px){.rush{top:calc(var(--gap-padding)*3.2 + .4em);font-size:.85em;max-width:calc(100% - var(--gap-padding)*2)}}

.video-modal{position:fixed;inset:0;z-index:700;display:grid;place-items:center;padding:var(--gap-padding);opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.video-modal[hidden]{display:none}
.video-modal.open{opacity:1;pointer-events:all}
.video-back{position:absolute;inset:0;background:hsla(228,50%,4%,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.video-shell{position:relative;width:min(100%,calc((100vh - 9em)*16/9),82em);transform:translateY(2.5em) scale(.97);transition:transform .8s var(--ease)}
.video-modal.open .video-shell{transform:none}
.video-shell video{display:block;width:100%;aspect-ratio:16/9;background:var(--color-dark-dark);border-radius:.9em;box-shadow:0 2em 6em rgba(0,0,0,.5)}
.video-close{position:absolute;right:0;bottom:calc(100% + .9em);border:0;background:none;color:#fff;font:inherit;font-size:.8em;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;opacity:.8;padding:.4em 0}
.video-close:hover,.video-close:focus-visible{opacity:1}
.video-close:focus-visible{outline:2px solid #fff;outline-offset:4px}
.video-close span{font-size:1.5em;vertical-align:-.1em;margin-left:.25em}
.video-note{margin-top:1em;color:var(--color-gray);font-size:.7em;text-align:center}
@media (prefers-reduced-motion:reduce){.video-modal,.video-shell{transition:none}}
@media (max-width:720px){
  .home-header{min-height:110vh;align-items:flex-end;padding:calc(var(--gap-padding)*2) 0}
  .big-name{bottom:33vh}
  .home-header .container .row{justify-content:flex-start}
  .home-header .container{padding-bottom:9vh}
  .header-above-h4{top:-8vh}
  .hanger{width:6em;height:6em;left:auto;right:0;top:100vh;transform:translate(0,-110%)}
  .hanger svg,.hanger p{display:none}
  .figure{height:82vh}
}

/* ---------------- Home intro ---------------- */
.home-intro{background:#fff;padding-bottom:calc(var(--section-padding)*.66)}
.home-intro .row .flex-col:nth-child(1){width:70%;padding-right:var(--gap-padding)}
.home-intro .row .flex-col:nth-child(2){width:30%;padding-left:var(--gap-padding)}
.home-intro .flex-col:nth-child(2) p{margin-bottom:6em;padding-top:.5em;max-width:14em}
.home-intro .flex-col:nth-child(2) .btn{position:absolute;top:80%}
.span-line{position:relative;display:inline-flex;overflow:hidden}
.span-line-inner{position:relative;display:block;will-change:transform}
@media (max-width:720px){
  .home-intro .row .flex-col:nth-child(1),.home-intro .row .flex-col:nth-child(2){width:100%;padding:0}
  .home-intro .flex-col:nth-child(2){padding-top:calc(var(--section-padding)/2)!important;display:flex;flex-direction:column;align-items:flex-end}
  .home-intro .flex-col:nth-child(2) p{margin-bottom:calc(var(--section-padding)*.66);max-width:none}
  .home-intro .flex-col:nth-child(2) .btn{top:auto;bottom:0;right:0;transform:translate(-20%,50%)}
}

/* ---------------- Work list + floating preview ---------------- */
.work-grid{background:#fff}
.work-grid h5{margin:0 0 calc(var(--gap-padding)*1.2)}
.work-items li{position:relative}
.work-items a{display:flex;align-items:center;padding:calc(var(--section-padding)/2.2) 0;transition:var(--animation-fast)}
.work-items .flex-col:nth-child(1){width:70%;padding-left:var(--container-padding)}
.work-items .flex-col:nth-child(2){width:30%;padding:0 calc(var(--container-padding)*.5) 0 var(--gap-padding)}
.work-items h4{position:relative;display:block;overflow:hidden;line-height:1;margin:0;font-size:calc(clamp(3.25em,7vw,8em)*.75);letter-spacing:-.03em;transition:var(--animation-fast)}
.work-items h4 span{display:block;padding:.1em 0}
.work-items p{transition:var(--animation-fast)}
.work-items a:hover h4{transform:translateX(calc(var(--container-padding)*-.1))}
.work-items a:hover p{transform:translateX(calc(var(--container-padding)*.1))}
.work-items a:hover{opacity:.33}
.work-list-4 .work-items a{padding:calc(var(--gap-padding)*1.6) 0}
.work-list-4 .work-items .flex-col:nth-child(1){width:44%}
.work-list-4 .work-items .flex-col:nth-child(2){width:20%;padding:0}
.work-list-4 .work-items .flex-col:nth-child(3){width:22%;padding:0}
.work-list-4 .work-items .flex-col:nth-child(4){width:14%;padding-right:var(--container-padding);text-align:right}
.work-list-4 .work-items h4{font-size:clamp(1.55em,2.3vw,2.5em)}
.list-head{display:flex;padding-bottom:calc(var(--gap-padding)*.8)}
.list-head h5{margin:0}
.list-head h5:nth-child(1){width:44%;padding-left:var(--container-padding)}
.list-head h5:nth-child(2){width:20%}.list-head h5:nth-child(3){width:22%}
.list-head h5:nth-child(4){width:14%;text-align:right;padding-right:var(--container-padding)}
.work-items li.is-hidden{display:none}
@media (max-width:720px){
  .work-items a{flex-wrap:wrap;padding:calc(var(--gap-padding)*1.2) 0}
  .work-items .flex-col:nth-child(1){width:100%!important;padding:0 0 .6em}
  .work-items .flex-col:nth-child(n+2){width:auto!important;padding:0 1em 0 0!important;opacity:.6;font-size:.85em}
  .work-list-4 .work-items .flex-col:nth-child(4){text-align:left}
  .list-head{display:none}
}
.center-grid-btn{background:#fff;padding:0 0 var(--section-padding);text-align:center}
.center-grid-btn .btn-text{min-width:10em}

.mouse-pos-list-image{position:fixed;left:0;top:0;z-index:25;width:0;overflow:hidden;pointer-events:none;transform:translate(-50%,-52%);transition:width .4s cubic-bezier(.36,0,.66,0);will-change:transform,width}
.mouse-pos-list-image.active{width:clamp(10em,27.5vw,25em);transition:width .4s cubic-bezier(.34,1,.64,1)}
.mouse-pos-list-image::before{content:"";display:block;padding-top:100%}
.float-image-wrap{position:absolute;left:0;top:0;width:100%;will-change:transform}
.float-image-wrap .tile{position:relative;width:100%;overflow:hidden}
.float-image-wrap .tile::before{content:"";display:block;padding-top:100%}
.float-image-wrap .tile .card{position:absolute;inset:14%;border-radius:3px;background-size:cover;background-position:center;box-shadow:0 22px 50px rgba(0,0,0,.35);display:flex;flex-direction:column;justify-content:flex-end;padding:1em;color:#fff}
.float-image-wrap .tile .card b{font-weight:500;font-size:1.05em;line-height:1.1}
.float-image-wrap .tile .card small{opacity:.75;font-size:.7em;margin-top:.4em}
.mouse-pos-list-btn,.mouse-pos-list-span{position:fixed;left:0;top:0;z-index:26;width:0;height:0;border-radius:50%;pointer-events:none;overflow:hidden;
  transform:translate(-50%,-60%);transition:width .4s cubic-bezier(.36,0,.66,0),height .4s cubic-bezier(.36,0,.66,0);will-change:transform,width,height}
.mouse-pos-list-btn{background:var(--color-blue)}
.mouse-pos-list-span{display:flex;align-items:center;justify-content:center;color:#fff}
.mouse-pos-list-span p{margin:0;font-size:0;transition:font-size .4s cubic-bezier(.36,0,.66,0)}
.mouse-pos-list-btn.active,.mouse-pos-list-span.active{width:clamp(3.75em,5.5vw,5em);height:clamp(3.75em,5.5vw,5em);transition:width .4s cubic-bezier(.34,1,.64,1),height .4s cubic-bezier(.34,1,.64,1)}
.mouse-pos-list-span.active p{font-size:1em;transition:font-size .4s cubic-bezier(.34,1,.64,1)}
.mouse-pos-list-btn.pressed,.mouse-pos-list-span.pressed{width:calc(clamp(3.75em,5.5vw,8em)*1.4);height:calc(clamp(3.75em,5.5vw,8em)*1.4)}
@media (max-width:540px),(hover:none){.mouse-pos-list-image,.mouse-pos-list-btn,.mouse-pos-list-span{display:none}}

/* ---------------- Experience (home) ---------------- */
.exp-section{background:#fff;padding-top:0}
.exp-row{display:flex;align-items:baseline;gap:var(--gap-padding);padding:calc(var(--gap-padding)*1.1) 0;border-bottom:1px solid var(--color-border)}
.exp-row:first-of-type{border-top:1px solid var(--color-border)}
.exp-row h4{margin:0;width:44%;font-size:clamp(1.25em,1.8vw,2em);line-height:1.2}
.exp-row p{width:36%;opacity:.8}.exp-row time{width:20%;text-align:right;opacity:.55;font-size:.9em}
.chips{display:flex;flex-wrap:wrap;gap:.6em;margin-top:calc(var(--gap-padding)*1.5)}
@media (max-width:720px){.exp-row{flex-wrap:wrap;gap:.3em}.exp-row h4,.exp-row p,.exp-row time{width:100%;text-align:left}}

/* ---------------- Footer ---------------- */
.footer-rounded-div{position:relative;width:100%;height:0;z-index:2}
.footer-rounded-div .rounded-div-wrap{top:0;height:10vh;transform:translateY(-1px)}
.footer-rounded-div .rounded-div{background:#fff}
.footer-rounded-div.dark .rounded-div{background:var(--color-dark)}
.footer-wrap{position:relative;width:100%;overflow:hidden;background:var(--color-dark-dark);display:flex;align-items:flex-end;box-shadow:0 5px 0 5px var(--color-dark)}
.footer{position:relative;width:100%;background:var(--color-dark);padding-bottom:0;will-change:transform}
.footer .container.medium{display:flex;flex-direction:column}
.footer h2{font-size:calc(clamp(3.25em,7vw,8em)*.875);margin:0;letter-spacing:-.03em}
.footer h2 > span{display:block}
.profile-picture{display:inline-block;width:.85em;height:.85em;margin-right:.125em;border-radius:50%;background:url(images/avatar.jpg) center/cover;transform:translateY(.09em);vertical-align:baseline}
.footer .container.medium > .row:nth-child(1){padding-bottom:calc(var(--section-padding)/2);position:relative}
.footer .container.medium > .row:nth-child(2){padding-bottom:calc(var(--section-padding)*.475)}
.footer .container.medium > .row:nth-child(2) .flex-col{width:100%}
.footer .btn-fixed{position:absolute;right:0;top:0;transform:translate(-50%,-50%);z-index:20}
.footer .container.medium > .row:nth-child(3) .flex-col{display:flex;flex-wrap:wrap;gap:.5em}
.footer .arrow{position:absolute;right:0;bottom:calc(var(--gap-padding)*1.5)}
.footer .arrow svg{width:clamp(1.1em,1.3vw,1.25em);transform:rotate(90deg)}
.bottom-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.5em;padding:calc(var(--section-padding)/1.3) calc(var(--gap-padding)/1.33) calc(var(--gap-padding)/1.75) calc(var(--gap-padding)/1)}
.bottom-footer .flex-col{display:flex;gap:var(--gap-padding)}
.bottom-footer h5{margin-bottom:1.5em}
.bottom-footer p{font-size:.85em}
.bottom-footer .socials ul{display:flex;flex-wrap:wrap}
.bottom-footer .socials h5{padding-left:calc(var(--gap-padding)*.33)}
.clock{text-transform:uppercase;font-variant-numeric:tabular-nums}
.overlay-gradient{pointer-events:none;height:calc(var(--section-padding)*.75);bottom:auto;background:linear-gradient(to bottom,rgba(15,20,48,1) 0%,rgba(15,20,48,0) 100%);opacity:.75}
@media (max-width:720px){
  .footer .btn-fixed{transform:translate(-20%,-50%)}
  .footer .container.medium > .row:nth-child(2){padding-bottom:calc(var(--section-padding)*1.25)}
  .footer .container.medium > .row:nth-child(3) .flex-col{flex-direction:column}
  .footer .container.medium > .row:nth-child(3) .btn,.footer .container.medium > .row:nth-child(3) .btn-click{width:100%}
  .footer-rounded-div .rounded-div-wrap{height:7.5vh}
}

/* ---------------- Inner page headers ---------------- */
.default-header{padding-top:calc(var(--section-padding)*1.33)}
.default-header h1{margin:0}
.default-header h1 span{display:block}
.page-light{background:#fff}
.page-dark{background:var(--color-dark)}
.filters-row{display:flex;flex-wrap:wrap;gap:.6em;padding:calc(var(--section-padding)*.6) 0 calc(var(--section-padding)*.5)}
.filters-row .btn-text{padding:0 2em}

/* ---------------- Contact page ---------------- */
.contact-header{background:var(--color-dark);padding-bottom:calc(var(--section-padding)/3)}
.contact-header .row:nth-child(1) .flex-col:nth-child(1){width:73%;padding-right:calc(var(--container-padding)/2)}
.contact-header .row:nth-child(1) .flex-col:nth-child(2){width:27%;padding-left:calc(var(--container-padding)/2);padding-top:calc(clamp(3.25em,7vw,8em)*.875*1.175)}
.contact-header .big-pic{width:clamp(4em,7vw,8em);height:clamp(4em,7vw,8em);border-radius:50%;background:url(images/avatar.jpg) center/cover}
.contact-header .row:nth-child(1) .arrow{position:absolute;bottom:calc(var(--section-padding)*-.5);transform:translateY(-50%)}
.contact-header .row:nth-child(2){padding-top:var(--section-padding)}
.contact-header .row:nth-child(2) .flex-col:nth-child(1){width:73%;padding-right:calc(var(--container-padding)/2)}
.contact-header .row:nth-child(2) .flex-col:nth-child(2){width:27%;padding-left:calc(var(--container-padding)/2)}
.contact-header .details .links-wrap{flex-direction:column;align-items:flex-start;padding-bottom:2.5em}
.contact-header .details .links-wrap li{height:2em;display:flex;align-items:center}
.contact-header .details .btn-link-external .btn-click{margin:0;height:2em}
.contact-header .details p{font-size:.95em;line-height:1.9}
.contact-header .details .block{padding-bottom:2.5em}
.form{width:100%}
.website-field{position:absolute;left:-9999px}
.form-col{position:relative;display:block;width:100%;font-size:1.33em;border-bottom:1px solid var(--color-border-light);padding:0 2.75em}
.form-col:nth-of-type(2){border-top:1px solid var(--color-border-light)}
.form-col h5{position:absolute;left:0;top:3.4em;opacity:.33;margin:0}
.form .label{display:block;width:100%;padding-top:1.66em;color:#fff;transition:all .2s ease-in-out}
.form .field{display:block;width:100%;margin-top:-.33em;padding:1em 0 2em;border:0;border-radius:0;background:transparent!important;color:#fff;font:inherit;font-size:1em;appearance:none;resize:none;outline:0}
.form .field::placeholder{color:#fff;opacity:.33}
.form-col.not-empty .label{opacity:.33}
.btn-contact-send{float:right;position:relative;z-index:5;transform:translate(-20%,-60%)}
.btn-contact-send .btn-text{pointer-events:all}
.form-btn{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;outline:0;color:#fff;font:inherit;cursor:pointer;z-index:10}
.form-status{clear:both;padding-top:1em;color:rgba(255,255,255,.75);min-height:2em}
.form-status.err{color:#ff8a8a}
.footer-contact{background:var(--color-dark);box-shadow:0 5px 0 5px var(--color-dark)}
@media (max-width:720px){
  .contact-header .row .flex-col{width:100%!important;padding:0!important}
  .contact-header .row:nth-child(1) .flex-col:nth-child(2){display:none}
  .contact-header .row:nth-child(2){padding-top:calc(var(--section-padding)*.5)}
  .contact-header .row:nth-child(2) .flex-col:nth-child(2){order:-1;padding-bottom:2em!important}
  .form-col{padding:0 0 0 1.5em;font-size:1.15em}
}

/* ---------------- Case page ---------------- */
.case-top{background:var(--color-dark);padding-top:calc(var(--section-padding)*1.33)}
.case-top h1{margin:0 0 .4em;font-size:calc(clamp(3.25em,7vw,8em)*1)}
.case-meta{display:flex;flex-wrap:wrap;gap:var(--gap-padding) calc(var(--gap-padding)*2);padding:calc(var(--gap-padding)*1.4) 0 var(--section-padding)}
.case-meta div{min-width:10em}
.case-meta h5{margin-bottom:.9em}
.case-meta p{font-size:.95em}
.case-body{background:#fff}
.case-body .lead{font-size:clamp(1.3em,2vw,2em);line-height:1.4;max-width:24em;margin:0 0 calc(var(--section-padding)*.5);letter-spacing:-.01em}
.case-body .cols{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--gap-padding)*1.5) calc(var(--container-padding)*.8)}
.case-body h5{margin-bottom:1.4em}
.case-body ul li{position:relative;padding-left:1.2em;margin-bottom:.8em;line-height:1.55}
.case-body ul li::before{content:"";position:absolute;left:0;top:.72em;width:.5em;height:1px;background:var(--color-blue)}
.case-body .case-links{display:flex;flex-wrap:wrap;gap:.6em;margin-top:calc(var(--section-padding)*.5)}
.case-body .shot{margin:calc(var(--section-padding)*.5) 0 0;border-radius:4px;overflow:hidden;background:var(--color-lightgray);max-width:720px}
@media (max-width:720px){.case-body .cols{grid-template-columns:1fr}}
.next-case{display:block;text-align:center;padding:calc(var(--section-padding)*.8) 0 calc(var(--section-padding)*.4)}
.next-case p{opacity:.6;margin-bottom:1em}
.next-case h2{font-size:calc(clamp(3.25em,7vw,8em)*1);margin:0;transition:var(--animation-primary)}
.next-case:hover h2{opacity:.25}

/* ---------------- Entrance helpers ---------------- */
.once-in{will-change:transform}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .loading-container{display:none}
}

/* ---------------- Experience + blog ---------------- */
.page-intro{max-width:34em;margin-top:1.4em;opacity:.75}
.exp-list .exp-row h4{width:40%}.exp-list .exp-row p{width:40%}
.exp-detail{padding:0 0 1.2em;opacity:.8;font-size:.92em;max-width:46em}
.exp-detail li{position:relative;padding-left:1.2em;margin-bottom:.45em}
.exp-detail li::before{content:"";position:absolute;left:0;top:.75em;width:.5em;height:1px;background:var(--color-blue)}
.section-title{margin:calc(var(--section-padding)*.6) 0 1.4em}
.prose{max-width:42em;font-size:1.05em;line-height:1.75}
.prose p,.prose ul,.prose figure,.prose blockquote{margin:0 0 1.4em}
.prose h2{font-size:clamp(1.5em,2.2vw,2.1em);margin:1.8em 0 .6em;letter-spacing:-.01em}
.prose strong{font-weight:550}
.prose ul li{position:relative;padding-left:1.2em;margin-bottom:.6em}
.prose ul li::before{content:"";position:absolute;left:0;top:.8em;width:.5em;height:1px;background:var(--color-blue)}
.prose figure img{width:100%;border-radius:4px}
.prose figcaption{font-size:.72em;opacity:.6;margin-top:.6em;line-height:1.5}
.prose .pair{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-bottom:1.4em}
.prose .pair figure{margin:0}.prose .pair img{aspect-ratio:3/4;object-fit:cover}
.prose blockquote{border-left:2px solid var(--color-blue);padding:.2em 0 .2em 1.2em;font-size:1.15em}
.prose blockquote p{margin:0}
@media (max-width:600px){.prose .pair{grid-template-columns:1fr}}
.case-top h1 span{display:block}