@font-face{font-family:'Monday';src:url('../assets/portrait/monday.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('../assets/portrait/instrument-serif.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('../assets/portrait/instrument-serif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

@scope (.portfolio-hero) {
*{box-sizing:border-box}


:scope{--hero-quote-top:33%;--hero-quote-size:clamp(96px,11vw,180px);--hero-name-size:clamp(70px,7.8vw,118px);height:100svh;min-height:620px;position:relative;overflow:hidden;isolation:isolate;background:#080807;color:#eee8df;font-family:Poppins,Arial,sans-serif}
:scope::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to bottom,transparent 38%,#080807 88%)}
.stage{height:100%;position:relative}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#portrait,#portrait-image{position:absolute;left:50%;transform:translateX(-50%);top:11svh;width:350px;height:345px}
#portrait{z-index:3;border:0;background:transparent;cursor:crosshair;touch-action:pan-y;border-radius:45% 45% 15% 15%}
#portrait:focus-visible{outline:1px dashed #c99675;outline-offset:8px}
#portrait-image{z-index:1;overflow:hidden;pointer-events:none;mask-image:linear-gradient(#000 60%,transparent 100%),linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(#000 60%,transparent 100%),linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in}
#portrait-image img{position:absolute;max-width:none;width:163.636364%;height:222.769231%;left:-31.818182%;top:-6.153846%;filter:grayscale(.9) contrast(1.06)}
h1{position:absolute;z-index:4;top:60%;left:0;right:0;text-align:center;margin:0;padding:0 12px;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(108px,15vw,220px);font-weight:400;line-height:.9;letter-spacing:-.045em;pointer-events:none;text-shadow:0 4px 36px #080807}
h1 em{font-weight:400}
#canvas,#code-canvas{z-index:2}
#portrait-occlusion{position:absolute;left:50%;transform:translateX(-50%);z-index:1;pointer-events:none;background:#080807;mask-image:url('../assets/optimized/raju.9551839c8842.webp');mask-size:163.636364% 222.769231%;mask-position:50% 5.012531%;mask-repeat:no-repeat}
#code-canvas{inset:auto;left:50%;transform:translateX(-50%);opacity:0;contain:strict}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
@media(max-width:600px){h1{font-size:clamp(90px,26vw,145px);letter-spacing:-.035em}#portrait,#portrait-image{top:20svh}}


h1{top:59%;font-size:clamp(112px,14vw,205px);letter-spacing:-.045em}

.hero-summary{position:absolute;top:calc(55% + var(--hero-name-size) * 1.3 + 12px);left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 64px));max-width:560px;text-align:center;z-index:5}
.hero-summary::before{display:none}
.hero-summary>p{font-family:Poppins,Arial,sans-serif;font-size:13px!important;line-height:1.8!important;color:#aaa69e;margin:0 0 12px}
.availability{display:flex;justify-content:center;gap:13px;align-items:start;margin-top:12px;text-align:left}
.availability-dot{width:5px;height:5px;border-radius:50%;background:#e05c4e;margin-top:7px;box-shadow:0 0 0 4px #cf3f3610;flex-shrink:0}
.availability p{white-space:nowrap;font-family:Poppins,Arial,sans-serif;font-size:11px;line-height:1.9;color:#eee8df;margin:0 0 8px}
.availability p span{color:#8b877f}
:scope a{color:inherit;text-decoration:none}
.availability a{font-size:10px;color:#b3a497}.availability a span{margin-left:10px;color:#e05c4e}
.hero-bottom{position:absolute;left:9%;right:max(120px,10%);bottom:30px;display:flex;justify-content:flex-end;align-items:end;z-index:4}
.home-stats{display:flex;gap:40px;margin:0}.home-stats>div{display:flex;flex-direction:column-reverse;gap:5px}
.home-stats dt{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#8b877f}
.home-stats dd{margin:0;font-size:26px;font-weight:500;line-height:1;letter-spacing:-.035em;color:#eee8df}
.home-stats dd span{font-size:17px;color:#e05c4e;margin-left:2px}
a:focus-visible{outline:1px solid #e05c4e;outline-offset:5px}
h1,h1 em{font-family:'Monday',cursive!important;font-style:normal!important;color:#eee8df;font-weight:400!important;text-transform:none}
h1{line-height:1!important;top:55%;font-size:var(--hero-name-size);letter-spacing:0}
.role-marquee{position:absolute;top:var(--hero-quote-top);left:0;right:0;overflow:hidden;pointer-events:none;z-index:0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.role-track{display:flex;width:max-content;will-change:transform;animation:role-drift var(--role-duration,40s) linear infinite;animation-play-state:paused}
.role-track.is-ready:not(.is-paused){animation-play-state:running}
.role-group{display:flex;flex-shrink:0;align-items:center;gap:80px;padding-right:80px;white-space:nowrap}
.marquee-role{font-size:var(--hero-quote-size);line-height:1.35;font-weight:500;letter-spacing:-.035em;text-transform:uppercase;color:#96938d}
@keyframes role-drift{to{transform:translate3d(-50%,0,0)}}
.hero-roles{position:absolute;top:max(55%,calc(var(--hero-quote-top) + var(--hero-quote-size) * 1.35 + 18px));right:6.5%;z-index:5;display:flex;flex-direction:column;gap:3px;max-width:220px;margin:0;padding:0;list-style:none;text-align:right;font-size:clamp(10px,1vw,14px);font-weight:400;line-height:1.35;letter-spacing:-.01em;text-transform:uppercase;color:#d4d0c9}
@media(min-width:1400px){.hero-bottom{right:10%}}
@media(max-width:900px) and (min-width:601px){.hero-summary>p{font-size:11px!important}.hero-bottom{right:120px}.home-stats{gap:25px}}
@media(max-height:650px) and (min-width:601px){.hero-summary>p{font-size:11px!important;line-height:1.85!important;margin-bottom:18px}.hero-bottom{bottom:22px}.availability p{font-size:9px}.home-stats dd{font-size:23px}}
@media(max-width:600px){
 :scope{--hero-quote-top:30%;--hero-quote-size:78px;height:100svh;min-height:760px}
 h1{top:58%;font-size:clamp(52px,16vw,80px);letter-spacing:0}
 .hero-summary{top:71%;left:30px;right:30px;transform:none;max-width:none;width:auto;text-align:center}
 .hero-summary::before{display:none}.hero-summary>p{font-size:11px!important;line-height:1.7!important;margin:0 0 12px}
 .availability{justify-content:center;gap:8px;margin-top:12px}.availability-dot{margin-top:4px;width:4px;height:4px}
 .availability p{font-size:10px;line-height:1.6;margin-bottom:6px}.availability p span{display:inline}
 .availability a{display:inline-block;font-size:9px}
 .hero-bottom{left:30px;right:24px;bottom:24px;align-items:center;justify-content:flex-start}.home-stats{gap:24px}.home-stats dd{font-size:21px}.home-stats dd span{font-size:12px}.home-stats dt{font-size:7px;letter-spacing:.03em}
 .hero-roles{top:max(44%,calc(var(--hero-quote-top) + var(--hero-quote-size) * 1.35 + 18px));right:24px;max-width:150px;font-size:9px;gap:2px}
}
@media(prefers-reduced-motion:reduce){.role-track{animation:none}.role-marquee{display:none}}
}

body:has(.portfolio-hero){padding-top:0!important}

.portfolio-hero::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:clamp(100px,18svh,180px);background:linear-gradient(to bottom,transparent,var(--bg-primary,#1a1815));pointer-events:none;z-index:3}