/* Shared capsule controls: quiet glass, coloured rim, soft hover fill. */
:root{--control-rgb:67,135,255;--control-color:#4387ff;--control-surface:#11141bbd;--control-caption:#aabbd4}
body[data-portal-mode=lens] .portal-red{stroke:#ff718f}
body[data-portal-mode=lens] .portal-cyan{stroke:#71dcff}
[data-direction=stage],[data-category=stage],[data-filter=stage]{--control-rgb:164,103,255;--control-color:#a467ff}
[data-direction=digital],[data-category=digital],[data-filter=digital]{--control-rgb:0,222,178;--control-color:#00deb2}
/* Override the palette at the real control, including coloured service ancestors.
   The projection and full-colour mode retain their own accent variables. */
body:not([data-portal-mode=off]) .portal-surface:not(.portal-projection) :is(a,button){--control-rgb:170,170,170;--control-color:#d1d1d1;--control-surface:#151515bd;--control-caption:#a7a7a7}
:is(.button,.round-button,.process-node,.case-filters button,.contact-card>a,.side-nav a){
 border:1px solid rgba(var(--control-rgb),.68)!important;
 border-radius:999px!important;
 background:linear-gradient(150deg,#ffffff08,#ffffff02),var(--control-surface)!important;
 color:var(--control-color)!important;
 box-shadow:inset 0 1px 0 #ffffff12!important;
 transition:background-color .25s,border-color .25s,box-shadow .25s,color .25s,scale .18s!important;
 translate:none!important;
}
:is(.button,.round-button,.process-node,.case-filters button,.contact-card>a,.side-nav a):is(:hover,:focus-visible,.is-pointed,.is-pressed,[aria-pressed=true],[aria-current],.selected){
 background:linear-gradient(150deg,#ffffff0c,#ffffff02),rgba(var(--control-rgb),.19)!important;
 border-color:rgba(var(--control-rgb),.95)!important;
 box-shadow:inset 0 1px 0 #ffffff32,0 2px 10px rgba(var(--control-rgb),.10)!important;
}
:is(.button,.round-button,.case-filters button,.contact-card>a):is(:active,.is-pressed){scale:.97}
:is(.button,.round-button,.process-node,.case-filters button,.contact-card>a,.side-nav a):is(:focus-visible,.is-focus-visible){outline:2px solid var(--control-color);outline-offset:4px}
.side-nav a{border-color:transparent!important;color:#9eacc5!important;background:transparent!important}
.side-nav a[href="#works"]{color:#9db6d8!important}
/* Matching compact controls keep navigation and contacts on one baseline. */
@media(max-width:760px){
 :root{--mobile-control-size:clamp(32px,10vw,36px);--mobile-control-bar-size:calc(var(--mobile-control-size) + 10px);--dock-button-size:var(--mobile-control-size)}
 .side-nav{bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:4px;gap:2px}
 .side-nav a{flex:0 0 var(--dock-button-size);width:var(--dock-button-size);min-width:var(--dock-button-size);height:var(--dock-button-size);font-size:13px;line-height:1}
 .side-nav .nav-label{bottom:calc(var(--dock-button-size) + 14px);line-height:1.3}
 .contact-dock{bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:4px;gap:0}
 .contact-dock>a,.contact-dock>button{width:var(--dock-button-size);height:var(--dock-button-size)}
 .contact-dock svg{width:18px;height:18px}
 .portal-controls{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}
/* One geometry and one interaction style for original and projection. */
.contact-card>a{border-radius:28px!important}
.contact-card>a :is(strong,svg){color:inherit!important}
.contact-card>a small{color:var(--control-caption)!important;font-weight:400}
.contact-card>a>svg{transform:none!important;transition:color .25s}
.case-card{transition:border-color .25s,box-shadow .25s}
.case-card:hover{border-color:rgba(var(--control-rgb),.7);box-shadow:0 0 0 1px rgba(var(--control-rgb),.12)}
.button{font-weight:500!important}
@media(prefers-reduced-motion:reduce){:is(.button,.round-button,.process-node,.case-filters button,.contact-card>a,.side-nav a){transition:none!important}}