/* Concept 02: glass keys for service links. */
:is(.studio-arrow,.circle,.glass-inline,.scene-arrows button){isolation:isolate;overflow:hidden;display:grid;place-items:center;border-radius:28%;border:1px solid #ffffffbb;background:linear-gradient(145deg,#ffffff8c,#ffffff18 52%,#bbc7cc24);box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #53667424,0 5px 15px #22313a12;backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);color:var(--ink);font-size:0;transform:none;transition:background .3s,border-color .3s,box-shadow .3s,color .3s,transform .3s}
:is(.studio-arrow,.circle,.glass-inline,.scene-arrows button)::before{content:'';position:absolute;inset:-40%;z-index:-1;background:linear-gradient(115deg,transparent 35%,#ffffff65 50%,transparent 65%);transform:translateX(-100%);transition:transform .65s cubic-bezier(.2,.7,.2,1)}
:is(.studio-arrow,.circle,.glass-inline,.scene-arrows button)::after{content:'';display:block;width:var(--arrow-glyph,18px);height:var(--arrow-glyph,18px);background:currentColor;mask:url('/assets/icons/arrow-up-right.svg') center/contain no-repeat;-webkit-mask:url('/assets/icons/arrow-up-right.svg') center/contain no-repeat;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
[data-theme=dark] :is(.studio-arrow,.circle,.glass-inline,.scene-arrows button),.studio-feature .studio-arrow{color:#f2f4f5;border-color:#ffffff40;background:linear-gradient(145deg,#ffffff24,#ffffff06 55%,#ffffff0d);box-shadow:inset 0 1px 1px #ffffff55,inset 0 -1px 1px #0003,0 5px 15px #0002}
:root :is(a,button):focus-visible :is(.studio-arrow,.circle,.glass-inline){border-color:#df8b79;color:#d58372;box-shadow:inset 0 1px 1px #ffffff55,0 0 0 2px #d5837240}
@media(hover:hover){:root :is(a,button):hover :is(.studio-arrow,.circle,.glass-inline){transform:translateY(-2px);border-color:#d5837299;background:linear-gradient(145deg,#d583722b,#d5837210);color:#ae4f3d;box-shadow:inset 0 1px 1px #ffffff80,0 7px 20px #9e57411c}[data-theme=dark] :root :is(a,button):hover :is(.studio-arrow,.circle,.glass-inline),.studio-feature:hover :is(.studio-arrow,.circle,.glass-inline){color:#ffab98}:root :is(a,button):hover :is(.studio-arrow,.circle,.glass-inline)::before{transform:translateX(100%)}:root :is(a,button):hover :is(.studio-arrow,.circle,.glass-inline)::after{transform:translate(2px,-2px)}}
:root :is(a,button):active :is(.studio-arrow,.circle,.glass-inline){transform:scale(.94)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:is(.studio-arrow,.circle,.glass-inline,.scene-arrows button){background:#eef1f3}[data-theme=dark] :is(.studio-arrow,.circle,.glass-inline,.scene-arrows button),.studio-feature .studio-arrow{background:#43494d}}
@media(prefers-reduced-transparency:reduce){:is(.studio-arrow,.circle,.glass-inline,.scene-arrows button){background:#eef1f3;backdrop-filter:none;-webkit-backdrop-filter:none}[data-theme=dark] :is(.studio-arrow,.circle,.glass-inline,.scene-arrows button),.studio-feature .studio-arrow{background:#43494d}}
@media(prefers-reduced-motion:reduce){:is(.studio-arrow,.circle,.glass-inline,.scene-arrows button),:is(.studio-arrow,.circle,.glass-inline,.scene-arrows button)::before,:is(.studio-arrow,.circle,.glass-inline,.scene-arrows button)::after{transition:none}:root :is(a,button):hover :is(.studio-arrow,.circle,.glass-inline),:root :is(a,button):active :is(.studio-arrow,.circle,.glass-inline),:root :is(a,button):hover :is(.studio-arrow,.circle,.glass-inline)::after{transform:none}:is(.studio-arrow,.circle,.glass-inline,.scene-arrows button)::before{display:none}}

/* Original dimensions stay authoritative: 36px cards; 36/30/27px studio;
   carousel uses its existing responsive 33–44px controls. */
.studio-arrow,.glass-inline,.scene-arrows button{position:relative}
.glass-inline.glass-inline{display:inline-grid!important;vertical-align:middle;width:1.25em;height:1.25em;min-width:1.25em;line-height:1;font-size:inherit!important;color:inherit;flex-shrink:0;margin:0;float:none}
.glass-inline.glass-inline::after{width:70%;height:70%}
.scene-arrows button::after{display:none}.scene-arrows button img{width:60%;height:60%;object-fit:contain;transition:transform .35s}
.scene-arrows button{color:#fff!important;background:linear-gradient(145deg,#ffffff24,#ffffff06 55%,#ffffff0d);border-color:#ffffff55;box-shadow:inset 0 1px 1px #ffffff55,0 5px 15px #0002}
.glass-right::after{rotate:45deg}.glass-left::after{rotate:225deg}.glass-up::after{rotate:-45deg}
@media(hover:hover){.scene-arrows button:hover img{transform:translateX(2px)}.scene-arrows button:first-child:hover img{transform:translateX(-2px)}}
@media(prefers-reduced-motion:reduce){.scene-arrows button img{transition:none;transform:none!important}}

/* Restore the original outline circles across all page templates. */
:root :is(.studio-arrow,.circle,.glass-inline,.scene-arrows button){border-radius:50%;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid currentColor;color:inherit}
:root :is(.studio-arrow,.circle,.glass-inline,.scene-arrows button)::before{display:none}
:root .studio-service .studio-arrow{color:var(--muted)}
:root .studio-feature .studio-arrow,:root .scene-arrows button{color:#fff}
@media(hover:hover){:root :is(a,button):hover :is(.studio-arrow,.circle,.glass-inline),:root .scene-arrows button:hover{background:transparent;box-shadow:none;border-color:currentColor;color:inherit;transform:translateY(-2px)}:root .studio-feature:hover .studio-arrow,:root .scene-arrows button:hover{color:#fff}}
:root :is(a,button):focus-visible :is(.studio-arrow,.circle,.glass-inline){box-shadow:none;border-color:currentColor}
@media(prefers-reduced-motion:reduce){:root :is(a,button):hover :is(.studio-arrow,.circle,.glass-inline),:root .scene-arrows button:hover{transform:none}}

/* Center the glyph independently of legacy text/grid rows. */
:root :is(.studio-arrow,.circle,.glass-inline)::after{position:absolute;inset:0;margin:auto;width:62%;height:62%;transform:none!important;transform-origin:center}
:root :is(.studio-arrow,.glass-inline){position:relative}

/* Rotate only the centered arrow; keep its circular border stationary. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
:root :is(a,button):hover :is(.studio-arrow,.circle,.glass-inline){transform:none}
:root :is(a,button):hover :is(.studio-arrow,.circle,.glass-inline)::after{transform:rotate(45deg)!important}
}