/* Standalone reading fallback; enhanced on desktop with the existing clock. */
#js05x-index #mc-client-work.mc-portfolio{height:auto;padding-block:90px}
#js05x-index #mc-client-work.mc-portfolio .jl-client-sticky{position:relative;height:auto;display:block;padding:0}
#js05x-index #mc-client-work.mc-portfolio .mc-projects{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:30px;height:auto;margin:36px 0;perspective:1600px}
#js05x-index #mc-client-work.mc-portfolio .mc-projects>figure{position:relative;inset:auto;margin:0;padding:15px;background:linear-gradient(145deg,#202431f5,#0b0f19fa);border:1px solid #d9c47b45;border-radius:14px;box-shadow:0 28px 60px -30px #000;min-width:0}
#js05x-index #mc-client-work.mc-portfolio figure img{width:100%;height:auto;aspect-ratio:1905/848;object-fit:contain;border-radius:4px}
#js05x-index #mc-client-work.mc-portfolio figcaption{padding:18px 8px 8px}
#js05x-index #mc-client-work.mc-portfolio h3{font-size:30px;margin:5px 0 8px}
#js05x-index #mc-client-work.mc-portfolio figcaption p{font-size:13px;line-height:1.6;margin:0}
#js05x-index #mc-client-work.mc-portfolio .mc-project-label{font:600 9px/1.4 'Segoe UI',sans-serif;letter-spacing:.13em;color:#cab97b;padding:0 5px 12px}
#js05x-index #mc-client-work.mc-portfolio .jl-client-nav{display:none}
#js05x-index #mc-client-work.mc-portfolio .mc-work-footer{margin-top:25px;padding-top:20px}
@media(min-width:1000px) and (min-height:740px) and (prefers-reduced-motion:no-preference){
 #js05x-index.jl-enabled[data-jst-motion=on] #mc-client-work.mc-portfolio{height:340svh;padding:0;max-width:1180px;isolation:isolate}
 #js05x-index.jl-enabled[data-jst-motion=on] #mc-client-work.mc-portfolio .jl-client-sticky{height:100svh;position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:85px 0 35px}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .mc-work-heading{display:grid;grid-template-columns:1.05fr 1fr;gap:8px 60px;align-items:end;width:100%;margin:0}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .mc-eyebrow{grid-column:1/-1;font-size:10px;margin:0;color:#d9bb57;letter-spacing:.14em}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] h2{font-size:clamp(38px,4.2vw,58px);line-height:1.04;margin:0}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .mc-intro{font-size:13px;line-height:1.65;margin:0;max-width:490px;color:#bfc1cb}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .mc-projects{flex:none;width:100%;height:min(390px,44svh);margin:0;gap:40px;opacity:var(--mc-reveal,0);transform-style:preserve-3d}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .mc-projects>figure{height:100%;min-height:0;padding:16px;transform-origin:right center;transform:perspective(1600px) rotateY(var(--mc-yaw,-77deg)) translateY(var(--mc-lift,0px)) scale(var(--mc-scale,1));filter:brightness(var(--mc-focus,1));backface-visibility:hidden;box-shadow:0 34px 60px -25px #000c,0 0 30px -15px #d2b35630}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .mc-projects>figure:nth-child(2){transform-origin:left center}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] figure img{height:52%;object-fit:cover;object-position:top}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] figcaption{padding:12px 5px 0}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] figcaption span{font-size:10px}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] h3{font-size:29px}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .jl-client-nav{display:flex;justify-content:center;gap:12px;margin:0;padding:0;position:relative}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .jl-client-nav:before{content:'';position:absolute;top:-10px;left:15%;height:1px;width:70%;background:linear-gradient(to right,#e9c656 calc(var(--mc-progress,0)*100%),#e9c65622 0)}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .mc-work-footer{display:flex;justify-content:space-between;gap:28px;align-items:center;width:100%;margin:0;padding-top:16px;border-top:1px solid #edc13628}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .mc-work-footer p{font-size:12px;line-height:1.5;max-width:580px;margin:0}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .mc-case-link{white-space:nowrap;font-size:13px}
}
@media(max-width:999px){#js05x-index #mc-client-work.mc-portfolio .mc-projects{grid-template-columns:1fr;gap:24px}#js05x-index #mc-client-work.mc-portfolio h2{font-size:clamp(34px,7vw,58px)}}
@media(prefers-reduced-motion:reduce){#js05x-index #mc-client-work.mc-portfolio .mc-projects>figure{transform:none;filter:none}}

/* This scene owns the mark while the project spread is active. */
#js05x-index.jl-client [data-jsr-guide]{opacity:0!important;visibility:hidden!important}

#js05x-index #mc-client-work.mc-portfolio .jl-client-nav button{min-height:44px;padding:10px 18px;border:1px solid #edc13640;border-radius:999px;background:#101321;color:#e7d799;font:600 12px Segoe UI,sans-serif;cursor:pointer}
#js05x-index #mc-client-work.mc-portfolio .jl-client-nav button[aria-current]{background:#edc136;color:#15131c;border-color:#edc136}
#js05x-index #mc-client-work.mc-portfolio .jl-client-nav button:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* Each wing opens its leaf outward from the center; four pieces stay visible. */
@media(min-width:1000px) and (min-height:740px) and (prefers-reduced-motion:no-preference){
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .mc-projects>figure{clip-path:inset(0 0 0 calc((1 - var(--mc-build,0))*100%))}
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .mc-projects>figure:nth-child(2){clip-path:inset(0 calc((1 - var(--mc-build,0))*100%) 0 0)}
}

/* Warm light identifies the current community without covering its screenshot. */
@media(min-width:1000px) and (min-height:740px) and (prefers-reduced-motion:no-preference){
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .mc-projects>figure{
  box-shadow:0 34px 60px -25px #000c,0 0 32px -9px rgb(237 193 54 / calc(.08 + var(--mc-aura,0)*.27)),inset 0 0 22px -12px rgb(237 193 54 / calc(.1 + var(--mc-aura,0)*.25));
  border-color:rgb(237 193 54 / calc(.18 + var(--mc-aura,0)*.32));
 }
}

@media(min-width:1000px) and (min-height:740px) and (prefers-reduced-motion:no-preference){
 #js05x-index #mc-client-work.mc-portfolio[data-portfolio-active] .mc-projects::before{content:"";position:absolute;pointer-events:none;inset:-70px -55px;z-index:-1;transform:translateZ(-2px);background:radial-gradient(ellipse at 25% 50%,rgb(237 193 54 / calc(.19*(1 - var(--mc-progress,0)))) 0%,transparent 55%),radial-gradient(ellipse at 75% 50%,rgb(237 193 54 / calc(.19*var(--mc-progress,0))) 0%,transparent 55%);}
}