.portfolio-loader{display:none}
html.is-loading .portfolio-loader{display:block;position:fixed;inset:0;z-index:20000;color:#f8f7f2;isolation:isolate;--loader-zoom:1;--loader-mask-size:clamp(88px,6.6vw,126px)}
.loader-backdrop{position:absolute;inset:0;background:#1e1e1e}
.portfolio-loader:not(.portfolio-loader--project).loader-character-ready .loader-backdrop,.portfolio-loader:not(.portfolio-loader--project).loader-opening .loader-backdrop{mask-image:radial-gradient(circle at var(--loader-x,50%) var(--loader-y,38.5%),transparent 0 var(--loader-aperture,63px),#000 calc(var(--loader-aperture,63px) + 1px));-webkit-mask-image:radial-gradient(circle at var(--loader-x,50%) var(--loader-y,38.5%),transparent 0 var(--loader-aperture,63px),#000 calc(var(--loader-aperture,63px) + 1px))}
.loader-composition{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.loader-layout-ready .loader-composition{visibility:visible}
.loader-title-wrap{position:absolute;left:50%;top:51.7%;width:100%;transform:translateX(-50%);text-align:center}
.loader-title{margin:0;font-family:Arial,Helvetica,sans-serif;font-size:clamp(44px,3.1vw,60px);font-weight:750;letter-spacing:-.065em;line-height:.84;white-space:nowrap;color:rgba(248,247,242,.17)}
.loader-title-reveal{position:absolute;inset:0;overflow:hidden;clip-path:inset(calc(100% - var(--loader-reveal,0%)) 0 0 0);-webkit-clip-path:inset(calc(100% - var(--loader-reveal,0%)) 0 0 0);color:#f8f7f2}
.loader-title-reveal .loader-title{color:#f8f7f2}
.loader-progress{position:absolute;left:20px;right:20px;top:calc(var(--loader-progress-y,51.7%) - 35px);height:35px;transition:opacity .35s ease,translate .6s cubic-bezier(.22,1,.36,1)}
.loader-label,.loader-percentage{position:absolute;top:0;margin:0;color:rgba(248,247,242,.82);font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.loader-label{left:0}.loader-percentage{right:0;text-align:right}
.loader-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.loader-opening .loader-title-wrap{translate:0 -14px;opacity:0;transition:opacity .35s ease,translate .65s cubic-bezier(.22,1,.36,1)}
.loader-opening .loader-progress{translate:0 -6px;opacity:0}
@media(max-width:700px){html.is-loading .portfolio-loader{--loader-mask-size:clamp(76px,22vw,108px)}.loader-title-wrap{top:51.8%}.loader-title{font-size:clamp(34px,8.1vw,52px);letter-spacing:-.065em}.loader-label,.loader-percentage{font-size:12px}}
@media(max-height:540px){html.is-loading .portfolio-loader{--loader-mask-size:clamp(72px,14vh,96px)}.loader-title-wrap{top:48%}.loader-title{font-size:clamp(38px,6vh,52px)}}
@media(prefers-reduced-motion:reduce){.loader-progress,.loader-title-wrap{transition-duration:.18s}.loader-opening .loader-title-wrap{translate:none}}
html.is-loading .reference-cursor,html.is-loading .reference-cursor-dot{visibility:hidden!important}

/* Zoom the actual hero while keeping its responsive layout unchanged. */
html.is-loading #hero-canvas{transform:scale(var(--loader-hero-scale,.66));transform-origin:50% 25%}
html.is-loading #hero-canvas :is(.art-hero-eyebrow,.direction-statement,.art-hero-intro,.art-hero-cta,.art-hero-location,.character-hint,.skill-orbit-webgl,.thinking-scribble){opacity:0!important}
#hero-canvas.hero-intro-enter .skill-orbit-webgl{animation:hero-ring-arrive .65s ease .3s both}
@keyframes hero-ring-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html.is-loading #hero-canvas{transform:none}#hero-canvas.hero-intro-enter :is(.direction-statement>span>span,.art-hero-eyebrow,.art-hero-intro,.art-hero-cta,.art-hero-location,.character-hint,.skill-orbit-webgl){animation:none}}

#hero-canvas.hero-intro-enter .character-scene:not(.is-smiling) .thinking-scribble{animation:hero-ring-arrive .6s ease .3s both}
#hero-canvas.hero-letters-enter .reveal-statement{visibility:hidden}
/* Each visible letter is a single inline glyph; no absolute text copies. */
.hero-stagger-content{display:inline;text-indent:0}
.hero-stagger-word{display:inline-block;white-space:pre;text-indent:0;text-align:left;line-height:inherit;vertical-align:baseline}
.hero-stagger-letter{display:inline-block;vertical-align:baseline;line-height:inherit;text-indent:0;text-align:left;clip-path:inset(-.2em -.3em -.12em -.3em);-webkit-clip-path:inset(-.2em -.3em -.12em -.3em)}
.hero-stagger-glyph{display:inline-block;line-height:inherit;white-space:pre;text-indent:0;text-align:left;transform:translateY(125%)}

/* Case studies open a square window onto the live cover, centered in the viewport. */
.portfolio-loader--project .loader-title-wrap{top:50%;width:calc(100% - 40px);transform:translate(-50%,-50%)}
.portfolio-loader--project .loader-title{white-space:normal;overflow-wrap:anywhere;line-height:.92;text-transform:uppercase}
.portfolio-loader--project.loader-opening .loader-backdrop{
  clip-path:polygon(evenodd,
    0 0,100% 0,100% 100%,0 100%,0 0,
    calc(50% - var(--loader-square-half,0px)) calc(50% - var(--loader-square-half,0px)),
    calc(50% + var(--loader-square-half,0px)) calc(50% - var(--loader-square-half,0px)),
    calc(50% + var(--loader-square-half,0px)) calc(50% + var(--loader-square-half,0px)),
    calc(50% - var(--loader-square-half,0px)) calc(50% + var(--loader-square-half,0px)),
    calc(50% - var(--loader-square-half,0px)) calc(50% - var(--loader-square-half,0px)),0 0);
}
@media(max-width:700px){.portfolio-loader--project .loader-title-wrap{width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){.portfolio-loader--project.loader-opening .loader-backdrop{clip-path:none;opacity:0;transition:opacity .18s ease}}