/* HEEM — intro + "what I make" decks (scoped, prefix hi- / hw-) */
.hi-intro{position:fixed;inset:0;z-index:99999;background:#f4f6ff;color:#111c50;display:grid;place-items:center;text-align:center;padding:0 6vw;transition:opacity .9s cubic-bezier(.2,.8,.2,1),visibility .9s;animation:hiForce 0s 8s forwards}
.hi-intro.done{opacity:0;visibility:hidden;pointer-events:none}
html.hi-off .hi-intro{display:none}
html.hi-lock body{overflow:hidden}
@keyframes hiForce{to{opacity:0;visibility:hidden;pointer-events:none}}
.hi-intro p{margin:0;font-family:Palestine,Piper,sans-serif;font-size:clamp(30px,5vw,72px);line-height:1.4;position:absolute;left:6vw;right:6vw;opacity:0;transform:translateY(18px);filter:blur(8px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1),filter 1s cubic-bezier(.2,.8,.2,1)}
.hi-intro p.on{opacity:1;transform:none;filter:none}
.hi-intro p.off{opacity:0;transform:translateY(-18px);filter:blur(8px)}
.hi-intro p b{font-weight:400;color:#303fc5}
button.hi-skip{position:absolute;inset-inline-start:5vw;bottom:5vh;font-family:Palestine,Piper,sans-serif;font-size:17px;color:#5a67b0;letter-spacing:.04em;cursor:pointer;background:none;border:0;padding:8px}
button.hi-skip:hover{color:#111c50}

.hw{position:relative;padding:clamp(80px,13vh,150px) var(--pad,5vw) clamp(70px,10vh,120px);overflow:hidden}
.hw::before{content:"";position:absolute;inset:auto -10% 0 -10%;height:60%;background:radial-gradient(ellipse at 50% 100%,rgba(40,120,255,.22),transparent 66%);pointer-events:none}
.hw-in{position:relative;max-width:var(--max,1380px);margin:0 auto}
.hw-big{margin:0 0 clamp(26px,5vh,50px);font-family:Palestine,Piper,sans-serif;font-weight:400;font-size:clamp(60px,12vw,190px);line-height:1.12;color:#f5f7fb}
.hw-big em{font-style:normal;color:#69aeff}
.hw-lead{margin:0 0 clamp(50px,9vh,90px);font-size:clamp(18px,1.9vw,26px);color:#aabbd5;max-width:28em;line-height:1.7}
.hw-decks{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(90px,15vh,150px) 4vw}
.hw-deck{position:relative;display:block;padding-top:40%;color:inherit;text-decoration:none}
.hw-stack{position:absolute;left:0;right:0;top:0;height:78%}
.hw-sheet{position:absolute;bottom:0;width:42%;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 18px 40px -14px rgba(0,0,0,.65);transition:transform .9s cubic-bezier(.2,.8,.2,1);will-change:transform}
.hw-sheet img{width:100%;height:100%;object-fit:cover;display:block}
.hw-sheet.a{right:6%;transform:translateY(34%) rotate(5deg)}
.hw-sheet.b{right:26%;z-index:1;transform:translateY(28%) rotate(-3deg)}
.hw-sheet.c{right:44%;transform:translateY(34%) rotate(-9deg)}
.hw-deck.in .hw-sheet.a{transform:translateY(8%) rotate(7deg)}
.hw-deck.in .hw-sheet.b{transform:translateY(0) rotate(-1deg)}
.hw-deck.in .hw-sheet.c{transform:translateY(8%) rotate(-10deg)}
.hw-deck:hover .hw-sheet.a{transform:translateY(2%) rotate(10deg) translateX(-3%)}
.hw-deck:hover .hw-sheet.b{transform:translateY(-3%) rotate(0deg)}
.hw-deck:hover .hw-sheet.c{transform:translateY(2%) rotate(-13deg) translateX(3%)}
.hw-card{position:relative;z-index:2;border-radius:26px;padding:34px 34px 30px;background:linear-gradient(145deg,#12307a,#2878ff);color:#fff;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 30px 60px -28px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.hw-deck:hover .hw-card{transform:translateY(8px)}
.hw-num{font-size:17px;color:#cfe3ff;margin-bottom:10px;letter-spacing:.05em}
.hw-card h3{margin:0;font-family:Palestine,Piper,sans-serif;font-weight:400;font-size:clamp(34px,3.4vw,54px);line-height:1.2}
.hw-card p{margin:8px 0 0;color:#dbe9ff;font-size:19px}
.hw-arrow{position:absolute;inset-inline-end:auto;left:30px;top:30px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;transition:background .4s,color .4s,transform .6s cubic-bezier(.2,.8,.2,1)}
html[dir=ltr] .hw-arrow{left:auto;right:30px}
.hw-deck:hover .hw-arrow{background:#fff;color:#12307a;transform:rotate(-45deg)}
.hw-rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1)}
.hw-rv.in{opacity:1;transform:none}
html[dir=ltr] .hw-sheet.a{right:auto;left:6%}
html[dir=ltr] .hw-sheet.b{right:auto;left:26%}
html[dir=ltr] .hw-sheet.c{right:auto;left:44%}
@media (min-width:900px){.hw{padding-left:max(var(--pad,5vw),104px)}}
@media (max-width:860px){.hw-decks{grid-template-columns:1fr}.hw-sheet{width:44%}}
@media (prefers-reduced-motion:reduce){.hi-intro{display:none}.hw-rv{opacity:1;transform:none}.hw-sheet,.hw-card{transition:none}}

/* ===== gallery overlay (decks open the categories) ===== */
#work{display:none}
html.hw-gal,html.hw-gal body{overflow:hidden}
html.hw-gal #work{display:block;position:fixed;inset:0;z-index:9500;overflow:auto;background:#f4f6ff;padding:84px var(--pad,5vw) 70px}
.hw-close{position:fixed;top:22px;inset-inline-start:var(--pad,5vw);z-index:9600;width:48px;height:48px;border-radius:50%;border:1px solid rgba(17,28,80,.3);background:#fff;color:#111c50;font-size:26px;line-height:1;cursor:pointer;display:none}
html.hw-gal .hw-close{display:block}

/* ===== selected work: pinned horizontal reel ===== */
.sr-wrap{position:relative}
.sr-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.sr-side{flex:0 0 min(30vw,430px);padding-inline:var(--pad,5vw);position:relative;z-index:3}
.sr-side .sectionhead{padding:0!important;margin:0!important;border:0!important;display:block}
.sr-side h2{font-size:clamp(46px,6vw,96px)!important;line-height:1.12!important;margin:12px 0 18px!important}
.sr-side .work-intro{font-size:clamp(18px,1.6vw,24px)!important}
.sr-viewport{flex:1;min-width:0;position:relative}
.sr-track{display:flex;gap:2.4vw;will-change:transform}
.sr-track>.project{flex:0 0 min(30vw,440px)!important;width:min(30vw,440px)!important;opacity:.35;transform:scale(.93);transform-origin:center bottom;transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.sr-track>.project.on{opacity:1;transform:none}
.sr-track .project-cover{aspect-ratio:4/5!important;border-radius:18px!important;box-shadow:0 30px 60px -30px rgba(17,28,80,.55)}
.sr-track .project-cover img{object-fit:cover!important}
.sr-track .project h3{font-size:clamp(24px,2.2vw,34px)!important}
.sr-foot{position:absolute;left:var(--pad,5vw);right:var(--pad,5vw);bottom:34px;display:flex;align-items:center;gap:18px;color:#4a5694;font-size:18px;z-index:3}
.sr-count b{color:#111c50;font-weight:400;font-size:22px}
.sr-line{flex:1;height:2px;background:rgba(17,28,80,.15);position:relative;overflow:hidden;border-radius:2px}
.sr-line i{position:absolute;inset:0;background:#303fc5;transform-origin:var(--sr-origin,right);transform:scaleX(var(--sr-p,0))}
html[dir=ltr] .sr-line i{--sr-origin:left}
.sr-wrap.sr-row .sr-sticky{position:static;height:auto;display:block;overflow:visible}
.sr-wrap.sr-row .sr-side{padding-bottom:20px}
.sr-wrap.sr-row .sr-viewport{overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad,5vw) 20px;scrollbar-width:none}
.sr-wrap.sr-row .sr-viewport::-webkit-scrollbar{display:none}
.sr-wrap.sr-row .sr-track>.project{flex:0 0 78vw!important;width:78vw!important;opacity:1;transform:none;scroll-snap-align:center}
.sr-wrap.sr-row .sr-foot{display:none}

/* ===== videos & reels rows ===== */
.rr{padding:clamp(70px,11vh,130px) 0 clamp(60px,9vh,110px);overflow:hidden}
.rr-head{padding:0 var(--pad,5vw);margin-bottom:clamp(28px,5vh,50px)}
.rr-head h2{margin:10px 0 14px;font-size:clamp(44px,7vw,110px);line-height:1.12;font-weight:400}
.rr-head p{margin:0 0 18px;font-size:clamp(18px,1.8vw,24px);color:#4a5694}
.rr-all{display:inline-flex;align-items:center;gap:10px;font-size:19px;color:#303fc5;border:0;background:none;border-bottom:1px solid currentColor;padding:4px 0;cursor:pointer;font-family:inherit}
.rr-row{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;padding:6px var(--pad,5vw) 22px;scrollbar-width:none}
.rr-row::-webkit-scrollbar{display:none}
.rr-row+.rr-row{margin-top:clamp(24px,4vh,40px)}
.rr-card{flex:0 0 auto;display:block;color:inherit;text-decoration:none}
.rr-card .rr-media{position:relative;border-radius:18px;overflow:hidden;background:#dfe5ff;box-shadow:0 24px 50px -30px rgba(17,28,80,.6);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.rr-card:hover .rr-media{transform:translateY(-6px)}
.rr-card img{display:block;width:100%;height:100%;object-fit:cover}
.rr-card.w{width:min(36vw,480px)}.rr-card.w .rr-media{aspect-ratio:16/9}
.rr-card.v{width:min(19vw,250px)}.rr-card.v .rr-media{aspect-ratio:9/16}
.rr-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);color:#111c50;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.rr-play svg{width:22px;height:22px;margin-inline-start:3px}
.rr-card h3{margin:12px 2px 0;font-size:clamp(16px,1.3vw,20px);font-weight:400;line-height:1.5;color:#111c50}
@media (max-width:860px){.rr-card.w{width:74vw}.rr-card.v{width:44vw}}
/* gallery overlay: hide the rest of the page; fade side title as the reel advances */
html.hw-gal body>*:not(#work):not(script){visibility:hidden}
html.hw-gal main>*:not(#work),html.hw-gal section:not(#work){visibility:hidden}
html.hw-gal #work{visibility:visible}
html.hw-gal #work *{visibility:visible}
.sr-wrap:not(.sr-row) .sr-side{opacity:clamp(0,calc(1 - var(--sr-p,0)*9),1);transition:opacity .2s}
html.hw-gal .hw-close{visibility:visible}
/* pinned reel on phones: heading above, cards below */
@media(max-width:900px){
 .sr-sticky{flex-direction:column;align-items:stretch;justify-content:center;gap:18px;padding-top:70px}
 .sr-side{flex:none;padding-inline:var(--pad,5vw)}
 .sr-side h2{font-size:clamp(34px,10vw,52px)!important;margin:6px 0 8px!important}
 .sr-side .work-intro{font-size:17px!important}
 .sr-viewport{flex:none;padding:0 var(--pad,5vw)}
 .sr-track{gap:14px}
 .sr-track>.project{flex:0 0 66vw!important;width:66vw!important}
 .sr-track .project-cover{aspect-ratio:1/1!important}
 .sr-foot{bottom:16px;font-size:15px}
}
.sr-wrap:not(.sr-row) .sr-side{opacity:1}
@media(min-width:901px){.sr-wrap:not(.sr-row) .sr-side{opacity:clamp(0,calc(1 - var(--sr-p,0)*9),1)}}

html.hw-gal .hw-close{visibility:visible!important;display:flex!important;align-items:center;gap:10px;width:auto;height:48px;padding:0 20px 0 16px;border-radius:30px;font-size:17px;font-family:Palestine,Piper,sans-serif;box-shadow:0 6px 22px rgba(17,28,80,.2);top:max(14px,env(safe-area-inset-top))}
.hw-close span{font-size:28px;line-height:1}