/* The approved still is the base layer: available before JS and on failure. */
.portfolio-home{background:#050505;color-scheme:dark}
.portfolio-home .page-shell{background:#050505;min-height:620px}
.portfolio-home .page-shell::before{display:none}
.portfolio-home .site-header,.portfolio-home .site-footer{z-index:4}
.portfolio-home .brand{white-space:nowrap;flex-shrink:0}
.portfolio-home .brand span{white-space:nowrap}
.portfolio-home .hero{z-index:3;padding-top:35px;padding-bottom:8px;overflow:visible;pointer-events:none}
.portfolio-home .hero-art{display:none}
.portfolio-home .hero-copy{max-width:850px}
.portfolio-home .hero-copy::before{content:"";position:absolute;inset:-25px -75px -30px -35px;z-index:-1;background:radial-gradient(ellipse at 38% 45%,#050505a8,transparent 73%);pointer-events:none}
.portfolio-home .hero-copy,.portfolio-home .site-header{text-shadow:0 2px 12px #000,0 0 28px #0008}
.portfolio-home .hero-copy p{max-width:780px}
.portfolio-home main{position:relative;z-index:2}
.portfolio-home .site-footer{padding-top:12px;padding-bottom:18px}
.portfolio-stage{position:relative;flex:1;min-height:300px;display:grid;place-items:center;width:100%;isolation:isolate}
.portfolio-still{width:min(94%,1020px);position:relative;transition:opacity .65s ease,transform .8s ease;opacity:1;transform:none}
.portfolio-art{position:relative;width:100%;aspect-ratio:900/360;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 86%,transparent),linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
/* Display approved artwork unchanged, excluding mockup chrome and captions. */
.portfolio-art img{position:absolute;width:176.222222%;max-width:none;height:auto;left:-14.444444%;top:-94.444444%;pointer-events:none}
.globe-link{position:absolute;top:7%;width:35%;height:84%;border-radius:50%;z-index:2;outline-offset:-4px}
.globe-link.voxenger{left:6%}
.globe-link.flexieats{right:6%}
.globe-link:hover,.globe-link:focus-visible{box-shadow:inset 0 0 28px #ffffff15;outline:2px solid #ffffffa0}
.portfolio-captions{display:grid;grid-template-columns:1fr 1fr;gap:4%;margin-top:8px;padding-bottom:20px;text-align:center}
.portfolio-captions a{color:inherit;text-decoration:none;display:block;border-radius:8px;padding:4px 8px}
.portfolio-captions h2{font:700 clamp(24px,3.25vw,46px)/1.1 Arial,Helvetica,sans-serif;letter-spacing:-.045em;margin:0;padding:0;max-width:none}
.portfolio-captions p{font-size:clamp(12px,1.45vw,20px);line-height:1.4;margin-top:8px;color:#e4e4e4}
.portfolio-captions a:hover h2{text-shadow:0 0 22px #ffffff30}
.intro-film{position:absolute;top:0;left:50%;width:auto;height:100%;max-width:100%;aspect-ratio:9/16;transform:translateX(-50%);object-fit:contain;z-index:1;opacity:0;pointer-events:none;transition:opacity .65s ease;mask-image:linear-gradient(to right,transparent,#000 20%,#000 80%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 82%,transparent);mask-composite:intersect}
.portfolio-atmosphere{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .65s ease;pointer-events:none;z-index:0}
.portfolio-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(#05050570 0%,#05050566 19%,#05050512 43%,#05050508 66%,#05050590 100%)}
.intro-label{position:absolute;bottom:12px;left:12px;right:12px;text-align:center;color:#fff;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s ease}
.intro-label strong{display:block;font-size:clamp(27px,3vw,43px);font-weight:700;letter-spacing:-.04em;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;text-shadow:0 2px 12px #000}
.intro-label span{display:block;margin-top:7px;font-size:clamp(13px,1.5vw,20px);opacity:0;transform:translateY(10px);transition:opacity .65s,transform .65s;text-shadow:0 2px 10px #000}
.portfolio-home[data-intro-state="playing"] .portfolio-atmosphere{opacity:1}
.portfolio-home[data-intro-state="playing"] .portfolio-still{opacity:0;pointer-events:none;transform:scale(.97)}
.portfolio-home[data-intro-state="playing"] .intro-label{opacity:1}
.portfolio-home[data-intro-state="playing"] .intro-label[data-title="visible"] strong,.portfolio-home[data-intro-state="playing"] .intro-label[data-slogan="visible"] span{opacity:1;transform:none}
.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}
@media(max-width:640px){
  .portfolio-home .page-shell{min-height:600px}
  .portfolio-home .site-header{padding:0 18px}
  .portfolio-home .brand{font-size:clamp(15px,4.5vw,18px);gap:8px}
  .portfolio-home .brand-mark{width:30px;height:30px}
  .portfolio-home .hero{padding:32px 22px 12px}
  .portfolio-home .hero-copy p{font-size:14px}
  .portfolio-stage{min-height:280px}
  .portfolio-still{width:100%}
  .portfolio-captions{gap:2%;padding:0 12px 24px;margin-top:16px}
  .portfolio-captions h2{font-size:clamp(23px,6.2vw,32px)}
  .portfolio-captions p{font-size:clamp(12px,3.3vw,15px);max-width:165px;margin:8px auto 0}
  .portfolio-home .site-footer{padding-bottom:14px}
  .intro-label{bottom:14px}
}
@media(max-height:690px){.portfolio-home .page-shell{height:auto;min-height:100svh}.portfolio-stage{min-height:310px}.portfolio-home .hero{padding-top:18px}}
@media(prefers-reduced-motion:reduce){.portfolio-still,.intro-film,.portfolio-atmosphere,.intro-label,.intro-label strong,.intro-label span{transition:none;transform:none}}